@abreen/tada 1.1.0 → 1.3.1

package/init/content/labs/00/VowelCounter.java.md

@@ -0,0 +1,129 @@
+parent: /labs/00/index.html
+parentLabel: Lab 0
+title: Counting vowels
+author: alex
+description: An example of a literate Java program that takes predefined input.
+stdin: "hello, world!\n"
+
+A Java program can process input in different ways: it could open a file and
+read it; it could open a network connection and wait for data from another
+computer on the Internet, or it can read from the standard in.
+
+The <dfn>standard in</dfn> (or `stdin`) is one of three streams available to a
+running program. The other two streams are the standard out and standard error.
+
+<figure>
+<svg viewBox="0 50 410 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:410px">
+  <defs>
+    <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
+      <path d="M0,0 L8,4 L0,8 Z" stroke="currentColor" fill="currentColor"></path>
+    </marker>
+  </defs>
+  <!-- Java program box -->
+  <rect x="155" y="60" width="100" height="60" stroke-width="2" stroke="currentColor"></rect>
+  <text x="205" y="95" text-anchor="middle" fill="currentColor">Program</text>
+  <!-- stdin arrow (incoming from left) -->
+  <path d="M20 90H143" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="80" y="82" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stdin</text>
+  <!-- stdout arrow (outgoing, upper right) -->
+  <path d="M267 75H390" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="328" y="67" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stdout</text>
+  <!-- stderr arrow (outgoing, lower right) -->
+  <path d="M267 105H390" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="328" y="125" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stderr</text>
+</svg>
+<figcaption>
+A running Java program (depicted as a box) with the standard in stream as an
+incoming arrow and the standard out & error streams as outgoing arrows.
+</figcaption>
+</figure>
+
+When a Java program calls `System.out.print()` (or `IO.print()`), the program
+sends data to the standard out. When a program uses `System.err.print()`, it
+sends data to the standard error, an output stream similar to `System.out`
+but reserved for error messages.
+
+`System.in` is an `InputStream` object that allows a program to read characters
+from the standard input, one character at a time. Its `read()` method returns an
+integer value.
+
+- If the integer is positive, it represents a Unicode character coming through
+  the stream.
+- If the integer is -1, there is no more input in the stream.
+
+The -1 is known as a <dfn>sentinel</dfn>, or a reserved value known ahead of
+time to represent a specific condition. Because all Unicode characters are
+positive numbers, -1 cannot be converted to a character, and is instead used
+to represent the specific condition of "*no more input in the stream*."
+
+Let's implement a program that uses `System.in.read()` to get all the characters
+from the standard in, counting how many characters are vowels. When there are
+no more characters in the stream, the program prints the total number of vowels.
+
+<!---
+Hiding the method signature for main() keeps us focused on the program's logic,
+and avoids discussion of IOException.
+```
+void main() throws Exception {
+```
+-->
+
+We'll start the program with a `numVowels` counter initialized to zero,
+the additive identity, and a second integer variable `ch` used to store the
+return value of the `read()` method:
+
+```
+    int numVowels = 0;
+    int ch;
+```
+
+Using an indefinite loop (since we don't know in advance how many characters
+we'll get), we call the `read()` method and check if it returned the sentinel:
+
+```
+    while (true) {
+        ch = System.in.read();
+        if (ch == -1) {
+            break;
+        }
+```
+
+If `read()` returns the sentinel, we stop the loop with `break`. Otherwise,
+we test whether `ch` is a vowel:
+
+```
+        if ("aeiouAEIOU".indexOf(ch) >= 0) {
+            numVowels++;
+        }
+```
+
+<!---
+Hide the closing brace of the `while` loop to avoid indenting the conditional.
+```
+    }
+```
+-->
+
+Putting lower case and upper case vowels into a `String` allows us to use the
+`indexOf()` method to check if `ch` is one of those characters. If `ch` is
+nowhere in the string, `indexOf()` returns -1.
+
+When reading input from a terminal, the loop ends when the user presses
+<kbd>Ctrl</kbd>+<kbd>D</kbd> on the keyboard. If we type the input
+
+```text
+hello, world!
+```
+
+Then the last line of the program, which prints the total count, will output 3:
+
+```
+    IO.println("vowels: " + numVowels);
+```
+
+<!---
+Hiding the closing brace for main().
+```
+}
+```
+-->

package/init/content/labs/00/index.md

@@ -0,0 +1,29 @@
+parent: /labs/index.html
+parentLabel: Labs
+title: Lab 0
+author: alex
+description: An example lab page for <%= site.title %>.
+
+In this lab, we'll explore the [`VowelCounter` program](./VowelCounter.html).
+
+## Review questions
+
+??? question What is an input stream?
+
+An input stream is an abstraction that represents arbitrary data going into a
+program. The data in a stream doesn't have a predefined size or length.
+When you write a program that uses an input stream, the program may wait for
+more data.
+
+???
+
+??? question What is a sentinel? Provide an example.
+
+A sentinel is a special value a program uses to change its behavior.
+For example, `System.in.read()` returns -1 when the standard in stream doesn't
+have any more characters.
+
+Another example: the character `'q'` might be reserved to indicate a command
+like "quit." When a user presses <kbd>Q</kbd>, the program exits.
+
+???

package/init/content/labs/index.md

@@ -0,0 +1,9 @@
+title: Labs
+author: alex
+description: An example page for <%= site.title %>.
+
+In each one-hour lab, we'll dive deeper and write code together, exploring how
+to apply the concepts we learned in lecture to solve real-world problems and
+write full-length programs.
+
+0. [`VowelCounter` and user input](/labs/00/index.html)

package/{content → init/content}/lectures/01/Pair.java.md

@@ -1,5 +1,6 @@
 title: A generic `Pair` class
 author: alex
+description: An example of a literate Java program.
 
 <!---
 You may hide code from the generated HTML page but still include it in the

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,9 +1,14 @@
 {
   "name": "@abreen/tada",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abreen/Tada.git"
+  },
+  "author": "Alex Breen <npm@abreen.email>",
   "bin": {
     "tada": "bin/tada.ts"
   },
@@ -13,24 +18,30 @@
     "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",
+    "prepack": "bun run scripts/prepack.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"
   },
+  "os": [
+    "darwin",
+    "linux"
+  ],
   "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 +49,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,16 +1,15 @@
 {
   "type": "object",
-  "required": ["defaultTimeZone"],
+  "required": ["base", "title", "defaultTimeZone", "themeColor"],
   "properties": {
     "features": {
       "type": "object",
-      "default": { "search": true, "code": true },
+      "default": { "search": true, "code": true, "favicon": true },
       "properties": {
         "search": { "type": "boolean", "default": true },
         "code": { "type": "boolean", "default": true },
-        "favicon": { "type": "boolean", "default": false }
+        "favicon": { "type": "boolean", "default": true }
       },
-      "required": ["search", "code", "favicon"],
       "additionalProperties": false
     },
     "base": { "type": "string", "pattern": "^https?:\\/\\/[-.:a-zA-Z0-9]+$" },
@@ -27,7 +26,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

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 :root {
   --box-border-width: 5px;
 
@@ -13,10 +15,6 @@
   --main-width: 900px;
 }
 
-p {
-  margin: 0 0 1rem 0;
-}
-
 h1,
 h2,
 h3,
@@ -74,8 +72,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 +115,76 @@ pre {
     padding: 0;
   }
 }
+
+details .content > *:first-child {
+  margin-top: 0;
+}
+
+details .content > *:last-child {
+  margin-bottom: 0;
+}
+
+details summary {
+  cursor: pointer;
+  @include user-select(none);
+  padding: var(--details-padding);
+}
+
+details .content {
+  padding: 0 var(--details-padding) var(--details-padding)
+    var(--details-padding);
+}
+
+@media (hover: hover) {
+  details summary {
+    &:hover {
+      color: var(--fg2-color);
+    }
+
+    &:active {
+      color: var(--link-active-color);
+    }
+  }
+}
+
+main details {
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius);
+  border: 2px solid var(--fg-color);
+}
+
+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;
+  }
+}
+
+figure {
+  margin: 1rem 0;
+
+  figcaption {
+    margin: 0 3rem;
+    font-size: var(--font-size-smaller);
+    color: var(--fg2-color);
+  }
+}

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;
@@ -49,7 +52,7 @@ body.literate main table {
   width: 100%;
 }
 
-@media (max-width: 899px) {
+@media (width < 900px) {
   .toc-is-active .main-content {
     display: flex;
     flex-direction: column;
@@ -78,7 +81,7 @@ body.literate main table {
   }
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   body.default main table,
   body.literate main table {
     width: auto;
@@ -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)}`);
   }

package/src/question/style.scss

@@ -35,8 +35,7 @@
   @include user-select(none);
 }
 
-.question-a-body > ol:first-child,
-.question-a-body > ul:first-child {
+.question-a-body > *:first-child {
   margin-top: 0;
 }
 
@@ -49,19 +48,25 @@
   @media (prefers-reduced-motion: no-preference) {
     transition:
       color 0.25s,
-      background-color 0.25s;
+      background-color 0.25s,
+      border-color 0.25s,
+      box-shadow 0.25s;
   }
 }
 
 .question-a-body:not([data-revealed]) > * {
   color: transparent;
   background-color: var(--bg2-color);
+  border-color: transparent;
+  box-shadow: none;
   pointer-events: none;
 }
 
 .question-a-body:not([data-revealed]) > * * {
   color: transparent;
   background-color: var(--bg2-color);
+  border-color: transparent;
+  box-shadow: none;
 }
 
 .question-a-body::after {