Docs: Polish Pro Badge (#1504)

* updating Pro Badge's appearance
* abstracting Pro Badge into include
* adding nanoid-based uniqueId filter to eleventyConfig
* ensuring Pro Badge instances have unique ids
* using added uniqueId filter + nanoid
* converting Pro Badge to be macro-based
* customizing Pro Badge's associated wa-tooltip size

packages/webawesome/docs/.eleventy.js

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { parse as HTMLParse } from 'node-html-parser';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
@@ -87,6 +88,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
   eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
   eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
   // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
   // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
   eleventyConfig.addFilter('trimPipes', content => {

packages/webawesome/docs/_includes/pro-badge.njk

@@ -0,0 +1,5 @@
+{% macro proBadge(proBadgeDescription, proBadgeId) %}
+  {% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}">Pro</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ proBadgeDescription or "This requires access to Web Awesome Pro" }}</wa-tooltip>
+{% endmacro %}

packages/webawesome/docs/_includes/sidebar.njk

@@ -1,5 +1,6 @@
 {# Search #}
 {% include "search-trigger-button.njk" %}
+{% from "pro-badge.njk" import proBadge %}
 
 {# Getting started #}
 <h2>Getting Started</h2>
@@ -38,7 +39,7 @@
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
           Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
         </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
     </li>
     <li><a href="/docs/components/animated-image/">Animated Image</a></li>
@@ -179,7 +180,7 @@
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
           Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
         </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
     </li>
   </ul>
@@ -197,7 +198,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/app/">App</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -243,7 +244,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
       <li>
@@ -305,7 +306,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/ecommerce/">Ecommerce</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -346,7 +347,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/layouts/">Layouts</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -371,7 +372,7 @@
   <li>
     <span class="wa-split">
       <a href="/themer" data-turbo="false">Theme Builder</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      {{ proBadge("This requires an active Web Awesome Pro subscription") }}
     </span>
   </li>
 </ul>

packages/webawesome/docs/assets/styles/utils.css

@@ -72,6 +72,12 @@
     color: white;
     background-color: var(--wa-brand-orange);
     border-color: var(--wa-brand-orange);
+    text-transform: uppercase;
+
+    + wa-tooltip {
+      font-size: var(--wa-font-size-xs);
+      --max-width: unset;
+    }
   }
 
   /* search trigger */