andy-note-nuxt 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # andy-note-nuxt
 
-Brutalist-terminal **Nuxt 4 + Nuxt Content v3 theme** packaged as a [Nuxt Layer](https://nuxt.com/docs/getting-started/layers). Stacked-column navigation (click a note → new column pushes from the right), warm-dark palette with lime accent + flat 4px stamp shadows. Designed for personal notes, guides, and second-brain knowledge bases.
+Brutalist-terminal **Nuxt 4 + Nuxt Content v3 theme** packaged as a [Nuxt Layer](https://nuxt.com/docs/getting-started/layers). Stacked-column navigation (click a note → new column pushes from the right), warm-dark palette with coral accent + flat 4px stamp shadows. Designed for personal notes, guides, and second-brain knowledge bases.
 
 ## Quick start — use as a layer
 
@@ -49,25 +49,57 @@ bun install
 bun dev
 ```
 
-Edit `app/app.config.ts` for branding/menu, `nuxt.config.ts` for `<title>`, and start writing in `content/`.
+Edit `runtimeConfig.public.site` in `nuxt.config.ts` for branding (title, description, tagline, themeColor, logo), `app.head` in the same file for `<title>` / meta tags, and start writing in `content/`.
 
 ## What's included
 
 | Path | Purpose |
 |---|---|
+| `app/app.vue` | Root entry — `<NuxtLayout><NuxtPage /></NuxtLayout>` |
+| `app/types/app-config.d.ts` | TypeScript augmentation declaring `runtimeConfig.public.site` shape |
+| `app/layouts/default.vue` | Full-height shell + `<Toaster>` host |
+| `app/pages/[...slug].vue` | Single catch-all route — delegates to `<StackedColumns>` |
 | `app/components/StackedColumns.vue` | Stacked-column shell — drives the whole UX |
-| `app/components/ContentView.vue` | Per-column renderer (handles index pages, listings, single docs) |
-| `app/components/LocalStorageChecklist.vue` | Persistent checklist embeddable in any markdown |
-| `app/composables/useStack.ts` | Stack state machine (push/pop columns, URL sync) |
+| `app/components/StackedColumn.vue` | Single column wrapper (click → push, scroll-to-focus) |
+| `app/components/ContentView.vue` | Per-column renderer (auto-switches listing vs article view) |
+| `app/components/LocalStorageChecklist.vue` | MDC component — persistent checklist embeddable in any markdown |
+| `app/composables/useStack.ts` | Stack state machine (push/pop columns, URL sync, scroll geometry) |
 | `app/assets/css/main.css` | Brutalist terminal theme — Tailwind v3 base + custom prose layers |
+| `nuxt.config.ts` | Module wiring (`@nuxt/content`, `@nuxtjs/tailwindcss`, `vue-sonner/nuxt`, `vite-plugin-ai-annotator`) |
 | `tailwind.config.js` | Color palette + stamp shadow tokens |
+| `content.config.ts` | Minimal generic schema (7 fields — see "Schema" below) |
 | `content/index.md` | Default landing page |
-| `content/license.md` | Default license page (override in your child project) |
+| `content/license.md` | Default license page |
+| `content/quick-start.md`, `content/guides/`, `content/reference/` | Theme's own docs (ship only when extending via `github:` — npm publishes only `content/index.md` + `content/license.md`). Override or delete in your child. |
 
-**Not included** — the layer intentionally does NOT ship a `content.config.ts`. Schemas are project-specific, and Nuxt Content v3.13+ requires the consumer to install `zod` + `zod-to-json-schema` themselves. Your child project owns the schema. A minimal starter looks like:
+## Override anything
+
+Nuxt Layers deep-merge child over parent. Override semantics:
+
+- **Components / pages / layouts / composables** → create a file with the same path in your project (e.g. `app/components/ContentView.vue`) and it replaces the layer's.
+- **`nuxt.config.ts`** → deep-merged. Override `app.head` (for `<title>` / meta) and `runtimeConfig.public.site` (for branding: `title`, `description`, `tagline`, `author`, `themeColor`, `logo`). Layer ships defaults; your values win field-by-field. Add your own fields under `site.*` by augmenting the `PublicRuntimeConfig` interface (see `app/types/app-config.d.ts`).
+- **`tailwind.config.js`** → merged by `@nuxtjs/tailwindcss` across layers. Ship a `tailwind.config.js` in your project with the same shape (`theme.extend.colors`, `theme.extend.boxShadow`, etc.) and it overrides the layer's tokens. The module discovers all layer configs automatically.
+- **`content.config.ts`** → fully replaced by the consumer's file (Nuxt Content reads only one). The layer ships a minimal schema so the SQLite cache has the columns its renderer queries (`document_type`, `updated`, `created`). Your override must include those columns or extend them.
+- **Content** → child `content/<path>.md` overrides parent's same-path file (e.g. `content/license.md` in your project replaces the layer's default license page).
+
+## Schema
+
+The layer ships a minimal, generic `content.config.ts` covering only the fields its renderer actually reads:
+
+| Field | Type | Used by |
+|---|---|---|
+| `title` | `string` | Column header, listing item, `<title>` |
+| `description` | `string` | `<meta>`, OG tags, section listings |
+| `document_type` | `string` | `"convention"` hides the file from listings |
+| `tags` | `string[]` | Tag pills under H1 |
+| `created` | `string` (ISO date) | Listing sort, recency badge |
+| `updated` | `string` (ISO date) | Listing sort (preferred over `created`) |
+| `rawbody` | `string` | Auto-populated — backs "Copy as Markdown" with byte-faithful source |
+
+Every field is `.optional()` — you can write a `.md` with no frontmatter at all. To add domain-specific fields (`priority`, `owner`, `due_date`, anything project-specific), **override `content.config.ts` in your child project**:
 
 ```ts
-// content.config.ts in YOUR project
+// content.config.ts in YOUR project — replaces the layer's schema entirely
 import { defineCollection, defineContentConfig, z } from '@nuxt/content'
 
 export default defineContentConfig({
@@ -76,40 +108,24 @@ export default defineContentConfig({
       type: 'page',
       source: '**/*.md',
       schema: z.object({
+        // Keep these — the renderer queries them
+        title: z.string().optional(),
         description: z.string().optional(),
+        document_type: z.string().optional(),
         tags: z.array(z.string()).optional(),
         created: z.string().optional(),
         updated: z.string().optional(),
-        // ...add fields as your notes evolve
+        rawbody: z.string().optional(),
+        // Add your own
+        priority: z.enum(['low', 'medium', 'high']).optional(),
+        owner: z.string().optional(),
       }),
     }),
   },
 })
 ```
 
-## Override anything
-
-Nuxt Layers deep-merge child over parent. Override semantics:
-
-- **Components / pages / layouts / composables** → create a file with the same path in your project (e.g. `app/components/ContentView.vue`) and it replaces the layer's.
-- **`nuxt.config.ts`** → deep-merged. Your `app.head` keys override the layer's.
-- **`app/app.config.ts`** → deep-merged. Override `site.*` and `menu[]`.
-- **`tailwind.config.js`** → NOT auto-merged by Nuxt. If you need a different palette, copy the file into your project; Tailwind picks up your project's config.
-- **Content** → child `content/<path>.md` overrides parent's same-path file (e.g. `content/license.md` in your project replaces the layer's default license page).
-
-## Schema
-
-`content.config.ts` ships a permissive schema — every field is optional. Common fields available out of the box:
-
-- Universal: `title`, `description`, `tags[]`, `status`, `created`, `updated`, `author`, `weight`
-- Game / domain tagging: `game`, `league`, `patch` (renders as badges in headers)
-- Build / recipe: `class`, `ascendancy`, `budget_tier`, `build_tags{}`, `ratings{}`, `pob_link`
-- Economy: `strategy_tier`, `profit_per_hour`, `investment_tier`
-- Skill / technique: `gem_color`, `skill_type`, `level_requirement`, `skill_tags[]`
-- Instance / character: `level`, `progress_stage`
-- Item / class / league: `rarity`, `item_class`, `class_type`, `complexity`, `league_type`
-
-Unused fields cost nothing (null in cache). To replace the schema entirely, override `content.config.ts` in your child project.
+Unused fields cost nothing (null in cache).
 
 ## Conventions baked in
 

package/app/types/app-config.d.ts

@@ -1,9 +1,16 @@
 export {}
 
-// AppConfig augmentation. Child layers can re-declare this interface to add
-// their own fields — TypeScript merges declarations across `nuxt/schema`.
+// PublicRuntimeConfig augmentation. Child layers re-declare this interface
+// to add their own fields under `runtimeConfig.public.site.*` — TypeScript
+// merges declarations across `nuxt/schema`.
+//
+// Note: this file used to augment `AppConfig` (back when the layer shipped
+// `app/app.config.ts`). Nuxt 5 / Nitro 3 removes `app.config.ts`, so site
+// config now lives on `runtimeConfig.public.site` and is read via
+// `useRuntimeConfig().public.site`. The file name is kept for git history
+// continuity; the augmented interface is what changed.
 declare module 'nuxt/schema' {
-  interface AppConfig {
+  interface PublicRuntimeConfig {
     site: {
       title: string
       description: string
@@ -14,6 +21,5 @@ declare module 'nuxt/schema' {
       // Free-form extras child projects can attach without re-declaring the interface.
       [key: string]: unknown
     }
-    menu: Array<{ name: string; url: string; weight: number }>
   }
 }

package/content/index.md

@@ -2,24 +2,24 @@
 title: "Andy Notes"
 description: "Brutalist-terminal Nuxt Content theme — stacked-column navigation for personal notes and second-brain knowledge bases."
 created: 2026-05-11
-updated: 2026-05-11
+updated: 2026-05-25
 ---
 
 # Andy Notes
 
-Đây là **theme mặc định** sau khi bạn vừa clone (hoặc extend) repo `andy-note-nuxt`. Layout đang chạy là **stacked-column navigation** — mỗi lần click vào một note, một cột mới push sang phải thay vì điều hướng trang khác. Cách này giữ context của tất cả cấp cha ở bên trái, đọc nhiều note liên quan trong cùng một flow.
+This is the **default landing page** you get right after cloning (or extending) the `andy-note-nuxt` layer. The layout is **stacked-column navigation** — every click on an internal link pushes a new column to the right instead of routing away, so you keep every ancestor in view and read related notes inside a single flow.
 
-## Bắt đầu
+## Getting started
 
-1. Viết note đầu tiên bằng cách tạo file markdown bất kỳ trong `content/`. Ví dụ `content/notes/my-first-note.md`.
-2. Frontmatter cơ bản chỉ cần `title` + `description`. Mọi field khác đều optional (xem `content.config.ts` để biết hết).
-3. Tạo subfolder để tự động có section group ở landing page. Ví dụ `content/projects/` sẽ xuất hiện như một section.
+1. Write your first note by dropping any markdown file into `content/`. For example `content/notes/my-first-note.md`.
+2. Frontmatter only needs `title` + `description`. Every other field is optional — see `content.config.ts` for the full list.
+3. Any subfolder of `content/` becomes a section group on the landing page automatically. For example `content/projects/` shows up as a `projects` section.
 
-## Tuỳ biến
+## Customize
 
-- **Menu & branding**: sửa `app/app.config.ts` để đổi `site.title`, `site.description`, và mảng `menu`.
-- **Title trang web**: sửa `app.head.title` trong `nuxt.config.ts`.
-- **Màu sắc**: palette terminal nằm trong `tailwind.config.js`. Token chính: `terminal.accent` (#d4ff00 — lime), `terminal.bg` (#2a2a28 — warm dark).
-- **Component**: mọi file trong `app/components/` đều override được bằng cách tạo file cùng tên ở child project.
+- **Branding**: edit `runtimeConfig.public.site` in `nuxt.config.ts` to change `site.title`, `site.description`, `site.tagline`, `site.themeColor`, and `site.logo`. Nuxt deep-merges your values over the layer's defaults.
+- **`<title>` and meta**: edit `app.head` in the same `nuxt.config.ts`.
+- **Palette**: terminal tokens live in `tailwind.config.js`. Key tokens: `terminal.accent` (#ff7b6b — coral), `terminal.bg` (#2a2a28 — warm dark).
+- **Components**: every file under `app/components/` can be overridden by dropping a same-path file in your child project.
 
-Xem [License](/license) để biết điều khoản sử dụng.
+See [License](/license) for usage terms (theme code vs. user content).

package/content.config.ts

@@ -0,0 +1,36 @@
+// Default content schema shipped by the layer.
+//
+// Why this file exists in the LAYER even though CLAUDE.md says consumers own
+// `content.config.ts`: the layer's `ContentView` component runs a children
+// query that selects `document_type`, `updated`, and `created`. Without those
+// columns in the SQLite schema, every page query would fail with
+// `no such column`. So the layer ships a minimal generic schema covering only
+// the fields its renderer actually reads. Consumers are still free — and
+// encouraged — to override this file by shipping their own `content.config.ts`
+// at their project root; Nuxt Layers gives the consumer's file priority and
+// replaces this schema entirely.
+//
+// Keep the fields here generic. Anything domain-specific belongs in a
+// consumer override, not in the layer.
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**/*.md',
+      schema: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        document_type: z.string().optional(),
+        tags: z.array(z.string()).optional(),
+        created: z.string().optional(),
+        updated: z.string().optional(),
+        // Opt into rawbody so the copy-as-markdown button gets byte-faithful
+        // source instead of stringified minimark. See
+        // https://content.nuxt.com/docs/integrations/llms.
+        rawbody: z.string().optional(),
+      }),
+    }),
+  },
+})

package/nuxt.config.ts

@@ -2,8 +2,13 @@
 //
 // Base Nuxt config for `andy-note-nuxt` theme. Consumers extend this layer
 // via `extends: ['github:nguyenvanduocit/andy-note-nuxt']` (or local path /
-// npm package) and override `app.head`, `appConfig.site`, `appConfig.menu`
-// in their child project. All values here are sensible defaults.
+// npm package) and override `app.head` and `runtimeConfig.public.site` in
+// their child project. All values here are sensible defaults.
+//
+// Why runtimeConfig instead of app.config? Nuxt 5 / Nitro 3 removes the
+// `app.config.ts` / `defineAppConfig` / `useAppConfig` surface. Layer site
+// config now lives under `runtimeConfig.public.*`, which Nuxt deep-merges
+// across layers identically. Components read via `useRuntimeConfig().public.site`.
 
 import { createResolver } from '@nuxt/kit'
 
@@ -17,6 +22,14 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
 
+  // Opt-in to Nuxt 5 behavior available under Nuxt 4.2+. Flips: non-async
+  // `callHook` return type, client-only HTML comment placeholders, and other
+  // forward-compat defaults. The heavier Nitro v3 / Vite 8 changes ship with
+  // Nuxt 5 itself — not previewable via this flag.
+  future: {
+    compatibilityVersion: 5,
+  },
+
   modules: [
     'vite-plugin-ai-annotator/nuxt',
     '@nuxt/content',
@@ -58,6 +71,23 @@ export default defineNuxtConfig({
     },
   },
 
+  // Site-wide config (replaces former app/app.config.ts surface). Consumers
+  // override any field via their own `runtimeConfig.public.site` in nuxt.config —
+  // Nuxt deep-merges child layer values over parent. Free-form extra fields are
+  // allowed via the index signature in `app/types/app-config.d.ts`.
+  runtimeConfig: {
+    public: {
+      site: {
+        title: 'Andy Notes',
+        description: 'Stacked-column knowledge base — extend, override, publish.',
+        tagline: 'A second-brain theme for Nuxt Content',
+        author: 'andy-note-nuxt',
+        themeColor: '#ff7b6b',
+        logo: '/logo.svg',
+      },
+    },
+  },
+
   app: {
     head: {
       htmlAttrs: { lang: 'en' },
@@ -66,10 +96,10 @@ export default defineNuxtConfig({
       title: 'Andy Notes — Stacked-Column Knowledge Base',
       meta: [
         { name: 'description', content: 'A brutalist-terminal Nuxt Content theme for personal notes, guides, and second-brain knowledge bases.' },
-        { name: 'theme-color', content: '#d4ff00' },
+        { name: 'theme-color', content: '#ff7b6b' },
       ],
       link: [
-        { rel: 'icon', type: 'image/png', href: '/images/favicon.png' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
       ],
     },
   },

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "andy-note-nuxt",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -19,10 +20,17 @@
     "tailwindcss"
   ],
   "files": [
-    "app",
+    "app/app.vue",
+    "app/assets",
+    "app/components",
+    "app/composables",
+    "app/layouts",
+    "app/pages",
+    "app/types",
     "public",
     "content/index.md",
     "content/license.md",
+    "content.config.ts",
     "nuxt.config.ts",
     "tailwind.config.js",
     "tsconfig.json"
@@ -41,7 +49,7 @@
     "@fontsource/space-grotesk": "^5.2.10",
     "@nuxt/content": "^3.12.0",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "nuxt": "^4.3.1",
+    "nuxt": "^4.4.6",
     "rehype-raw": "^7.0.0",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4",

package/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" shape-rendering="crispEdges">
+  <!-- Brutalist stamp favicon — warm-dark bg + offset coral block -->
+  <rect width="64" height="64" fill="#2a2a28"/>
+  <rect x="6" y="6" width="44" height="44" fill="#474541"/>
+  <rect x="10" y="10" width="44" height="44" fill="#ff7b6b"/>
+</svg>

package/public/logo.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 64" shape-rendering="crispEdges">
+  <!-- Brutalist stamp logo — coral block + wordmark in warm off-white.
+       Stamp shadow uses border-strong (#5a5854) at 4px offset, matching
+       the `shadow-stamp` token in tailwind.config.js. -->
+  <rect x="4" y="12" width="48" height="48" fill="#5a5854"/>
+  <rect x="0" y="8" width="48" height="48" fill="#ff7b6b"/>
+  <text x="64" y="42"
+        font-family="'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif"
+        font-size="28"
+        font-weight="700"
+        letter-spacing="0.02em"
+        fill="#d5cfc5">andy/notes</text>
+</svg>

package/app/.claude/skills/ai-annotator/SKILL.md

@@ -1,31 +0,0 @@
----
-name: ai-annotator
-description: This skill should be used when the user asks to "check browser feedback", "get user feedback", "capture screenshot", "inspect element", "inject CSS", "inject JS", "read console logs", or mentions AI Annotator, browser session, or UI feedback.
----
-
-AI Annotator provides access to the user's live browser session. Users select UI elements and add feedback comments. Use the REST API to read feedback, capture screenshots, inject CSS/JS, and read console logs.
-
-Server: `http://127.0.0.1:7318`
-
-## REST API
-
-All endpoints return JSON. Obtain session ID from `GET /api/sessions` first.
-
-| Method | Endpoint | Body/Query | Description |
-|--------|----------|------------|-------------|
-| `GET` | `http://127.0.0.1:7318/api/sessions` | — | List connected browser sessions |
-| `GET` | `http://127.0.0.1:7318/api/sessions/:id/page-context` | — | Page URL, title, selection count |
-| `POST` | `http://127.0.0.1:7318/api/sessions/:id/select` | `{mode?, selector?, selectorType?}` | Trigger feedback selection |
-| `GET` | `http://127.0.0.1:7318/api/sessions/:id/feedback` | `?fields=xpath,attributes,styles,children` | Get selected feedback items |
-| `DELETE` | `http://127.0.0.1:7318/api/sessions/:id/feedback` | — | Clear all selections |
-| `POST` | `http://127.0.0.1:7318/api/sessions/:id/screenshot` | `{type?, selector?, quality?}` | Capture screenshot |
-| `POST` | `http://127.0.0.1:7318/api/sessions/:id/inject-css` | `{css}` | Inject CSS into page |
-| `POST` | `http://127.0.0.1:7318/api/sessions/:id/inject-js` | `{code}` | Execute JS in page context |
-| `GET` | `http://127.0.0.1:7318/api/sessions/:id/console` | `?clear=true` | Get captured console logs |
-
-## Workflow
-
-1. `GET http://127.0.0.1:7318/api/sessions` → get session ID
-2. `GET http://127.0.0.1:7318/api/sessions/{id}/feedback` → read user feedback
-3. Make code changes based on feedback
-4. `DELETE http://127.0.0.1:7318/api/sessions/{id}/feedback` → clear feedback after addressing it

package/app/app.config.ts

@@ -1,20 +0,0 @@
-// Site-wide config consumed by components via `useAppConfig()`.
-// Override every field in your child project by creating your own `app/app.config.ts`
-// — Nuxt deep-merges child over parent layer.
-
-export default defineAppConfig({
-  site: {
-    title: 'Andy Notes',
-    description: 'Stacked-column knowledge base — extend, override, publish.',
-    tagline: 'A second-brain theme for Nuxt Content',
-    author: 'andy-note-nuxt',
-    themeColor: '#ff7b6b',
-    logo: '/logo.png',
-  },
-  // Top-level navigation. Empty by default — child projects populate with
-  // their own categories. Each entry maps to a `content/<slug>/` folder
-  // (or any static route under `pages/`).
-  menu: [
-    { name: 'License', url: '/license', weight: 99 },
-  ],
-})