andy-note-nuxt 0.2.2 → 0.4.0

package/README.md

@@ -49,15 +49,14 @@ 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/app.config.ts` | `site.*` config (title, description, themeColor, logo) |
-| `app/types/app-config.d.ts` | TypeScript augmentation for `useAppConfig()` |
+| `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 |
@@ -71,15 +70,14 @@ Edit `app/app.config.ts` for branding/menu, `nuxt.config.ts` for `<title>`, and
 | `content.config.ts` | Minimal generic schema (7 fields — see "Schema" below) |
 | `content/index.md` | Default landing page |
 | `content/license.md` | Default license page |
-| `content/quick-start.md`, `content/guides/`, `content/reference/` | Theme's own docs — override or delete in your child |
+| `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. |
 
 ## 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.*` (or add your own fields by re-declaring the `AppConfig` interface).
+- **`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).

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/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

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` (#ff7b6b — coral), `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/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` and `appConfig.site` 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,9 +22,18 @@ 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',
+    '@nuxt/image',
     '@nuxtjs/tailwindcss',
     // Toast notifications. Auto-registers `<Toaster />` (client-only) and a
     // plugin exposing `$toast` / the imported `toast()` helper from `vue-sonner`.
@@ -58,6 +72,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' },
@@ -69,7 +100,7 @@ export default defineNuxtConfig({
         { 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,6 +1,6 @@
 {
   "name": "andy-note-nuxt",
-  "version": "0.2.2",
+  "version": "0.4.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",
@@ -20,7 +20,13 @@
     "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",
@@ -42,8 +48,9 @@
     "@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.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,19 +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.
-//
-// Note: this layer's UX is a single stacked-column shell — there is no fixed
-// nav header rendering a menu. If your child project wants top-level nav,
-// override `StackedColumns.vue` (or add a layout wrapper) and read your own
-// menu structure from this config.
-
-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',
-  },
-})