diff --git a/package-lock.json b/package-lock.json
index c70346ab4..07b1a7cc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2484,10 +2484,6 @@
"resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
"integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA=="
},
- "node_modules/@shoelace-style/webawesome": {
- "resolved": "packages/webawesome",
- "link": true
- },
"node_modules/@shoelace-style/webawesome-pro": {
"resolved": "packages/webawesome-pro",
"link": true
@@ -13591,6 +13587,10 @@
"node": ">= 8"
}
},
+ "node_modules/webawesome": {
+ "resolved": "packages/webawesome",
+ "link": true
+ },
"node_modules/webidl-conversions": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -13974,7 +13974,6 @@
}
},
"packages/webawesome": {
- "name": "@shoelace-style/webawesome",
"version": "3.0.0-beta.1",
"license": "MIT",
"dependencies": {
diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 619ed70d3..5a5bfc0b9 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -123,6 +123,9 @@ export default async function (eleventyConfig) {
/** This largely mimics what an app would do and just stubs out what we don't care about. */
return nunjucks.renderString(content, {
// Stub the server EJS shortcodes.
+ currentUser: {
+ hasPro: false,
+ },
server: {
head: '',
loginOrAvatar: '',
diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 7038046bf..85ec1d6ed 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -12,6 +12,7 @@
Resources
- Help & Support
+ - Source Code
- Community
- Accessibility
- Browser Support
diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md
index 4bd48a065..df05f5aa9 100644
--- a/packages/webawesome/docs/docs/index.md
+++ b/packages/webawesome/docs/docs/index.md
@@ -14,9 +14,7 @@ Thank you so much for backing us!
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
- [See what's new since the last version](/docs/resources/changelog)
-:::warning
-As a Web Awesome backer, this beta release is _just for you_. Please refrain from sharing it for the time being!
-:::
+Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it.](https://webawesome.com/docs/resources/contributing)
---
@@ -60,11 +58,7 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
-### Installing via npm
-
-An npm package isn't yet available, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
-
-### Cherry Picking
+### Cherry Picking from CDN
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
@@ -86,6 +80,32 @@ You can copy and paste the code to import a component from the "Importing" secti
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
:::
+### Installing via npm
+
+```bash
+npm install webawesome
+```
+
+And then in your JavaScript files, import the components you need.
+
+:::warning
+Web Awesome does not a provide a single import with all Web Awesome components. Instead, you must "cherry pick" the components you want to use.
+:::
+
+```js
+// import the Web Awesome base stylesheet
+import "webawesome/dist/styles/webawesome.css"
+
+// import the default "theme"
+import "webawesome/dist/styles/themes/default.css"
+
+//
+import "webawesome/dist/components/button/button.js"
+//
+import "webawesome/dist/components/input/input.js"
+```
+
+Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
### Setting the Base Path
@@ -95,12 +115,12 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
```html
-
+
```
@@ -123,3 +143,14 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
const assetPath = getBasePath('file.ext');
```
+
+## The difference between `/dist` and `/dist-cdn`
+
+If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
+
+The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing.
+
+TLDR:
+
+- `webawesome/dist-cdn` is for CDNs or people not using a bundler.
+- `webawesome/dist` is for bundlers or importmaps.
\ No newline at end of file
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index e20bbfb01..502d1d243 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -45,4 +45,4 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
Follow on Twitter
-
+
\ No newline at end of file
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index e29b19562..4e347b0e1 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -266,11 +266,17 @@ layout: page
Make something awesome with open-source web components
- Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.
-
-
- Pre-order WA Pro
-
+ {%- raw -%}
+ {% if currentUser.hasPro %}
+ Thanks for being a Web Awesome Pro subscriber!
+ {% else %}
+ Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.
+
+
+ Pre-order WA Pro
+
+ {% endif %}
+ {% endraw %}
diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json
index 9df2a4e86..9af8c8368 100644
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -1,5 +1,5 @@
{
- "name": "@shoelace-style/webawesome",
+ "name": "webawesome",
"description": "A forward-thinking library of web components.",
"version": "3.0.0-beta.1",
"homepage": "https://webawesome.com/",