@abreen/tada 1.16.5 → 1.16.7

package/README.md

@@ -216,6 +216,11 @@ Example site configuration YAML file:
 ```yaml
 title: Intro to Computer Science
 titlePostfix: " - CS 0"
+banner: |
+  The semester is now closed. Final grades will become available on
+  [Gradescope](https://example.org/course/12345) on December 30.
+
+  This site is an archive. This is how the site appeared on December 27, 2020.
 symbol: CS 0
 themeColor: hsl(351 70% 40%)
 tintAmount: 0
@@ -238,6 +243,7 @@ fontOverrides:
 features:
   search: true
   favicon: true
+  pickers: true
 base: https://example.edu
 basePath: /cs0
 internalDomains:
@@ -257,6 +263,7 @@ vars:
 |-------|-------------|
 | `title` | Title for the whole site (also used to derive `titlePostfix`) |
 | `titlePostfix` | *Optional*, the string to append to each page's `title` |
+| `banner` | *Optional*, Markdown rendered in a bordered box above every page |
 | `symbol` | Text (1-5 chars) displayed in header (also used as the favicon symbol) |
 | `themeColor` | Theme color for the site (e.g., `"tomato"`, `"#c04040"`, `"hsl(195 70% 40%)"`) |
 | `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `20`) |
@@ -268,6 +275,7 @@ vars:
 | `features.search` | Enable search UI and Pagefind index generation |
 | `features.favicon` | Enable automatically generated favicons |
 | `features.footer` | Show the Tada footer at the bottom of every page |
+| `features.pickers` | Show the font and contrast pickers at the bottom of every page (default `true`) |
 | `base` | Full base URL of the deployed site, used for metadata and URL generation |
 | `basePath` | URL prefix for deployment under a subpath (e.g., `"/cs101"`), use `"/"` at root |
 | `internalDomains` | Domain names treated as internal by link processing (not marked external) |

package/bin/tada.ts

@@ -340,7 +340,7 @@ async function initCommand(args: string[]): Promise<void> {
     base: 'http://localhost:8080',
     basePath: '/',
     internalDomains: ['localhost'],
-    features: { search: true, favicon: false, footer: true },
+    features: { search: true, favicon: false, footer: true, pickers: true },
     extensionToShikiLanguage: bare ? {} : { java: 'java', py: 'python' },
     shikiLanguages: bare ? [] : ['java', 'python', 'html'],
   });
@@ -355,7 +355,7 @@ async function initCommand(args: string[]): Promise<void> {
     base: prodBase,
     basePath: prodBasePath,
     internalDomains: [prodDomain],
-    features: { search: true, favicon: true, footer: true },
+    features: { search: true, favicon: true, footer: true, pickers: true },
     extensionToShikiLanguage: bare ? {} : { java: 'java', py: 'python' },
     shikiLanguages: bare ? [] : ['java', 'python', 'html'],
   });

package/bin/validators.ts

