From 5d74d8163b33c2c8fa9f087a0090770c5aa9b818 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 9 Dec 2024 14:31:31 -0500
Subject: [PATCH] hide pro themes for alpha

---
 cspell.json                               |  1 +
 docs/.eleventy.js                         |  8 ++++++--
 docs/_includes/base.njk                   | 15 +++++++--------
 docs/_utils/remove-data-alpha-elements.js | 23 +++++++++++++++++++++++
 docs/docs/experimental/themer.md          | 14 +++++++-------
 scripts/build.js                          |  2 ++
 6 files changed, 46 insertions(+), 17 deletions(-)
 create mode 100644 docs/_utils/remove-data-alpha-elements.js

diff --git a/cspell.json b/cspell.json
index 07c073bd7..d3d733860 100644
--- a/cspell.json
+++ b/cspell.json
@@ -84,6 +84,7 @@
     "jsfiddle",
     "keydown",
     "keyframes",
+    "keymaker",
     "Konnor",
     "Kool",
     "labelledby",
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index a312da17e..500c6dc7d 100644
--- a/docs/.eleventy.js
+++ b/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);
 
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index a86627fe5..5f435418c 100644
--- a/docs/_includes/base.njk
+++ b/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 #}
diff --git a/docs/_utils/remove-data-alpha-elements.js b/docs/_utils/remove-data-alpha-elements.js
new file mode 100644
index 000000000..270235deb
--- /dev/null
+++ b/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();
+    });
+  };
+}
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index e49c3a823..380cfb630 100644
--- a/docs/docs/experimental/themer.md
+++ b/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>
diff --git a/scripts/build.js b/scripts/build.js
index 53c86ac7a..7712e493f 100644
--- a/scripts/build.js
+++ b/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 {