@abreen/tada 1.0.2 → 1.1.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@abreen/tada",
-  "version": "1.0.2",
+  "version": "1.1.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/",
@@ -18,20 +20,20 @@
     "tsconfig.json"
   ],
   "scripts": {
-    "format": "bunx prettier --write \"**/*.(t|j)s\" \"**/*.scss\" \"**/*.json\"",
-    "init-example": "bun run bin/tada.js init example --default"
+    "prepare": "husky",
+    "init-example": "bun run bin/tada.ts init example --default",
+    "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"
   },
   "engines": {
     "bun": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
     "@tsconfig/node23": "^23.0.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",
@@ -42,29 +44,36 @@
     "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/src/_alerts.scss

@@ -0,0 +1,92 @@
+@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);
+  }
+
+  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,106 @@
+: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: 1px;
+  text-underline-offset: 3px;
+}
+
+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;
+  }
+}

package/src/{layout.scss → _layout.scss}

@@ -1,5 +1,3 @@
-@import './_mixins.scss';
-
 :root {
   --toc-width: 260px;
 }

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;
+    }
+  }
+}

package/src/header/style.scss

@@ -1,45 +1,5 @@
-@import '../_mixins.scss';
-
-: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;
-  }
-}
+@use '../mixins' as *;
+@use 'base';
 
 header nav {
   display: flex;
@@ -99,28 +59,6 @@ header nav div > p {
   padding-bottom: 2px;
 }
 
-header details summary::-webkit-details-marker {
-  display: none;
-}
-
-header details summary::marker {
-  content: '';
-}
-
-header summary::after {
-  order: -1;
-  height: 24px;
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 8% 8%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  margin-left: var(--gap);
-  margin-right: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  header summary::after {
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 20% 90%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  }
-}
-
 @media (hover: hover) {
   header details summary:hover:not(:has(.results-container:hover)) {
     background: var(--bg2-color);
@@ -131,74 +69,8 @@ header summary::after {
   }
 }
 
-header details[open] summary::after {
-  transform: rotate(90deg);
-}
-
-header .content {
-  position: relative;
-}
-
-header summary .logo {
-  flex: 0 0 auto;
-  color: #fff;
-  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;
-  }
-}
-
-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;
-    }
-  }
-}
-
 header .results-container {
+  display: block;
   position: absolute;
   top: var(--header-collapsed-height);
   left: 0;

package/src/index.ts

@@ -1,5 +1,4 @@
 import './style.scss';
-import './layout.scss';
 
 import './anchor/style.scss';
 import './code.scss';
@@ -43,7 +42,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   const entries = Object.entries(COMPONENTS);
 
-  const failed: Record<string, any> = {};
+  const failed: Record<string, string> = {};
 
   const mountPromises = entries.map(([name, mount]) => {
     return new Promise<void>((resolve, reject) => {

package/src/question/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 .question {
   margin-bottom: 2rem;