feat(tools): move 11ty plugins to pfe-tools

Author: bennypowers

.eleventy.cjs

@@ -4,9 +4,10 @@ const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const directoryOutputPlugin = require('@11ty/eleventy-plugin-directory-output');
 
 const pfeAssetsPlugin = require('./docs/_plugins/pfe-assets.cjs');
-const customElementsManifestPlugin = require('./docs/_plugins/custom-elements-manifest.cjs');
-const orderTagsPlugin = require('./docs/_plugins/order-tags.cjs');
-const todosPlugin = require('./docs/_plugins/todos.cjs');
+
+const customElementsManifestPlugin = require('@patternfly/pfe-tools/11ty/plugins/custom-elements-manifest.cjs');
+const orderTagsPlugin = require('@patternfly/pfe-tools/11ty/plugins/order-tags.cjs');
+const todosPlugin = require('@patternfly/pfe-tools/11ty/plugins/todos.cjs');
 
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');

docs/_data/core.cjs

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="PatternFly Elements: A set of community-created web components based on PatternFly design.">
+    <meta name="pfe-auto-reveal" content="true">
     <link href="/brand/logo/svg/pfe-icon-blue.svg" rel="shortcut icon">
     <title>{{ element.title }} | PatternFly Elements</title>
     <link rel="preconnect" href="https://ga.jspm.io">

docs/_data/corePackages.cjs

@@ -61,7 +61,6 @@ function demoPaths(content) {
 
 module.exports = {
   configFunction(eleventyConfig) {
-    eleventyConfig.addWatchTarget('tools/pfe-tools/11ty/**/*.{js,njk}');
     eleventyConfig.addPassthroughCopy('docs/bundle.{js,map,ts}');
     eleventyConfig.addPassthroughCopy('docs/pfe.min.{map,css}');
     eleventyConfig.addPassthroughCopy('docs/demo.{js,map,ts}');

docs/_data/elements.cjs

@@ -24,7 +24,7 @@ permalink: /components/index.html
   {%- if element.docsPath -%}
     <div class="component-preview">
       <div class="component-preview--container">
-        {%- if meta.env == "prod" -%}
+        {%- if env.ELEVENTY_ENV == "prod" -%}
         <a href="/components/{{ element.slug }}/" aria-label="{{ element.title }}">
           <div class="preview-image" style="background-image: url(/components/{{ element.slug }}/docs/preview.png);"></div>
         </a>
@@ -39,7 +39,7 @@ permalink: /components/index.html
         <a href="/components/{{ element.slug }}/">{{ element.title }}</a>
       </h3>
       {% renderTemplate "njk,md", element=element %}{{ element.summary }}{% endrenderTemplate %}
-      {%- if meta.env != "prod" -%}
+      {%- if env.ELEVENTY_ENV != "prod" -%}
       <pfe-cta><a href="/components/{{ element.slug }}/">Component overview</a></pfe-cta>
       {%- endif -%}
     </div>

docs/_data/elementsPackages.cjs

@@ -1,5 +1,3 @@
-const elementsPackages = require('../_data/elementsPackages.cjs');
-
 const { EleventyRenderPlugin } = require('@11ty/eleventy');
 
 let elements;
@@ -9,25 +7,50 @@ function getTagName(url) {
   return `pfe-${tagName}`;
 }
 
+async function elementsPackages() {
+  const { getPackageData } = await import('@patternfly/pfe-tools/11ty');
+  return getPackageData('elements', 'components');
+}
+
+async function corePackages() {
+  const { getPackageData } = await import('@patternfly/pfe-tools/11ty');
+  return getPackageData('core');
+}
+
 // it's an 11ty api
 /* eslint-disable no-invalid-this */
 
 async function getDocsPage(tagName) {
   // NB: I think this is new with 11ty 1.0.0. Maybe it's the pagination value? Not sure how bad of an abuse this is
   if (this.ctx._?.constructor?.name === 'DocsPage') {
     return this.ctx._;
+  } else {
+    elements ??= await elementsPackages();
+    tagName ??= getTagName(this.page.url);
+    return elements.get(tagName);
   }
-  elements ??= await elementsPackages();
-  tagName ??= getTagName(this.page.url);
-  return elements.get(tagName);
 }
 
 // TODO: programmable package scopes, etc
 module.exports = function configFunction(eleventyConfig) {
   // add `renderTemplate` filter
   eleventyConfig.addPlugin(EleventyRenderPlugin);
 
-  eleventyConfig.addWatchTarget('tools/pfe-tools/11ty/*.js');
+  eleventyConfig.addGlobalData('env', () => process.env);
+
+  eleventyConfig.addGlobalData('elementsPackages', elementsPackages);
+  eleventyConfig.addGlobalData('corePackages', corePackages);
+  eleventyConfig.addGlobalData('core', async function core() {
+    return [...new Set((await corePackages()).values())]
+      .sort((a, b) => a.package.name > b.package.name ? 1 : -1);
+  });
+  eleventyConfig.addGlobalData('elements', async function elements() {
+    return [...new Set((await elementsPackages()).values())]
+      .sort((a, b) => a.tagName > b.tagName ? 1 : -1);
+  });
+
+  const toolsFiles = require.resolve('@patternfly/pfe-tools/11ty').replace('index.js', '**/*.{js,njk}');
+  eleventyConfig.addWatchTarget(toolsFiles);
 
   // copied from DocsPage
   eleventyConfig.addPairedAsyncShortcode('band', async function(content, kwargs) {