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

[code-examples] Better syntax, do not include docs.css

Browse Source
This commit is contained in:
Lea Verou
2024-12-09 21:01:49 -05:00
parent 1920ae8c1e
commit 4d89c344d1
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/_utils/code-examples.js
View File

@@ -51,12 +51,15 @@ const templates = {
},
new(pre, code, { open, first }) {
const attributes = {
include: 'link[rel=stylesheet]',
open
open,
include: `link[rel=stylesheet][href^='/dist/']`
};
if (code.hasAttribute('data-viewport')) {
attributes.viewport = code.getAttribute('data-viewport');
for (const attribute of ['viewport', 'include']) {
if (code.hasAttribute(attribute)) {
attributes[attribute] = code.getAttribute(attribute);
code.removeAttribute(attribute);
}
}
const attributesString = Object.entries(attributes)

10
docs/docs/resources/contributing.md
View File

@@ -120,12 +120,12 @@ and turned off by using `no-` followed by the class name (e.g. `no-edit` to hide
the class modifiers currently supported are:
- `open` - expands the code (default: true for the first code example in the page, false for all others)
- `new` - Uses `<wa-code-demo>` (default: true). Disable to use the old, non-component demo code.
- `edit` - Enable the CodePen button (default: true) (old only)
- `edit` - Enable the CodePen button (default: true) _(old only)_
Attribute modifiers are only supported on the new code demo component:
- `data-viewport` - Render the code in an iframe (no zooming)
- `data-viewport="300"` - Set an initial virtual viewport width, the page will be scaled to fit
- `data-viewport="1600x1000"` - Set an initial virtual width and height of the viewport
The `viewport` and `include` attributes of [`<wa-code-demo>`](../components/code-demo/) can also be specified.
By default, `include` is set to `link[rel=stylesheet]` to include all stylesheets on the page for non-isolated demos,
and `link[rel=stylesheet][href^="/dist/"]` for isolated demos.
Attributes are specified as described in the [`markdown-it-attrs` documentation](https://www.npmjs.com/package/markdown-it-attrs).
This particular syntax was chosen for a few reasons: