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); +}