livemark 0.24.1 → 0.26.0

package/source/elements/sidebar.tsx

@@ -24,7 +24,6 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {
   state: "expanded" | "collapsed"
@@ -90,19 +89,6 @@ function SidebarProvider({
     return isMobileNow() ? setOpenMobile(open => !open) : setOpen(open => !open)
   }, [setOpen, setOpenMobile])
 
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
-
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? "expanded" : "collapsed"
@@ -221,10 +207,10 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          "sticky top-0 z-10 hidden h-svh w-(--sidebar-width) transition-[margin,translate,width] duration-200 ease-linear md:flex",
           side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            ? "group-data-[collapsible=offcanvas]:-ml-(--sidebar-width)"
+            : "group-data-[collapsible=offcanvas]:-ml-(--sidebar-width) group-data-[collapsible=offcanvas]:translate-x-full",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
@@ -258,6 +244,7 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon-sm"
+      aria-keyshortcuts="L"
       className={cn(className)}
       onClick={event => {
         onClick?.(event)
@@ -415,7 +402,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-control p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
           className,
         ),
       },
@@ -463,7 +450,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:[&_svg]:stroke-[2.5] data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:[&_svg]:stroke-[2.5] data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-row px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -552,7 +539,7 @@ function SidebarMenuAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-control p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
           showOnHover &&
             "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
           className,
@@ -658,7 +645,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:font-medium h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:font-medium h-7 gap-2 rounded-row px-3 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
           className,
         ),
       },

package/source/elements/tabs.tsx

@@ -21,7 +21,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "rounded-control p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -55,7 +55,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "gap-1.5 rounded-control border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

package/source/elements/textarea.tsx

@@ -5,7 +5,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-textarea border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/source/elements/toggle-group.tsx

@@ -40,7 +40,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-control data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
         className,
       )}
       {...props}
@@ -68,7 +68,7 @@ function ToggleGroupItem({
       data-size={context.size || size}
       data-spacing={context.spacing}
       className={cn(
-        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-control group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-control group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-control group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-control data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,

package/source/elements/toggle.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "cn"
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-control text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

package/source/env.d.ts

@@ -1,5 +1,6 @@
 declare module "livemark:virtual" {
   export const config: import("./models/config.ts").WebsiteConfig
+  export const bannerHtml: string | undefined
 }
 
 declare module "content-collections" {

package/source/head.ts

@@ -0,0 +1,7 @@
+import type { RootHead } from "./helpers/head.ts"
+
+/** Final pass over the site-wide `<head>`; shadow with `.livemark/head.ts` to add,
+ *  drop or replace tags. */
+export function customizeHead(head: RootHead) {
+  return head
+}

package/source/helpers/article-search.tsx

@@ -0,0 +1,192 @@
+import { useState, useRef, useCallback, useMemo } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import { create, insertMultiple, search } from "@orama/orama"
+import { sortedArticles } from "../content/article.ts"
+import { resolveArticleIcon } from "./article-icon.ts"
+import { buildHighlightPattern, findTextMatches } from "./search-highlight.ts"
+import { CommandGroup, CommandItem } from "../elements/command.tsx"
+
+interface SearchResult {
+  title: string
+  path: string
+  icon?: string
+  snippet: string
+  group: string
+}
+
+export function useArticleSearch() {
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [query, setQuery] = useState("")
+  const dbRef = useRef<Awaited<ReturnType<typeof create>> | null>(null)
+  const navigate = useNavigate()
+
+  const ensureIndex = useCallback(async () => {
+    if (dbRef.current) return dbRef.current
+    const db = await create({
+      schema: {
+        title: "string",
+        description: "string",
+        searchText: "string",
+      },
+    })
+    await insertMultiple(
+      db,
+      sortedArticles.map(a => ({
+        title: a.title,
+        description: a.description ?? "",
+        searchText: a.searchText,
+      })),
+    )
+    dbRef.current = db
+    return db
+  }, [])
+
+  const searchArticles = useCallback(
+    async (term: string) => {
+      setQuery(term)
+      if (!term.trim()) {
+        setResults([])
+        return
+      }
+      const db = await ensureIndex()
+      const hits = await search(db, {
+        term,
+        properties: ["title", "description", "searchText"],
+        tolerance: 1,
+        boost: { title: 3, description: 2 },
+      })
+      setResults(
+        hits.hits.map(hit => {
+          const article = sortedArticles.find(a => a.title === hit.document.title)
+          if (!article)
+            return toResult(
+              {
+                ...sortedArticles[0],
+                title: hit.document.title,
+                path: "",
+                searchText: hit.document.description,
+                description: hit.document.description,
+                icon: "",
+              },
+              term,
+            )
+          return toResult(article, term)
+        }),
+      )
+    },
+    [ensureIndex],
+  )
+
+  const selectArticle = useCallback(
+    (path: string) => {
+      setQuery("")
+      setResults([])
+      navigate({
+        to: "/$",
+        params: { _splat: path.replace(/^\/|\/$/g, "") },
+        search: { highlight: query.trim() || undefined },
+      })
+    },
+    [navigate, query],
+  )
+
+  const grouped = useMemo(() => {
+    const groups = new Map<string, SearchResult[]>()
+    for (const r of results) {
+      const list = groups.get(r.group) ?? []
+      list.push(r)
+      groups.set(r.group, list)
+    }
+    return groups
+  }, [results])
+
+  return { query, grouped, searchArticles, selectArticle }
+}
+
+export function SearchResultGroups(props: {
+  query: string
+  grouped: Map<string, SearchResult[]>
+  onSelect: (path: string) => void
+}) {
+  return [...props.grouped.entries()].map(([group, items]) => (
+    <CommandGroup key={group} heading={group}>
+      {items.map(result => {
+        const Icon = resolveArticleIcon(result.icon)
+        return (
+          <CommandItem
+            key={result.path}
+            value={result.path}
+            onSelect={() => props.onSelect(result.path)}
+            className="py-2.5"
+          >
+            {Icon && <Icon className="size-5 shrink-0 mt-0.5 self-start opacity-60" />}
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="text-base font-medium">{result.title}</span>
+              {result.snippet && (
+                <span className="text-sm text-muted-foreground line-clamp-1">
+                  <HighlightedText text={result.snippet} term={props.query} />
+                </span>
+              )}
+            </div>
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  ))
+}
+
+function toResult(article: (typeof sortedArticles)[number], term: string): SearchResult {
+  return {
+    title: article.title,
+    path: article.path,
+    icon: article.icon,
+    snippet: term
+      ? extractSnippet(article.searchText, term)
+      : (article.description ?? ""),
+    group: groupFor(article.path),
+  }
+}
+
+function groupFor(pathname: string) {
+  const segments = pathname.replace(/^\/|\/$/g, "").split("/")
+  if (segments.length <= 2) return "Pages"
+  return segments
+    .slice(1, -1)
+    .map(s =>
+      s
+        .split("-")
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" "),
+    )
+    .join(" › ")
+}
+
+function extractSnippet(text: string, term: string) {
+  const pattern = buildHighlightPattern(term)
+  const [match] = pattern ? findTextMatches(text, pattern) : []
+  if (!match) return text.slice(0, 120)
+  const [matchStart, matchEnd] = match
+  const start = Math.max(0, matchStart - 40)
+  const end = Math.min(text.length, matchEnd + 80)
+  const prefix = start > 0 ? "…" : ""
+  const suffix = end < text.length ? "…" : ""
+  return `${prefix}${text.slice(start, end)}${suffix}`
+}
+
+function HighlightedText(props: { text: string; term: string }) {
+  const pattern = buildHighlightPattern(props.term)
+  if (!pattern) return <>{props.text}</>
+  const parts: React.ReactNode[] = []
+  let cursor = 0
+  for (const [start, end] of findTextMatches(props.text, pattern)) {
+    parts.push(props.text.slice(cursor, start))
+    parts.push(
+      <span key={start} className="text-foreground font-medium">
+        {props.text.slice(start, end)}
+      </span>,
+    )
+    cursor = end
+  }
+  parts.push(props.text.slice(cursor))
+  return <>{parts}</>
+}

package/source/helpers/dependency-dir.ts

@@ -0,0 +1,20 @@
+import { existsSync, readdirSync, realpathSync } from "node:fs"
+import { basename, dirname, join } from "node:path"
+
+/**
+ * Locate the directory holding livemark's own dependencies, which the project's target
+ * links to as its `node_modules`.
+ */
+export function resolveDependencyDir(sourceDir: string) {
+  const packageDir = realpathSync(dirname(sourceDir))
+  const parent = dirname(packageDir)
+  const nested = join(packageDir, "node_modules")
+  // pnpm gives an installed package a `.bin`-only `node_modules`; its deps sit beside it
+  // in the store. Only real packages there (a checkout, npm's conflict copies) count.
+  if (hasPackages(nested) || basename(parent) !== "node_modules") return nested
+  return parent
+}
+
+function hasPackages(dir: string) {
+  return existsSync(dir) && readdirSync(dir).some(name => !name.startsWith("."))
+}

package/source/helpers/dependency-dir.unit.ts

@@ -0,0 +1,39 @@
+import { realpathSync } from "node:fs"
+import { mkdir } from "node:fs/promises"
+import { join } from "node:path"
+import { temporaryDirectoryTask } from "tempy"
+import { describe, expect, it } from "vite-plus/test"
+import { resolveDependencyDir } from "./dependency-dir.ts"
+
+describe("resolveDependencyDir", () => {
+  it("uses the store dir beside an isolated install", () =>
+    temporaryDirectoryTask(async root => {
+      const store = join(root, ".pnpm/livemark@1.0.0/node_modules")
+      await mkdir(join(store, "livemark/source"), { recursive: true })
+      await mkdir(join(store, "livemark/node_modules/.bin"), { recursive: true })
+
+      expect(resolveDependencyDir(join(store, "livemark/source"))).toBe(
+        realpathSync(store),
+      )
+    }))
+
+  it("uses the package's own node_modules when it has one", () =>
+    temporaryDirectoryTask(async root => {
+      const packageDir = join(root, "node_modules/livemark")
+      await mkdir(join(packageDir, "source"), { recursive: true })
+      await mkdir(join(packageDir, "node_modules/zod"), { recursive: true })
+
+      expect(resolveDependencyDir(join(packageDir, "source"))).toBe(
+        join(realpathSync(packageDir), "node_modules"),
+      )
+    }))
+
+  it("uses the checkout's node_modules outside an install", () =>
+    temporaryDirectoryTask(async root => {
+      await mkdir(join(root, "livemark/source"), { recursive: true })
+
+      expect(resolveDependencyDir(join(root, "livemark/source"))).toBe(
+        join(realpathSync(root), "livemark/node_modules"),
+      )
+    }))
+})

package/source/helpers/head.ts

@@ -0,0 +1,94 @@
+import type * as React from "react"
+import type { WebsiteConfig } from "../models/config.ts"
+import { faviconType } from "./favicon.ts"
+import { prefixUrl } from "./prefix-url.ts"
+import { buildThemeScript } from "./theme.ts"
+
+/** Site-wide `<head>` tags the root route renders on every page. */
+export interface RootHead {
+  meta: Array<React.JSX.IntrinsicElements["meta"]>
+  links: Array<React.JSX.IntrinsicElements["link"]>
+  scripts: Array<React.JSX.IntrinsicElements["script"]>
+}
+
+export function buildRootHead(props: {
+  config: WebsiteConfig
+  defaultFavicon: string
+  stylesheets: string[]
+}) {
+  const config = props.config
+  const favicon = prefixUrl(
+    config.favicon ?? config.logo ?? props.defaultFavicon,
+    config.base,
+  )
+  const feedLinks = config.site
+    ? (config.sections ?? [])
+        .filter(s => s.type === "blog")
+        .map(s => ({
+          rel: "alternate",
+          type: "application/rss+xml",
+          title: `${s.siteTitle ?? s.title} RSS Feed`,
+          href: prefixUrl(`${s.prefix}rss.xml`, config.base),
+        }))
+    : []
+  return {
+    meta: [
+      { charSet: "utf-8" },
+      { title: config.title },
+      { name: "description", content: config.description },
+      { property: "og:title", content: config.title },
+      { property: "og:description", content: config.description },
+      { property: "og:site_name", content: config.title },
+      { property: "og:type", content: "website" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      ...(config.head?.meta ?? []),
+    ],
+    links: [
+      { rel: "icon", href: favicon, type: faviconType(favicon) },
+      { rel: "shortcut icon", href: favicon, type: faviconType(favicon) },
+      ...props.stylesheets.map(href => ({ rel: "stylesheet", href })),
+      ...feedLinks,
+      ...(config.head?.links ?? []),
+    ],
+    scripts: [{ children: buildThemeScript() }, ...(config.head?.scripts ?? [])],
+  }
+}
+
+export function buildPageHead(props: {
+  config: WebsiteConfig
+  path: string
+  title?: string
+  description?: string
+  image?: string
+  isArticle?: boolean
+}) {
+  const site = props.config.site?.replace(/\/+$/, "")
+  const url = site ? buildAbsoluteUrl(site, props.config.base, props.path) : undefined
+  const image =
+    site && props.image
+      ? buildAbsoluteUrl(site, props.config.base, props.image)
+      : undefined
+  return {
+    meta: [
+      ...(props.title
+        ? [{ title: props.title }, { property: "og:title", content: props.title }]
+        : []),
+      ...(props.description
+        ? [
+            { name: "description", content: props.description },
+            { property: "og:description", content: props.description },
+          ]
+        : []),
+      ...(props.isArticle ? [{ property: "og:type", content: "article" }] : []),
+      ...(url ? [{ property: "og:url", content: url }] : []),
+      ...(image ? [{ property: "og:image", content: image }] : []),
+    ],
+    links: url ? [{ rel: "canonical", href: url }] : [],
+  }
+}
+
+function buildAbsoluteUrl(site: string, base: string | undefined, url: string) {
+  const prefixed = prefixUrl(url, base)
+  if (!prefixed.startsWith("/") || prefixed.startsWith("//")) return prefixed
+  return `${site}${prefixed}`
+}

package/source/helpers/head.unit.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vite-plus/test"
+import type { WebsiteConfig } from "../models/config.ts"
+import { buildPageHead, buildRootHead } from "./head.ts"
+
+const config: WebsiteConfig = { title: "Docs", description: "Blurb" }
+
+describe("buildRootHead", () => {
+  it("builds the default site tags", () => {
+    const head = buildRootHead({
+      config,
+      defaultFavicon: "/logo.svg",
+      stylesheets: ["/a.css"],
+    })
+    expect(head.meta).toContainEqual({ property: "og:title", content: "Docs" })
+    expect(head.links).toContainEqual({
+      rel: "icon",
+      href: "/logo.svg",
+      type: "image/svg+xml",
+    })
+    expect(head.links).toContainEqual({ rel: "stylesheet", href: "/a.css" })
+    expect(head.scripts).toHaveLength(1)
+  })
+
+  it("appends config head tags after the defaults", () => {
+    const head = buildRootHead({
+      config: {
+        ...config,
+        head: {
+          meta: [{ property: "og:type", content: "book" }],
+          links: [{ rel: "me", href: "https://x.com/me" }],
+          scripts: [{ src: "https://cdn.example.com/a.js" }],
+        },
+      },
+      defaultFavicon: "/logo.svg",
+      stylesheets: [],
+    })
+    expect(head.meta.at(-1)).toEqual({ property: "og:type", content: "book" })
+    expect(head.links.at(-1)).toEqual({ rel: "me", href: "https://x.com/me" })
+    expect(head.scripts.at(-1)).toEqual({ src: "https://cdn.example.com/a.js" })
+  })
+
+  it("links blog feeds only when site is set", () => {
+    const sections: WebsiteConfig["sections"] = [
+      { type: "blog", title: "Blog", prefix: "/blog/", position: "header" },
+    ]
+    const withoutSite = buildRootHead({
+      config: { ...config, sections },
+      defaultFavicon: "/logo.svg",
+      stylesheets: [],
+    })
+    const withSite = buildRootHead({
+      config: { ...config, sections, site: "https://example.com", base: "/repo" },
+      defaultFavicon: "/logo.svg",
+      stylesheets: [],
+    })
+    expect(withoutSite.links.some(l => l.rel === "alternate")).toBe(false)
+    expect(withSite.links).toContainEqual({
+      rel: "alternate",
+      type: "application/rss+xml",
+      title: "Blog RSS Feed",
+      href: "/repo/blog/rss.xml",
+    })
+  })
+})
+
+describe("buildPageHead", () => {
+  it("emits title, description and article type", () => {
+    const head = buildPageHead({
+      config,
+      path: "/guide/",
+      title: "Guide",
+      description: "How to",
+      isArticle: true,
+    })
+    expect(head.meta).toEqual([
+      { title: "Guide" },
+      { property: "og:title", content: "Guide" },
+      { name: "description", content: "How to" },
+      { property: "og:description", content: "How to" },
+      { property: "og:type", content: "article" },
+    ])
+    expect(head.links).toEqual([])
+  })
+
+  it("adds absolute url, canonical and image when site is set", () => {
+    const head = buildPageHead({
+      config: { ...config, site: "https://example.com/", base: "/repo" },
+      path: "/guide/",
+      image: "/repo/assets/cover.png",
+    })
+    expect(head.meta).toEqual([
+      { property: "og:url", content: "https://example.com/repo/guide/" },
+      { property: "og:image", content: "https://example.com/repo/assets/cover.png" },
+    ])
+    expect(head.links).toEqual([
+      { rel: "canonical", href: "https://example.com/repo/guide/" },
+    ])
+  })
+
+  it("keeps an already absolute image", () => {
+    const head = buildPageHead({
+      config: { ...config, site: "https://example.com" },
+      path: "/",
+      image: "https://cdn.example.com/cover.png",
+    })
+    expect(head.meta).toContainEqual({
+      property: "og:image",
+      content: "https://cdn.example.com/cover.png",
+    })
+  })
+
+  it("skips og:image without site", () => {
+    const head = buildPageHead({ config, path: "/", image: "/cover.png" })
+    expect(head.meta).toEqual([])
+  })
+})