andy-note-nuxt 0.3.0 → 0.4.1

package/app/assets/css/main.css

@@ -6,16 +6,55 @@
  * ================================================================= */
 
 /* Fonts — @import MUST precede @tailwind directives per CSS spec.
-   Local @fontsource packages = self-host (no FOUT, no third-party request). */
-@import "@fontsource/space-grotesk/300.css";
-@import "@fontsource/space-grotesk/400.css";
-@import "@fontsource/space-grotesk/500.css";
-@import "@fontsource/space-grotesk/600.css";
-@import "@fontsource/space-grotesk/700.css";
-@import "@fontsource/literata/400.css";
-@import "@fontsource/literata/400-italic.css";
-@import "@fontsource/literata/600.css";
-@import "@fontsource/literata/700.css";
+   Local @fontsource packages = self-host (no FOUT, no third-party request).
+   We import only the weights/subsets actually referenced by the layer:
+     - Space Grotesk 500 → LocalStorageChecklist `.lsc-label`
+     - Space Grotesk 700 → every `font-bold` headline/label
+     - Literata 400 / 400-italic / 600 → prose body / <em> / <strong>
+   `latin-<weight>.css` ships only the latin @font-face rule, skipping the
+   cyrillic / greek / vietnamese / latin-ext declarations whose subsets
+   never get fetched anyway (unicode-range gates the WOFF2 request, but the
+   @font-face rules themselves still pad critical CSS). Consumers serving
+   non-latin content should override main.css with the broader imports. */
+@import "@fontsource/space-grotesk/latin-500.css";
+@import "@fontsource/space-grotesk/latin-700.css";
+@import "@fontsource/literata/latin-400.css";
+@import "@fontsource/literata/latin-400-italic.css";
+@import "@fontsource/literata/latin-600.css";
+
+/* ===== Fallback @font-face overrides — CLS 0.12 → 0.00 =====
+   While the real WOFF2 is in flight, `font-display: swap` paints with a
+   system font. Without metric overrides Arial / Times New Roman render at
+   a different x-height + advance width than the real face, so the swap
+   shifts every line of text below it (measured 0.1215 CLS on root /).
+   These two @font-face declarations re-publish the system font under a
+   synthetic family name with `ascent-override`, `descent-override`,
+   `line-gap-override`, and `size-adjust` re-mapped to match the webfont.
+   Wire-up: in `tailwind.config.js`, `fontFamily.display` slots
+   "Space Grotesk Fallback" between the real family and `-apple-system`,
+   and `fontFamily.prose` slots "Literata Fallback" between Literata and
+   Georgia. The system font then renders dimensionally identical to the
+   webfont — the swap is invisible.
+
+   Computed once via `scripts/compute-font-fallback.mjs` (Capsize). Recompute
+   only when the webfonts themselves change; metrics are intrinsic to the
+   font file, not the weight/subset. */
+@font-face {
+  font-family: "Space Grotesk Fallback";
+  src: local('Arial'), local('ArialMT');
+  ascent-override: 89.7072%;
+  descent-override: 26.6204%;
+  line-gap-override: 0%;
+  size-adjust: 109.6903%;
+}
+@font-face {
+  font-family: "Literata Fallback";
+  src: local('Times New Roman'), local('TimesNewRomanPSMT');
+  ascent-override: 99.6159%;
+  descent-override: 26.0677%;
+  line-gap-override: 0%;
+  size-adjust: 118.1538%;
+}
 
 @tailwind base;
 @tailwind components;
