From 4d89c344d113591bd1db0b07dbf3d17a2186f665 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Mon, 9 Dec 2024 21:01:49 -0500 Subject: [PATCH] [code-examples] Better syntax, do not include docs.css --- docs/_utils/code-examples.js | 11 +++++++---- docs/docs/resources/contributing.md | 10 +++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/_utils/code-examples.js b/docs/_utils/code-examples.js index 1e39eb12f..fb6633f98 100644 --- a/docs/_utils/code-examples.js +++ b/docs/_utils/code-examples.js @@ -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) diff --git a/docs/docs/resources/contributing.md b/docs/docs/resources/contributing.md index 723a11e8a..9d98cdd8f 100644 --- a/docs/docs/resources/contributing.md +++ b/docs/docs/resources/contributing.md @@ -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 `` (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 [``](../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: