livemark 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livemark",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Livemark description",
   "license": "MIT",
   "author": "Evgeny Karev",
@@ -105,7 +105,7 @@
     "react-dom": "19.2.4",
     "semantic-release": "24.2.9",
     "tempy": "3.2.0",
-    "vite-plus": "0.1.21",
+    "vite-plus": "0.1.24",
     "wrangler": "4.85.0"
   },
   "peerDependencies": {

package/skills/configuration/SKILL.md

@@ -59,9 +59,7 @@ export default defineConfig({
   ],
 
   // Optional: per-file frontmatter overrides
-  patches: [
-    { file: "README.md", article: { title: "Overview", icon: "sparkles" } },
-  ],
+  patches: [{ file: "README.md", article: { title: "Overview", icon: "sparkles" } }],
 })
 ```
 

package/source/actions/changelog/build.ts

@@ -1,11 +1,4 @@
-import {
-  access,
-  mkdir,
-  readFile,
-  readdir,
-  rm,
-  writeFile,
-} from "node:fs/promises"
+import { access, mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises"
 import { dirname, join, resolve } from "node:path"
 import slugify from "@sindresorhus/slugify"
 import type { Root, RootContent } from "mdast"
@@ -61,10 +54,7 @@ export function cacheIncludeGlob(config: Config) {
  *  `cache/changelog/`: the rendered `.md` entries plus a `meta.json`
  *  holding the etag for conditional GETs. On refresh we wipe only the
  *  `.md` files, leaving meta intact. */
-export async function buildChangelog(
-  section: ChangelogSection,
-  config: Config,
-) {
+export async function buildChangelog(section: ChangelogSection, config: Config) {
   const targetDir = targetDirFor(config.configPath)
   const cacheDir = join(targetDir, CACHE_SUBDIR)
   const metaPath = join(cacheDir, "meta.json")
@@ -160,9 +150,7 @@ function escapeMdxAngles(markdown: string) {
         return line
       }
       if (inFence) return line
-      return line.replace(/`[^`]*`|</g, match =>
-        match === "<" ? "\\<" : match,
-      )
+      return line.replace(/`[^`]*`|</g, match => (match === "<" ? "\\<" : match))
     })
     .join("\n")
 }
@@ -230,11 +218,7 @@ async function buildFromGitHub(
 }
 
 function wrapFrontmatter(entry: ChangelogEntry, section: ChangelogSection) {
-  const lines = [
-    "---",
-    `title: ${entry.title}`,
-    `path: ${section.prefix}${entry.slug}/`,
-  ]
+  const lines = ["---", `title: ${entry.title}`, `path: ${section.prefix}${entry.slug}/`]
   if (entry.date) lines.push(`date: ${entry.date}`)
   if (entry.sourceUrl) {
     lines.push(`sourceUrl: ${entry.sourceUrl}`, "sourceAction: view")

package/source/actions/config/load.ts

@@ -33,9 +33,7 @@ function detectCommand() {
  * hash, watcher) still has a stable per-project key.
  */
 export async function loadConfig(path?: string): Promise<Config> {
-  const configIndex = process.argv.findIndex(
-    a => a === "-c" || a === "--config",
-  )
+  const configIndex = process.argv.findIndex(a => a === "-c" || a === "--config")
   const cliPath = configIndex !== -1 ? process.argv[configIndex + 1] : undefined
   const explicit = path ?? cliPath
   const resolved = resolve(explicit ?? "livemark.config.ts")

package/source/actions/config/load.unit.ts

@@ -6,9 +6,7 @@ import { loadConfig } from "./load.ts"
 
 describe("loadConfig", () => {
   it("should throw when an explicit path points at a missing file", async () => {
-    await expect(loadConfig("/nonexistent/config.ts")).rejects.toThrow(
-      /not found/,
-    )
+    await expect(loadConfig("/nonexistent/config.ts")).rejects.toThrow(/not found/)
   })
 
   it("should return defaults when no path is given and cwd has no config", () =>
@@ -29,10 +27,7 @@ describe("loadConfig", () => {
   it("should load config from explicit path", () =>
     temporaryDirectoryTask(async tmpDir => {
       const configPath = join(tmpDir, "livemark.config.ts")
-      fs.writeFileSync(
-        configPath,
-        'export default { include: "articles/**/*.mdx" }\n',
-      )
+      fs.writeFileSync(configPath, 'export default { include: "articles/**/*.mdx" }\n')
       const config = await loadConfig(configPath)
       expect(config.include).toBe("articles/**/*.mdx")
       expect(config.root).toBe(tmpDir)

package/source/actions/target/build.ts

@@ -81,9 +81,6 @@ export function buildTarget(configPath: string) {
  *  rebuilding it. Used by code that needs to write into the target
  *  (e.g. cache writers) outside of `buildTarget`'s setup phase. */
 export function targetDirFor(configPath: string) {
-  const hash = createHash("sha256")
-    .update(configPath)
-    .digest("hex")
-    .slice(0, 16)
+  const hash = createHash("sha256").update(configPath).digest("hex").slice(0, 16)
   return join(TARGETS_ROOT, hash)
 }

package/source/commands/build.ts

@@ -2,13 +2,7 @@ import { join } from "node:path"
 import { Command } from "commander"
 import { createBuilder } from "vite"
 
-const configFile = join(
-  import.meta.dirname,
-  "..",
-  "..",
-  "source",
-  "vite.config.ts",
-)
+const configFile = join(import.meta.dirname, "..", "..", "source", "vite.config.ts")
 
 /**
  * Build the site for production.

package/source/commands/escape.ts

@@ -29,14 +29,11 @@ export const escape = new Command("escape")
   .action((relPath?: string) => {
     if (!relPath) {
       for (const file of listEscapable()) console.log(file)
-      console.log(
-        pc.dim("\nRun 'livemark escape <path>' to copy a file into .livemark/"),
-      )
+      console.log(pc.dim("\nRun 'livemark escape <path>' to copy a file into .livemark/"))
       return
     }
 
-    const isTopLevelFile =
-      !relPath.includes("/") && ESCAPABLE_FILES.includes(relPath)
+    const isTopLevelFile = !relPath.includes("/") && ESCAPABLE_FILES.includes(relPath)
     const [first] = relPath.split("/")
     const isFolderPath =
       !!first && ESCAPABLE_FOLDERS.includes(first) && !relPath.includes("..")
@@ -63,9 +60,7 @@ export const escape = new Command("escape")
 
     mkdirSync(dirname(dest), { recursive: true })
     writeFileSync(dest, readFileSync(src))
-    console.log(
-      `Copied ${pc.dim(relPath)} → ${pc.green(`.livemark/${relPath}`)}`,
-    )
+    console.log(`Copied ${pc.dim(relPath)} → ${pc.green(`.livemark/${relPath}`)}`)
   })
 
 function listEscapable() {

package/source/commands/preview.ts

@@ -2,13 +2,7 @@ import { join } from "node:path"
 import { Command } from "commander"
 import { preview as vitePreview } from "vite"
 
-const configFile = join(
-  import.meta.dirname,
-  "..",
-  "..",
-  "source",
-  "vite.config.ts",
-)
+const configFile = join(import.meta.dirname, "..", "..", "source", "vite.config.ts")
 
 /**
  * Preview the production build locally.

package/source/commands/start.ts

@@ -2,13 +2,7 @@ import { join } from "node:path"
 import { Command } from "commander"
 import { createServer } from "vite"
 
-const configFile = join(
-  import.meta.dirname,
-  "..",
-  "..",
-  "source",
-  "vite.config.ts",
-)
+const configFile = join(import.meta.dirname, "..", "..", "source", "vite.config.ts")
 
 /**
  * Start a development server.

package/source/components/Abbr.tsx

@@ -1,8 +1,4 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../elements/tooltip.tsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../elements/tooltip.tsx"
 
 /** Renders an abbreviation with a shadcn tooltip showing its full form */
 export function Abbr(props: { text: string; title: string }) {

package/source/components/Article.tsx

@@ -13,11 +13,7 @@ import { Column } from "./Column.tsx"
 import { Columns } from "./Columns.tsx"
 import { ContentTab } from "./ContentTab.tsx"
 import { ContentTabs } from "./ContentTabs.tsx"
-import {
-  DefinitionDetail,
-  DefinitionList,
-  DefinitionTerm,
-} from "./DefinitionList.tsx"
+import { DefinitionDetail, DefinitionList, DefinitionTerm } from "./DefinitionList.tsx"
 import { Details } from "./Details.tsx"
 import { FileTree } from "./FileTree.tsx"
 import { Footer } from "./Footer.tsx"

package/source/components/BlogIndex.tsx

@@ -31,9 +31,7 @@ export function BlogIndex(props: { sectionPrefix: string }) {
       const parts = [`## ${post.title}`]
       if (post.date) parts.push(formatDate(post.date))
       if (post.author) {
-        parts.push(
-          Array.isArray(post.author) ? post.author.join(", ") : post.author,
-        )
+        parts.push(Array.isArray(post.author) ? post.author.join(", ") : post.author)
       }
       if (post.description) parts.push("", post.description)
       return parts.join("\n")
@@ -77,16 +75,12 @@ export function BlogIndex(props: { sectionPrefix: string }) {
                   {post.date && <span>{formatDate(post.date)}</span>}
                   {post.author && (
                     <span>
-                      {Array.isArray(post.author)
-                        ? post.author.join(", ")
-                        : post.author}
+                      {Array.isArray(post.author) ? post.author.join(", ") : post.author}
                     </span>
                   )}
                 </p>
                 {post.description && (
-                  <p className="text-muted-foreground mt-2">
-                    {post.description}
-                  </p>
+                  <p className="text-muted-foreground mt-2">{post.description}</p>
                 )}
               </article>
             ))}

package/source/components/Callout.tsx

@@ -54,12 +54,7 @@ export function Callout(props: {
   const title = props.title ?? config.label
 
   return (
-    <aside
-      className={cn(
-        "not-prose my-4 rounded-xl border px-4 py-3",
-        config.classes,
-      )}
-    >
+    <aside className={cn("not-prose my-4 rounded-xl border px-4 py-3", config.classes)}>
       <div className="flex items-center gap-2 font-semibold text-sm mb-2">
         <Icon className="size-4 shrink-0" />
         <span>{title}</span>

package/source/components/ChangelogIndex.tsx

@@ -74,9 +74,7 @@ export function ChangelogIndex(props: { sectionPrefix: string }) {
                   </p>
                 )}
                 {entry.description && (
-                  <p className="text-muted-foreground mt-2">
-                    {entry.description}
-                  </p>
+                  <p className="text-muted-foreground mt-2">{entry.description}</p>
                 )}
               </article>
             ))}

