docs: stubbed icons page

docs/_includes/partials/component/sidenav.njk

@@ -56,6 +56,7 @@
 
   {% endfor %}
 
+  <uxdot-sidenav-item href="/icons/">Icons</uxdot-sidenav-item>
   <uxdot-sidenav-item href="/design-code-status/">Design/code status</uxdot-sidenav-item>
   <uxdot-sidenav-item href="/release-notes/">Release notes</uxdot-sidenav-item>
   <uxdot-sidenav-item href="/support/">Get support</uxdot-sidenav-item>

docs/icons/icons.js

@@ -0,0 +1,15 @@
+import '@rhds/elements/rh-icon/rh-icon.js';
+import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+import { RhButton } from '@rhds/elements/rh-button/rh-button.js';
+import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';
+
+document.addEventListener('click', async function(event) {
+  const { icon, iconSet } = event.target;
+  if (event.target instanceof RhButton && icon && iconSet) {
+    const html = /* html*/`<rh-icon set="${iconSet}" icon="${icon}"></rh-icon>`;
+    await navigator.clipboard.writeText(html);
+    // TODO: syntax highlight this
+    const message = html;
+    await RhAlert.toast({ heading: 'Copied', message });
+  }
+});

docs/icons/index.11ty.cjs

@@ -0,0 +1,67 @@
+// for editor highlighting
+const html = String.raw;
+
+module.exports = class IconsPage {
+  async data() {
+    return {
+      layout: 'layouts/pages/basic.njk',
+      title: 'Icons',
+      hasToc: true,
+      icons: await import('@rhds/icons'),
+    };
+  }
+
+  render({ icons }) {
+    return html`
+      <script type="module" src="icons.js" data-helmet></script>
+
+      <style data-helmet>
+        .icon-set {
+          padding: 0;
+          list-style-type: none;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(95px, auto));
+          gap: var(--rh-space-sm);
+        }
+      </style>
+
+      <p>Click icons to copy their HTML elements</p>
+
+      <section id="social-icons">
+        <h2>Social Icons</h2>
+        <ul class="icon-set">${this.renderIcons('social', icons)}</ul>
+      </section>
+
+      <section id="standard-icons">
+        <h2>Standard Icons</h2>
+        <ul class="icon-set">${this.renderIcons('standard', icons)}</ul>
+      </section>
+
+      <section id="ui-icons">
+        <h2>UI Icons</h2>
+        <ul class="icon-set">${this.renderIcons('ui', icons)}</ul>
+      </section>
+
+      <section id="micron-icons">
+        <h2>Microns</h2>
+        <ul class="icon-set">${this.renderIcons('microns', icons)}</ul>
+      </section>
+    `;
+  }
+
+  renderIcons(set, icons) {
+    return Array.from(icons[set].keys(), icon => this.renderIcon({ icon, set })).join('');
+  }
+
+  renderIcon({ set, icon }) {
+    return html`
+      <li>
+        <rh-button accessible-label="Copy icon HTML for ${set} ${icon}"
+                   icon="${icon}"
+                   icon-set="${set}"
+                   variant="link">${icon}</rh-button>
+      </li>
+    `;
+  }
+};
+

eleventy.config.cjs

@@ -50,6 +50,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy('docs/styles/**/*');
   eleventyConfig.addPassthroughCopy('docs/patterns/**/*.css');
   eleventyConfig.addPassthroughCopy('docs/theming/**/*.css');
+  eleventyConfig.addPassthroughCopy('docs/icons/**/*.{css,js}');
 
 
   if (isLocal) {

netlify.toml

@@ -1,5 +1,7 @@
 [build]
   command = "npm run docs"
+[build.environment]
+  NODE_OPTIONS = "--max_old_space_size=4096"
 
 [[redirects]]
   from = '/components/get-started/*'

scripts/environment.js

@@ -1,29 +1,35 @@
 import { join } from 'node:path';
-import { readdir, stat } from 'node:fs/promises';
+import { readdir } from 'node:fs/promises';
+
+let iconSetsMap;
+
+/**
+ * create a javascript map containing icon names
+ */
+export async function getIconSetsMap() {
+  if (!iconSetsMap) {
+  // because the icon package exports DOM nodes, but this file runs in nodejs
+    await import('@patternfly/pfe-core/ssr-shims.js');
+    const { standard, social, ui, microns } = await import('@rhds/icons');
+    iconSetsMap = new Map([
+      ['social', [...social.keys()]],
+      ['standard', [...standard.keys()]],
+      ['ui', [...ui.keys()]],
+      ['microns', [...microns.keys()]],
+    ]);
+  }
+  return iconSetsMap;
+}
 
 /**
  * create a javascript module containing element and icon names
  */
 export async function makeDemoEnv() {
-  const iconsDir = join(process.cwd(), 'node_modules', '@rhds', 'icons');
-  const dirContents = await readdir(iconsDir);
-  const dirNamesOrNulls = await Promise.all(dirContents.map(async x => {
-    const stats = await stat(join(iconsDir, x));
-    if (!x.startsWith('.') && stats.isDirectory()) {
-      return x;
-    } else {
-      return null;
-    }
-  }));
-  const iconSetNames = dirNamesOrNulls.filter(x => x != null);
-  const iconSets = await Promise.all(iconSetNames.reverse().map(async set => {
-    const files = await readdir(join(iconsDir, set));
-    return [set, [...new Set(files.map(x => x.replace(/\..*$/, '')))]];
-  }));
+  iconSetsMap ??= await getIconSetsMap();
   const javascript = String.raw; // for editor highlighting
   const allElements = (await readdir(join(process.cwd(), 'elements')))
       .filter(path => !path.includes('.'));
   return javascript`
 export const elements = ${JSON.stringify(allElements)};
-export const iconSets = new Map(${JSON.stringify(iconSets)});`;
+export const iconSets = new Map(${JSON.stringify(Object.fromEntries(iconSetsMap.entries()))});`;
 }