themer data

packages/webawesome/docs/.eleventy.js

@@ -54,6 +54,8 @@ export default async function (eleventyConfig) {
   //
   eleventyConfig.addGlobalData('themer', {
     colors: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'rose', 'gray'],
+    hues: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'],
+    tints: ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'],
     themes: [
       // Free
       {
@@ -72,7 +74,7 @@ export default async function (eleventyConfig) {
         name: 'Shoelace',
         description: 'The original, familiar look you know and love from Shoelace.',
         filename: 'shoelace.css',
-        isPro: true,
+        isPro: false,
       },
       // Pro
       {
@@ -174,9 +176,6 @@ export default async function (eleventyConfig) {
         isPro: true,
       },
     ],
-
-    hues: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'],
-    tints: ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'],
   });
 
   // Template filters - {{ content | filter }}
@@ -212,11 +211,8 @@ export default async function (eleventyConfig) {
     );
 
     return componentPages.map(page => {
-      // Extract component name from the file path or page data
       const componentName = path.basename(page.inputPath, '.md');
       const tagName = `wa-${componentName}`;
-
-      // Find the matching component
       const component = allComponents.find(c => c.tagName === tagName);
 
       // Add component to the page's data
@@ -228,13 +224,6 @@ export default async function (eleventyConfig) {
     });
   });
 
-  //
-  // Add the themes collection
-  //
-  eleventyConfig.addCollection('themePages', function (collectionApi) {
-    return collectionApi.getFilteredByGlob(path.join(eleventyConfig.directories.input, 'docs/themes/**/*.md'));
-  });
-
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
     return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');

packages/webawesome/docs/_includes/theme-selector.njk

@@ -1,27 +1,18 @@
-{{ themePages | dump }}
-
-<br><br>
-
 <wa-select appearance="filled" size="small" value="default" pill class="theme-selector">
   <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
 
   {# Free themes #}
-  {% for page in collections.themePages %}
-    {% if not page.data.isPro %}
-      <wa-option value="{{ page.fileSlug }}">{{ page.data.title }}</wa-option>
+  {% for theme in themer.themes %}
+    {% if not theme.isPro %}
+      <wa-option value="{{ theme.filename | stripExtension }}">{{ theme.name }}</wa-option>
     {% endif %}
   {% endfor %}
 
-  {# Only show divider if there are pro themes #}
-  {% if collections.themePages | selectattr('data.isPro') | list | length > 0 %}
-    <wa-divider></wa-divider>
-  {% endif %}
-
   {# Pro themes #}
-  {% for page in collections.themePages %}
+  {% for theme in themer.themes %}
     {% if loop.first %}<wa-divider></wa-divider>{% endif %}
-    {% if page.data.isPro %}
-      <wa-option value="{{ page.fileSlug }}">{{ page.data.title }}</wa-option>
+    {% if theme.isPro %}
+      <wa-option value="{{ theme.filename | stripExtension }}">{{ theme.name }}</wa-option>
     {% endif %}
   {% endfor %}
 </wa-select>

packages/webawesome/docs/docs/themes.njk

@@ -7,15 +7,15 @@ isPro: true
 
 <div id="theme-viewer">
   <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
-    {% for page in collections.themePages | sortWithFirst('fileSlug', 'default') %}
+    {% for theme in themer.themes %}
       <wa-radio
         class="theme-card"
-        value="{{ page.fileSlug | stripExtension }}"
-        data-description="{{ page.data.description }}"
-        data-title="{{ page.data.title }}"
-        {% if page.data.isPro %}data-is-pro{% endif %}
+        value="{{ theme.filename | stripExtension }}"
+        data-description="{{ theme.description }}"
+        data-title="{{ theme.name }}"
+        {% if theme.isPro %}data-is-pro{% endif %}
       >
-        {{ page.data.title }}
+        {{ theme.name }}
       </wa-radio>
     {% endfor %}
   </wa-radio-group>
@@ -138,6 +138,10 @@ isPro: true
   }
 
   wa-comparison {
+    --handle-color: black;
+    --divider-color: white;
+    --divider-width: 4px;
+
     &::part(before) {
       border-radius: var(--wa-border-radius-m);
       background-color: white;

packages/webawesome/docs/docs/themes/awesome.md

@@ -1,7 +0,0 @@
----
-title: Awesome
-description: Punchy and vibrant, the rockstar of themes.
-isPro: false
----
-
-TODO

packages/webawesome/docs/docs/themes/default.md

@@ -1,7 +0,0 @@
----
-title: Default
-description: Your trusty companion, like a perfectly broken-in pair of jeans.
-isPro: false
----
-
-TODO

packages/webawesome/docs/docs/themes/shoelace.md

@@ -1,7 +0,0 @@
----
-title: Shoelace
-description: The original, familiar look you know and love from Shoelace.
-isPro: false
----
-
-TODO