Refactor 11ty helpers

eleventy.config.js

@@ -4,13 +4,12 @@ const { EleventyRenderPlugin } = require('@11ty/eleventy');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const yaml = require('js-yaml');
 
-const codeExample = require('./source/helpers/codeExample.ts').default;
-const compatibility = require('./source/helpers/compatibility.ts');
-const components = require('./source/helpers/components.ts');
-const dates = require('./source/helpers/dates.ts');
+const componentsPlugin =
+  require('./source/helpers/components/index.ts').default;
+const datesPlugin = require('./source/helpers/dates.ts').default;
 const { liquidEngine, markdownEngine } = require('./source/helpers/engines.ts');
-const page = require('./source/helpers/page.ts');
-const type = require('./source/helpers/type.ts');
+const pagesPlugin = require('./source/helpers/pages.ts').default;
+const typePlugin = require('./source/helpers/type.ts').default;
 
 /** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
 module.exports = (eleventyConfig) => {
@@ -27,42 +26,13 @@ module.exports = (eleventyConfig) => {
     yaml.load(contents),
   );
 
-  // Components
-  eleventyConfig.addPairedLiquidShortcode('code', components.codeBlock);
-  eleventyConfig.addPairedLiquidShortcode('codeExample', codeExample);
-  // Ideally this could be used with named args, but that's not supported yet in
-  // 11ty's implementation of LiquidJS:
-  // https://github.com/11ty/eleventy/issues/2679
-  // In the meantime, the args are: `dart`, `libsass`, `ruby`, `feature`
-  eleventyConfig.addPairedLiquidShortcode(
-    'compatibility',
-    compatibility.compatibility,
-  );
-  eleventyConfig.addPairedLiquidShortcode('funFact', components.funFact);
-  eleventyConfig.addLiquidFilter('implStatus', compatibility.implStatus);
+  // register filters and shortcodes
+  eleventyConfig.addPlugin(componentsPlugin);
+  eleventyConfig.addPlugin(datesPlugin);
+  eleventyConfig.addPlugin(pagesPlugin);
+  eleventyConfig.addPlugin(typePlugin);
 
-  // Type
-  eleventyConfig.addLiquidShortcode('lorem', type.getLorem);
-  eleventyConfig.addPairedLiquidShortcode('markdown', type.markdown);
-  eleventyConfig.addLiquidFilter('markdown', type.markdown);
-  eleventyConfig.addPairedLiquidShortcode(
-    'markdownInline',
-    type.markdownInline,
-  );
-  eleventyConfig.addLiquidFilter('markdownInline', type.markdownInline);
-  eleventyConfig.addPairedLiquidShortcode('typogr', type.typogr);
-  eleventyConfig.addLiquidFilter('typogr', type.typogr);
-
-  // Dates
-  eleventyConfig.addLiquidFilter(
-    'formatDistanceToNow',
-    dates.formatDistanceToNow,
-  );
-
-  // Page
-  eleventyConfig.addLiquidFilter('isTypedoc', page.isTypedoc);
-
-  // plugins
+  // other plugins
   eleventyConfig.addPlugin(EleventyRenderPlugin);
   eleventyConfig.addPlugin(syntaxHighlight);
 

source/helpers/components.ts

@@ -1,34 +0,0 @@
-import { highlight, languages } from 'prismjs';
-import PrismLoader from 'prismjs/components/index';
-
-import { liquidEngine } from './engines';
-
-/**
- * Returns HTML for a fun fact that's not directly relevant to the main
- * documentation.
- */
-export const funFact = async (contents: string) =>
-  liquidEngine.renderFile('fun_fact', {
-    contents,
-  });
-
-/**
- * Returns HTML for a code block with syntax highlighting via [Prism][].
- *
- * This should be equivalent to the [11ty `{% highlight %}` tag][hl-tag], except
- * this tag can wrap dynamic content (partials, variables, etc), while the 11ty
- * tag only wraps plain text.
- *
- * [Prism]: https://prismjs.com/
- * [hl-tag]: https://www.11ty.dev/docs/plugins/syntaxhighlight/#usage
- *
- * @see https://prismjs.com/
- */
-export const codeBlock = (contents: string, language: string) => {
-  if (!languages[language]) {
-    PrismLoader(language);
-  }
-  const html = highlight(contents, languages[language], language);
-  const attr = `language-${language}`;
-  return `<pre class="${attr}"><code class="${attr}">${html}</code></pre>`;
-};

source/helpers/components/codeExample.ts

@@ -1,6 +1,6 @@
 import sass from 'sass';
 
