From b0aba7ce0743c620f9bb0f70cd233d9fec9e8040 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 27 May 2025 16:33:18 -0400 Subject: [PATCH] Viewport demo fixes (#996) * fix viewports in code demo * sync color schemes in viewport demos * add terms * fix viewport styles in dark mode --- cspell.json | 2 ++ docs/.eleventy.js | 12 ++++++--- docs/_utils/code-examples.js | 25 +++++++++++++++++-- docs/assets/scripts/theme-picker.js | 21 ++++++++++++++++ docs/docs/patterns/blog-news/paywall.md | 4 +-- docs/docs/patterns/ecommerce/shopping-cart.md | 2 +- .../viewport-demo/viewport-demo.css | 17 +++---------- 7 files changed, 61 insertions(+), 22 deletions(-) diff --git a/cspell.json b/cspell.json index fd6d496c1..b0c92b9d7 100644 --- a/cspell.json +++ b/cspell.json @@ -58,6 +58,8 @@ "exportmaps", "exportparts", "fieldsets", + "focusin", + "focusout", "fontawesome", "formaction", "formdata", diff --git a/docs/.eleventy.js b/docs/.eleventy.js index e8feaadce..65d1c888a 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -35,8 +35,8 @@ const globalData = { export default function (eleventyConfig) { /** - * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions - * will also need to be updated in the Web Awesome App. + * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these + * passthrough extensions will also need to be updated in the Web Awesome App. */ const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4']; @@ -44,11 +44,11 @@ export default function (eleventyConfig) { const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))]; /** - * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready. + * This is the guard we use for now to make sure our final built files don't need a 2nd pass by the server. This keeps + * us able to still deploy the bare HTML files on Vercel until the app is ready. */ const serverBuild = process.env.WEBAWESOME_SERVER === 'true'; - // Add template data for (let name in globalData) { eleventyConfig.addGlobalData(name, globalData[name]); } @@ -135,6 +135,10 @@ export default function (eleventyConfig) { // Various text replacements eleventyConfig.addPlugin( replaceTextPlugin([ + { + replace: /\[version\]/gs, + replaceWith: packageData.version, + }, // Replace [issue:1234] with a link to the issue on GitHub { replace: /\[pr:([0-9]+)\]/gs, diff --git a/docs/_utils/code-examples.js b/docs/_utils/code-examples.js index f0492db1a..2eda1be0c 100644 --- a/docs/_utils/code-examples.js +++ b/docs/_utils/code-examples.js @@ -1,5 +1,6 @@ import { parse } from 'node-html-parser'; import { v4 as uuid } from 'uuid'; +import { markdown } from '../_utils/markdown.js'; /** * Eleventy plugin to turn `` blocks into live examples. @@ -24,6 +25,7 @@ export function codeExamplesPlugin(options = {}) { const pre = code.closest('pre'); const hasButtons = !code.classList.contains('no-buttons'); const isOpen = code.classList.contains('open') || !hasButtons; + const isViewportDemo = code.classList.contains('viewport'); const noEdit = code.classList.contains('no-edit'); const id = `code-example-${uuid().slice(-12)}`; let preview = pre.textContent; @@ -33,10 +35,29 @@ export function codeExamplesPlugin(options = {}) { root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module')); preview = root.toString(); + const escapedHtml = markdown.utils.escapeHtml(` + + + + + + Web Awesome Demo + + + + + + ${preview} + + + `); + const codeExample = parse(` -
+
- ${preview} + + ${isViewportDemo ? ` ` : preview} + diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js index df547510a..1fb301e1a 100644 --- a/docs/assets/scripts/theme-picker.js +++ b/docs/assets/scripts/theme-picker.js @@ -92,10 +92,22 @@ const colorScheme = new ThemeAspect({ let dark = this.computedValue === 'dark'; document.documentElement.classList.toggle(`wa-dark`, dark); document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } })); + syncViewportDemoColorSchemes(); }); }, }); +function syncViewportDemoColorSchemes() { + const isDark = document.documentElement.classList.contains('wa-dark'); + + // Update viewport demo color schemes in code examples + document.querySelectorAll('.code-example.is-viewport-demo wa-viewport-demo').forEach(demo => { + demo.querySelectorAll('iframe').forEach(iframe => { + iframe.contentWindow.document.documentElement?.classList?.toggle('wa-dark', isDark); + }); + }); +} + // Update the color scheme when the preference changes window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set()); @@ -109,3 +121,12 @@ document.addEventListener('keydown', event => { colorScheme.set(colorScheme.get() === 'dark' ? 'light' : 'dark'); } }); + +// When rendering a code example with a viewport demo, set the theme to match initially +document.querySelectorAll('.code-example.is-viewport-demo wa-viewport-demo iframe').forEach(iframe => { + const isDark = document.documentElement.classList.contains('wa-dark'); + + iframe.addEventListener('load', () => { + iframe.contentWindow.document.documentElement?.classList?.toggle('wa-dark', isDark); + }); +}); diff --git a/docs/docs/patterns/blog-news/paywall.md b/docs/docs/patterns/blog-news/paywall.md index d384d1a7b..12ec61604 100644 --- a/docs/docs/patterns/blog-news/paywall.md +++ b/docs/docs/patterns/blog-news/paywall.md @@ -31,7 +31,7 @@ tags: blog-news ## Modal -```html {.example viewport} +```html {.example .viewport}