diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index 92c788150..01998a3bc 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -1,5 +1,5 @@ - + {% include 'head.njk' %} diff --git a/packages/webawesome/docs/_layouts/blank.njk b/packages/webawesome/docs/_layouts/blank.njk index 92431ff44..426960cc2 100644 --- a/packages/webawesome/docs/_layouts/blank.njk +++ b/packages/webawesome/docs/_layouts/blank.njk @@ -1,5 +1,5 @@ - + {% include 'head.njk' %} {% block head %}{% endblock %} diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk index 038afecc6..c3b3d4e6a 100644 --- a/packages/webawesome/docs/_layouts/component.njk +++ b/packages/webawesome/docs/_layouts/component.njk @@ -273,10 +273,8 @@ React

- To manually import this component from the CDN, use the following code. + Let the autoloader do the work! [Sign up for a free account](/signup) to get access to the Web Awesome CDN — the easiest way to use Web Awesome!

- - 
import '{% cdnUrl componentPath %}';

diff --git a/packages/webawesome/docs/assets/scripts/code-examples.js b/packages/webawesome/docs/assets/scripts/code-examples.js index 04f21dc85..93c653021 100644 --- a/packages/webawesome/docs/assets/scripts/code-examples.js +++ b/packages/webawesome/docs/assets/scripts/code-examples.js @@ -1,3 +1,6 @@ +const version = document.documentElement.getAttribute('data-version') || ''; +const CDN_URL = `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${version}/dist-cdn/`; + // // Resizing previews // @@ -54,10 +57,9 @@ document.addEventListener('click', event => { if (pen) { const codeExample = pen.closest('.code-example'); const code = codeExample.querySelector('code'); - const cdnUrl = document.documentElement.dataset.cdnUrl; const html = - `\n` + - `\n\n` + + `\n` + + `\n\n` + `${code.textContent}`; const css = 'html > body {\n padding: 2rem !important;\n}'; const js = ''; diff --git a/packages/webawesome/docs/assets/scripts/search.js b/packages/webawesome/docs/assets/scripts/search.js index a461d0f99..77969844b 100644 --- a/packages/webawesome/docs/assets/scripts/search.js +++ b/packages/webawesome/docs/assets/scripts/search.js @@ -1,5 +1,6 @@ // Search data -const res = await Promise.all([import('https://cdn.jsdelivr.net/npm/lunr/+esm'), fetch('/search.json')]); +const version = document.documentElement.getAttribute('data-version') || ''; +const res = await Promise.all([import('https://cdn.jsdelivr.net/npm/lunr/+esm'), fetch(`/search.json?v=${version}`)]); const lunr = res[0].default; const searchData = await res[1].json(); const searchIndex = lunr.Index.load(searchData.searchIndex); diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk index 840ce738a..4fe7648ad 100644 --- a/packages/webawesome/docs/docs/color-palettes.njk +++ b/packages/webawesome/docs/docs/color-palettes.njk @@ -72,7 +72,7 @@ layout: page

To import this palette, set <html class="wa-palette-{{ palette.name | lower }}"> and import the following stylesheet:

- 
<link rel="stylesheet" href="{% cdnUrl %}styles/color/palettes/{{ palette.filename }}" />
+ 
<link rel="stylesheet" href="/dist/styles/color/palettes/{{ palette.filename }}" />
{% endfor %} diff --git a/packages/webawesome/docs/docs/customizing.md b/packages/webawesome/docs/docs/customizing.md index 92a415ce7..cdbc1cf9d 100644 --- a/packages/webawesome/docs/docs/customizing.md +++ b/packages/webawesome/docs/docs/customizing.md @@ -13,7 +13,7 @@ Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across To use a theme, simply add a link to the theme's stylesheet to the `` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme: ```html - + ``` You can customize any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:root`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode: @@ -155,4 +155,4 @@ For example, we can give `` the same custom styles as ` -``` \ No newline at end of file +``` diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md index 498a7f331..846a05ac2 100644 --- a/packages/webawesome/docs/docs/index.md +++ b/packages/webawesome/docs/docs/index.md @@ -17,8 +17,8 @@ Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project To get everything included in Web Awesome, add the following code to the `` of your site: ```html - - + + ``` This snippet adds: @@ -40,7 +40,7 @@ Font Awesome users can provide their kit code to unlock premium icon packs. You ``` @@ -74,10 +74,10 @@ Cherry picking will only load the components you need up front, while limiting t Here's an example that loads only the button component. ```html - + diff --git a/packages/webawesome/docs/docs/layout.njk b/packages/webawesome/docs/docs/layout.njk index 7f5ee2f18..d24e66be5 100644 --- a/packages/webawesome/docs/docs/layout.njk +++ b/packages/webawesome/docs/docs/layout.njk @@ -52,13 +52,13 @@ Layout components are included in Web Awesome's [autoloader](/docs/#quick-start- Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/utilities/native/)) by including the following stylesheet in your project: ```html - + ``` Or, you can choose to import _only_ the utilities: ```html - + ``` {% endmarkdown %} diff --git a/packages/webawesome/docs/docs/localization.md b/packages/webawesome/docs/docs/localization.md index 3a4323229..61b82f5a0 100644 --- a/packages/webawesome/docs/docs/localization.md +++ b/packages/webawesome/docs/docs/localization.md @@ -27,7 +27,7 @@ Web Awesome ships with [a number of translations](https://github.com/shoelace-st You can import translations using the following syntax, where `` is replaced with any language code shown above. ```js -import '{% cdnUrl "translations/.js" %}'; +import '/dist/translations/.js'; ``` You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically. @@ -37,7 +37,7 @@ You do not need to load translations up front. You can import them dynamically e document.documentElement.lang = 'de'; // Import the translation -import('{% cdnUrl "translations/.js" %}'); +import('/translations/.js'); ``` ### Translation Resolution diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk index 54f012862..eed8d21ed 100644 --- a/packages/webawesome/docs/docs/themes.njk +++ b/packages/webawesome/docs/docs/themes.njk @@ -94,7 +94,7 @@ to create a project with any one of these themes. 

<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
 ...
-<link rel="stylesheet" href="{% cdnUrl %}styles/themes/{{ theme.filename }}" />
+<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" /> {% endfor %} diff --git a/packages/webawesome/docs/docs/usage.md b/packages/webawesome/docs/docs/usage.md index b21fcc455..5091881a7 100644 --- a/packages/webawesome/docs/docs/usage.md +++ b/packages/webawesome/docs/docs/usage.md @@ -40,6 +40,7 @@ await allDefined(); By default, `allDefined()` will wait for all `wa-` prefixed custom elements within the current `document` to be registered. You can customize this behavior by passing in options: + - `root` allows you to pass in a different element to search within, or a different document entirely (defaults to `document`). - `match` allows you to specify a custom function to determine which elements to wait for. This function should return `true` for elements you want to wait for and `false` for those you don't. - `additionalElements` allows you to wait for custom elements to be defined that may not be present in the DOM at the time `allDefined()` is called. This can be useful for elements that are loaded dynamically via JS. @@ -52,7 +53,7 @@ import { allDefined } from '/dist/webawesome.js'; await allDefined({ match: tagName => tagName.startsWith('wa-') || tagName === 'my-component', root: document.getElementById('sidebar'), - additionalElements: ['wa-slider', 'other-slider'] + additionalElements: ['wa-slider', 'other-slider'], }); ``` @@ -194,12 +195,11 @@ Web Awesome ships with a file called `vscode.html-custom-data.json` that can be If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect. -If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead. - ### JetBrains IDEs -If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor. -If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it. +If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor. + +Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it. ```json { diff --git a/packages/webawesome/docs/docs/utilities/index.njk b/packages/webawesome/docs/docs/utilities/index.njk index 0ff7e2ee2..abbc7aa26 100644 --- a/packages/webawesome/docs/docs/utilities/index.njk +++ b/packages/webawesome/docs/docs/utilities/index.njk @@ -52,13 +52,13 @@ layout: docs To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project: ```html - + ``` Or, to _only_ include utilities: ```html - + ``` {% endmarkdown %} diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md index 00d825c44..4f80edcac 100644 --- a/packages/webawesome/docs/docs/utilities/native.md +++ b/packages/webawesome/docs/docs/utilities/native.md @@ -12,14 +12,14 @@ Native styles use design tokens to spruce up native HTML elements so that they m To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: ```html - + ``` Or, if you only want styles for native elements, include the default theme and native styles individually: ```html - - + + ``` You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements. @@ -30,10 +30,18 @@ Native styles set default space between many block-level HTML elements using the ```html {.example}

Curabitur odio ligula

-

Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.

-
The Road goes ever on and on
-Out from the door where it began.
-

Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.

+

+ Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla + porta, ac scelerisque elit finibus. +

+
+ The Road goes ever on and on
+ Out from the door where it began. +
+

+ Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi + luctus at nisl sit amet faucibus. +