livemark 0.25.0 → 0.27.0

package/source/hooks/hydrated.ts

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react"
+
+/** False during SSR and the hydrating render, true from the first client render on. */
+export function useHydrated() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+function subscribe() {
+  return () => {}
+}
+
+function getSnapshot() {
+  return true
+}
+
+function getServerSnapshot() {
+  return false
+}

package/source/index.ts

@@ -1 +1,2 @@
 export { defineConfig } from "./actions/config/define.ts"
+export type { RootHead } from "./helpers/head.ts"

package/source/models/config.ts

@@ -22,6 +22,24 @@ export type ViteOverride =
  *  resolves it to a string before any runtime sees it. */
 export type Base = string | ((command: "build" | "serve") => string | undefined)
 
+/** Extra site-wide `<head>` tags, appended after Livemark's defaults. A meta tag
+ *  sharing a default's `name` or `property` replaces it. */
+export type Head = z.infer<typeof Head>
+export const Head = z.object({
+  meta: z.array(z.record(z.string(), z.string())).optional(),
+  links: z.array(z.record(z.string(), z.string())).optional(),
+  scripts: z.array(z.record(z.string(), z.string())).optional(),
+})
+
+/** How automated systems may use the site's content, published as a
+ *  `Content-Signal` line in the generated `robots.txt`. */
+export type ContentSignals = z.infer<typeof ContentSignals>
+export const ContentSignals = z.object({
+  search: z.boolean().default(true),
+  aiInput: z.boolean().default(true),
+  aiTrain: z.boolean().default(true),
+})
+
 /**
  * User-provided configuration for Livemark.
  *
@@ -46,6 +64,7 @@ export const UserConfig = z.object({
   logo: z.string().optional(),
   title: z.string().default("Livemark"),
   description: z.string().default("Markdown site generator"),
+  banner: z.string().optional(),
   include: z.union([z.string(), z.array(z.string())]).default("**/*.md"),
   exclude: z.union([z.string(), z.array(z.string())]).optional(),
   codeThemeLight: CodeThemeLight.default("catppuccin-latte"),
@@ -53,6 +72,9 @@ export const UserConfig = z.object({
   links: z.array(Link).optional(),
   sections: z.array(Section).optional(),
   patches: z.array(Patch).optional(),
+  head: Head.optional(),
+  contentSignals: ContentSignals.prefault({}),
+  skills: z.union([z.string(), z.array(z.string())]).optional(),
   // Stored as `unknown` in the schema (zod can't type a Vite UserConfig
   // or a function returning one meaningfully); the public TypeScript
   // surface above lifts it back to ViteOverride for editor support.
@@ -69,8 +91,10 @@ export const WebsiteConfig = UserConfig.pick({
   site: true,
   favicon: true,
   logo: true,
+  banner: true,
   links: true,
   sections: true,
+  head: true,
 }).extend({
   base: z.string().optional(),
 })

package/source/models/section.ts

@@ -62,3 +62,6 @@ export const Section = z.preprocess(
     CustomSection,
   ]),
 )
+
+/** A section that owns a URL prefix — every type except `custom`. */
+export type RoutedSection = Exclude<Section, CustomSection>

package/source/plugins/vite-agents.ts

@@ -0,0 +1,135 @@
+import { existsSync, readFileSync } from "node:fs"
+import { join, resolve } from "node:path"
+import { pathToFileURL } from "node:url"
+import type { Plugin } from "vite"
+import { z } from "zod"
+import {
+  buildSkillFileName,
+  loadAgentSkills,
+  renderSkillsIndex,
+} from "../helpers/agent-skills.ts"
+import {
+  buildTwinFileName,
+  renderLlmsText,
+  renderMarkdownTwin,
+  renderSectionIndex,
+} from "../helpers/llms.ts"
+import { resolveIncludes } from "../helpers/resolve-includes.ts"
+import type { Config } from "../models/config.ts"
+
+export interface AgentsOptions {
+  config: Config
+}
+
+const GeneratedArticles = z.array(
+  z.object({
+    path: z.string(),
+    title: z.string(),
+    description: z.string().optional(),
+    order: z.number().optional(),
+    date: z.string().optional(),
+    file: z.string(),
+    content: z.string(),
+  }),
+)
+
+/** Emit what AI agents look for into the client build: a Markdown twin of
+ *  every article and section listing at `<path>index.md`, `llms.txt`, the Agent Skills index for
+ *  `config.skills`, and a `_headers` file whose `Link` points agents at them. */
+export function agents(opts: AgentsOptions): Plugin {
+  const publicDir = join(opts.config.root, ".livemark", "public")
+  let root = ""
+  return {
+    name: "livemark:agents",
+    applyToEnvironment(env) {
+      return env.name === "client"
+    },
+    configResolved(resolved) {
+      root = resolved.root
+    },
+    async generateBundle() {
+      // Vite copies the publicDir before writeBundle, so emitting a file the
+      // project ships under `.livemark/public/` would silently replace it.
+      const emit = (fileName: string, source: string | Buffer) => {
+        if (existsSync(join(publicDir, fileName))) return
+        this.emitFile({ type: "asset", fileName, source })
+      }
+
+      const articles = await loadGeneratedArticles(root)
+      for (const article of articles) {
+        const content = resolveIncludes(
+          article.content,
+          resolve(opts.config.root, article.file),
+        )
+        emit(buildTwinFileName(article.path), renderMarkdownTwin({ article, content }))
+      }
+
+      const llms = renderLlmsText({ config: opts.config, articles })
+      emit("llms.txt", llms)
+      const hasTwin = (path: string) => articles.some(a => a.path === path)
+      if (!hasTwin("/")) emit("index.md", llms)
+      // A rewrite to a missing twin is a 404, so every listing page needs one too.
+      for (const section of opts.config.sections ?? []) {
+        if (section.type === "custom" || section.prefix === "/") continue
+        if (hasTwin(section.prefix)) continue
+        emit(
+          buildTwinFileName(section.prefix),
+          renderSectionIndex({ config: opts.config, section, articles }),
+        )
+      }
+
+      const patterns = opts.config.skills ?? []
+      const skills = loadAgentSkills({
+        root: opts.config.root,
+        patterns: Array.isArray(patterns) ? patterns : [patterns],
+      })
+      for (const skill of skills) emit(buildSkillFileName(skill.name), skill.source)
+      if (skills.length) {
+        emit(
+          ".well-known/agent-skills/index.json",
+          renderSkillsIndex({ skills, base: opts.config.base }),
+        )
+      }
+
+      const headersFile = join(publicDir, "_headers")
+      this.emitFile({
+        type: "asset",
+        fileName: "_headers",
+        source: renderHeaders({
+          base: opts.config.base,
+          hasSkills: skills.length > 0,
+          existing: existsSync(headersFile) ? readFileSync(headersFile, "utf-8") : "",
+        }),
+      })
+    },
+  }
+}
+
+/** Render `_headers` (Cloudflare, Netlify): a `Link` on the home page naming
+ *  `llms.txt`, its Markdown twin and the skills index, after any rules the
+ *  project ships itself. */
+export function renderHeaders(props: {
+  base?: string
+  hasSkills: boolean
+  existing?: string
+}) {
+  const base = props.base ?? ""
+  const links = [
+    `<${base}/llms.txt>; rel="describedby"; type="text/plain"`,
+    `<${base}/index.md>; rel="alternate"; type="text/markdown"`,
+  ]
+  if (props.hasSkills) {
+    links.push(
+      `<${base}/.well-known/agent-skills/index.json>; rel="describedby"; type="application/json"`,
+    )
+  }
+  const rule = `${base}/\n  Link: ${links.join(", ")}\n`
+  const existing = props.existing?.trimEnd()
+  return existing ? `${existing}\n\n${rule}` : rule
+}
+
+async function loadGeneratedArticles(root: string) {
+  const file = join(root, ".content-collections", "generated", "allArticles.js")
+  const module: { default: unknown } = await import(pathToFileURL(file).href)
+  return GeneratedArticles.parse(module.default)
+}

package/source/plugins/vite-agents.unit.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vite-plus/test"
+import { renderHeaders } from "./vite-agents.ts"
+
+describe("renderHeaders", () => {
+  it("links the home page to llms.txt and its markdown twin", () => {
+    expect(renderHeaders({ hasSkills: false })).toBe(
+      '/\n  Link: </llms.txt>; rel="describedby"; type="text/plain", </index.md>; rel="alternate"; type="text/markdown"\n',
+    )
+  })
+
+  it("adds the skills index and mounts everything under base", () => {
+    const headers = renderHeaders({ base: "/repo", hasSkills: true })
+    expect(headers.startsWith("/repo/\n  Link: </repo/llms.txt>")).toBe(true)
+    expect(headers).toContain(
+      '</repo/.well-known/agent-skills/index.json>; rel="describedby"; type="application/json"',
+    )
+  })
+
+  it("keeps the project's own rules ahead of the generated one", () => {
+    const headers = renderHeaders({
+      hasSkills: false,
+      existing: "/*\n  X-Frame-Options: DENY\n\n",
+    })
+    expect(headers.startsWith("/*\n  X-Frame-Options: DENY\n\n/\n  Link: ")).toBe(true)
+  })
+})

package/source/plugins/vite-livemark.ts

@@ -1,9 +1,11 @@
-import { cpSync, existsSync, rmSync } from "node:fs"
+import { cpSync, existsSync, rmSync, statSync } from "node:fs"
 import { join, sep } from "node:path"
-import { watch as chokidarWatch } from "chokidar"
-import type { ConfigEnv, Plugin, UserConfig as ViteUserConfig, ViteDevServer } from "vite"
+import type { ConfigEnv, Plugin, UserConfig as ViteUserConfig } from "vite"
 import { mergeConfig } from "vite"
+import packageJson from "../../package.json" with { type: "json" }
 import { buildTarget } from "../actions/target/build.ts"
+import { renderInlineMarkdown } from "../helpers/render-inline-markdown.ts"
+import { resolveTargetExport } from "../helpers/target-export.ts"
 import type { Config } from "../models/config.ts"
 import { WebsiteConfig } from "../models/config.ts"
 import { ESCAPABLE_FILES, ESCAPABLE_FOLDERS } from "../settings.ts"
@@ -13,13 +15,15 @@ export interface LivemarkOptions {
 }
 
 const SOURCE_DIR = join(import.meta.dirname, "..")
+const IS_INSTALLED = SOURCE_DIR.includes(`${sep}node_modules${sep}`)
 
 /** Single virtual module exposing livemark's runtime values to consumer
  *  override files via named exports:
  *
  *      import { config } from "livemark:virtual"
  *
- *  Currently exports `config` (validated `WebsiteConfig`); future
+ *  Currently exports `config` (validated `WebsiteConfig`) and `bannerHtml`
+ *  (`config.banner` rendered from inline Markdown at build time); future
  *  additions (e.g. `articles`, `sections`) land here as new named
  *  exports without consumers changing their import statements.
  *
@@ -29,33 +33,36 @@ const SOURCE_DIR = join(import.meta.dirname, "..")
 const VIRTUAL_ID = "livemark:virtual"
 const VIRTUAL_RESOLVED_ID = `\0${VIRTUAL_ID}`
 
-/** Owns the per-consumer `targets/<hash>/` mount: synthesizes it via
+/** Owns the project's `.livemark/.target/` mount: synthesizes it via
  *  `buildTarget()`, returns the Vite config that anchors there, and
- *  watches the consumer's `.livemark/` (plus livemark's `source/` in
- *  dev) for changes that need to be re-copied into the target. The
- *  override mechanism is pure file-system (full copies) — no resolveId
- *  redirection, no realpath surprises. */
+ *  copies `.livemark/` edits (plus livemark's `source/` in its own dev)
+ *  into the target. Vite watches the target natively, so its own HMR
+ *  decides between Fast Refresh, CSS updates and a page reload. */
 export function livemark(opts: LivemarkOptions): Plugin {
   const overridesRoot = join(opts.config.root, ".livemark")
+  const outDir = join(overridesRoot, "build")
   let targetDir = ""
   return {
     name: "livemark",
     enforce: "pre",
     async config(_, env) {
-      targetDir = buildTarget(opts.config.configPath)
+      targetDir = buildTarget({
+        configPath: opts.config.configPath,
+        sourceDir: SOURCE_DIR,
+      })
       const base: ViteUserConfig = {
         root: targetDir,
+        // The default `<root>/node_modules/.vite` would land inside the
+        // dependency link, i.e. in livemark's shared install.
+        cacheDir: join(targetDir, ".vite"),
         // Mount everything (asset URLs, modulepreloads, dev server) under
         // `config.base` so the same build works at root or at a sub-path
         // (e.g. GitHub Pages `https://user.github.io/repo/`). The router
         // and asset-path resolver mirror this at runtime.
         base: opts.config.base ? `${opts.config.base}/` : "/",
-        // outDir lives outside the target root (in the consumer's
-        // .livemark/) so the consumer can find their deployable output
-        // without digging into node_modules. Vite's default refusal to
-        // empty out-of-root directories doesn't apply here because the
-        // target/ root is livemark's, not the consumer's.
-        build: { outDir: join(overridesRoot, "build"), emptyOutDir: true },
+        // outDir lives outside the target root, so Vite's refusal to
+        // empty out-of-root directories needs `emptyOutDir`.
+        build: { outDir, emptyOutDir: true },
         resolve: { dedupe: ["react", "react-dom"] },
         // For the SSR build only, inline every node_modules dep into
         // server.js. The prerender step (which runs server.js with
@@ -72,62 +79,44 @@ export function livemark(opts: LivemarkOptions): Plugin {
     },
     resolveId(id) {
       if (id === VIRTUAL_ID) return VIRTUAL_RESOLVED_ID
-      return null
+      return resolveTargetExport({ id, targetDir, exports: packageJson.exports }) ?? null
     },
     load(id) {
       if (id !== VIRTUAL_RESOLVED_ID) return null
       const config = WebsiteConfig.parse(opts.config)
-      return `export const config = ${JSON.stringify(config)}`
+      const bannerHtml = config.banner
+        ? renderInlineMarkdown(config.banner, config.base)
+        : undefined
+      return [
+        `export const config = ${JSON.stringify(config)}`,
+        `export const bannerHtml = ${JSON.stringify(bannerHtml)}`,
+      ].join("\n")
     },
     configureServer(server) {
-      // Two reasons we don't use Vite's own `server.watcher`:
-      //   1. Vite 8 bundles chokidar 3 with `disableGlobbing: true`, and
-      //      paths added via `server.watcher.add()` for surfaces outside
-      //      Vite's root never fire — getWatched() reports them but no
-      //      events arrive for external editors.
-      //   2. Vite's chokidar ignores `**\/node_modules/**` by default, so
-      //      even if (1) were fixed, our targetDir (which lives inside
-      //      livemark's own node_modules in consumer projects) would be
-      //      silently filtered. We emit the change event manually onto
-      //      `server.watcher` after cpSync — see {@link notifyVite}.
-      // A dedicated chokidar 5 watcher set up directly on these paths
-      // fires reliably; we forward events into Vite's HMR pipeline below.
-      const overlayPaths: string[] = []
-      for (const folder of ESCAPABLE_FOLDERS) {
-        overlayPaths.push(join(overridesRoot, folder))
-      }
-      for (const file of ESCAPABLE_FILES) {
-        overlayPaths.push(join(overridesRoot, file))
-      }
-      const watcher = chokidarWatch(
-        [opts.config.configPath, ...overlayPaths, SOURCE_DIR],
-        { ignoreInitial: true, ignorePermissionErrors: true },
-      )
-      watcher.on("change", file => onChange(file, "change"))
-      watcher.on("add", file => onChange(file, "add"))
-      watcher.on("unlink", file => onChange(file, "unlink"))
-      const closeWatcher = () => {
-        watcher.close()
-      }
-      server.httpServer?.once("close", closeWatcher)
+      // Vite watches only its root (the target); the files the target is
+      // copied from join its watcher here. `.livemark/` always exists
+      // because the target lives inside it.
+      server.watcher.add([opts.config.configPath, overridesRoot])
+      if (!IS_INSTALLED) server.watcher.add(SOURCE_DIR)
+      server.watcher.on("change", file => onChange(file, "change"))
+      server.watcher.on("add", file => onChange(file, "add"))
+      server.watcher.on("unlink", file => onChange(file, "unlink"))
+      server.watcher.on("unlinkDir", file => onChange(file, "unlink"))
 
       function onChange(file: string, kind: "change" | "add" | "unlink") {
         if (file === opts.config.configPath) {
           server.restart()
           return
         }
-        const overlayHit = matchOverlay(file, overridesRoot)
+        if (isWithin(file, targetDir) || isWithin(file, outDir)) return
+        const overlayHit = matchPath(file, overridesRoot)
         if (overlayHit) {
           syncOverlay(overlayHit, kind, targetDir, overridesRoot)
-          notifyVite(server, join(targetDir, overlayHit.rel), kind)
-          if (kind !== "change") fullReload(server)
           return
         }
-        const sourceHit = matchSource(file)
-        if (sourceHit) {
+        const sourceHit = matchPath(file, SOURCE_DIR)
+        if (sourceHit && !sourceHit.rel.includes("routeTree.gen.ts")) {
           syncSource(sourceHit, kind, targetDir, overridesRoot)
-          notifyVite(server, join(targetDir, sourceHit.rel), kind)
-          if (kind !== "change") fullReload(server)
         }
       }
     },
@@ -139,21 +128,14 @@ interface Hit {
   category: "folder" | "file" | null
 }
 
-function matchOverlay(file: string, overridesRoot: string): Hit | null {
-  const prefix = `${overridesRoot}${sep}`
-  if (!file.startsWith(prefix)) return null
-  const rel = file.slice(prefix.length)
+function matchPath(file: string, root: string): Hit | null {
+  if (!isWithin(file, root) || file === root) return null
+  const rel = file.slice(root.length + sep.length)
   return { rel, category: classify(rel) }
 }
 
-function matchSource(file: string): Hit | null {
-  const prefix = `${SOURCE_DIR}${sep}`
-  if (!file.startsWith(prefix)) return null
-  // Skip the targets/ output dir itself (sibling of source/) and any
-  // `.gen.ts` files that downstream tools regenerate inside the target.
-  const rel = file.slice(prefix.length)
-  if (rel === "" || rel.includes("routeTree.gen.ts")) return null
-  return { rel, category: classify(rel) }
+function isWithin(file: string, dir: string) {
+  return file === dir || file.startsWith(`${dir}${sep}`)
 }
 
 function classify(rel: string): "folder" | "file" | null {
@@ -175,7 +157,11 @@ function syncOverlay(
   const dest = join(targetDir, hit.rel)
   const source = join(SOURCE_DIR, hit.rel)
   if (kind === "unlink") {
-    rmSync(dest, { force: true, recursive: true })
+    // Copy a file's default over the escape in one write: an unlink then
+    // an add reaches Vite as two events and costs a page reload.
+    if (!existsSync(source) || statSync(source).isDirectory()) {
+      rmSync(dest, { force: true, recursive: true })
+    }
     if (existsSync(source)) cpSync(source, dest, { recursive: true, force: true })
     return
   }
@@ -201,33 +187,6 @@ function syncSource(
   if (existsSync(source)) cpSync(source, dest, { recursive: true, force: true })
 }
 
-function fullReload(server: ViteDevServer) {
-  server.ws.send({ type: "full-reload" })
-}
-
-/** Drive Vite's HMR pipeline manually for a target file we just synced.
- *  Vite's chokidar ignores `**\/node_modules/**` by default and our
- *  targetDir lives inside livemark's own node_modules in consumer
- *  projects, so cpSync writes there are silently filtered out.
- *
- *  Emitting on `server.watcher` runs Vite's HMR analysis per environment
- *  (CSS gets `hmr update`, route modules trigger `(ssr) page reload`).
- *  But `(ssr) page reload` only sends `full-reload` on the SSR
- *  environment's hot channel — the browser is connected to the *client*
- *  channel and never sees it. So we also fire `full-reload` on the
- *  client hot directly, which is what TanStack Start needs for route
- *  edits to actually refresh the page. CSS HMR still works because
- *  Vite's analysis runs first and updates already-flushed before our
- *  reload. */
-function notifyVite(
-  server: ViteDevServer,
-  targetFile: string,
-  kind: "change" | "add" | "unlink",
-) {
-  server.watcher.emit(kind, targetFile)
-  server.environments.client.hot.send({ type: "full-reload" })
-}
-
 /** Resolve livemark.config.ts's `vite` field — either a config object
  *  or a function `(env) => config` (matching Vite's own `defineConfig`).
  *  Schema stores it as `unknown`; typing for the consumer's editor

package/source/plugins/vite-robots.ts

@@ -1,7 +1,7 @@
 import { existsSync } from "node:fs"
 import { join } from "node:path"
 import type { Plugin } from "vite"
-import type { Config } from "../models/config.ts"
+import type { Config, ContentSignals } from "../models/config.ts"
 
 export interface RobotsOptions {
   config: Config
@@ -35,8 +35,13 @@ export function robots(opts: RobotsOptions): Plugin {
  *  line is appended only when `site` is set, because the directive
  *  requires a fully-qualified URL; `base` is included so the URL matches
  *  where the build (and the `sitemap.xml` inside it) is actually mounted. */
-export function renderRobots(config: Pick<Config, "site" | "base">) {
-  const lines = ["User-agent: *", "Allow: /"]
+export function renderRobots(
+  config: Pick<Config, "site" | "base"> & { contentSignals?: ContentSignals },
+) {
+  const lines = ["User-agent: *"]
+  // Agents read the signal as part of a user-agent group, so it must sit inside one.
+  if (config.contentSignals) lines.push(renderContentSignal(config.contentSignals))
+  lines.push("Allow: /")
   if (config.site) {
     const host = config.site.replace(/\/+$/, "")
     const base = config.base ?? ""
@@ -44,3 +49,13 @@ export function renderRobots(config: Pick<Config, "site" | "base">) {
   }
   return `${lines.join("\n")}\n`
 }
+
+function renderContentSignal(signals: ContentSignals) {
+  const flag = (value: boolean) => (value ? "yes" : "no")
+  const pairs = [
+    `search=${flag(signals.search)}`,
+    `ai-input=${flag(signals.aiInput)}`,
+    `ai-train=${flag(signals.aiTrain)}`,
+  ]
+  return `Content-Signal: ${pairs.join(", ")}`
+}

package/source/plugins/vite-robots.unit.ts

@@ -27,4 +27,11 @@ describe("renderRobots", () => {
   it("ignores base when site is not set", () => {
     expect(renderRobots({ base: "/repo" })).toBe("User-agent: *\nAllow: /\n")
   })
+
+  it("puts the content signals inside the wildcard group", () => {
+    const contentSignals = { search: true, aiInput: true, aiTrain: false }
+    expect(renderRobots({ contentSignals })).toBe(
+      "User-agent: *\nContent-Signal: search=yes, ai-input=yes, ai-train=no\nAllow: /\n",
+    )
+  })
 })

package/source/program.ts

@@ -1,5 +1,6 @@
 import { Command } from "commander"
 import { build } from "./commands/build.ts"
+import { clear } from "./commands/clear.ts"
 import { escape } from "./commands/escape.ts"
 import { preview } from "./commands/preview.ts"
 import { start } from "./commands/start.ts"
@@ -16,3 +17,4 @@ export const program = new Command()
   .addCommand(build)
   .addCommand(preview)
   .addCommand(escape)
+  .addCommand(clear)

package/source/routes/$.tsx

@@ -1,4 +1,6 @@
+import { config } from "livemark:virtual"
 import { createFileRoute, notFound, redirect } from "@tanstack/react-router"
+import { z } from "zod"
 import {
   currentSection,
   firstArticle,
@@ -6,12 +8,16 @@ import {
   sortedArticles,
 } from "../content/article.ts"
 import { sectionTags } from "../content/tag.ts"
+import { buildPageHead } from "../helpers/head.ts"
 import { Article } from "../components/Article.tsx"
 import { BlogIndex } from "../components/BlogIndex.tsx"
 import { ChangelogIndex } from "../components/ChangelogIndex.tsx"
+import { Layout } from "../components/Layout.tsx"
 import { TagIndex } from "../components/TagIndex.tsx"
 
 export const Route = createFileRoute("/$")({
+  // Loose, so keys this route does not own (UTM tags, devtools flags) survive.
+  validateSearch: z.looseObject({ highlight: z.string().optional().catch(undefined) }),
   loader: ({ params }) => {
     if (!params._splat) {
       if (homeArticle) return { ...homeArticle, sidebar: homeArticle.sidebar }
@@ -62,19 +68,31 @@ export const Route = createFileRoute("/$")({
 
     throw notFound()
   },
-  head: ({ loaderData }) => ({
-    meta: [
-      ...(loaderData ? [{ title: loaderData.title }] : []),
-      ...("description" in loaderData && loaderData.description
-        ? [{ name: "description", content: loaderData.description }]
-        : []),
-    ],
-  }),
+  head: ({ loaderData, params }) =>
+    buildPageHead({
+      config,
+      path: params._splat ? `/${params._splat}/` : "/",
+      title: loaderData?.title,
+      description:
+        loaderData && "description" in loaderData ? loaderData.description : undefined,
+      image: loaderData && "image" in loaderData ? loaderData.image : undefined,
+      isArticle: loaderData && "file" in loaderData,
+    }),
   component: Component,
 })
 
 function Component() {
   const data = Route.useLoaderData()
+  return (
+    <Layout withSidebar={data.sidebar}>
+      <Page />
+    </Layout>
+  )
+}
+
+function Page() {
+  const data = Route.useLoaderData()
+  const search = Route.useSearch()
   if ("blogIndex" in data) {
     return <BlogIndex sectionPrefix={data.sectionPrefix} />
   }
@@ -84,5 +102,5 @@ function Component() {
   if ("tagPage" in data) {
     return <TagIndex sectionPrefix={data.sectionPrefix} tag={data.tag} />
   }
-  return <Article article={data} />
+  return <Article article={data} highlight={search.highlight} />
 }