@abreen/tada 1.0.2 → 1.2.0

package/package.json

@@ -1,70 +1,81 @@
 {
   "name": "@abreen/tada",
-  "version": "1.0.2",
+  "version": "1.2.0",
+  "type": "module",
   "description": "A static site generator",
+  "license": "MIT",
   "bin": {
-    "tada": "bin/tada.js"
+    "tada": "bin/tada.ts"
   },
   "files": [
     "bin/",
-    "webpack/",
+    "build/",
     "src/",
     "templates/",
     "fonts/",
-    "config/",
-    "content/",
-    "public/",
+    "init/",
+    "schema/",
     "types/",
     "tsconfig.json"
   ],
   "scripts": {
-    "format": "bunx prettier --write \"**/*.(t|j)s\" \"**/*.scss\" \"**/*.json\"",
-    "init-example": "bun run bin/tada.js 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 --durations=10",
+    "test:all": "bun test && bun run test:functional"
   },
   "engines": {
     "bun": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
     "@tsconfig/node23": "^23.0.2",
+    "@vscode/markdown-it-katex": "^1.1.2",
     "ajv": "^8.17.1",
-    "babel-loader": "^10.0.0",
-    "copy-webpack-plugin": "^13.0.1",
-    "css-loader": "^7.1.2",
+    "chokidar": "^4.0.0",
+    "culori": "^4.0.2",
     "fontkit": "^2.0.4",
     "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",
     "markdown-it-container": "^4.0.0",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
-    "mini-css-extract-plugin": "^2.9.4",
     "pagefind": "^1.4.0",
     "png-to-ico": "^3.0.1",
     "quote-quote": "^1.2.0",
     "sass": "^1.91.0",
-    "sass-loader": "^16.0.5",
     "sharp": "^0.34.5",
     "shiki": "^4.0.1",
     "string-strip-html": "^8.5.0",
-    "terser-webpack-plugin": "^5.3.14",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.4.5",
-    "wawoff2": "^2.0.1",
-    "webpack": "^5.99.6",
-    "webpack-cli": "^6.0.1",
     "ws": "^8.18.0"
   },
+  "lint-staged": {
+    "*.{ts,js}": "prettier --write",
+    "*.scss": "prettier --write",
+    "*.json": "prettier --write"
+  },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.43.0",
     "@types/bun": "^1.3.10",
+    "@types/culori": "^4.0.1",
     "@types/fontkit": "^2.0.8",
+    "@types/lodash": "^4.17.24",
+    "@types/markdown-it-container": "^4.0.0",
+    "@types/ws": "^8.18.1",
+    "eslint": "^10.0.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
     "prettier": "^3.6.2",
     "prettier-plugin-curly": "^0.4.1",
-    "rimraf": "^6.1.3"
+    "rimraf": "^6.1.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^8.57.1"
   }
 }

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/{webpack → schema}/site.schema.json

