move things to plugins / transformers

packages/webawesome/docs/.eleventy.js

@@ -1,22 +1,22 @@
 import { parse as HTMLParse } from 'node-html-parser';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { anchorHeadingsTransformer } from './_transformers/anchor-headings.js';
+import { codeExamplesTransformer } from './_transformers/code-examples.js';
+import { copyCodeTransformer } from './_transformers/copy-code.js';
+import { currentLinkTransformer } from './_transformers/current-link.js';
+import { highlightCodeTransformer } from './_transformers/highlight-code.js';
+import { outlineTransformer } from './_transformers/outline.js';
 import { getComponents } from './_utils/manifest.js';
 import { markdown } from './_utils/markdown.js';
 import { SimulateWebAwesomeApp } from './_utils/simulate-webawesome-app.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
+// import { formatCodePlugin } from './_plugins/format-code.js';
 // import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
 import process from 'process';
 import * as url from 'url';
-import { outlinePlugin } from './_utils/outline.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
+import { replaceTextPlugin } from './_plugins/replace-text.js';
+import { searchPlugin } from './_plugins/search.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const isDev = process.argv.includes('--develop');
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
@@ -130,9 +130,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addTransform('doc-transforms', function (content) {
     let doc = HTMLParse(content, { blockTextElements: { code: true } });
 
-    const plugins = [
-      anchorHeadingsPlugin({ container: '#content' }),
-      outlinePlugin({
+    const transformers = [
+      anchorHeadingsTransformer({ container: '#content' }),
+      outlineTransformer({
         container: '#content',
         target: '.outline-links',
         selector: 'h2, h3',
@@ -141,14 +141,14 @@ export default async function (eleventyConfig) {
         },
       }),
       // Add current link classes
-      currentLink(),
-      codeExamplesPlugin(),
-      highlightCodePlugin(),
-      copyCodePlugin(),
+      currentLinkTransformer(),
+      codeExamplesTransformer(),
+      highlightCodeTransformer(),
+      copyCodeTransformer(),
     ];
 
-    for (const plugin of plugins) {
-      plugin.call(this, doc);
+    for (const transformer of transformers) {
+      transformer.call(this, doc);
     }
 
     return doc.toString();

packages/webawesome/docs/_transformers/anchor-headings.js

@@ -19,7 +19,7 @@ function createId(text) {
 /**
  * Eleventy plugin to add anchors to headings to content.
  */
-export function anchorHeadingsPlugin(options = {}) {
+export function anchorHeadingsTransformer(options = {}) {
   options = {
     container: 'body',
     headingSelector: 'h2, h3, h4, h5, h6',

packages/webawesome/docs/_transformers/code-examples.js

@@ -1,13 +1,12 @@
 import { parse } from 'node-html-parser';
 import { v4 as uuid } from 'uuid';
-import { markdown } from '../_utils/markdown.js';
-import { copyCode, copyCodePlugin } from './copy-code.js';
+import { copyCode } from './copy-code.js';
 import { highlightCode } from './highlight-code.js';
 
 /**
  * Eleventy plugin to turn `<code class="example">` blocks into live examples.
  */
-export function codeExamplesPlugin(options = {}) {
+export function codeExamplesTransformer(options = {}) {
   options = {
     container: 'body',
     ...options,

packages/webawesome/docs/_transformers/copy-code.js

@@ -17,7 +17,7 @@ export function copyCode(code) {
 /**
  * Eleventy plugin to add copy buttons to code blocks.
  */
-export function copyCodePlugin(options = {}) {
+export function copyCodeTransformer(options = {}) {
   options = {
     container: 'body',
     ...options,

packages/webawesome/docs/_transformers/current-link.js

@@ -24,7 +24,7 @@ function normalize(pathname) {
 /**
  * Eleventy plugin to decorate current links with a custom class.
  */
-export function currentLink(options = {}) {
+export function currentLinkTransformer(options = {}) {
   options = {
     container: 'body',
     className: 'current',

packages/webawesome/docs/_transformers/highlight-code.js

@@ -37,7 +37,7 @@ export function highlightCode(code, language = 'plain') {
  * Eleventy plugin to highlight code blocks with the `language-*` attribute using Prism.js. Unlike most plugins, this
  * works on the entire document — not just markdown content.
  */
-export function highlightCodePlugin(options = {}) {
+export function highlightCodeTransformer(options = {}) {
   options = {
     container: 'body',
     ...options,

packages/webawesome/docs/_transformers/outline.js

@@ -9,7 +9,7 @@ import { parse } from 'node-html-parser';
  *
  * See the `node-html-parser` docs for more details: https://www.npmjs.com/package/node-html-parser
  */
-export function outlinePlugin(options = {}) {
+export function outlineTransformer(options = {}) {
   options = {
     container: 'body',
     target: '.outline',

packages/webawesome/docs/_utils/simulate-webawesome-app.js

@@ -1,5 +1,8 @@
 import nunjucks from 'nunjucks';
 
+/**
+ * This function simulates what a server would do running "on top" of eleventy.
+ */
 export function SimulateWebAwesomeApp(str) {
   return nunjucks.renderString(str, {
     // Stub the server EJS shortcodes.