@abreen/tada 1.17.0 → 1.18.0

package/build/bundle.ts

@@ -1,14 +1,8 @@
 import fs from 'fs';
-import os from 'os';
 import path from 'path';
-import _ from 'lodash';
+import { compileTemplate } from './lodash-template';
 import * as sass from 'sass';
-import {
-  getPackageDir,
-  getProjectDir,
-  getDistDir,
-  toPosix,
-} from './utils/paths';
+import { getPackageDir, toPosix } from './utils/paths';
 import {
   deriveTheme,
   deriveLinkHue,
@@ -40,7 +34,7 @@ interface CoverageGlobal {
   __tadaCoverage?: CoverageHooks;
 }
 
-export function getBundleNaming(): string {
+function getBundleNaming(): string {
   const version = pkg.version.replace(/[^a-zA-Z0-9.-]/g, '-');
   return `[name].bundle.tada-${version}.[ext]`;
 }
@@ -53,6 +47,7 @@ function formatCssNumber(value: number, precision = 4): string {
   return value.toFixed(precision).replace(/\.?0+$/, '');
 }
 
+// Returns the rendered SCSS source of the theme module (`config/theme`)
 function renderThemeScss(siteVariables: SiteVariables): string {
   const templatePath = path.join(getPackageDir(), 'templates/_theme.scss');
   const template = fs.readFileSync(templatePath, 'utf-8');
@@ -74,7 +69,7 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     siteVariables.fontOverrides,
   );
 
-  const renderedTemplate = _.template(template)({
+  const renderedTemplate = compileTemplate(template)({
     ...theme,
     tintHue,
     tintAmount,
@@ -98,12 +93,7 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     .replace('/* TADA_CUSTOM_FONT_TUNING */', customFontTuning)
     .replace('/* TADA_MATERIAL_SYMBOL_VARIABLES */', materialSymbolVariables);
 
-  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tada-'));
-  const configDir = path.join(tmpDir, 'config');
-  fs.mkdirSync(configDir);
-  fs.writeFileSync(path.join(configDir, '_theme.scss'), rendered);
-
-  return tmpDir;
+  return rendered;
 }
 
 function createDefine(
@@ -119,14 +109,31 @@ function createDefine(
   };
 }
 
-function createScssPlugin(themeDir: string) {
+const THEME_MODULE_URL = 'config/theme';
+const THEME_CANONICAL_URL = 'tada:config/theme';
+
+// Serves the rendered theme from memory to `@use 'config/theme'`
+function createThemeImporter(themeScss: string): sass.Importer<'sync'> {
+  return {
+    canonicalize(url) {
+      return url === THEME_MODULE_URL ? new URL(THEME_CANONICAL_URL) : null;
+    },
+    load(canonicalUrl) {
+      if (canonicalUrl.href !== THEME_CANONICAL_URL) {
+        return null;
+      }
+      return { contents: themeScss, syntax: 'scss' };
+    },
+  };
+}
+
+function createScssPlugin(themeScss: string) {
+  const importers = [createThemeImporter(themeScss)];
   return {
     name: 'scss',
     setup(build: PluginBuilder) {
       build.onLoad({ filter: /\.scss$/ }, args => {
-        const result = sass.compile(args.path, {
-          loadPaths: [themeDir, getProjectDir()],
-        });
+        const result = sass.compile(args.path, { importers });
         return { contents: result.css, loader: 'css' as const };
       });
     },
@@ -139,55 +146,58 @@ function getCoverageBundlePlugin(): BunBuildPlugin | null {
   );
 }
 
-export async function bundle(
+async function buildToMemory(
+  options: Parameters<typeof Bun.build>[0],
+): Promise<Map<string, string>> {
+  const result = await Bun.build(options);
+  if (!result.success) {
+    const messages = result.logs
+      .filter(log => log.level === 'error')
+      .map(log => log.message || String(log));
+    throw new Error(`Bundle failed:\n${messages.join('\n')}`);
+  }
+  const outputs = new Map<string, string>();
+  for (const output of result.outputs) {
+    outputs.set(
+      path.posix.normalize(toPosix(output.path)),
+      await output.text(),
+    );
+  }
+  return outputs;
+}
+
+/** Bundles Tada's client CSS and JavaScript, keyed by output path */
+export function bundle(
   siteVariables: SiteVariables,
-  { mode = 'development', distDir }: { mode?: string; distDir?: string } = {},
-): Promise<string[]> {
-  const packageDir = getPackageDir();
-  const resolvedDistDir = distDir ?? getDistDir();
+  { mode = 'development' }: { mode?: string } = {},
+): Promise<Map<string, string>> {
   const isDev = mode === 'development';
+  const plugins = [createScssPlugin(renderThemeScss(siteVariables))];
+  const coverageBundlePlugin = getCoverageBundlePlugin();
+  if (coverageBundlePlugin) {
+    plugins.push(coverageBundlePlugin);
+  }
 
-  const entrypoints = [
-    path.resolve(packageDir, 'src/index.ts'),
-    path.resolve(packageDir, 'src/critical.scss'),
-  ];
-
-  const themeDir = renderThemeScss(siteVariables);
-
-  try {
-    const plugins = [createScssPlugin(themeDir)];
-    const coverageBundlePlugin = getCoverageBundlePlugin();
-    if (coverageBundlePlugin) {
-      plugins.push(coverageBundlePlugin);
-    }
-
-    const result = await Bun.build({
-      entrypoints,
-      outdir: resolvedDistDir,
-      naming: getBundleNaming(),
-      minify: mode === 'production',
-      sourcemap: isDev ? 'inline' : 'none',
-      define: createDefine(siteVariables, isDev),
-      external: ['*.woff2'],
-      plugins,
-    });
-
-    if (!result.success) {
-      const messages = result.logs
-        .filter(log => log.level === 'error')
-        .map(log => log.message || String(log));
-      throw new Error(`Bundle failed:\n${messages.join('\n')}`);
-    }
-
-    // Return the output filenames for asset tag injection
-    const assetFiles = result.outputs.map(output =>
-      toPosix(path.relative(resolvedDistDir, output.path)),
-    );
+  return buildToMemory({
+    entrypoints: [path.resolve(getPackageDir(), 'src/index.ts')],
+    naming: getBundleNaming(),
+    minify: mode === 'production',
+    sourcemap: isDev ? 'inline' : 'none',
+    define: createDefine(siteVariables, isDev),
+    external: ['*.woff2'],
+    plugins,
+  });
+}
 
-    return assetFiles;
-  } finally {
-    fs.rmSync(themeDir, { recursive: true, force: true });
-  }
+/** Bundles the watch-mode reload client, keyed by output path */
+export function bundleReloadClient(): Promise<Map<string, string>> {
+  return buildToMemory({
+    entrypoints: [
+      path.resolve(getPackageDir(), 'build/watch-reload-client.ts'),
+    ],
+    naming: getBundleNaming(),
+    sourcemap: 'inline',
+  });
 }
 
 export { renderThemeScss };

package/build/columns-plugin.ts

@@ -1,9 +1,14 @@
-import type MarkdownIt from 'markdown-it';
+import MarkdownIt from 'markdown-it';
+import type Token from 'markdown-it/lib/token.mjs';
 import type StateBlock from 'markdown-it/lib/rules_block/state_block.mjs';
 
 const MARKER_CHAR = 0x2b; // '+'
 const MIN_MARKERS = 3;
 
+// A separate block parser avoids invoking column rules recursively or mutating
+// the document's tokens and plugin environment while locating literal code.
+const codeContextParser = new MarkdownIt('commonmark');
+
 function isColumnsFence(state: StateBlock, line: number): boolean {
   const start = state.bMarks[line] + state.tShift[line];
   const max = state.eMarks[line];
@@ -46,7 +51,28 @@ function columnsRule(
   let separatorLine = -1;
   let closeLine = -1;
 
+  // Parse block context, including lists and blockquotes, before looking for
+  // delimiters. Token maps keep code fences and their contents literal.
+  const contextTokens: Token[] = [];
+  codeContextParser.block.parse(
+    state.getLines(startLine + 1, endLine, state.blkIndent, false),
+    codeContextParser,
+    {},
+    contextTokens,
+  );
+  const codeLines = new Set<number>();
+  for (const token of contextTokens) {
+    if ((token.type === 'fence' || token.type === 'code_block') && token.map) {
+      for (let line = token.map[0]; line < token.map[1]; line++) {
+        codeLines.add(startLine + 1 + line);
+      }
+    }
+  }
+
   for (let line = startLine + 1; line < endLine; line++) {
+    if (codeLines.has(line)) {
+      continue;
+    }
     if (!isColumnsFence(state, line)) {
       continue;
     }

package/build/config-loader.ts

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import _ from 'lodash';
+import { compileTemplate } from './lodash-template';
 import {
   resolveProjectConfigFile,
   resolveSiteConfigFile,
@@ -44,7 +44,7 @@ function renderConfigTemplateString(
   fileName: string,
 ): string {
   try {
-    return _.template(value)(context);
+    return compileTemplate(value)(context);
   } catch (error) {
     throw new Error(
       `${fileName}: Lodash template error in config: ${getTemplateErrorMessage(error)}`,
@@ -61,7 +61,7 @@ function evaluateConfigTemplateExpression(
   let captured: unknown;
 
   try {
-    _.template(`<% __capture(( ${expression} )); %>`)({
+    compileTemplate(`<% __capture(( ${expression} )); %>`)({
       ...context,
       __capture(value: unknown) {
         captured = value;

package/build/custom-fonts.ts

@@ -41,14 +41,17 @@ interface CustomFontValidationOptions {
 }
 
 export function isValidPublicWoff2Path(filePath: string): boolean {
+  return isValidPublicAssetPath(filePath) && filePath.endsWith('.woff2');
+}
+
+export function isValidPublicAssetPath(filePath: string): boolean {
   if (
     filePath.length === 0 ||
     filePath.startsWith('/') ||
     /^[A-Za-z]:/.test(filePath) ||
     filePath.includes('\\') ||
     filePath.includes('?') ||
-    filePath.includes('#') ||
-    !filePath.endsWith('.woff2')
+    filePath.includes('#')
   ) {
     return false;
   }
@@ -160,7 +163,7 @@ export function renderCustomFontTuningScss(
     serifTuning?.lineHeight !== undefined
   ) {
     rules.push(
-      `  ${rootSelector} main.body > :is(footer, .appearance-pickers, .slides-header, .file-header) {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n  }`,
+      `  ${rootSelector} main.body .page-bottom, ${rootSelector} main.body > .page-content > :is(.slides-header, .file-header) {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n  }`,
     );
   }
 
@@ -206,7 +209,7 @@ export function renderCustomFontTuningScss(
 export function getSerifFontStack(
   fontOverrides: FontOverrides | undefined,
 ): string {
-  const custom = fontOverrides?.serif
+  const custom = fontOverrides?.serif?.regular
     ? `'${CUSTOM_FONT_FAMILY_DEFINITIONS.serif.cssFamily}', `
     : '';
   return `${custom}'Source Serif 4', 'Times New Roman', 'Times', serif`;
@@ -215,7 +218,7 @@ export function getSerifFontStack(
 export function getSerifMonoFontStack(
   fontOverrides: FontOverrides | undefined,
 ): string {
-  const custom = fontOverrides?.serifMono
+  const custom = fontOverrides?.serifMono?.regular
     ? `'${CUSTOM_FONT_FAMILY_DEFINITIONS.serifMono.cssFamily}', `
     : '';
   return `${custom}'Courier Prime', 'Courier New', 'Courier', monospace`;

package/build/deflist-id-plugin.ts

@@ -24,11 +24,11 @@ export default function deflistIdPlugin(md: MarkdownIt): void {
           break;
         }
 
-        if (t.type === 'text') {
+        if (t.type === 'text' || t.type === 'code_inline') {
           termText += t.content;
         } else if (t.type === 'inline' && t.children) {
           for (const child of t.children) {
-            if (child.type === 'text') {
+            if (child.type === 'text' || child.type === 'code_inline') {
               termText += child.content;
             }
           }

package/build/generate-favicon.ts

@@ -1,4 +1,3 @@
-import fs from 'fs';
 import path from 'path';
 import * as fontkit from 'fontkit';
 import sharp from 'sharp';
@@ -108,10 +107,11 @@ function createFaviconSvg(
 </svg>`;
 }
 
+/** Generated favicon files, keyed by output path */
 export async function generateFavicons(
   siteVariables: SiteVariables,
-  distDir: string,
-): Promise<void> {
+): Promise<Map<string, string | Uint8Array>> {
+  const outputs = new Map<string, string | Uint8Array>();
   const color = siteVariables.faviconColor!;
   const symbol = siteVariables.faviconSymbol!;
   const fontWeight = siteVariables.faviconFontWeight || 700;
@@ -132,7 +132,7 @@ export async function generateFavicons(
     font,
     fontWeight,
   );
-  fs.writeFileSync(path.join(distDir, `${filenameBase}.svg`), svgMarkup);
+  outputs.set(`${filenameBase}.svg`, svgMarkup);
 
   const pngBuffers = await Promise.all(
     FAVICON_SIZES.map(async size => {
@@ -145,7 +145,7 @@ export async function generateFavicons(
         fontWeight,
       );
       const buf = await sharp(Buffer.from(svgForSize)).png().toBuffer();
-      fs.writeFileSync(path.join(distDir, `${filenameBase}-${size}.png`), buf);
+      outputs.set(`${filenameBase}-${size}.png`, buf);
       return { size, buf };
     }),
   );
@@ -156,5 +156,6 @@ export async function generateFavicons(
       .sort((a, b) => a.size - b.size)
       .map(x => x.buf),
   );
-  fs.writeFileSync(path.join(distDir, `${filenameBase}.ico`), icoBuffer);
+  outputs.set(`${filenameBase}.ico`, icoBuffer);
+  return outputs;
 }

package/build/generate-fonts.ts

@@ -1,10 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 import { getPackageDir } from './utils/paths';
-import { makeLogger } from './log';
-import type { SiteVariables } from './types';
+import type { CopiedFile, SiteVariables } from './types';
 
-const log = makeLogger(import.meta.url);
 const FONTS_DIR = path.join(getPackageDir(), 'fonts');
 
 export const DEFAULT_FONT_PRELOAD_FILES = {
@@ -49,26 +47,21 @@ export function getDefaultFontPreloadFiles(
   ];
 }
 
-export function copyFonts(distDir: string): void {
-  log.info`Copying fonts`;
-
+/** Bundled browser fonts, as copy references keyed by output path */
+export function getFontOutputs(): Map<string, CopiedFile> {
+  const outputs = new Map<string, CopiedFile>();
   for (const family of fs.readdirSync(FONTS_DIR)) {
     const woff2Dir = path.join(FONTS_DIR, family, 'woff2');
     if (!fs.existsSync(woff2Dir) || !fs.statSync(woff2Dir).isDirectory()) {
       continue;
     }
-
-    const outFamilyDir = path.join(distDir, family);
-    fs.mkdirSync(outFamilyDir, { recursive: true });
-
     for (const file of fs.readdirSync(woff2Dir)) {
       if (file.endsWith('.woff2')) {
-        fs.copyFileSync(
-          path.join(woff2Dir, file),
-          path.join(outFamilyDir, file),
-        );
-        log.debug`Copied ${family}/${file}`;
+        outputs.set(`${family}/${file}`, {
+          copyFrom: path.join(woff2Dir, file),
+        });
       }
     }
   }
+  return outputs;
 }

package/build/generate-katex-assets.ts

@@ -1,35 +1,37 @@
 import fs from 'fs';
 import path from 'path';
 import * as sass from 'sass';
-import { makeLogger } from './log';
+import type { OutputContent } from './types';
 
-const log = makeLogger(import.meta.url);
-
-export function copyKatexAssets(distDir: string): void {
-  log.info`Copying KaTeX assets`;
-
-  const outDir = path.join(distDir, 'katex');
-  const outFontsDir = path.join(outDir, 'fonts');
-  fs.mkdirSync(outFontsDir, { recursive: true });
+let katexCss: string | undefined;
 
+function compileKatexCss(): string {
   // Compile KaTeX SCSS with woff2-only font references
   const katexScssDir = path.dirname(
     require.resolve('katex/src/styles/katex.scss'),
   );
-  const result = sass.compileString(
+  return sass.compileString(
     `@use 'katex' with ($use-woff2: true, $use-woff: false, $use-ttf: false, $font-folder: 'fonts');`,
     { loadPaths: [katexScssDir], style: 'compressed' },
-  );
-  fs.writeFileSync(path.join(outDir, 'katex.min.css'), result.css);
+  ).css;
+}
 
-  // Copy woff2 fonts
-  const katexDistDir = path.dirname(
-    require.resolve('katex/dist/katex.min.css'),
+/** The KaTeX stylesheet and its woff2 fonts, keyed by output path */
+export function getKatexOutputs(): Map<string, OutputContent> {
+  katexCss ??= compileKatexCss();
+  const outputs = new Map<string, OutputContent>([
+    ['katex/katex.min.css', katexCss],
+  ]);
+  const fontsDir = path.join(
+    path.dirname(require.resolve('katex/dist/katex.min.css')),
+    'fonts',
   );
-  const fontsDir = path.join(katexDistDir, 'fonts');
   for (const file of fs.readdirSync(fontsDir)) {
     if (file.endsWith('.woff2')) {
-      fs.copyFileSync(path.join(fontsDir, file), path.join(outFontsDir, file));
+      outputs.set(`katex/fonts/${file}`, {
+        copyFrom: path.join(fontsDir, file),
+      });
     }
   }
+  return outputs;
 }

package/build/generate-web-app-manifest.ts

@@ -1,5 +1,3 @@
-import fs from 'fs';
-import path from 'path';
 import { createApplyBasePath } from './util';
 import { FAVICON_SIZES } from './generate-favicon';
 import type { SiteVariables } from './types';
@@ -57,13 +55,7 @@ function createManifest(siteVariables: SiteVariables): WebAppManifest {
   };
 }
 
-export function generateWebAppManifest(
-  siteVariables: SiteVariables,
-  distDir: string,
-): void {
-  const manifest = createManifest(siteVariables);
-  fs.writeFileSync(
-    path.join(distDir, 'manifest.json'),
-    JSON.stringify(manifest),
-  );
+/** The web app manifest (`manifest.json`) for generated favicons */
+export function createWebAppManifest(siteVariables: SiteVariables): string {
+  return JSON.stringify(createManifest(siteVariables));
 }

package/build/lodash-template.ts

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+
+/**
+ * Compiles a Lodash template that only recognizes `<% %>`, `<%= %>`, and
+ * `<%- %>` delimiters.
+ *
+ * Lodash also treats ES template literal syntax (`${expr}`) as interpolation,
+ * but only while `interpolate` is its built-in regex object. Passing a separate
+ * regex literal with the same pattern disables that, so `${...}` in Markdown,
+ * code samples, and source files stays literal text.
+ */
+export function compileTemplate(source: string): _.TemplateExecutor {
+  return _.template(source, { interpolate: /<%=([\s\S]+?)%>/g });
+}