js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add data-version; remove data-cdn-url and its 11ty function

Browse Source
This commit is contained in:
Cory LaViska
2025-10-27 16:00:23 -04:00
parent a4b2fc7c13
commit e9599812fb
14 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webawesome/docs/_includes/base.njk
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak">
<head>
{% include 'head.njk' %}
<meta name="theme-color" content="#f36944">

2
packages/webawesome/docs/_layouts/blank.njk
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}">
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}">
<head>
{% include 'head.njk' %}
{% block head %}{% endblock %}

4
packages/webawesome/docs/_layouts/component.njk
View File

@@ -273,10 +273,8 @@
<wa-tab panel="react">React</wa-tab>
<wa-tab-panel name="cdn">
<p>
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!
</p>
<pre><code class="language-js">import '{% cdnUrl componentPath %}';</code></pre>
</wa-tab-panel>
<wa-tab-panel name="npm">
<p>

8
packages/webawesome/docs/assets/scripts/code-examples.js
View File

@@ -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 =
`<script data-fa-kit-code="38c11e3f20" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n\n` +
`<script data-fa-kit-code="38c11e3f20" type="module" src="${CDN_URL}webawesome.loader.js"></script>\n` +
`<link rel="stylesheet" href="${CDN_URL}styles/webawesome.css">\n\n` +
`${code.textContent}`;
const css = 'html > body {\n padding: 2rem !important;\n}';
const js = '';

3
packages/webawesome/docs/assets/scripts/search.js
View File

@@ -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);

2
packages/webawesome/docs/docs/color-palettes.njk
View File

@@ -72,7 +72,7 @@ layout: page
<p>
To import this palette, set <code>&lt;html class=&quot;wa-palette-{{ palette.name | lower }}&quot;&gt;</code> and import the following stylesheet:
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;{% cdnUrl %}styles/color/palettes/{{ palette.filename }}&quot; /&gt;</code></pre>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/dist/styles/color/palettes/{{ palette.filename }}&quot; /&gt;</code></pre>
</div>
{% endfor %}
</div>

4
packages/webawesome/docs/docs/customizing.md
View File

@@ -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 `<head>` 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
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
<link rel="stylesheet" href="/dist/styles/themes/awesome.css" />
```
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 `<input type="checkbox">` the same custom styles as `<w
color: lavenderblush;
}
</style>
```
```

10
packages/webawesome/docs/docs/index.md
View File

@@ -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 `<head>` of your site:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
<script type="module" src="/dist/webawesome.loader.js"></script>
```
This snippet adds:
@@ -40,7 +40,7 @@ Font Awesome users can provide their kit code to unlock premium icon packs. You
<!-- Option 2: the setKitCode() method -->
<script type="module">
import { setKitCode } from '{% cdnUrl 'webawesome.loader.js' %}';
import { setKitCode } from '/dist/webawesome.loader.js';
setKitCode('YOUR_KIT_CODE_HERE');
</script>
```
@@ -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
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<script type="module">
import '{% cdnUrl 'components/button/button.js' %}';
import '/dist/components/button/button.js';
// <wa-button> is ready to use!
</script>

4
packages/webawesome/docs/docs/layout.njk
View File

@@ -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
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, you can choose to import _only_ the utilities:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
<link rel="stylesheet" href="/dist/styles/utilities.css" />
```
{% endmarkdown %}
</div>

4
packages/webawesome/docs/docs/localization.md
View File

@@ -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 `<code>` is replaced with any language code shown above.
```js
import '{% cdnUrl "translations/<code>.js" %}';
import '/dist/translations/<code>.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/<code>.js" %}');
import('/translations/<code>.js');
```
### Translation Resolution

2
packages/webawesome/docs/docs/themes.njk
View File

@@ -94,7 +94,7 @@ to create a project with any one of these themes.
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}&quot;&gt;
...
&lt;link rel=&quot;stylesheet&quot; href=&quot;{% cdnUrl %}styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;/dist/styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
</div>
{% endfor %}
</div>

10
packages/webawesome/docs/docs/usage.md
View File

@@ -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
{

4
packages/webawesome/docs/docs/utilities/index.njk
View File

@@ -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
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, to _only_ include utilities:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
<link rel="stylesheet" href="/dist/styles/utilities.css" />
```
{% endmarkdown %}

38
packages/webawesome/docs/docs/utilities/native.md
View File

@@ -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
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```
Or, if you only want styles for native elements, include the default theme and native styles individually:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/native.css" />
```
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}
<h3>Curabitur odio ligula</h3>
<p>Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.</p>
<blockquote>The Road goes ever on and on<br />
Out from the door where it began.</blockquote>
<p>Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.</p>
<p>
Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla
porta, ac scelerisque elit finibus.
</p>
<blockquote>
The Road goes ever on and on<br />
Out from the door where it began.
</blockquote>
<p>
Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi
luctus at nisl sit amet faucibus.
</p>
<hr />
<ul>
<li>Aenean imperdiet</li>
@@ -191,8 +199,8 @@ Use any inline text element like `<strong>`, `<em>`, `<a>`, `<kbd>`, and others
Add responsive media with `<img>`, `<svg>`, `<video>`, `<iframe>`, and others. Media takes up 100% width by default and scales according to its container's width.
```html {.example}
<img
src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
<img
src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="A gray kitten lays next to a toy"
/>
```
@@ -204,7 +212,9 @@ Structure tabular data with `<table>` and related elements like `<caption>`, `<t
```html {.example}
<table>
<caption>
This <code>&lt;caption&gt;</code> describes the table
This
<code>&lt;caption&gt;</code>
describes the table
</caption>
<thead>
<tr>
@@ -347,7 +357,6 @@ Create buttons with `<button>` or `<input type="button | submit | reset">`. Butt
Add the `wa-brand`, `wa-neutral`, `wa-success`, `wa-warning`, or `wa-danger` class to specify the button's [color variant](/docs/utilities/color/).
```html {.example}
<button class="wa-neutral">Neutral</button>
<button class="wa-brand">Brand</button>
@@ -406,7 +415,8 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
<label>Color <input type="color" value="#f36944" /></label>
<label>File <input type="file" multiple /></label>
<label>Range <input type="range" /></label>
<label>Select
<label
>Select
<select>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
@@ -432,6 +442,7 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
```
Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to any form control or its parent `<label>` to specify its size.
```html {.example}
<div class="wa-stack">
<input type="text" placeholder="Small input" class="wa-size-s" />
@@ -510,7 +521,8 @@ Wrap form controls in a flex container to arrange them horizontally or verticall
<form class="wa-stack">
<label>Number of pancakes <input type="number" value="5" /></label>
<label>Syrup flavor
<label
>Syrup flavor
<select>
<option value="maple">Maple</option>
<option value="strawberry">Strawberry</option>