@abreen/tada 1.0.2 → 1.2.0

package/build/generate-favicon.ts

@@ -0,0 +1,172 @@
+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';
+import { getPackageDir } from './utils/paths';
+import { deriveTheme } from './utils/derive-theme';
+import type { SiteVariables } from './types';
+
+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 (!symbol) {
+    throw new Error(
+      'Favicon generation requires "symbol" in site config (or "faviconSymbol")',
+    );
+  }
+  if (!color) {
+    throw new Error(
+      'Favicon generation requires "themeColor" in site config (or "faviconColor")',
+    );
+  }
+
+  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';
+import { makeLogger } from './log';
+
+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/build/generate-katex-assets.ts

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import path from 'path';
+import * as sass from 'sass';
+import { makeLogger } from './log';
+
+const log = makeLogger(__filename);
+
+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 });
+
+  // Compile KaTeX SCSS with woff2-only font references
+  const katexScssDir = path.dirname(
+    require.resolve('katex/src/styles/katex.scss'),
+  );
+  const result = 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);
+
+  // Copy woff2 fonts
+  const katexDistDir = path.dirname(
+    require.resolve('katex/dist/katex.min.css'),
+  );
+  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));
+    }
+  }
+}

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';
+import type { SiteVariables } from './types';
 
-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,99 @@
+import { describe, expect, test } from 'bun:test';
+import createGlobals from './globals';
+import type { SiteVariables } from './types';
+
+const baseSite: SiteVariables = {
+  base: 'http://localhost:8080',
+  basePath: '/',
+  title: 'Test',
+  titlePostfix: ' - Test',
+  themeColor: 'hsl(195 70% 40%)',
+  defaultTimeZone: 'America/New_York',
+};
+
+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('renderTimeZoneChooser includes noscript when defaultTimeZone is set', () => {
+    const g = makeGlobals('index', { defaultTimeZone: 'America/New_York' });
+    expect(g.renderTimeZoneChooser()).toContain('noscript');
+    expect(g.renderTimeZoneChooser()).toContain('select');
+  });
+});
+
+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('');
+  });
+});

package/build/globals.ts

@@ -0,0 +1,88 @@
+import timezones from '../src/timezone/timezones.json' with { type: 'json' };
+import type { SiteVariables } from './types';
+
+interface Globals {
+  isHomePage: boolean;
+  isoDate: (str: string | null | undefined) => string | null;
+  readableDate: (date: string | Date | null | undefined) => string;
+  classNames: (obj: Record<string, unknown>) => string;
+  cx: (obj: Record<string, unknown>) => string;
+  renderTimeZoneChooser: () => string;
+}
+
+export default function createGlobals(
+  pageVariables: Record<string, unknown>,
+  siteVariables: SiteVariables,
+  subPath: string,
+): Globals {
+  const defaultTz = timezones.find(
+    t => t.value === siteVariables.defaultTimeZone,
+  )!;
+  const renderTimeZoneChooser = () =>
+    `<select class="time-zone" hidden></select><noscript>Times shown in ${defaultTz.abbreviation}.</noscript>`;
+
+  return {
+    isHomePage: subPath === 'index',
+    isoDate,
+    readableDate,
+    classNames,
+    cx: classNames,
+    renderTimeZoneChooser,
+  };
+}
+
+function isoDate(str: string | null | undefined): string | null {
+  if (str == null || str == '') {
+    return null;
+  }
+  const date = new Date(str);
+  return date.toISOString().slice(0, 10);
+}
+
+function readableDate(date: string | Date | null | undefined): string {
+  if (date == null || date == '') {
+    return '';
+  }
+
+  if (!(date instanceof Date)) {
+    date = new Date(date);
+  }
+
+  const str = date.toISOString();
+  const year = str.slice(0, 4);
+  let month: string = str.slice(5, 7);
+  if (month[0] === '0') {
+    month = month[1];
+  }
+  let day: string = str.slice(8, 10);
+  if (day[0] === '0') {
+    day = day[1];
+  }
+
+  const months: Record<string, string> = {
+    1: 'January',
+    2: 'February',
+    3: 'March',
+    4: 'April',
+    5: 'May',
+    6: 'June',
+    7: 'July',
+    8: 'August',
+    9: 'September',
+    10: 'October',
+    11: 'November',
+    12: 'December',
+  };
+
+  return `${months[month]} ${day}, ${year}`;
+}
+
+function classNames(obj: Record<string, unknown>): string {
+  const names: string[] = [];
+  for (const key in obj) {
+    if (obj[key]) {
+      names.push(key);
+    }
+  }
+  return names.join(' ');
+}

package/{webpack/heading-subtitle-plugin.js → build/heading-subtitle-plugin.ts}

@@ -1,4 +1,6 @@
-module.exports = function specialHeadingsPlugin(md) {
+import type MarkdownIt from 'markdown-it';
+
+export default function specialHeadingsPlugin(md: MarkdownIt): void {
   md.core.ruler.push('special_headings', state => {
     const tokens = state.tokens;
     for (let i = 0; i < tokens.length; i++) {
@@ -77,4 +79,4 @@ module.exports = function specialHeadingsPlugin(md) {
       tokens[i].attrJoin('class', 'has-subtitle');
     }
   });
-};
+}

package/build/json-schema.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'bun:test';
+import { compile, doValidation } from './json-schema';
+
+const schema = {
+  type: 'object',
+  properties: { name: { type: 'string' }, age: { type: 'number' } },
+  required: ['name'],
+  additionalProperties: false,
+};
+
+describe('compile', () => {
+  test('returns a validate function', () => {
+    const validator = compile(schema);
+    expect(typeof validator).toBe('function');
+  });
+});
+
+describe('doValidation', () => {
+  test('does not throw for valid input', () => {
+    const validator = compile(schema);
+    expect(() =>
+      doValidation(validator, { name: 'Alice' }, 'test.json'),
+    ).not.toThrow();
+  });
+
+  test('does not throw when optional fields are present', () => {
+    const validator = compile(schema);
+    expect(() =>
+      doValidation(validator, { name: 'Alice', age: 30 }, 'test.json'),
+    ).not.toThrow();
+  });
+
+  test('throws when required field is missing', () => {
+    const validator = compile(schema);
+    expect(() => doValidation(validator, {}, 'test.json')).toThrow(
+      'test.json failed validation',
+    );
+  });
+
+  test('throws with additionalProperties message', () => {
+    const validator = compile(schema);
+    expect(() =>
+      doValidation(validator, { name: 'Alice', extra: true }, 'test.json'),
+    ).toThrow('unknown property "extra"');
+  });
+
+  test('throws with field path in error', () => {
+    const nestedSchema = {
+      type: 'object',
+      properties: { name: { type: 'string' } },
+    };
+    const validator = compile(nestedSchema);
+    expect(() => doValidation(validator, { name: 123 }, 'data.json')).toThrow(
+      'data.json failed validation',
+    );
+  });
+});

package/build/json-schema.ts

@@ -0,0 +1,33 @@
+import JsonSchemaCompiler from 'ajv';
+import type { ValidateFunction, ErrorObject } from 'ajv';
+
+const compiler = new JsonSchemaCompiler();
+
+export function compile(schema: object): ValidateFunction {
+  return compiler.compile(schema);
+}
+
+function formatValidationError(error: ErrorObject): string {
+  const path = error.instancePath || '/';
+  const parts: string[] = [path];
+  if (error.keyword === 'additionalProperties') {
+    parts.push(
+      `unknown property "${(error.params as { additionalProperty: string }).additionalProperty}"`,
+    );
+  } else {
+    parts.push(error.message || 'unknown error');
+  }
+  return parts.join(': ');
+}
+
+export function doValidation(
+  validator: ValidateFunction,
+  input: unknown,
+  fileName: string,
+): void {
+  const valid = validator(input);
+  if (!valid) {
+    const details = validator.errors!.map(formatValidationError).join('\n');
+    throw new Error(`${fileName} failed validation:\n${details}`);
+  }
+}