11ty 3.0

Porges · Nov 24, 2024 · d651a0c · d651a0c
1 parent f657107
commit d651a0c
Show file tree

Hide file tree

Showing 21 changed files with 1,908 additions and 1,918 deletions.
diff --git a/.eleventy.js → .eleventy.ts b/.eleventy.js → .eleventy.ts
@@ -1,29 +1,34 @@
-const eleventyRemark = require('@fec/eleventy-plugin-remark');
-const { EleventyRenderPlugin } = require("@11ty/eleventy");
-const eleventyNavigation = require('@11ty/eleventy-navigation');
-const PropTypes = require('prop-types');
-const argParse = require('liquid-args');
-const path = require('path');
-const fs = require('node:fs/promises');
-const slug = require('slug');
-const YAML = require('js-yaml');
-
-const { asAttr, ifSet, IS_PRODUCTION, isolate } = require('./helpers');
-const references = require('./references');
-const { articleImage, person, license, organization } = require('./images');
-const referenceSchema = require('./references-schema');
-
-PropTypes.resetWarningCache();
+import "tsx/esm";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import eleventyRemark from '@fec/eleventy-plugin-remark';
+import { EleventyRenderPlugin } from "@11ty/eleventy";
+import eleventyNavigation from '@11ty/eleventy-navigation';
+import PropTypes from 'prop-types';
+import argParse from 'liquid-args';
+import path from 'path';
+import fs from 'node:fs/promises';
+import slug from 'slug';
+import YAML from 'js-yaml';
+
+import { asAttr, ifSet, IS_PRODUCTION, isolate } from './helpers';
+import * as references from './references';
+import { articleImage, person, license, organization } from './images';
+import * as referenceSchema from './references-schema';
+
+if (IS_PRODUCTION) {
+  PropTypes.resetWarningCache();
+}
 
 function _normalizeShortcodeScope(ctx) {
-  let obj = {};
+  let obj: any = {};
   if (ctx) {
     obj.page = ctx.get(["page"]);
   }
   return obj;
 }
 
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
   eleventyConfig.addWatchTarget("src/sass");
   eleventyConfig.addWatchTarget("src/maps");
   eleventyConfig.addWatchTarget("bibliography.yaml");
@@ -65,8 +70,16 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigation);
 
   eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
-    key: "11ty.js"
-  });
+		key: "11ty.js",
+		compile: function () {
+			return async function (data) {
+				let content = await this.defaultRenderer(data);
+				return renderToStaticMarkup(content);
+			};
+		},
+	});
+  eleventyConfig.addTemplateFormats(["11ty.ts","11ty.tsx"]);
+  //eleventyConfig.addDataFormats("11ty.ts,11ty.tsx");
 
   eleventyConfig.addShortcode("person", person);
   eleventyConfig.addShortcode("organization", organization);
@@ -253,9 +266,9 @@ function gameRef() {
       }
 
       // try to find a sub-article
-      for (g of games) {
+      for (const g of games) {
         if (g.data.subgames) {
-          for (sg of g.data.subgames) {
+          for (const sg of g.data.subgames) {
             const s = sg.slug || slug(sg.title);
             if (s === this.ref) {
               if (IS_PRODUCTION && g.data.draft) {
@@ -281,7 +294,7 @@ function gameRef() {
 
 // altered from: https://github.com/rehypejs/rehype-slug/blob/main/index.js
 const addSlugs = () => {
-  let imports = undefined;
+  let imports: any = undefined;
   return async tree => {
     if (!imports) {
       imports = {
@@ -332,7 +345,7 @@ const citationPlugin = () => {
       switch (reference.type) {
         case 'book':
           return `<a href="${`#ref-${id}`}">`
-            + references.renderLStr(reference.title, 'cite', {})
+            + renderToStaticMarkup(references.renderLStr(reference.title, 'cite', {}))
             + `</a>`
             + ifSet(suffix, ` (${suffix})`);
         case 'chapter':
@@ -359,7 +372,7 @@ const citationPlugin = () => {
       unist = await import('unist-util-visit');
     }
 
-    const biblioPath = path.join(__dirname, 'bibliography.yaml');
+    const biblioPath = new URL('./bibliography.yaml', import.meta.url);
     let stat = await fs.stat(biblioPath);
     if (!biblio || stat.mtime > biblioLastModified) {
       biblio = YAML.load(await fs.readFile(biblioPath, 'utf8'));
@@ -452,7 +465,7 @@ const citationPlugin = () => {
               return {
                 type: 'element',
                 tagName: 'li',
-                children: [{ type: 'raw', value: references.renderReference(biblio[id]) }],
+                children: [{ type: 'raw', value: renderToStaticMarkup(references.renderReference(biblio[id])) }],
               };
             }),
           },

diff --git a/helpers.ts → helpers.tsx b/helpers.ts → helpers.tsx
@@ -1,5 +1,6 @@
 import { env } from 'process';
-import { Date, Article } from './types';
+import { Date, Article } from './types.js';
+import * as React from 'react';
 
 import ordinal from 'ordinal';
 
@@ -58,7 +59,7 @@ const days =
    "Saturday"
   ];
 
-export function renderExplicitDate(date: Date, omitIfJustYear: boolean): string | null {
+export function renderExplicitDate(date: Date, omitIfJustYear: boolean): React.JSX.Element | null {
   if (typeof date === 'number') {
     date = { year: date };
   }
@@ -73,19 +74,19 @@ export function renderExplicitDate(date: Date, omitIfJustYear: boolean): string
           : new globalThis.Date(date.year, date.month - 1, date.day);
 
         const day = (((actualDate.getDay() - 10) % 7) + 7) % 7;
-        return `${days[day]}, ${ordinal(date.day)} ${month} ${date.year} [<abbr title="old-style">OS</abbr>]`;
+        return <>{days[day]}, {ordinal(date.day)} {month} {date.year} [<abbr title="old-style">OS</abbr>]</>;
       }
 
       const actualDate = new globalThis.Date(date.year, date.month - 1, date.day);
       const day = actualDate.getDay();
-      return `${days[day]}, ${ordinal(date.day)} ${month} ${date.year}`;
+      return <>{days[day]}, {ordinal(date.day)} {month} {date.year}</>;
     }
 
-    return `${month} ${date.year}`;
+    return <>{month} {date.year}</>;
   }
 
   if ('season' in date) {
-    return `${date.season} ${date.year}`;
+    return <>{date.season} {date.year}</>;
   }
 
   if (omitIfJustYear) {
@@ -95,46 +96,37 @@ export function renderExplicitDate(date: Date, omitIfJustYear: boolean): string
   return null;
 }
 
-export function isolate(value: string): string {
-  return `&#x2068;${value}&#x2069;`;
+export function isolate(text: string): string {
+  return `\u{2068}${text}\u{2069}`;
 }
 
-export function purify(str: string): string {
-  return str.replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('\'', '&#039;')
-    .replaceAll('"', '&quot;');
+export function Isolated({children}: {children: React.JSX.Element}): React.JSX.Element {
+  return <>{"\u{2068}"}{children}{"\u{2069}"}</>;
 }
 
-export function renderArticle(article: Article) {
+export function renderArticle(article: Article): React.JSX.Element | null {
   if (!IS_PRODUCTION || !article.draft) {
-    return `<li><a href="${article.url}"${asAttr("lang", article.titleLang)}>${article.title}</a>`
-      + ifSet(article.draft, ' <span class="draft">Draft</span>')
-      + (article.children ? renderArticleList(article.children) : '')
-      + `</li>`;
+    return (<li><a href={article.url} lang={article.titleLang}>{article.title}</a>
+       { article.draft && <> <span className="draft">Draft</span></> }
+       { article.children && renderArticleList(article.children) }
+       </li>);
   }
 
   // render draft article names if they have children
   if (article.children?.length) {
-    return `<li><span${asAttr("lang", article.titleLang)}>${article.title}</span>`
-      + (article.children ? renderArticleList(article.children) : '')
-      + `</li>`;
+    return (<li><span lang={article.titleLang}>{article.title}</span>
+      { article.children && renderArticleList(article.children) }
+      </li>);
   }
 
-  return '';
+  return null;
 }
 
-export function renderArticleList(articles: readonly Article[]) {
+export function renderArticleList(articles: readonly Article[]): React.JSX.Element | null {
   if (articles.length === 0) {
-    return '';
-  }
-
-  let result = '<ul class="article-list">';
-  for (const article of articles) {
-    result += renderArticle(article);
+    return null;
   }
 
-  result += "</ul>";
-  return result;
+  const RenderArticle = ({article}: {article: Article}) => renderArticle(article);
+  return <ul className="article-list">{articles.map((a, ix) => <RenderArticle key={ix} article={a} />)}</ul>;
 }