hide pro themes for alpha

cspell.json

@@ -84,6 +84,7 @@
     "jsfiddle",
     "keydown",
     "keyframes",
+    "keymaker",
     "Konnor",
     "Kool",
     "labelledby",

docs/.eleventy.js

@@ -3,9 +3,10 @@ import { markdown } from './_utils/markdown.js';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
+import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 import { currentLink } from './_utils/current-link.js';
 import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-code.js';
+// import { formatCodePlugin } from './_utils/format-code.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
 import { readFile } from 'fs/promises';
@@ -17,7 +18,7 @@ import process from 'process';
 
 const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
-const isDeveloping = process.argv.includes('--develop');
+// const isDeveloping = process.argv.includes('--develop');
 
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
@@ -53,6 +54,9 @@ export default function (eleventyConfig) {
 
   // Helpers
 
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 

docs/_includes/base.njk

@@ -97,14 +97,13 @@
             <wa-menu>
               <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
               <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-              <wa-menu-item type="checkbox" value="fa">Font Awesome</wa-menu-item>
-
-              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
-              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
-              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
-              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
-              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
-              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
+              <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
             </wa-menu>
           </wa-dropdown>
           {# Color scheme selector #}

docs/_utils/remove-data-alpha-elements.js

@@ -0,0 +1,23 @@
+import { parse } from 'node-html-parser';
+
+/**
+ * Eleventy plugin to add remove elements with <div data-alpha="remove"> from the alpha build.
+ */
+export function removeDataAlphaElements(options = {}) {
+  options = {
+    isAlpha: false,
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('remove-data-alpha-elements', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+
+      if (options.isAlpha) {
+        doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
+      }
+
+      return doc.toString();
+    });
+  };
+}

docs/docs/experimental/themer.md

@@ -507,13 +507,13 @@ hasOutline: false
     </div>
     <wa-select name="theme" label="Pick a theme to start!" value="default">
       <wa-option value="default">Default</wa-option>
-      <wa-option value="fa">Font Awesome</wa-option>
-      <wa-option value="premium">Premium</wa-option>
-      <wa-option value="playful">Playful</wa-option>
-      <wa-option value="brutalist">Brutalist</wa-option>
-      <wa-option value="migration">Migration</wa-option>
-      <wa-option value="glassy">Glassy</wa-option>
-      <wa-option value="active">Active</wa-option>
+      <wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
+      <wa-option data-alpha="remove" value="premium">Premium</wa-option>
+      <wa-option data-alpha="remove" value="playful">Playful</wa-option>
+      <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
+      <wa-option data-alpha="remove" value="migration">Migration</wa-option>
+      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
+      <wa-option data-alpha="remove" value="active">Active</wa-option>
       <wa-option value="classic">Classic</wa-option>
     </wa-select>
   </div>

scripts/build.js

@@ -106,7 +106,9 @@ async function generateStyles() {
   // NOTE - alpha setting omits all stylesheets except for these because we use them in the docs
   if (isAlpha) {
     await copy(join(rootDir, 'src/themes/applied.css'), join(cdnDir, 'themes/applied.css'), { overwrite: true });
+    await copy(join(rootDir, 'src/themes/classic.css'), join(cdnDir, 'themes/classic.css'), { overwrite: true });
     await copy(join(rootDir, 'src/themes/default.css'), join(cdnDir, 'themes/default.css'), { overwrite: true });
+    await copy(join(rootDir, 'src/themes/forms.css'), join(cdnDir, 'themes/forms.css'), { overwrite: true });
     await copy(join(rootDir, 'src/themes/layout.css'), join(cdnDir, 'themes/layout.css'), { overwrite: true });
     await copy(join(rootDir, 'src/themes/utilities.css'), join(cdnDir, 'themes/utilities.css'), { overwrite: true });
   } else {