@@ -50,7 +89,17 @@
 
   html {
     -webkit-text-size-adjust: 100%;
-    scroll-behavior: smooth;
+  }
+  /* Smooth scroll only when motion is allowed. Global `html { scroll-behavior:
+     smooth }` would make every hash-link, anchor jump, and `scrollIntoView()`
+     animate on the main thread — measurable INP cost on long articles, and
+     redundant since useStack's programmatic stack scroll already passes
+     `behavior: 'smooth'` explicitly on each scrollTo call. Honors the OS
+     reduced-motion preference for free. */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
   }
 
   body {
@@ -245,7 +294,7 @@
   }
   .list-row__description {
     @apply text-sm text-terminal-text-muted normal-case;
-    font-family: 'Literata', Georgia, serif;
+    font-family: 'Literata', 'Literata Fallback', Georgia, serif;
     text-transform: none;
     letter-spacing: 0;
   }
@@ -304,7 +353,7 @@
      code/tables/lists. */
   .content {
     @apply text-terminal-text;
-    font-family: 'Literata', Georgia, serif;
+    font-family: 'Literata', 'Literata Fallback', Georgia, serif;
     font-size: 1.0625rem;
     line-height: 1.65;
     letter-spacing: 0.008em;
@@ -317,11 +366,11 @@
   }
   .content h2 {
     @apply font-display font-bold uppercase tracking-tight text-xl md:text-2xl mt-10 mb-4;
-    font-family: 'Space Grotesk', sans-serif;
+    font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
   }
   .content h3 {
     @apply font-display font-bold uppercase tracking-tight text-base md:text-lg mt-8 mb-3;
-    font-family: 'Space Grotesk', sans-serif;
+    font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
   }
   .content h4, .content h5, .content h6 {
     @apply font-display font-bold uppercase tracking-widest text-xs text-terminal-text-muted mt-6 mb-2;
@@ -388,7 +437,7 @@
     width: 1.6rem;
     height: 1.3rem;
     box-shadow: 2px 2px 0px theme('colors.terminal.border');
-    font-family: 'Space Grotesk', sans-serif;
+    font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
   }
 
   /* Nested lists (depth ≥ 2): drop the box stamp, switch to flat text markers,

package/app/components/ContentView.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-// `minimark` ships with @nuxt/content as a transitive dep — its body field is
-// minimark AST. `stringify` converts that AST back to markdown faithfully, so we
-// can produce a copy-friendly markdown blob without forcing consumers to enable
-// `rawbody` in their collection schema. See https://content.nuxt.com/docs/integrations/llms.
-import { stringify as stringifyMinimark } from 'minimark/stringify'
+// `minimark/stringify` is imported lazily inside copyMarkdown() so it stays
+// out of the initial route bundle — `Copy as markdown` is a user-triggered
+// action, the codepath only fires after a click. See https://content.nuxt.com/docs/integrations/llms
+// for why we round-trip minimark AST → markdown rather than depending on rawbody.
 import { toast } from 'vue-sonner'
 import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue'
 
@@ -66,32 +65,40 @@ if (malformedPath.value && !props.noThrow) {
 
 // Guard all queries: when path is malformed, skip them entirely (queryCollection
 // would crash with assertSafeQuery before we could handle the error).
-const { data: page } = await useAsyncData(`content-${path.value}`, () => {
-  if (malformedPath.value) return Promise.resolve(null)
-  return queryCollection('content')
-    .where('path', '=', path.value)
-    .first()
-})
-
-// Query descendants regardless of whether `_index.md` exists for the path — that lets
-// section roots like `/builds`, `/`, `/wiki` render a listing of their children even
-// without an explicit index file. Path = '/' must use prefix '/' (not '//') to match all.
+//
+// Page + children fire in parallel via Promise.all instead of two sequential
+// awaits. With key=index TransitionGroup, every stack mutation mounts a fresh
+// ContentView for each column (StackedColumn :key="path" remounts), so the
+// SSR pass for a 4-deep stack used to issue 8 SQL queries serialized in
+// setup order. Parallelizing halves wall-clock cost — both queries hit the
+// same SQLite connection but the second no longer waits for the first to
+// resolve before its `where(...)` plan is built and executed.
+//
+// Path = '/' must use prefix '/' (not '//') so the LIKE matches all rows.
 const childrenPrefix = path.value === '/' ? '/' : `${path.value}/`
-const { data: allChildren } = await useAsyncData(`children-${path.value}`, () => {
-  if (malformedPath.value) return Promise.resolve([])
-  return queryCollection('content')
-    .where('path', 'LIKE', `${childrenPrefix}%`)
-    .where('path', '<>', path.value)
-    .where('path', 'NOT LIKE', '%/_index')
-    // The convention filter used to live here as a SQL `where`, but SQL's
-    // three-valued logic treats `NULL <> 'convention'` as NULL (not true),
-    // so any row whose schema doesn't set document_type — i.e. most rows —
-    // got silently filtered out and listings rendered as empty article
-    // views. The client-side hierarchy filter (`!== 'convention'`) handles
-    // this correctly in JS where `undefined !== 'convention'` is true.
-    .select('path', 'title', 'description', 'document_type', 'updated', 'created')
-    .all()
-})
+const [{ data: page }, { data: allChildren }] = await Promise.all([
+  useAsyncData(`content-${path.value}`, () => {
+    if (malformedPath.value) return Promise.resolve(null)
+    return queryCollection('content')
+      .where('path', '=', path.value)
+      .first()
+  }),
+  useAsyncData(`children-${path.value}`, () => {
+    if (malformedPath.value) return Promise.resolve([])
+    return queryCollection('content')
+      .where('path', 'LIKE', `${childrenPrefix}%`)
+      .where('path', '<>', path.value)
+      .where('path', 'NOT LIKE', '%/_index')
+      // The convention filter used to live here as a SQL `where`, but SQL's
+      // three-valued logic treats `NULL <> 'convention'` as NULL (not true),
+      // so any row whose schema doesn't set document_type — i.e. most rows —
+      // got silently filtered out and listings rendered as empty article
+      // views. The client-side hierarchy filter (`!== 'convention'`) handles
+      // this correctly in JS where `undefined !== 'convention'` is true.
+      .select('path', 'title', 'description', 'document_type', 'updated', 'created')
+      .all()
+  }),
+])
 
 // "Not found" only when path is malformed OR there's no page AND no children to list.
 // Pure section paths (`/builds`, `/`) are valid even without `_index.md` if children exist.
@@ -366,7 +373,7 @@ type CopyState = 'idle' | 'copied' | 'error'
 const copyState = ref<CopyState>('idle')
 let copyResetTimer: ReturnType<typeof setTimeout> | null = null
 
-function buildMarkdown(): string {
+async function buildMarkdown(): Promise<string> {
   const raw = (page.value as any)?.rawbody as string | undefined
   if (typeof raw === 'string' && raw.trim().length > 0) {
     const trimmed = raw.trimStart()
@@ -390,6 +397,10 @@ function buildMarkdown(): string {
     const value = skipFirst ? body.value.slice(1) : body.value
     if (value.length > 0) {
       try {
+        // Lazy import — keeps minimark/stringify out of the initial route
+        // bundle. Vite code-splits this into a chunk fetched only on first
+        // copy-as-markdown click.
+        const { stringify: stringifyMinimark } = await import('minimark/stringify')
         const md = stringifyMinimark({ type: 'minimark', value }).trim()
         if (md) lines.push(md, '')
       }
@@ -429,7 +440,7 @@ function buildMarkdown(): string {
 
 async function copyMarkdown() {
   if (!import.meta.client) return
-  const markdown = buildMarkdown()
+  const markdown = await buildMarkdown()
 
   try {
     if (navigator.clipboard?.writeText) {

package/app/components/LocalStorageChecklist.vue

@@ -174,7 +174,7 @@ function reset(): void {
   background: #2e2f2c;
   box-shadow: 4px 4px 0 0 #474541;
   margin: 1.5rem 0;
-  font-family: 'Space Grotesk', -apple-system, sans-serif;
+  font-family: 'Space Grotesk', 'Space Grotesk Fallback', -apple-system, sans-serif;
   color: #d5cfc5;
 }
 
@@ -191,7 +191,7 @@ function reset(): void {
 }
 
 .lsc-title {
-  font-family: 'Space Grotesk', sans-serif;
+  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
   font-size: 0.95rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -329,7 +329,7 @@ function reset(): void {
 }
 
 .lsc-label {
-  font-family: 'Space Grotesk', sans-serif;
+  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
   font-size: 0.9375rem;
   font-weight: 500;
   color: #d5cfc5;

package/app/components/content/ProseImg.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Override `<img>` rendered from markdown via @nuxt/content's Prose components.
+// Default ProseImg emits a plain `<img>`; we swap to `<NuxtImg>` so consumers
+// get @nuxt/image's lazy loading, responsive `srcset`, format negotiation, and
+// (for SSG builds) pre-rendered optimized variants under .output/public.
+//
+// Surface kept identical to the default ProseImg so existing markdown — both
+// in this layer's `content/` and in consumer projects' content — continues to
+// work without changes. Authors write `![alt](/path.png)` and get an
+// optimized, lazy-loaded image at the cost of nothing.
+//
+// External URLs (http*) pass through @nuxt/image's `remote` provider path;
+// relative paths under `/public` get rewritten to the IPX-served route during
+// dev and pre-rendered into static variants during `nuxt generate`.
+
+defineProps<{
+  src?: string
+  alt?: string
+  width?: string | number
+  height?: string | number
+  title?: string
+}>()
+</script>
+
+<template>
+  <NuxtImg
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :title="title"
+    loading="lazy"
+    decoding="async"
+    format="webp"
+    densities="x1 x2"
+  />
+</template>

package/nuxt.config.ts

@@ -33,6 +33,7 @@ export default defineNuxtConfig({
   modules: [
     'vite-plugin-ai-annotator/nuxt',
     '@nuxt/content',
+    '@nuxt/image',
     '@nuxtjs/tailwindcss',
     // Toast notifications. Auto-registers `<Toaster />` (client-only) and a
     // plugin exposing `$toast` / the imported `toast()` helper from `vue-sonner`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "andy-note-nuxt",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Brutalist-terminal Nuxt Content theme for personal notes, guides, and second-brain knowledge bases. Use as a Nuxt layer.",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -48,6 +48,7 @@
     "@fontsource/literata": "^5.2.8",
     "@fontsource/space-grotesk": "^5.2.10",
     "@nuxt/content": "^3.12.0",
+    "@nuxt/image": "^2.0.0",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "nuxt": "^4.4.6",
     "rehype-raw": "^7.0.0",
@@ -56,6 +57,9 @@
     "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
+    "@capsizecss/core": "^4.1.3",
+    "@capsizecss/metrics": "^4.0.0",
+    "@capsizecss/unpack": "^4.0.0",
     "oxlint": "^1.65.0",
     "tailwindcss": "^3",
     "vite-plugin-ai-annotator": "^1.14.13"

package/tailwind.config.js

@@ -38,9 +38,14 @@ export default {
           },
         },
       },
+      // The "* Fallback" entries are synthetic families declared via
+      // @font-face in app/assets/css/main.css. They re-map the system font's
+      // metrics to match the real webfont so `font-display: swap` doesn't
+      // shift the layout when the WOFF2 finally arrives. Order matters:
+      // real webfont → metric-matched fallback → ultimate system stack.
       fontFamily: {
-        display: ['Space Grotesk', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
-        prose: ['Literata', 'Georgia', 'serif'],
+        display: ['Space Grotesk', 'Space Grotesk Fallback', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        prose: ['Literata', 'Literata Fallback', 'Georgia', 'serif'],
         mono: ['SF Mono', 'Monaco', 'Consolas', 'ui-monospace', 'monospace'],
       },
       // Stamp shadows — flat 0-blur offsets are the brutalist signature.