@abreen/tada 1.1.0 → 1.2.0

package/build/watch.ts

@@ -4,37 +4,33 @@ import { fork } from 'child_process';
 import path from 'path';
 import chokidar from 'chokidar';
 import WebSocket, { WebSocketServer } from 'ws';
-import type { SiteVariables, WatchState } from './types.js';
-import { B } from './colors.js';
-import { makeLogger, printFlair } from './log.js';
-import { getDevSiteVariables } from './site-variables.js';
-import {
-  compileTemplates,
-  getHtmlTemplatesDir,
-  getJsonDataDir,
-  JSON_DATA_FILES,
-} from './templates.js';
+import type { SiteVariables, WatchState } from './types';
+import { B } from './colors';
+import { makeLogger, printFlair } from './log';
+import { getDevSiteVariables } from './site-variables';
+import { compileTemplates, getJsonDataDir, JSON_DATA_FILES } from './templates';
 import {
   getContentDir,
   getPublicDir,
   getDistDir,
   getPackageDir,
-} from './utils/paths.js';
-import { isFeatureEnabled } from './features.js';
-import { bundle } from './bundle.js';
-import { copyFonts } from './generate-fonts.js';
-import { generateFavicons } from './generate-favicon.js';
-import { generateManifest } from './generate-manifest.js';
+} from './utils/paths';
+import { isFeatureEnabled } from './features';
+import { bundle } from './bundle';
+import { copyFonts } from './generate-fonts';
+import { copyKatexAssets } from './generate-katex-assets';
+import { generateFavicons } from './generate-favicon';
+import { generateManifest } from './generate-manifest';
 import {
   copyPublicFiles,
   copyContentAssets,
   copyContentFile,
   copyPublicFile,
-} from './copy.js';
-import { getProcessedExtensions } from './utils/file-types.js';
-import { ContentRenderer } from './generate-content-assets.js';
-import { WatchPagefindRunner } from './pagefind.js';
-import { ContentChangeDetector } from './content-watch.js';
+} from './copy';
+import { getProcessedExtensions } from './utils/file-types';
+import { ContentRenderer } from './generate-content-assets';
+import { WatchPagefindRunner } from './pagefind';
+import { ContentChangeDetector } from './content-watch';
 
 function getArg(name: string): number | null {
   const idx = process.argv.indexOf(name);
@@ -74,7 +70,7 @@ async function bundleReloadClient(): Promise<string[]> {
   );
 }
 
-type ChangeCategory = 'content' | 'public' | 'src' | 'templates' | 'config';
+type ChangeCategory = 'content' | 'public' | 'config';
 
 const log = makeLogger(__filename);
 const wslog = makeLogger('WebSocket');
@@ -82,6 +78,7 @@ const wslog = makeLogger('WebSocket');
 // --- WebSocket server (unchanged) ---
 
 let webSocketsReady = false;
+let watcherReady = false;
 let webServerReady = false;
 let webServerTimeout: ReturnType<typeof setTimeout> | undefined;
 let serveStarted = false;
@@ -92,6 +89,12 @@ try {
 
   wss.on('connection', (conn: WebSocket) => {
     wslog.debug`WebSocket client connected`;
+    if (watcherReady && conn.readyState === WebSocket.OPEN) {
+      if (initialBuildFailed) {
+        conn.send('error');
+      }
+      conn.send('ready');
+    }
     conn.on('close', () => {
       wslog.debug`WebSocket client disconnected`;
     });
@@ -196,12 +199,9 @@ function toPublicRelativePath(filePath: string): string | null {
 const contentDir: string = getContentDir();
 const publicDir: string = getPublicDir();
 const distDir: string = getDistDir();
-const packageDir: string = getPackageDir();
 
-let siteVariables: SiteVariables = getDevSiteVariables();
-let processedExtSet = new Set<string>(
-  getProcessedExtensions(Object.keys(siteVariables.codeLanguages || {})),
-);
+let siteVariables: SiteVariables;
+let processedExtSet = new Set<string>();
 let publicRelPaths: Set<string> = new Set();
 let contentAssetRelPaths: Set<string> = new Set();
 let contentRenderer: ContentRenderer;
@@ -213,6 +213,10 @@ const pendingChanges = new Set<string>();
 let rebuilding = false;
 
 async function initialBuild(): Promise<void> {
+  siteVariables = getDevSiteVariables();
+  processedExtSet = new Set(
+    getProcessedExtensions(Object.keys(siteVariables.codeLanguages || {})),
+  );
   fs.mkdirSync(distDir, { recursive: true });
 
   compileTemplates(siteVariables);
@@ -231,6 +235,7 @@ async function initialBuild(): Promise<void> {
   ];
 
   copyFonts(distDir);
+  copyKatexAssets(distDir);
 
   if (isFeatureEnabled(siteVariables, 'favicon')) {
     await generateFavicons(siteVariables, distDir);
@@ -270,8 +275,6 @@ function classifyChange(filePath: string): ChangeCategory | null {
   const resolved = path.resolve(filePath);
   const resolvedContentDir = path.resolve(contentDir) + path.sep;
   const resolvedPublicDir = path.resolve(publicDir) + path.sep;
-  const resolvedSrcDir = path.resolve(packageDir, 'src') + path.sep;
-  const htmlTemplatesDir = path.resolve(getHtmlTemplatesDir()) + path.sep;
   const jsonDataDir = getJsonDataDir();
   const siteConfigPath = path.resolve('site.dev.json');
 
@@ -281,16 +284,10 @@ function classifyChange(filePath: string): ChangeCategory | null {
   if (resolved.startsWith(resolvedPublicDir)) {
     return 'public';
   }
-  if (resolved.startsWith(resolvedSrcDir)) {
-    return 'src';
-  }
   if (
-    resolved.startsWith(htmlTemplatesDir) ||
+    resolved === siteConfigPath ||
     JSON_DATA_FILES.some(f => resolved === path.resolve(jsonDataDir, f))
   ) {
-    return 'templates';
-  }
-  if (resolved === siteConfigPath) {
     return 'config';
   }
   return null;
@@ -316,6 +313,8 @@ async function rebuild(): Promise<void> {
     }
   }
 
+  let succeeded = false;
+
   try {
     // Site config changed, full restart
     if (categories.has('config')) {
@@ -337,61 +336,36 @@ async function rebuild(): Promise<void> {
         ...(await bundleReloadClient()),
       ];
 
-      const result = contentRenderer.processContent({ distDir, assetFiles });
-      for (const err of result.errors) {
-        log.error`${err.message}`;
-      }
-      if (result.errors.length === 0) {
-        printFlair();
-        broadcast('reload');
-        if (pagefindRunner) {
-          pagefindRunner.update(distDir, result.htmlAssetsByPath);
-          setImmediate(() => pagefindRunner!.run());
-        }
+      copyFonts(distDir);
+      copyKatexAssets(distDir);
+
+      if (isFeatureEnabled(siteVariables, 'favicon')) {
+        await generateFavicons(siteVariables, distDir);
+        generateManifest(siteVariables, distDir);
       }
-      rebuilding = false;
-      return;
-    }
 
-    // Source changed, re-bundle, then re-render all content
-    if (categories.has('src')) {
-      assetFiles = [
-        ...(await bundle(siteVariables, { mode: 'development' })),
-        ...(await bundleReloadClient()),
-      ];
-      // Force full content re-render since asset filenames may have changed
       const result = contentRenderer.processContent({ distDir, assetFiles });
       for (const err of result.errors) {
         log.error`${err.message}`;
       }
       if (result.errors.length === 0) {
         printFlair();
+        if (!serveStarted) {
+          serveStarted = true;
+          serve();
+        }
         broadcast('reload');
         if (pagefindRunner) {
           pagefindRunner.update(distDir, result.htmlAssetsByPath);
           setImmediate(() => pagefindRunner!.run());
         }
+        succeeded = true;
       }
-      rebuilding = false;
       return;
     }
 
-    // Templates/data changed, recompile templates, re-render all content
-    if (categories.has('templates')) {
-      const detection = changeDetector.detectChanges(changes);
-      if (detection.templateError) {
-        log.error`Template error: ${detection.templateError.message}`;
-        rebuilding = false;
-        return;
-      }
-    }
-
     // Public file changed, copy just that file
-    if (
-      categories.has('public') &&
-      !categories.has('content') &&
-      !categories.has('templates')
-    ) {
+    if (categories.has('public') && !categories.has('content')) {
       for (const filePath of changes) {
         if (classifyChange(filePath) === 'public') {
           const absPath = path.resolve(filePath);
@@ -407,17 +381,12 @@ async function rebuild(): Promise<void> {
       }
       printFlair();
       broadcast('reload');
-      rebuilding = false;
+      succeeded = true;
       return;
     }
 
-    // Content and/or templates changed, incremental rebuild
+    // Content changed, incremental rebuild
     const detection = changeDetector.detectChanges(changes);
-    if (detection.templateError) {
-      log.error`Template error: ${detection.templateError.message}`;
-      rebuilding = false;
-      return;
-    }
 
     if (detection.needsRestart) {
       log.event`Content structure changed, full rebuild`;
@@ -493,16 +462,24 @@ async function rebuild(): Promise<void> {
 
     if (result.errors.length === 0) {
       printFlair();
+      if (!serveStarted) {
+        serveStarted = true;
+        serve();
+      }
       broadcast('reload');
 
       if (pagefindRunner) {
         pagefindRunner.update(distDir, result.htmlAssetsByPath);
         setImmediate(() => pagefindRunner!.run());
       }
+      succeeded = true;
     }
   } catch (err) {
     log.error`Build failed: ${(err as Error).message}`;
   } finally {
+    if (!succeeded) {
+      broadcast('error');
+    }
     rebuilding = false;
 
     // If more changes accumulated during rebuild, schedule another
@@ -526,22 +503,18 @@ function onFileChange(filePath: string): void {
 
 // --- Start ---
 
+let initialBuildFailed = false;
+
 initialBuild()
-  .then(() => {
-    // Watch content, public, src, templates, data files, site config
+  .catch(err => {
+    log.error`Initial build failed: ${(err as Error).message}`;
+    initialBuildFailed = true;
+  })
+  .finally(() => {
+    // Watch content, public, data files, site config
     const watchPaths: string[] = [contentDir, publicDir];
 
-    // Watch package src/ and templates/ for Tada development
-    const srcDir = path.resolve(packageDir, 'src');
-    const templatesDir = getHtmlTemplatesDir();
-    if (fs.existsSync(srcDir)) {
-      watchPaths.push(srcDir);
-    }
-    if (fs.existsSync(templatesDir)) {
-      watchPaths.push(templatesDir);
-    }
-
-    // Watch data files
+    // Watch data files (nav.json, authors.json)
     const jsonDataDir = getJsonDataDir();
     for (const dataFile of JSON_DATA_FILES) {
       const dataPath = path.join(jsonDataDir, dataFile);
@@ -565,9 +538,12 @@ initialBuild()
     watcher.on('add', onFileChange);
     watcher.on('unlink', onFileChange);
 
-    log.info`Watching for changes...`;
-  })
-  .catch(err => {
-    log.error`Initial build failed: ${(err as Error).message}`;
-    process.exit(1);
+    watcher.on('ready', () => {
+      watcherReady = true;
+      if (initialBuildFailed) {
+        broadcast('error');
+      }
+      broadcast('ready');
+      log.info`Watching for changes...`;
+    });
   });

package/{content → init/content}/lectures/index.md

@@ -2,7 +2,7 @@ title: Lectures
 author: alex
 description: An example page for <%= site.title %>.
 
-<%= timezoneChooser %>
+<%= renderTimeZoneChooser() %>
 
 One-hour lectures are held weekly at <time datetime="17:40">5:40 PM</time>.
 Each lecture is recorded and made available by password-protected link.

package/{content → init/content}/markdown.md

@@ -128,6 +128,20 @@ See `config/site.dev.json` and `config/site.prod.json` to change `site.basePath`
 and `site.internalDomains`.
 
 
+## LaTeX
+
+$\LaTeX$ support is implemented via [KaTeX](https://katex.org/). The standard
+dollar sign-based syntax is supported. Wrap inline math in single `$`,
+or use `$$` for a math block.
+
+Here's an example: selection sort performs $O(n^2)$ comparisons. And to
+demonstrate a block, here's the exact number of comparisons:
+
+$$
+(n-1) + (n-2) + \dots + 1 = \sum_{i=1}^{n-1}i
+$$
+
+
 ## Additional syntax
 
 !!! note Headings are links
@@ -228,7 +242,7 @@ Beware of this rule.
 A time zone chooser for testing styles (see the "time zone chooser" section
 below):
 
-<%= timezoneChooser %>
+<%= renderTimeZoneChooser() %>
 
 A `<time>` element for testing styles: <time datetime="15:00">3 pm</time>
 
@@ -326,14 +340,19 @@ These features aren't Markdown-specific, but are included here for reference.
 
 Allows the user to see times in their local time zone.
 
-!!! note
-Look at the source code for this file to see how to insert it.
-!!!
+Insert the time zone chooser using Lodash templates, calling the
+`renderTimeZoneChooser()` function (made available on any page as a global):
+
+```
+<%= '\x3C%= renderTimeZoneChooser() %\x3E' %>
+```
+
+To produce:
 
-<%= timezoneChooser %>
+<%= renderTimeZoneChooser() %>
 
-Wrap your times in `<time datetime="...">` elements and they will be updated
-when the user makes a time zone selection.
+Then, wrap your times in `<time datetime="...">` elements and they will be
+updated when the user makes a time zone selection.
 
 Use
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -13,24 +13,25 @@
     "src/",
     "templates/",
     "fonts/",
-    "config/",
-    "content/",
-    "public/",
+    "init/",
+    "schema/",
     "types/",
     "tsconfig.json"
   ],
   "scripts": {
-    "prepare": "husky",
-    "init-example": "bun run bin/tada.ts init example --default",
+    "prepare": "husky && bun run scripts/check-deps.ts",
+    "init-example": "bun run bin/tada.ts init example --no-interactive",
     "lint": "eslint src/ build/ bin/",
     "typecheck": "tsc --noEmit",
-    "test:functional": "python3 -m pip install -q -r functional_tests/requirements.txt && python3 -m pytest functional_tests/ -v -n auto"
+    "test:functional": "python3 -m pip install -q -r functional_tests/requirements.txt && python3 -m pytest functional_tests/ -v -n auto --durations=10",
+    "test:all": "bun test && bun run test:functional"
   },
   "engines": {
     "bun": ">=1.0.0"
   },
   "dependencies": {
     "@tsconfig/node23": "^23.0.2",
+    "@vscode/markdown-it-katex": "^1.1.2",
     "ajv": "^8.17.1",
     "chokidar": "^4.0.0",
     "culori": "^4.0.2",
@@ -38,6 +39,7 @@
     "front-matter": "^4.0.2",
     "java-parser": "^3.0.1",
     "jsdom": "^26.1.0",
+    "katex": "^0.16.40",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",

package/{templates → schema}/nav.schema.json

@@ -14,8 +14,7 @@
             "text": { "type": "string" },
             "internal": { "type": "string", "pattern": "^\\/.*$" },
             "external": { "type": "string", "pattern": "^https?:\\/\\/.*$" },
-            "disabled": { "type": "boolean" },
-            "keywords": { "type": "array", "items": { "type": "string" } }
+            "disabled": { "type": "boolean" }
           },
           "oneOf": [{ "required": ["internal"] }, { "required": ["external"] }],
           "additionalProperties": false

package/{build → schema}/site.schema.json

@@ -1,6 +1,6 @@
 {
   "type": "object",
-  "required": ["defaultTimeZone"],
+  "required": ["base", "title", "defaultTimeZone", "themeColor"],
   "properties": {
     "features": {
       "type": "object",
@@ -27,7 +27,6 @@
     "title": { "type": "string" },
     "symbol": { "type": "string", "pattern": "^[A-Z0-9\\- ]{1,5}$" },
     "titlePostfix": { "type": "string" },
-    "courseId": { "type": "string" },
     "themeColor": { "type": "string" },
     "tintHue": {
       "type": "integer",

package/src/_alerts.scss

@@ -40,6 +40,10 @@
 
   a {
     text-decoration-color: var(--fg-color);
+
+    &:hover {
+      text-decoration-color: inherit;
+    }
   }
 
   dfn {

package/src/_base.scss

@@ -74,8 +74,21 @@ html {
 a {
   color: var(--fg-color);
   text-decoration-color: var(--fg2-color);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
+  text-decoration-thickness: 1.5px;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--fg2-color);
+    }
+  }
+}
+
+a:active {
+  color: var(--link-active-color);
+
+  @media (hover: hover) {
+    text-decoration-color: var(--link-active-color);
+  }
 }
 
 pre,
@@ -104,3 +117,29 @@ pre {
     padding: 0;
   }
 }
+
+input[type='text'],
+input[type='search'] {
+  background: var(--bg-color);
+  color: var(--fg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: var(--border-radius);
+  font-size: 12pt;
+  padding: 4px 4px;
+}
+
+input[type='search'] {
+  background-color: var(--bg-color);
+  background-image: var(--icon-search);
+  background-repeat: no-repeat;
+  background-position: left 6px center;
+  background-size: 16px 16px;
+  padding-left: 2rem;
+  border-radius: 18px;
+  min-width: 0;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}

package/src/_layout.scss

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 :root {
   --toc-width: 260px;
 }
@@ -8,6 +10,7 @@ html {
   overflow-y: auto;
   scroll-padding-top: calc(var(--header-collapsed-height) + var(--gap));
 }
+
 body {
   margin: 0;
   padding: 0;
@@ -132,6 +135,40 @@ body.literate main table {
   }
 }
 
+.info {
+  @include user-select(none);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  color: var(--fg2-color);
+  font-size: var(--font-size-smaller);
+
+  @media (width < 450px) {
+    grid-template-columns: 1fr;
+  }
+
+  aside.author {
+    a {
+      text-decoration: none;
+
+      .text {
+        color: var(--fg2-color);
+        text-decoration: underline;
+        text-decoration-color: var(--fg2-color);
+        text-decoration-thickness: 1px;
+        text-underline-offset: 3px;
+      }
+    }
+
+    .avatar {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+      margin-left: 4px;
+    }
+  }
+}
+
 .columns {
   display: grid;
   grid-template-columns: max-content auto;

package/src/anchor/index.ts

@@ -17,7 +17,6 @@ export default (window: Window) => {
     link.className = 'heading-anchor';
     link.href = `#${el.id}`;
     link.title = 'Link to this heading';
-    link.setAttribute('aria-label', 'Link to this heading');
 
     // Move all existing child nodes into the link
     while (el.firstChild) {

package/src/index.ts

@@ -18,7 +18,7 @@ import mountPrint from './print';
 import mountTop from './top';
 import mountAnchor from './anchor';
 import mountQuestion from './question';
-import mountTimezone from './timezone';
+import mountTimeZone from './timezone';
 import mountCode from './code';
 
 import { scheduleTask, formatDuration } from './util';
@@ -31,7 +31,7 @@ const COMPONENTS = {
   top: mountTop,
   anchor: mountAnchor,
   question: mountQuestion,
-  timezone: mountTimezone,
+  timeZone: mountTimeZone,
   code: mountCode,
 };
 
@@ -65,7 +65,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     console.error(`Failed to mount ${name} component:`, reason);
   }
 
-  if (window.IS_DEV) {
+  if (__IS_DEV__) {
     const diff = window.performance.now() - startTime;
     console.info(`Components mounted in ${formatDuration(diff)}`);
   }