@@ -1,6 +1,6 @@
 {
   "type": "object",
-  "required": ["defaultTimeZone"],
+  "required": ["base", "title", "defaultTimeZone", "themeColor"],
   "properties": {
     "features": {
       "type": "object",
@@ -8,8 +8,7 @@
       "properties": {
         "search": { "type": "boolean", "default": true },
         "code": { "type": "boolean", "default": true },
-        "favicon": { "type": "boolean", "default": false },
-        "literateJava": { "type": "boolean", "default": false }
+        "favicon": { "type": "boolean", "default": false }
       },
       "required": ["search", "code", "favicon"],
       "additionalProperties": false
@@ -28,11 +27,7 @@
     "title": { "type": "string" },
     "symbol": { "type": "string", "pattern": "^[A-Z0-9\\- ]{1,5}$" },
     "titlePostfix": { "type": "string" },
-    "courseId": { "type": "string" },
-    "themeColor": {
-      "type": "string",
-      "pattern": "^hsl\\(\\d+(deg)? \\d+% \\d+%\\)$"
-    },
+    "themeColor": { "type": "string" },
     "tintHue": {
       "type": "integer",
       "minimum": 0,
@@ -45,10 +40,7 @@
       "maximum": 100,
       "default": 100
     },
-    "faviconColor": {
-      "type": "string",
-      "pattern": "^hsl\\(\\d+(deg)? \\d+% \\d+%\\)$"
-    },
+    "faviconColor": { "type": "string" },
     "faviconSymbol": { "type": "string", "pattern": "^[A-Z0-9\\- ]{1,5}$" },
     "faviconFontWeight": {
       "type": "integer",

package/src/_alerts.scss

@@ -0,0 +1,96 @@
+@use 'mixins' as *;
+
+.alert {
+  border: 3px solid var(--bg2-color);
+  position: relative;
+  margin: 1rem 0;
+}
+
+.alert.warning {
+  background: var(--warning-bg-color);
+  border-color: var(--warning-bg-color);
+}
+
+.alert.note {
+  background: var(--note-bg-color);
+  border-color: var(--note-bg-color);
+}
+
+.alert .title {
+  padding: 10px 6px;
+}
+
+.alert .content {
+  padding: 12px;
+
+  .styled-list {
+    color: var(--fg-color);
+  }
+
+  tt,
+  code {
+    background: inherit;
+    padding: inherit;
+  }
+
+  time[datetime].is-modified {
+    // Reset the underline color
+    text-decoration: underline dotted;
+  }
+
+  a {
+    text-decoration-color: var(--fg-color);
+
+    &:hover {
+      text-decoration-color: inherit;
+    }
+  }
+
+  dfn {
+    color: inherit;
+  }
+}
+
+.alert .content > *:first-child {
+  margin-top: 0;
+}
+
+.alert .content > *:last-child {
+  margin-bottom: 0;
+}
+
+.alert .title::before {
+  left: 8px;
+  top: 8px;
+  position: absolute;
+  width: 32px;
+  height: 32px;
+}
+
+.alert.warning .title::before {
+  content: var(--icon-warning);
+}
+
+i.warning {
+  background: var(--icon-warning);
+  background-size: contain;
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: sub;
+}
+
+.alert.note .title::before {
+  content: var(--icon-note);
+}
+
+.alert .title {
+  font-weight: 700;
+  @include user-select(none);
+  padding-left: 48px;
+  margin: 0;
+}
+
+.alert > p:last-child {
+  margin-bottom: 0;
+}

package/src/_base.scss

@@ -0,0 +1,145 @@
+:root {
+  --box-border-width: 5px;
+
+  --gap: 12px;
+  --border-radius: 12px;
+  --control-border-width: 2px;
+  --label-border-width: 2px;
+  --focus-border-width: 3px;
+  --table-padding: 12px;
+  --details-padding: 12px;
+  --section-padding: 64px;
+
+  --main-width: 900px;
+}
+
+p {
+  margin: 0 0 1rem 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--heading-font);
+  -webkit-break-after: avoid;
+  break-after: avoid;
+  line-height: 1.3;
+
+  /*
+   * Enable Inter's features:
+   * ss03 - round quotes & commas
+   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
+   * dlig - discretionary ligatures (for style)
+   */
+  font-feature-settings: 'ss03', 'ss04', 'dlig';
+}
+
+h1 {
+  font-size: 250%;
+  font-weight: 700;
+}
+
+body {
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+
+  font-family: var(--font);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+
+  /*
+   * Enable Inter's features for legibility:
+   * ss03 - round quotes & commas
+   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
+   */
+  font-feature-settings: 'ss03', 'ss04';
+
+  @media (prefers-color-scheme: dark) {
+    & {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+}
+
+html {
+  overscroll-behavior: none;
+  background: var(--bg-color);
+}
+
+a {
+  color: var(--fg-color);
+  text-decoration-color: var(--fg2-color);
+  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,
+tt,
+code {
+  font-family: var(--mono-font);
+}
+
+tt,
+code {
+  font-size: var(--mono-font-size);
+  background: var(--bg2-color);
+  border-radius: var(--mono-border-radius);
+  padding: 0.12em 0.25em;
+  overflow-wrap: anywhere;
+}
+
+pre {
+  background: var(--bg2-color);
+  border-radius: var(--mono-border-radius);
+  line-height: var(--mono-line-height);
+  overflow: auto;
+  padding: var(--gap);
+
+  code {
+    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 → _layout.scss}

@@ -1,4 +1,4 @@
-@import './_mixins.scss';
+@use 'mixins' as *;
 
 :root {
   --toc-width: 260px;
@@ -10,6 +10,7 @@ html {
   overflow-y: auto;
   scroll-padding-top: calc(var(--header-collapsed-height) + var(--gap));
 }
+
 body {
   margin: 0;
   padding: 0;
@@ -134,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/anchor/style.scss

@@ -1,5 +1,3 @@
-@import '../_mixins.scss';
-
 .heading-anchor {
   position: relative;
   display: inline-block;
@@ -8,7 +6,7 @@
 }
 
 .heading-anchor::after {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="hsl(20 8% 8%)" fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z"/></svg>');
+  content: var(--icon-anchor);
   display: inline-block;
   height: 0.75em;
   width: 0.75em;
@@ -16,12 +14,6 @@
   opacity: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .heading-anchor::after {
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="hsl(20 20% 90%)" fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z"/></svg>');
-  }
-}
-
 .heading-anchor:focus::after,
 .heading-anchor:focus-visible::after {
   opacity: 1;

package/src/code/index.ts

@@ -60,15 +60,15 @@ export default async function mount(window: Window): Promise<void> {
     downloadLink.addEventListener('click', async (e: MouseEvent) => {
       e.preventDefault();
       try {
-        const handle = await (window as any).showSaveFilePicker({
+        const handle = await window.showSaveFilePicker!({
           suggestedName: downloadLink.download,
         });
         const response = await fetch(downloadLink.href);
         const writable = await handle.createWritable();
         await writable.write(await response.blob());
         await writable.close();
-      } catch (err: any) {
-        if (err.name !== 'AbortError') {
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name !== 'AbortError') {
           throw err;
         }
       }

package/src/code.scss

@@ -1,4 +1,4 @@
-@import './_mixins.scss';
+@use 'mixins' as *;
 
 body.code,
 body.literate {

package/src/critical.scss

@@ -0,0 +1,5 @@
+@use 'config/theme';
+@use 'base';
+@use 'layout';
+@use 'alerts';
+@use 'header/base' as *;

package/src/header/_base.scss

@@ -0,0 +1,129 @@
+:root {
+  --header-collapsed-height: 45px;
+}
+
+header {
+  backdrop-filter: var(--backdrop-filter);
+  background: var(--bg-color-translucent);
+
+  width: 100%;
+  position: fixed;
+  top: 0;
+
+  z-index: 1000;
+
+  display: grid;
+  grid-template-columns: 1fr;
+
+  view-transition-name: site-header;
+}
+
+header details summary {
+  display: flex;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  padding: 0;
+  list-style-type: none;
+  cursor: pointer;
+  position: relative;
+  container-type: inline-size;
+
+  @media (hover: hover) {
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
+header details summary::-webkit-details-marker {
+  display: none;
+}
+
+header details summary::marker {
+  content: '';
+}
+
+header summary::after {
+  order: -1;
+  height: 24px;
+  content: var(--icon-chevron);
+  margin-left: var(--gap);
+  margin-right: 8px;
+}
+
+header details[open] summary::after {
+  transform: rotate(90deg);
+}
+
+header .content {
+  position: relative;
+}
+
+header summary .logo {
+  flex: 0 0 auto;
+  color: var(--text-on-theme);
+  background: var(--theme-color);
+  padding: 1px 6px;
+  margin: 0 8px 0 0;
+  font-size: var(--font-size-smaller);
+  font-weight: 600;
+  pointer-events: none;
+}
+
+header summary .site-title {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-weight: 500;
+  pointer-events: none;
+  margin: 0 8px 0 0;
+}
+
+@container (max-width: 520px) {
+  header summary .site-title {
+    display: none;
+  }
+}
+
+header summary .to-top-container {
+  display: none;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  pointer-events: none;
+  white-space: nowrap;
+
+  &:has(.is-visible) {
+    display: flex;
+    pointer-events: auto;
+  }
+}
+
+// Hide until the full stylesheet loads (prevents FOUC where the container
+// is visible as a block element before it gets position: absolute)
+header .results-container {
+  display: none;
+}
+
+header summary .search-controls {
+  margin-left: auto;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  padding: 0 var(--gap);
+  min-width: 0;
+
+  input.search {
+    width: 180px;
+
+    @container (max-width: 280px) {
+      display: none;
+    }
+  }
+}