@abreen/tada 1.0.2 → 1.1.0

package/build/generate-content-assets.ts

@@ -0,0 +1,315 @@
+import fs from 'fs';
+import path from 'path';
+import { makeLogger } from './log.js';
+import { isFeatureEnabled } from './features.js';
+import { initHighlighter } from './utils/shiki-highlighter.js';
+import {
+  getBuildContentFiles,
+  getContentDir,
+  getValidInternalTargets,
+  renderCodePageAsset,
+  renderCopiedContentAsset,
+  renderLiterateJavaPageAsset,
+  renderPlainTextPageAsset,
+} from './util.js';
+import { isLiterateJava } from './utils/file-types.js';
+import { checkJavac } from './utils/literate-java.js';
+import type {
+  SiteVariables,
+  Asset,
+  ContentRenderOptions,
+  ContentRenderResult,
+  WatchState,
+} from './types.js';
+
+const log = makeLogger(__filename);
+
+export class ContentRenderer {
+  private siteVariables: SiteVariables;
+  private loggedCodeDisabled: boolean;
+  private sourceFileCache: Map<string, Asset[]>;
+  private lastBuildFiles: Set<string>;
+  private javacAvailable: boolean | undefined;
+
+  constructor(siteVariables: SiteVariables) {
+    this.siteVariables = siteVariables || {};
+    this.loggedCodeDisabled = false;
+    this.sourceFileCache = new Map();
+    this.lastBuildFiles = new Set();
+  }
+
+  async initHighlighter(): Promise<void> {
+    const langs = [
+      ...new Set([
+        'plaintext',
+        'text',
+        ...Object.values(this.siteVariables.codeLanguages || {}),
+      ]),
+    ];
+    await initHighlighter(langs);
+  }
+
+  getDirtySourceFiles(
+    buildContentFiles: string[],
+    { changedContentFiles, templatesChanged }: WatchState = {},
+  ): Set<string> {
+    if (
+      this.lastBuildFiles.size === 0 ||
+      !changedContentFiles ||
+      templatesChanged
+    ) {
+      return new Set(buildContentFiles);
+    }
+
+    const buildFileSet = new Set(buildContentFiles);
+    const dirtySourceFiles = new Set<string>();
+    for (const filePath of changedContentFiles) {
+      if (buildFileSet.has(filePath)) {
+        dirtySourceFiles.add(filePath);
+      }
+    }
+    return dirtySourceFiles;
+  }
+
+  isCopiedAssetSource(filePath: string): boolean {
+    const ext = path.extname(filePath).toLowerCase();
+    const codeExtensions = this.siteVariables.codeLanguages || {};
+    return Object.prototype.hasOwnProperty.call(codeExtensions, ext.slice(1));
+  }
+
+  getDirtyCopiedSourceFiles(
+    buildContentFiles: string[],
+    { changedContentFiles }: WatchState = {},
+  ): string[] {
+    if (this.lastBuildFiles.size === 0 || !changedContentFiles) {
+      return buildContentFiles.filter(filePath =>
+        this.isCopiedAssetSource(filePath),
+      );
+    }
+
+    const buildFileSet = new Set(buildContentFiles);
+    const dirtyCopiedSourceFiles: string[] = [];
+    for (const filePath of changedContentFiles) {
+      if (!buildFileSet.has(filePath) || !this.isCopiedAssetSource(filePath)) {
+        continue;
+      }
+      dirtyCopiedSourceFiles.push(filePath);
+    }
+
+    return dirtyCopiedSourceFiles;
+  }
+
+  renderSourceAssets(
+    filePath: string,
+    contentDir: string,
+    validInternalTargets: Set<string>,
+    assetFiles: string[],
+  ): Asset[] {
+    const ext = path.extname(filePath).toLowerCase();
+    const assets: Asset[] = [];
+
+    if (isLiterateJava(filePath)) {
+      assets.push(
+        ...renderLiterateJavaPageAsset({
+          filePath,
+          contentDir,
+          siteVariables: this.siteVariables,
+          assetFiles,
+          skipExecution: !this.javacAvailable,
+        }),
+      );
+      return assets;
+    }
+
+    if (ext === '.html' || ext === '.md' || ext === '.markdown') {
+      assets.push(
+        ...renderPlainTextPageAsset({
+          filePath,
+          contentDir,
+          siteVariables: this.siteVariables,
+          validInternalTargets,
+          assetFiles,
+        }),
+      );
+      return assets;
+    }
+
+    const codeExtensions = this.siteVariables.codeLanguages || {};
+    if (ext.slice(1) in codeExtensions) {
+      if (isFeatureEnabled(this.siteVariables, 'code')) {
+        assets.push(
+          ...renderCodePageAsset({
+            filePath,
+            contentDir,
+            siteVariables: this.siteVariables,
+            assetFiles,
+          }),
+        );
+      } else if (!this.loggedCodeDisabled) {
+        log.info`Not generating source code pages due to site.features.code = false`;
+        this.loggedCodeDisabled = true;
+      }
+    }
+
+    return assets;
+  }
+
+  writeUncachedAssets(
+    distDir: string,
+    copiedSourceFiles: string[],
+    contentDir: string,
+  ): void {
+    for (const filePath of copiedSourceFiles) {
+      for (const asset of renderCopiedContentAsset({ filePath, contentDir })) {
+        const outPath = path.join(distDir, asset.assetPath);
+        fs.mkdirSync(path.dirname(outPath), { recursive: true });
+        fs.writeFileSync(outPath, asset.content);
+      }
+    }
+  }
+
+  updateSourceCache(
+    filePath: string,
+    assets: Asset[],
+    changedHtmlAssetPaths: Set<string>,
+    removedHtmlAssetPaths: Set<string>,
+  ): void {
+    const previousAssets = this.sourceFileCache.get(filePath) || [];
+    const nextAssetPaths = new Set(assets.map(asset => asset.assetPath));
+
+    for (const asset of previousAssets) {
+      if (nextAssetPaths.has(asset.assetPath)) {
+        continue;
+      }
+      if (asset.assetPath.endsWith('.html')) {
+        removedHtmlAssetPaths.add(asset.assetPath);
+      }
+    }
+
+    for (const asset of assets) {
+      if (asset.assetPath.endsWith('.html')) {
+        changedHtmlAssetPaths.add(asset.assetPath);
+      }
+    }
+
+    this.sourceFileCache.set(filePath, assets);
+  }
+
+  writeCachedAssets(distDir: string, buildContentFiles: string[]): void {
+    for (const filePath of buildContentFiles) {
+      const assets = this.sourceFileCache.get(filePath) || [];
+      for (const asset of assets) {
+        const outPath = path.join(distDir, asset.assetPath);
+        fs.mkdirSync(path.dirname(outPath), { recursive: true });
+        fs.writeFileSync(outPath, asset.content);
+      }
+    }
+  }
+
+  pruneRemovedSources(
+    buildFileSet: Set<string>,
+    removedHtmlAssetPaths: Set<string>,
+  ): void {
+    for (const filePath of [...this.lastBuildFiles]) {
+      if (buildFileSet.has(filePath)) {
+        continue;
+      }
+
+      const previousAssets = this.sourceFileCache.get(filePath) || [];
+      for (const asset of previousAssets) {
+        if (asset.assetPath.endsWith('.html')) {
+          removedHtmlAssetPaths.add(asset.assetPath);
+        }
+      }
+      this.sourceFileCache.delete(filePath);
+    }
+  }
+
+  processContent({
+    distDir,
+    assetFiles,
+    watchState,
+  }: ContentRenderOptions): ContentRenderResult {
+    const contentDir: string = getContentDir();
+    const buildContentFiles: string[] = getBuildContentFiles(
+      contentDir,
+      Object.keys(this.siteVariables.codeLanguages || {}),
+    );
+    const buildFileSet = new Set<string>(buildContentFiles);
+    const dirtySourceFiles = this.getDirtySourceFiles(
+      buildContentFiles,
+      watchState,
+    );
+    const dirtyCopiedSourceFiles = this.getDirtyCopiedSourceFiles(
+      buildContentFiles,
+      watchState,
+    );
+    const changedHtmlAssetPaths = new Set<string>();
+    const removedHtmlAssetPaths = new Set<string>();
+    const validInternalTargets = getValidInternalTargets(
+      contentDir,
+      buildContentFiles,
+      Object.keys(this.siteVariables.codeLanguages || {}),
+    );
+    const errors: Error[] = [];
+
+    this.pruneRemovedSources(buildFileSet, removedHtmlAssetPaths);
+
+    if (dirtySourceFiles.size > 0) {
+      const noun = dirtySourceFiles.size === 1 ? 'file' : 'files';
+      log.info`Processing ${dirtySourceFiles.size} content ${noun}`;
+    }
+
+    const hasLiterateJava = [...dirtySourceFiles].some(isLiterateJava);
+    if (hasLiterateJava && this.javacAvailable === undefined) {
+      this.javacAvailable = checkJavac();
+      if (!this.javacAvailable) {
+        log.warn`javac was not found; literate Java pages will not include execution output`;
+      }
+    }
+
+    for (const filePath of dirtySourceFiles) {
+      let assets: Asset[];
+      try {
+        assets = this.renderSourceAssets(
+          filePath,
+          contentDir,
+          validInternalTargets,
+          assetFiles,
+        );
+      } catch (err) {
+        errors.push(err as Error);
+        continue;
+      }
+      this.updateSourceCache(
+        filePath,
+        assets,
+        changedHtmlAssetPaths,
+        removedHtmlAssetPaths,
+      );
+    }
+
+    this.writeCachedAssets(distDir, buildContentFiles);
+    this.writeUncachedAssets(distDir, dirtyCopiedSourceFiles, contentDir);
+    this.lastBuildFiles = buildFileSet;
+
+    // Collect HTML asset content for Pagefind
+    const htmlAssetsByPath = new Map<string, string>();
+    for (const filePath of buildContentFiles) {
+      const assets = this.sourceFileCache.get(filePath) || [];
+      for (const asset of assets) {
+        if (asset.assetPath.endsWith('.html')) {
+          htmlAssetsByPath.set(asset.assetPath, asset.content as string);
+        }
+      }
+    }
+
+    return {
+      errors,
+      changedHtmlAssetPaths,
+      removedHtmlAssetPaths,
+      htmlAssetsByPath,
+      buildContentFiles,
+    };
+  }
+}

package/build/generate-favicon.ts

@@ -0,0 +1,165 @@
+import fs from 'fs';
+import path from 'path';
+import * as fontkit from 'fontkit';
+import sharp from 'sharp';
+import pngToIco from 'png-to-ico';
+import { makeLogger } from './log.js';
+import { getPackageDir } from './utils/paths.js';
+import { deriveTheme } from './utils/derive-theme.js';
+import type { SiteVariables } from './types.js';
+
+const log = makeLogger(__filename);
+
+const FONT_PATH = path.join(
+  getPackageDir(),
+  'fonts',
+  'inter',
+  'ttf',
+  'InterVariable.ttf',
+);
+
+function createFaviconSvg(
+  size: number,
+  color: string,
+  textColor: string,
+  symbol: string,
+  font: fontkit.Font,
+  cssWeight: number,
+): string {
+  if (size < 10) {
+    throw new Error(`size is too small: ${size}`);
+  }
+
+  if (!symbol) {
+    throw new Error(`invalid symbol: ${symbol}`);
+  }
+
+  if (symbol.length > 5) {
+    throw new Error(`symbol is too long (must be <= 5 chars): ${symbol}`);
+  }
+
+  // Apply variation axes for variable fonts
+  const instance =
+    typeof font.getVariation === 'function' &&
+    font.variationAxes &&
+    Object.keys(font.variationAxes).length > 0
+      ? font.getVariation({ wght: cssWeight })
+      : font;
+
+  const run = instance.layout(symbol);
+
+  // Compute combined bounding box across all glyphs (font units, y-up)
+  let x = 0;
+  let totalMinX = Infinity,
+    totalMaxX = -Infinity;
+  let totalMinY = Infinity,
+    totalMaxY = -Infinity;
+  const advances: number[] = [];
+
+  for (let i = 0; i < run.glyphs.length; i++) {
+    const bbox = run.glyphs[i].bbox;
+    totalMinX = Math.min(totalMinX, x + bbox.minX);
+    totalMaxX = Math.max(totalMaxX, x + bbox.maxX);
+    totalMinY = Math.min(totalMinY, bbox.minY);
+    totalMaxY = Math.max(totalMaxY, bbox.maxY);
+    advances.push(x);
+    x += run.positions[i].xAdvance;
+  }
+
+  const textW = totalMaxX - totalMinX;
+  const textH = totalMaxY - totalMinY;
+
+  if (textW <= 0 || textH <= 0) {
+    throw new Error(`Could not get glyph bounds for symbol: ${symbol}`);
+  }
+
+  const pad = size * 0.1;
+  const contentW = size - pad * 2;
+  const contentH = size - pad * 2;
+
+  // Scale font units to SVG pixels to fill padded content area
+  const s = Math.min(contentW / textW, contentH / textH);
+
+  // Font coords are y-up; SVG is y-down. The outer transform flips y via scale(s, -s).
+  // We want the bbox center to land at (size/2, size/2).
+  const bboxCenterX = (totalMinX + totalMaxX) / 2;
+  const bboxCenterY = (totalMinY + totalMaxY) / 2;
+  const tx = size / 2 - bboxCenterX * s;
+  const ty = size / 2 + bboxCenterY * s;
+
+  // Each glyph is translated by its cumulative x-advance (in font units).
+  // The outer group handles y-flip and centering.
+  const paths = run.glyphs
+    .map((glyph: fontkit.Glyph, i: number) => {
+      const d = glyph.path.toSVG();
+      return advances[i] === 0
+        ? `<path d="${d}" fill="${textColor}" />`
+        : `<path d="${d}" transform="translate(${advances[i]} 0)" fill="${textColor}" />`;
+    })
+    .join('\n    ');
+
+  return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+  <rect width="${size}" height="${size}" rx="${size / 10}" fill="${color}" />
+  <g transform="translate(${tx.toFixed(2)} ${ty.toFixed(2)}) scale(${s.toFixed(4)} ${(-s).toFixed(4)})">
+    ${paths}
+  </g>
+</svg>`;
+}
+
+export async function generateFavicons(
+  siteVariables: SiteVariables,
+  distDir: string,
+): Promise<void> {
+  const color = siteVariables.faviconColor;
+  const symbol = siteVariables.faviconSymbol;
+  const fontWeight = siteVariables.faviconFontWeight || 700;
+  const sizes = [16, 32, 48, 64, 128, 192, 256, 512, 1024];
+  const svgSize = 512;
+  const filenameBase = 'favicon';
+
+  if (!color || !symbol) {
+    throw new Error('Missing required "color" and/or "symbol" options');
+  }
+
+  const { themeColorLight, textOnThemeLight } = deriveTheme(color);
+
+  log.info`Generating favicons`;
+  log.debug`Using font file: ${FONT_PATH}`;
+  const font = fontkit.openSync(FONT_PATH) as fontkit.Font;
+
+  const svgMarkup = createFaviconSvg(
+    svgSize,
+    themeColorLight,
+    textOnThemeLight,
+    symbol,
+    font,
+    fontWeight,
+  );
+  fs.writeFileSync(path.join(distDir, `${filenameBase}.svg`), svgMarkup);
+
+  const pngBuffers = await Promise.all(
+    sizes.map(async size => {
+      const svgForSize = createFaviconSvg(
+        size,
+        themeColorLight,
+        textOnThemeLight,
+        symbol,
+        font,
+        fontWeight,
+      );
+      const buf = await sharp(Buffer.from(svgForSize)).png().toBuffer();
+      fs.writeFileSync(path.join(distDir, `${filenameBase}-${size}.png`), buf);
+      return { size, buf };
+    }),
+  );
+
+  const icoBuffer = await pngToIco(
+    pngBuffers
+      .filter(b => b.size <= 256)
+      .sort((a, b) => a.size - b.size)
+      .map(x => x.buf),
+  );
+  fs.writeFileSync(path.join(distDir, `${filenameBase}.ico`), icoBuffer);
+}
+
+export { createFaviconSvg };

package/build/generate-fonts.ts

@@ -0,0 +1,31 @@
+import fs from 'fs';
+import path from 'path';
+import { getPackageDir } from './utils/paths.js';
+import { makeLogger } from './log.js';
+
+const log = makeLogger(__filename);
+const FONTS_DIR = path.join(getPackageDir(), 'fonts');
+
+export function copyFonts(distDir: string): void {
+  log.info`Copying fonts`;
+
+  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}`;
+      }
+    }
+  }
+}