-import { liquidEngine } from './engines';
+import { liquidEngine } from '../engines';
 
 /**
  * Renders a code example.

source/helpers/components/compatibility.ts

@@ -1,4 +1,4 @@
-import { liquidEngine } from './engines';
+import { liquidEngine } from '../engines';
 
 /**
  * Renders a status dashboard for each implementation's support for a feature.

source/helpers/components/index.ts

@@ -0,0 +1,57 @@
+import { highlight, languages } from 'prismjs';
+import PrismLoader from 'prismjs/components/index';
+
+import { liquidEngine } from '../engines';
+import { default as codeExample } from './codeExample';
+import { compatibility, implStatus } from './compatibility';
+
+export { codeExample };
+export { compatibility, implStatus };
+
+/**
+ * Returns HTML for a fun fact that's not directly relevant to the main
+ * documentation.
+ */
+export const funFact = async (contents: string) =>
+  liquidEngine.renderFile('fun_fact', {
+    contents,
+  });
+
+/**
+ * Returns HTML for a code block with syntax highlighting via [Prism][].
+ *
+ * This should be equivalent to the [11ty `{% highlight %}` tag][hl-tag], except
+ * this tag can wrap dynamic content (partials, variables, etc), while the 11ty
+ * tag only wraps plain text.
+ *
+ * [Prism]: https://prismjs.com/
+ * [hl-tag]: https://www.11ty.dev/docs/plugins/syntaxhighlight/#usage
+ *
+ * @see https://prismjs.com/
+ */
+export const codeBlock = (contents: string, language: string) => {
+  if (!languages[language]) {
+    PrismLoader(language);
+  }
+  const html = highlight(contents, languages[language], language);
+  const attr = `language-${language}`;
+  return `<pre class="${attr}"><code class="${attr}">${html}</code></pre>`;
+};
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access,
+                  @typescript-eslint/no-unsafe-call,
+                  @typescript-eslint/no-explicit-any */
+export default function componentsPlugin(eleventyConfig: any) {
+  // filters...
+  eleventyConfig.addLiquidFilter('implStatus', implStatus);
+
+  // paired shortcodes...
+  eleventyConfig.addPairedLiquidShortcode('code', codeBlock);
+  eleventyConfig.addPairedLiquidShortcode('codeExample', codeExample);
+  // Ideally this could be used with named args, but that's not supported yet in
+  // 11ty's implementation of LiquidJS:
+  // https://github.com/11ty/eleventy/issues/2679
+  // In the meantime, the args are: `dart`, `libsass`, `ruby`, `feature`
+  eleventyConfig.addPairedLiquidShortcode('compatibility', compatibility);
+  eleventyConfig.addPairedLiquidShortcode('funFact', funFact);
+}

source/helpers/dates.ts

@@ -7,3 +7,11 @@ import formatDistanceToNowBase from 'date-fns/formatDistanceToNow';
  */
 export const formatDistanceToNow = (date: string) =>
   formatDistanceToNowBase(new Date(date));
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access,
+                  @typescript-eslint/no-unsafe-call,
+                  @typescript-eslint/no-explicit-any */
+export default function datesPlugin(eleventyConfig: any) {
+  // filters...
+  eleventyConfig.addLiquidFilter('formatDistanceToNow', formatDistanceToNow);
+}

source/helpers/pages.ts

@@ -13,3 +13,11 @@ interface Page {
  */
 export const isTypedoc = (page: Page) =>
   page.url ? page.url.startsWith('/documentation/js-api/') : false;
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access,
+                  @typescript-eslint/no-unsafe-call,
+                  @typescript-eslint/no-explicit-any */
+export default function pagesPlugin(eleventyConfig: any) {
+  // filters...
+  eleventyConfig.addLiquidFilter('isTypedoc', isTypedoc);
+}

source/helpers/type.ts

@@ -43,3 +43,21 @@ export const markdownInline = (content: string) =>
  * @see https://github.com/ekalinin/typogr.js
  */
 export const typogr = (content: string) => typogrify(content);
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access,
+                  @typescript-eslint/no-unsafe-call,
+                  @typescript-eslint/no-explicit-any */
+export default function typePlugin(eleventyConfig: any) {
+  // filters...
+  eleventyConfig.addLiquidFilter('markdown', markdown);
+  eleventyConfig.addLiquidFilter('markdownInline', markdownInline);
+  eleventyConfig.addLiquidFilter('typogr', typogr);
+
+  // shortcodes...
+  eleventyConfig.addLiquidShortcode('lorem', getLorem);
+
+  // paired shortcodes...
+  eleventyConfig.addPairedLiquidShortcode('markdown', markdown);
+  eleventyConfig.addPairedLiquidShortcode('markdownInline', markdownInline);
+  eleventyConfig.addPairedLiquidShortcode('typogr', typogr);
+}