@@ -49,8 +49,8 @@ export function validateUrl(value: string): string | null {
 }
 
 export function validateBasePath(value: string): string | null {
-  if (!/^\/[-a-zA-Z0-9]*$/.test(value)) {
-    return 'Must start with / and contain only letters, digits, and hyphens';
+  if (!/^\/(?:[-a-zA-Z0-9]+(?:\/[-a-zA-Z0-9]+)*)?$/.test(value)) {
+    return 'Must start with / and contain path segments made of letters, digits, and hyphens';
   }
   return null;
 }

package/build/site-variables.ts

@@ -14,7 +14,7 @@ const DEFAULT: Partial<SiteVariables> = {
   basePath: '/',
   defaultFont: 'sans',
   defaultContrast: 'standard',
-  features: { search: true, favicon: true, footer: true },
+  features: { search: true, favicon: true, footer: true, pickers: true },
 };
 
 const isValid = compileJsonSchema(siteSchema);

package/build/types.d.ts

@@ -37,6 +37,7 @@ export interface SiteVariables {
   basePath: string;
   title: string;
   titlePostfix: string;
+  banner?: string;
   symbol?: string;
   faviconSymbol?: string;
   themeColor: string;
@@ -62,6 +63,7 @@ export type FeatureConfig = {
   search: boolean;
   favicon: boolean;
   footer: boolean;
+  pickers: boolean;
 };
 
 /** A rendered content asset ready to write to dist/ */

package/build/utils/render.ts

@@ -90,6 +90,7 @@ interface TemplateParametersInput {
   content: string | null;
   subPath: string;
   isWatchMode: boolean;
+  bannerHtml?: string;
 }
 
 function resolveAuthor(
@@ -141,6 +142,7 @@ function createTemplateParameters({
   content,
   subPath,
   isWatchMode,
+  bannerHtml,
 }: TemplateParametersInput): Record<string, unknown> {
   const applyBasePath = createApplyBasePath(siteVariables);
   return {
@@ -149,12 +151,21 @@ function createTemplateParameters({
     site: siteVariables,
     page: pageVariables,
     content,
+    bannerHtml,
     isWatchMode,
     speculationRulesHrefMatches: `${applyBasePath('/')}*`,
     tadaVersion,
   };
 }
 
+function renderSiteBanner(siteVariables: SiteVariables): string {
+  if (!siteVariables.banner) {
+    return '';
+  }
+
+  return createMarkdown(siteVariables).render(siteVariables.banner);
+}
+
 export function injectAssetTags(
   html: string,
   assetFiles: string[],
@@ -290,6 +301,7 @@ export function renderPlainTextPageAsset({
     content,
     subPath,
     isWatchMode: watchMode,
+    bannerHtml: renderSiteBanner(siteVariables),
   });
 
   const templateHtml = render(
@@ -371,6 +383,7 @@ export function renderCodePageAsset({
     content,
     subPath,
     isWatchMode: isWatchMode(assetFiles),
+    bannerHtml: renderSiteBanner(siteVariables),
   });
 
   const templateHtml = render('code.html', templateParameters) as string;
@@ -714,6 +727,7 @@ export function renderLiterateJavaPageAsset({
     content: contentHtml,
     subPath,
     isWatchMode: isWatchMode(assetFiles),
+    bannerHtml: renderSiteBanner(siteVariables),
   });
 
   const templateHtml = render('literate.html', templateParameters) as string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.5",
+  "version": "1.16.7",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/schema/site.schema.json

@@ -4,11 +4,17 @@
   "properties": {
     "features": {
       "type": "object",
-      "default": { "search": true, "favicon": true, "footer": true },
+      "default": {
+        "search": true,
+        "favicon": true,
+        "footer": true,
+        "pickers": true
+      },
       "properties": {
         "search": { "type": "boolean", "default": true },
         "favicon": { "type": "boolean", "default": true },
-        "footer": { "type": "boolean", "default": true }
+        "footer": { "type": "boolean", "default": true },
+        "pickers": { "type": "boolean", "default": true }
       },
       "additionalProperties": false
     },
@@ -16,7 +22,7 @@
     "basePath": {
       "type": "string",
       "default": "/",
-      "pattern": "^\\/[-a-zA-Z0-9]*?$"
+      "pattern": "^\\/(?:[-a-zA-Z0-9]+(?:\\/[-a-zA-Z0-9]+)*)?$"
     },
     "internalDomains": {
       "type": "array",
@@ -24,6 +30,7 @@
       "items": { "type": "string", "pattern": "^[-.:a-zA-Z0-9]+$" }
     },
     "title": { "type": "string" },
+    "banner": { "type": "string" },
     "symbol": { "type": "string", "pattern": "^[A-Z0-9\\- ]{1,5}$" },
     "titlePostfix": { "type": "string" },
     "themeColor": { "type": "string" },

package/src/_alerts.scss

@@ -102,3 +102,10 @@ i.warning {
 .alert > p:last-child {
   margin-bottom: 0;
 }
+
+.site-banner {
+  color: var(--fg2-color);
+  background: none;
+  border: 1px solid var(--fg2-color);
+  border-radius: var(--border-radius);
+}

package/src/navigate/style.scss

@@ -42,6 +42,23 @@ $duration: 150ms;
   animation-duration: $duration;
 }
 
+// The site-wide banner does not change between pages. Keep it out of the root
+// slide and pin its named transition layer in place without a crossfade.
+.site-banner {
+  view-transition-name: site-banner;
+}
+
+::view-transition-group(site-banner),
+::view-transition-old(site-banner),
+::view-transition-new(site-banner) {
+  animation: none;
+}
+
+::view-transition-old(site-banner),
+::view-transition-new(site-banner) {
+  mix-blend-mode: normal;
+}
+
 // Forward navigation: old content slides left, new content slides in from right
 .nav-forward::view-transition-old(root) {
   animation: slide-out-left $duration ease-in;

package/src/search/index.ts

@@ -598,6 +598,7 @@ export default (window: Window) => {
   window.addEventListener('pointermove', handleWindowPointerMove);
   window.addEventListener('keydown', handleWindowKeyDown);
   window.addEventListener(PAGE_UPDATE_REFRESH_EVENT, handlePageUpdateRefresh);
+  input.disabled = false;
 
   return () => {
     window.removeEventListener(

package/templates/_appearance-picker.html

@@ -1,3 +1,4 @@
+<% if (site.features.pickers) { %>
 <div class="appearance-pickers" data-pagefind-ignore>
   <div class="preference-picker font-picker" role="group" aria-label="Font style">
     <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="<%= site.defaultFont === 'sans' %>" disabled>
@@ -16,3 +17,4 @@
     </button>
   </div>
 </div>
+<% } %>

package/templates/_top.html

@@ -117,7 +117,6 @@
                  aria-expanded="false"
                  aria-controls="quick-search-results"
                  disabled />
-          <script>document.currentScript.previousElementSibling.disabled=false;</script>
         </div>
         <% } %>
       </div>
@@ -137,3 +136,8 @@
       </details>
     </header>
     <div class="container">
+      <% if (site.banner) { %>
+      <aside class="site-banner alert" data-pagefind-ignore>
+        <div class="content"><%= bannerHtml %></div>
+      </aside>
+      <% } %>