diff --git a/eleventy.config.js b/eleventy.config.js index ce47910..771c3dc 100644 --- a/eleventy.config.js +++ b/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); diff --git a/source/helpers/components.ts b/source/helpers/components.ts deleted file mode 100644 index 6f26b49..0000000 --- a/source/helpers/components.ts +++ /dev/null @@ -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 `
${html}
`;
-};
diff --git a/source/helpers/codeExample.ts b/source/helpers/components/codeExample.ts
similarity index 98%
rename from source/helpers/codeExample.ts
rename to source/helpers/components/codeExample.ts
index 1097ab1..57cfe35 100644
--- a/source/helpers/codeExample.ts
+++ b/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.
diff --git a/source/helpers/compatibility.ts b/source/helpers/components/compatibility.ts
similarity index 97%
rename from source/helpers/compatibility.ts
rename to source/helpers/components/compatibility.ts
index 5db58ed..f0d92bb 100644
--- a/source/helpers/compatibility.ts
+++ b/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.
diff --git a/source/helpers/components/index.ts b/source/helpers/components/index.ts
new file mode 100644
index 0000000..9b073a7
--- /dev/null
+++ b/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 `${html}
`;
+};
+
+/* 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);
+}
diff --git a/source/helpers/dates.ts b/source/helpers/dates.ts
index 25cb361..314b774 100644
--- a/source/helpers/dates.ts
+++ b/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);
+}
diff --git a/source/helpers/page.ts b/source/helpers/pages.ts
similarity index 54%
rename from source/helpers/page.ts
rename to source/helpers/pages.ts
index ccd6016..9c4c5e4 100644
--- a/source/helpers/page.ts
+++ b/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);
+}
diff --git a/source/helpers/type.ts b/source/helpers/type.ts
index a154ea4..bdd84c5 100644
--- a/source/helpers/type.ts
+++ b/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);
+}