package/source/components/CodeBlock.tsx

@@ -1,10 +1,6 @@
 import { Check, ChevronDown, Clipboard, WrapText } from "lucide-react"
 import { useRef, useState } from "react"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../elements/tooltip.tsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../elements/tooltip.tsx"
 
 export function CodeBlock(props: React.ComponentProps<"pre">) {
   const [copied, setCopied] = useState(false)
@@ -17,9 +13,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
   const maxLines = meta?.match(/maxLines=(\d+)/)?.[1]
   const icon = extra.icon as string | undefined
   const style = props.style as Record<string, string> | undefined
-  const collapsedHeight = maxLines
-    ? `${Number(maxLines) * 1.5 + 1.75}rem`
-    : undefined
+  const collapsedHeight = maxLines ? `${Number(maxLines) * 1.5 + 1.75}rem` : undefined
 
   const handleCopy = () => {
     const text = preRef.current?.textContent ?? ""
@@ -54,9 +48,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
-            <TooltipContent>
-              {wrap ? "Disable wrap" : "Enable wrap"}
-            </TooltipContent>
+            <TooltipContent>{wrap ? "Disable wrap" : "Enable wrap"}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger
@@ -83,9 +75,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
-            <TooltipContent>
-              {wrap ? "Disable wrap" : "Enable wrap"}
-            </TooltipContent>
+            <TooltipContent>{wrap ? "Disable wrap" : "Enable wrap"}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger

package/source/components/CodeTabs.tsx

@@ -37,9 +37,7 @@ export function CodeTabs(props: {
   useEffect(() => {
     if (!props.sync) return
     const handler = (e: Event) => {
-      const { sync, title } = (
-        e as CustomEvent<{ sync: string; title: string }>
-      ).detail
+      const { sync, title } = (e as CustomEvent<{ sync: string; title: string }>).detail
       if (sync !== props.sync) return
       const idx = names.indexOf(title)
       if (idx >= 0) setActive(idx)

package/source/components/Columns.tsx

@@ -1,9 +1,7 @@
 /** Grid layout for arranging content side by side */
 export function Columns(props: { cols?: string; children: React.ReactNode }) {
   const cols = props.cols ? parseInt(props.cols, 10) : undefined
-  const style = cols
-    ? { gridTemplateColumns: `repeat(${cols}, 1fr)` }
-    : undefined
+  const style = cols ? { gridTemplateColumns: `repeat(${cols}, 1fr)` } : undefined
   return (
     <div className="grid gap-6 my-4 sm:grid-cols-2" style={style}>
       {props.children}

package/source/components/Content.tsx

@@ -1,7 +1,3 @@
 export function Content(props: { children: React.ReactNode }) {
-  return (
-    <div className="w-full max-w-7xl mx-auto px-4 md:px-10">
-      {props.children}
-    </div>
-  )
+  return <div className="w-full max-w-7xl mx-auto px-4 md:px-10">{props.children}</div>
 }

package/source/components/ContentTab.tsx

@@ -1,7 +1,4 @@
 /** Simple wrapper that provides a title prop for ContentTabs to read */
-export function ContentTab(props: {
-  title: string
-  children: React.ReactNode
-}) {
+export function ContentTab(props: { title: string; children: React.ReactNode }) {
   return <div>{props.children}</div>
 }

package/source/components/ContentTabs.tsx

@@ -1,10 +1,7 @@
 import { Children, isValidElement, useEffect, useState } from "react"
 
 /** Tabbed container component for grouping content tabs with optional sync across groups */
-export function ContentTabs(props: {
-  sync?: string
-  children: React.ReactNode
-}) {
+export function ContentTabs(props: { sync?: string; children: React.ReactNode }) {
   const children = Children.toArray(props.children)
   const titles = children.map(child =>
     isValidElement<{ title: string }>(child) ? child.props.title : "",
@@ -38,9 +35,7 @@ export function ContentTabs(props: {
   useEffect(() => {
     if (!props.sync) return
     const handler = (e: Event) => {
-      const { sync, title } = (
-        e as CustomEvent<{ sync: string; title: string }>
-      ).detail
+      const { sync, title } = (e as CustomEvent<{ sync: string; title: string }>).detail
       if (sync !== props.sync) return
       const idx = titles.indexOf(title)
       if (idx >= 0) setActive(idx)
@@ -70,9 +65,7 @@ export function ContentTabs(props: {
       {children.map((child, i) => (
         <div
           key={titles[i]}
-          className={
-            i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"
-          }
+          className={i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"}
         >
           {child}
         </div>

package/source/components/DefinitionList.tsx

@@ -13,9 +13,6 @@ export function DefinitionTerm(props: ComponentProps<"dt">) {
 /** Styled definition detail with a left border accent */
 export function DefinitionDetail(props: ComponentProps<"dd">) {
   return (
-    <dd
-      {...props}
-      className="ml-0 pl-4 border-l-2 border-border text-muted-foreground"
-    />
+    <dd {...props} className="ml-0 pl-4 border-l-2 border-border text-muted-foreground" />
   )
 }

package/source/components/FileTree.tsx

@@ -21,11 +21,7 @@ function TreeItems(props: { items: TreeItem[]; depth: number }) {
   return (
     <ul className={props.depth > 0 ? "ml-4 border-l border-border pl-2" : ""}>
       {props.items.map((item, index) => (
-        <TreeNode
-          key={`${item.name}-${index}`}
-          item={item}
-          depth={props.depth}
-        />
+        <TreeNode key={`${item.name}-${index}`} item={item} depth={props.depth} />
       ))}
     </ul>
   )

package/source/components/FootnoteRef.tsx

@@ -1,9 +1,5 @@
 import { type ComponentProps, useEffect, useState } from "react"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../elements/hover-card.tsx"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../elements/hover-card.tsx"
 
 const FOOTNOTE_PREFIX = "#user-content-fn-"
 

package/source/components/InlineToc.tsx

@@ -13,10 +13,7 @@ export function InlineToc(props: { maxLevel?: string }) {
       <p className="text-base font-semibold mb-4">Table of Contents</p>
       <ul className="text-base space-y-2.5">
         {items.map(item => (
-          <li
-            key={item.url}
-            style={{ paddingLeft: `${(item.depth - 2) * 1.25}rem` }}
-          >
+          <li key={item.url} style={{ paddingLeft: `${(item.depth - 2) * 1.25}rem` }}>
             <a
               href={item.url}
               className="text-muted-foreground hover:text-primary transition-colors"

package/source/components/Layout.tsx

@@ -26,10 +26,7 @@ function splatFor(pathname: string) {
   return { _splat: pathname.replace(/^\/|\/$/g, "") }
 }
 
-export function Layout(props: {
-  withSidebar?: boolean
-  children?: React.ReactNode
-}) {
+export function Layout(props: { withSidebar?: boolean; children?: React.ReactNode }) {
   const pathname = useLocation({ select: l => l.pathname })
   const articleRoute = useMatch({ from: "/$", shouldThrow: false })
   const activeSection = articleRoute
@@ -56,10 +53,7 @@ export function Layout(props: {
             <div className="hidden lg:flex">
               <SidebarTrigger />
             </div>
-            <SiteLink
-              to={siteLinkTarget}
-              className="lg:hidden flex items-center gap-2"
-            >
+            <SiteLink to={siteLinkTarget} className="lg:hidden flex items-center gap-2">
               <SiteTitle />
             </SiteLink>
           </>
@@ -100,8 +94,7 @@ export function Layout(props: {
               const latestVersion =
                 section.type === "changelog" && section.version
                   ? sortedArticles.find(
-                      a =>
-                        a.path === sectionFlatArticles.get(section.prefix)?.[0],
+                      a => a.path === sectionFlatArticles.get(section.prefix)?.[0],
                     )?.title
                   : undefined
               return (

package/source/components/LinkButton.tsx

@@ -5,13 +5,7 @@ import { cn } from "../utils/style.ts"
 export function LinkButton(props: {
   href: string
   label: string
-  variant?:
-    | "default"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "destructive"
-    | "link"
+  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link"
   size?: "default" | "sm" | "lg"
 }) {
   return (

package/source/components/Mermaid.tsx

@@ -7,9 +7,7 @@ export function Mermaid(props: { children: string }) {
   return (
     <Suspense
       fallback={
-        <div className="not-prose mermaid flex justify-center">
-          Loading diagram…
-        </div>
+        <div className="not-prose mermaid flex justify-center">Loading diagram…</div>
       }
     >
       <MermaidRenderer>{props.children}</MermaidRenderer>

package/source/components/PackageTabs.tsx

@@ -55,11 +55,7 @@ export function PackageTabs(props: PackageTabsProps) {
           className="me-2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Copy code"
         >
-          {copied ? (
-            <Check className="size-3.5" />
-          ) : (
-            <Clipboard className="size-3.5" />
-          )}
+          {copied ? <Check className="size-3.5" /> : <Clipboard className="size-3.5" />}
         </button>
       </div>
       <div className="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px]">

package/source/components/PageToolbar.tsx

@@ -59,11 +59,7 @@ export function PageToolbar(props: {
           </span>
         )}
         <button type="button" onClick={handleCopy} className={buttonClass}>
-          {copied ? (
-            <Check className="size-3.5" />
-          ) : (
-            <Copy className="size-3.5" />
-          )}
+          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
           Copy Markdown
         </button>
         <button

package/source/components/PrevNext.tsx

@@ -18,12 +18,8 @@ export function PrevNext(props: { path: string }) {
 
   const prevPath = index > 0 ? flat[index - 1] : undefined
   const nextPath = index < flat.length - 1 ? flat[index + 1] : undefined
-  const prev = prevPath
-    ? sortedArticles.find(a => a.path === prevPath)
-    : undefined
-  const next = nextPath
-    ? sortedArticles.find(a => a.path === nextPath)
-    : undefined
+  const prev = prevPath ? sortedArticles.find(a => a.path === prevPath) : undefined
+  const next = nextPath ? sortedArticles.find(a => a.path === nextPath) : undefined
 
   if (!prev && !next) return null
 

package/source/components/SearchDialog.tsx

@@ -80,9 +80,7 @@ export function SearchDialog(props: {
       })
       setResults(
         hits.hits.map(hit => {
-          const article = sortedArticles.find(
-            a => a.title === hit.document.title,
-          )
+          const article = sortedArticles.find(a => a.title === hit.document.title)
           if (!article)
             return toResult(
               {
@@ -161,9 +159,7 @@ export function SearchDialog(props: {
                     <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>
+                    <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={query} />

package/source/components/SectionHeader.tsx

@@ -10,13 +10,7 @@ export function SectionHeader(props: {
   const align = props.align ?? "center"
 
   return (
-    <div
-      className={cn(
-        align === "center" && "text-center",
-        "mb-12",
-        props.className,
-      )}
-    >
+    <div className={cn(align === "center" && "text-center", "mb-12", props.className)}>
       {props.label && (
         <p className="text-primary text-xs uppercase tracking-[0.2em] font-medium mb-3">
           {props.label}

package/source/components/Sidebar.tsx

@@ -44,10 +44,7 @@ export function Sidebar(props: { withSidebar?: boolean }) {
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton
-              size="lg"
-              render={<SiteLink to={siteLinkTarget} />}
-            >
+            <SidebarMenuButton size="lg" render={<SiteLink to={siteLinkTarget} />}>
               <SiteTitle />
             </SidebarMenuButton>
           </SidebarMenuItem>
@@ -56,9 +53,7 @@ export function Sidebar(props: { withSidebar?: boolean }) {
       <SidebarContent>
         <SidebarSections />
         {props.withSidebar && section?.type === "blog" && <SidebarPosts />}
-        {props.withSidebar && section?.type === "changelog" && (
-          <SidebarReleases />
-        )}
+        {props.withSidebar && section?.type === "changelog" && <SidebarReleases />}
         {props.withSidebar &&
           section?.type !== "blog" &&
           section?.type !== "changelog" && <SidebarArticles />}