package/{webpack/generate-manifest-plugin.js → build/generate-manifest.ts}

@@ -1,43 +1,23 @@
-const { createApplyBasePath } = require('./util');
+import fs from 'fs';
+import path from 'path';
+import { createApplyBasePath } from './util.js';
+import type { SiteVariables } from './types.js';
 
-class GenerateManifestPlugin {
-  constructor(siteVariables) {
-    this.siteVariables = siteVariables || {};
-  }
-
-  apply(compiler) {
-    compiler.hooks.thisCompilation.tap(
-      'GenerateManifestPlugin',
-      compilation => {
-        const wp = compilation.compiler.webpack || {};
-        const { RawSource } =
-          (wp.sources && wp.sources) || require('webpack-sources');
-
-        compilation.hooks.processAssets.tapPromise(
-          {
-            name: 'GenerateManifestPlugin',
-            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-          },
-          async () => {
-            try {
-              const manifest = createManifest(this.siteVariables);
-              const output = JSON.stringify(manifest);
-              compilation.emitAsset('manifest.json', new RawSource(output));
-            } catch (err) {
-              compilation.errors.push(
-                new Error(`Error: ${err && err.message ? err.message : err}`),
-              );
-            }
-          },
-        );
-      },
-    );
-  }
+interface ManifestIcon {
+  src: string;
+  sizes: string;
+  type: string;
+  purpose: string;
 }
 
-module.exports = GenerateManifestPlugin;
+interface WebAppManifest {
+  name: string | undefined;
+  start_url: string;
+  display: string;
+  icons: ManifestIcon[];
+}
 
-function createManifest(siteVariables) {
+function createManifest(siteVariables: SiteVariables): WebAppManifest {
   const applyBasePath = createApplyBasePath(siteVariables);
 
   return {
@@ -114,3 +94,16 @@ function createManifest(siteVariables) {
     ],
   };
 }
+
+export function generateManifest(
+  siteVariables: SiteVariables,
+  distDir: string,
+): void {
+  const manifest = createManifest(siteVariables);
+  fs.writeFileSync(
+    path.join(distDir, 'manifest.json'),
+    JSON.stringify(manifest),
+  );
+}
+
+export { createManifest };

package/build/globals.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from 'bun:test';
+import createGlobals from './globals.js';
+import type { SiteVariables } from './types.js';
+
+const baseSite: SiteVariables = {
+  base: 'http://localhost:8080',
+  basePath: '/',
+};
+
+function makeGlobals(subPath = 'index', site: Partial<SiteVariables> = {}) {
+  return createGlobals({}, { ...baseSite, ...site }, subPath);
+}
+
+describe('createGlobals', () => {
+  test('isHomePage is true when subPath is "index"', () => {
+    expect(makeGlobals('index').isHomePage).toBe(true);
+  });
+
+  test('isHomePage is false for other paths', () => {
+    expect(makeGlobals('about').isHomePage).toBe(false);
+    expect(makeGlobals('docs/guide').isHomePage).toBe(false);
+  });
+
+  test('cx is an alias for classNames', () => {
+    const g = makeGlobals();
+    expect(g.cx).toBe(g.classNames);
+  });
+
+  test('timezoneChooser includes noscript when defaultTimeZone is set', () => {
+    const g = makeGlobals('index', { defaultTimeZone: 'America/New_York' });
+    expect(g.timezoneChooser).toContain('noscript');
+    expect(g.timezoneChooser).toContain('select');
+  });
+
+  test('timezoneChooser has no noscript when defaultTimeZone is not set', () => {
+    const g = makeGlobals('index');
+    expect(g.timezoneChooser).toContain('select');
+    expect(g.timezoneChooser).not.toContain('noscript');
+  });
+});
+
+describe('isoDate', () => {
+  test('converts date string to ISO date', () => {
+    const g = makeGlobals();
+    expect(g.isoDate('2025-06-15')).toBe('2025-06-15');
+  });
+
+  test('converts full datetime to date only', () => {
+    const g = makeGlobals();
+    expect(g.isoDate('2025-06-15T12:30:00Z')).toBe('2025-06-15');
+  });
+
+  test('returns null for null/undefined/empty', () => {
+    const g = makeGlobals();
+    expect(g.isoDate(null)).toBe(null);
+    expect(g.isoDate(undefined)).toBe(null);
+    expect(g.isoDate('')).toBe(null);
+  });
+});
+
+describe('readableDate', () => {
+  test('formats date as Month Day, Year', () => {
+    const g = makeGlobals();
+    expect(g.readableDate('2025-01-15T00:00:00Z')).toBe('January 15, 2025');
+  });
+
+  test('strips leading zeros from day and month', () => {
+    const g = makeGlobals();
+    expect(g.readableDate('2025-03-05T00:00:00Z')).toBe('March 5, 2025');
+  });
+
+  test('handles Date objects', () => {
+    const g = makeGlobals();
+    const result = g.readableDate(new Date('2025-12-25T00:00:00Z'));
+    expect(result).toBe('December 25, 2025');
+  });
+
+  test('returns empty string for null/undefined/empty', () => {
+    const g = makeGlobals();
+    expect(g.readableDate(null)).toBe('');
+    expect(g.readableDate(undefined)).toBe('');
+    expect(g.readableDate('')).toBe('');
+  });
+});
+
+describe('classNames', () => {
+  test('returns truthy keys joined by space', () => {
+    const g = makeGlobals();
+    expect(g.classNames({ foo: true, bar: false, baz: 1 })).toBe('foo baz');
+  });
+
+  test('returns empty string when all falsy', () => {
+    const g = makeGlobals();
+    expect(g.classNames({ a: false, b: 0, c: '' })).toBe('');
+  });
+
+  test('returns empty string for empty object', () => {
+    const g = makeGlobals();
+    expect(g.classNames({})).toBe('');
+  });
+});