From eb07dc14107d5d48d532eeb5a8620fba3758374c Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Thu, 9 Jan 2025 17:24:18 -0500 Subject: [PATCH] Use passthrough copy (#474) --- docs/.eleventy.js | 12 ++ docs/_includes/page-demo.njk | 4 +- .../components/cheatsheet}/cheatsheet.js | 0 .../{cheatsheet.njk => cheatsheet/index.njk} | 2 +- .../components/page/demo-page.css} | 0 .../components/page}/demo.css | 0 .../components/page}/demo.js | 2 +- docs/docs/{themes.md => themes/index.md} | 103 +----------------- docs/docs/themes/showcase.css | 93 ++++++++++++++++ scripts/build.js | 3 - 10 files changed, 114 insertions(+), 105 deletions(-) rename docs/{assets/scripts => docs/components/cheatsheet}/cheatsheet.js (100%) rename docs/docs/components/{cheatsheet.njk => cheatsheet/index.njk} (97%) rename docs/{assets/examples/page-demo/page.css => docs/components/page/demo-page.css} (100%) rename docs/{assets/examples/page-demo => docs/components/page}/demo.css (100%) rename docs/{assets/examples/page-demo => docs/components/page}/demo.js (95%) rename docs/docs/{themes.md => themes/index.md} (88%) create mode 100644 docs/docs/themes/showcase.css diff --git a/docs/.eleventy.js b/docs/.eleventy.js index bc0b487c5..0ed4214ca 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -26,6 +26,9 @@ const globalData = { layout: 'page.njk', }; +const passThroughExtensions = ['css', 'png', 'svg', 'jpg', 'mp4']; +const passThrough = ['docs/**/*.js', ...passThroughExtensions.map(ext => '**/*.' + ext)]; + export default function (eleventyConfig) { // NOTE - alpha setting removes certain pages if (isAlpha) { @@ -155,9 +158,18 @@ export default function (eleventyConfig) { // eleventyConfig.addPlugin(formatCodePlugin()); // } + eleventyConfig.addPassthroughCopy({ + 'docs/assets': 'assets', + }); + + for (let glob of passThrough) { + eleventyConfig.addPassthroughCopy(glob); + } + return { markdownTemplateEngine: 'njk', dir: { + input: 'docs', includes: '_includes', layouts: '_layouts', }, diff --git a/docs/_includes/page-demo.njk b/docs/_includes/page-demo.njk index 5e40c2b26..9f92d3f5c 100644 --- a/docs/_includes/page-demo.njk +++ b/docs/_includes/page-demo.njk @@ -1,5 +1,5 @@
- + {% set slots = components.page.slots %}
@@ -22,5 +22,5 @@ diff --git a/docs/assets/scripts/cheatsheet.js b/docs/docs/components/cheatsheet/cheatsheet.js similarity index 100% rename from docs/assets/scripts/cheatsheet.js rename to docs/docs/components/cheatsheet/cheatsheet.js diff --git a/docs/docs/components/cheatsheet.njk b/docs/docs/components/cheatsheet/index.njk similarity index 97% rename from docs/docs/components/cheatsheet.njk rename to docs/docs/components/cheatsheet/index.njk index cac8444f0..6a84aba51 100644 --- a/docs/docs/components/cheatsheet.njk +++ b/docs/docs/components/cheatsheet/index.njk @@ -45,7 +45,7 @@ table code { } } - + {% for type, all in componentsBy -%} {% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %} diff --git a/docs/assets/examples/page-demo/page.css b/docs/docs/components/page/demo-page.css similarity index 100% rename from docs/assets/examples/page-demo/page.css rename to docs/docs/components/page/demo-page.css diff --git a/docs/assets/examples/page-demo/demo.css b/docs/docs/components/page/demo.css similarity index 100% rename from docs/assets/examples/page-demo/demo.css rename to docs/docs/components/page/demo.css diff --git a/docs/assets/examples/page-demo/demo.js b/docs/docs/components/page/demo.js similarity index 95% rename from docs/assets/examples/page-demo/demo.js rename to docs/docs/components/page/demo.js index 52348f7b5..0b9c69973 100644 --- a/docs/assets/examples/page-demo/demo.js +++ b/docs/docs/components/page/demo.js @@ -7,7 +7,7 @@ let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][hre .join('\n'); let includes = `${stylesheets} - `; + `; async function render() { await customElements.whenDefined('wa-checkbox'); diff --git a/docs/docs/themes.md b/docs/docs/themes/index.md similarity index 88% rename from docs/docs/themes.md rename to docs/docs/themes/index.md index 5236b23f2..ad711c47f 100644 --- a/docs/docs/themes.md +++ b/docs/docs/themes/index.md @@ -3,101 +3,8 @@ title: Themes description: Everything you need to know about theming Web Awesome. layout: page-outline --- - + diff --git a/docs/docs/themes/showcase.css b/docs/docs/themes/showcase.css new file mode 100644 index 000000000..3248dc119 --- /dev/null +++ b/docs/docs/themes/showcase.css @@ -0,0 +1,93 @@ +wa-page > main { + max-width: 140ch; + + .max-line-length { + max-width: 80ch; + } +} + +.theme-showcase { + container: showcase / inline-size; + + background-color: var(--wa-color-surface-lowered); + border-radius: var(--wa-border-radius-l); + min-height: 16lh; + height: 65vh; + max-height: 21lh; + padding: var(--wa-space-xl); + overflow: hidden; + margin-block-end: var(--wa-space-xl); + + &.wa-flank { + --content-percentage: 60%; + --flank-size: 25ch; + } +} + +.showcase-examples-wrapper { + inline-size: 100%; + block-size: 100%; +} + +.showcase-examples { + column-gap: var(--wa-space-xl); + + & wa-card { + display: inline-block; + width: 100%; + + &:has(+ wa-card) { + margin-block-end: var(--wa-space-xl); + } + } +} + +@supports not (zoom: 1) { + .showcase-examples { + column-count: 1; + } + + @container showcase (width > 750px) { + .showcase-examples { + column-count: 2; + } + } + + @container showcase (width > 950px) { + .showcase-examples { + column-count: 3; + } + } +} + +@supports (zoom: 1) { + .showcase-examples { + column-count: 1; + zoom: 40%; + } + + @container showcase (width > 350px) { + .showcase-examples { + column-count: 2; + } + } + + @container showcase (width > 450px) { + .showcase-examples { + zoom: 55%; + } + } + + @container showcase (width > 750px) { + .showcase-examples { + zoom: 70%; + } + } + + @container showcase (width > 950px) { + .showcase-examples { + column-count: 3; + zoom: 70%; + } + } +} diff --git a/scripts/build.js b/scripts/build.js index 68cd64e4d..954690f7b 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -259,9 +259,6 @@ async function generateDocs() { .toLowerCase() .trim(); - // Copy assets - await copy(join(docsDir, 'assets'), join(siteDir, 'assets'), { overwrite: true }); - // Copy dist (production only) if (!isDeveloping) { await copy(cdnDir, join(siteDir, 'dist'));