livemark 0.2.0 → 0.7.1

package/build/website/components/ChangelogIndex.tsx

@@ -0,0 +1,111 @@
+import { Link } from "@tanstack/react-router"
+import { History } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import { Separator } from "../elements/separator.tsx"
+import { TocContext } from "../helpers/toc-context.ts"
+import { Footer } from "./Footer.tsx"
+import { PageToolbar } from "./PageToolbar.tsx"
+import { MobileToc, Toc } from "./Toc.tsx"
+
+/** Auto-generated changelog index listing all versions by date */
+export function ChangelogIndex(props: { sectionPrefix: string }) {
+  const section = currentSection(props.sectionPrefix)
+  const flat = sectionFlatArticles.get(props.sectionPrefix) ?? []
+  const entries = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+
+  const tocItems = entries.map(entry => ({
+    url: `#${slugOf(entry.path)}`,
+    title: entry.title,
+    depth: 2,
+  }))
+
+  const content = [
+    `# ${section?.title ?? "Changelog"}`,
+    ...entries.map(entry => {
+      const parts = [`## ${entry.title}`]
+      if (entry.date) parts.push(formatDate(entry.date))
+      if (entry.description) parts.push("", entry.description)
+      return parts.join("\n")
+    }),
+  ].join("\n\n")
+
+  return (
+    <TocContext.Provider value={tocItems}>
+      <MobileToc items={tocItems}>
+        <PageToolbar content={content} />
+      </MobileToc>
+      <div className="flex flex-1 gap-10 p-4 pt-8 md:p-10">
+        <div className="flex-1 min-w-0 mx-auto max-w-3xl">
+          <div className="prose dark:prose-invert max-w-none mb-8">
+            <h1 id="top">
+              <a href="#top">{section?.title ?? "Changelog"}</a>
+            </h1>
+            {entries[0]?.date && (
+              <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground !-mt-4 !mb-0">
+                <span className="flex items-center gap-1.5">
+                  <History className="size-3.5" />
+                  Updated {formatDate(entries[0].date)}
+                </span>
+              </p>
+            )}
+          </div>
+          <div className="space-y-6">
+            {entries.map((entry, i) => (
+              <article key={entry.path} id={slugOf(entry.path)}>
+                {i > 0 && <Separator className="mb-6" />}
+                <h2 className="text-2xl">
+                  <Link
+                    to="/$"
+                    params={{ _splat: entry.path.replace(/^\/|\/$/g, "") }}
+                    className="font-medium hover:text-primary transition-colors"
+                  >
+                    {entry.title}
+                  </Link>
+                </h2>
+                {entry.date && (
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {formatDate(entry.date)}
+                  </p>
+                )}
+                {entry.description && (
+                  <p className="text-muted-foreground mt-2">
+                    {entry.description}
+                  </p>
+                )}
+              </article>
+            ))}
+          </div>
+          <div className="mt-10">
+            <Footer />
+          </div>
+        </div>
+        <Toc items={tocItems}>
+          <PageToolbar content={content} />
+        </Toc>
+      </div>
+    </TocContext.Provider>
+  )
+}
+
+function slugOf(path: string) {
+  return (
+    path
+      .replace(/^\/|\/$/g, "")
+      .split("/")
+      .pop() ?? ""
+  )
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  })
+}

package/build/website/components/ChangelogSidebar.tsx

@@ -0,0 +1,120 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { Clock, List } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import {
+  Sidebar as SidebarRoot,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  useSidebar,
+} from "../elements/sidebar.tsx"
+import { Search } from "./Search.tsx"
+import { SidebarLinks } from "./SidebarLinks.tsx"
+import { SidebarSections } from "./SidebarSections.tsx"
+import { SiteTitle } from "./SiteTitle.tsx"
+import { Theme } from "./Theme.tsx"
+
+/** Changelog-specific sidebar with Releases and shared Links */
+export function ChangelogSidebar() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const { toggleSidebar } = useSidebar()
+
+  useHotkey("S", toggleSidebar)
+
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
+  const entries = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+  const recent = entries.slice(0, 10)
+
+  const normalized = `/${pathname.replace(/^\/|\/$/g, "")}/`
+  const isIndex = section ? normalized === section.prefix : false
+  const sectionPath = (section?.prefix ?? "/changelog/").replace(/^\/|\/$/g, "")
+
+  return (
+    <SidebarRoot>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSections />
+        <SidebarGroup>
+          <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+            Releases
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  isActive={isIndex}
+                  className={isIndex ? "" : "opacity-75"}
+                  render={<Link to="/$" params={{ _splat: sectionPath }} />}
+                >
+                  <List className="size-4" />
+                  <span>All Releases</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton className="opacity-75">
+                  <Clock className="size-4" />
+                  <span>Recent Releases</span>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  {recent.map(entry => {
+                    const active = normalized === entry.path
+                    return (
+                      <SidebarMenuSubItem key={entry.path}>
+                        <SidebarMenuSubButton
+                          isActive={active}
+                          className={active ? "" : "opacity-75"}
+                          render={
+                            <Link
+                              to="/$"
+                              params={{
+                                _splat: entry.path.replace(/^\/|\/$/g, ""),
+                              }}
+                            />
+                          }
+                        >
+                          <span>{entry.title}</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    )
+                  })}
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarLinks />
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </SidebarRoot>
+  )
+}

package/build/website/components/CodeBlock.tsx

@@ -0,0 +1,135 @@
+import { Check, ChevronDown, Clipboard, WrapText } from "lucide-react"
+import { useRef, useState } from "react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../elements/tooltip.tsx"
+
+export function CodeBlock(props: React.ComponentProps<"pre">) {
+  const [copied, setCopied] = useState(false)
+  const [wrap, setWrap] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const preRef = useRef<HTMLPreElement>(null)
+  const extra = props as Record<string, unknown>
+  const meta = extra["data-meta"] as string | undefined
+  const title = meta?.match(/title="([^"]+)"/)?.[1]
+  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 handleCopy = () => {
+    const text = preRef.current?.textContent ?? ""
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleWrapToggle = () => {
+    setWrap(prev => !prev)
+  }
+
+  return (
+    <figure
+      className="shiki not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
+      style={{ ...style, backgroundColor: undefined }}
+    >
+      {title ? (
+        <div className="flex items-center gap-2 h-9.5 border-b px-4 text-muted-foreground">
+          {icon && (
+            <span
+              className="size-3.5 [&>svg]:size-full"
+              dangerouslySetInnerHTML={{ __html: icon }}
+            />
+          )}
+          <span className="flex-1 truncate text-xs font-medium">{title}</span>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleWrapToggle}
+              aria-label={wrap ? "Disable wrap" : "Enable wrap"}
+              className={`-me-2 p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            >
+              <WrapText className="size-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>
+              {wrap ? "Disable wrap" : "Enable wrap"}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleCopy}
+              aria-label={copied ? "Copied" : "Copy code"}
+              className="-me-2 p-1.5 rounded-md hover:text-foreground transition-colors"
+            >
+              {copied ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Clipboard className="size-3.5" />
+              )}
+            </TooltipTrigger>
+            <TooltipContent>{copied ? "Copied!" : "Copy code"}</TooltipContent>
+          </Tooltip>
+        </div>
+      ) : (
+        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-lg text-muted-foreground">
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleWrapToggle}
+              aria-label={wrap ? "Disable wrap" : "Enable wrap"}
+              className={`p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            >
+              <WrapText className="size-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>
+              {wrap ? "Disable wrap" : "Enable wrap"}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleCopy}
+              aria-label={copied ? "Copied" : "Copy code"}
+              className="p-1.5 rounded-md hover:text-foreground transition-colors"
+            >
+              {copied ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Clipboard className="size-3.5" />
+              )}
+            </TooltipTrigger>
+            <TooltipContent>{copied ? "Copied!" : "Copy code"}</TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+      <div
+        className="text-[0.8125rem] py-3.5 overflow-auto transition-[max-height] duration-300"
+        style={{
+          maxHeight: collapsedHeight && !expanded ? collapsedHeight : "600px",
+        }}
+      >
+        <pre
+          {...props}
+          ref={preRef}
+          style={undefined}
+          className={
+            wrap
+              ? "min-w-full whitespace-pre-wrap break-words [&>code]:flex [&>code]:flex-col"
+              : "min-w-full w-max [&>code]:flex [&>code]:flex-col"
+          }
+        />
+      </div>
+      {collapsedHeight && !expanded && (
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          className="flex items-center justify-center gap-1 w-full py-1.5 text-xs text-muted-foreground hover:text-foreground border-t cursor-pointer transition-colors"
+        >
+          <ChevronDown className="size-3.5" />
+          Expand
+        </button>
+      )}
+    </figure>
+  )
+}

package/build/website/components/CodeTabs.tsx

@@ -0,0 +1,83 @@
+import { Children, useEffect, useState } from "react"
+
+/** Tabbed code block component for grouping multiple code blocks with optional sync */
+export function CodeTabs(props: {
+  tabs: string
+  sync?: string
+  children: React.ReactNode
+}) {
+  const names = JSON.parse(props.tabs) as string[]
+  const children = Children.toArray(props.children)
+
+  const getInitialIndex = () => {
+    if (!props.sync) return 0
+    const saved =
+      typeof window !== "undefined"
+        ? localStorage.getItem("livemark-tab-" + props.sync)
+        : null
+    if (!saved) return 0
+    const idx = names.indexOf(saved)
+    return idx >= 0 ? idx : 0
+  }
+
+  const [active, setActive] = useState(getInitialIndex)
+
+  const handleSelect = (i: number) => {
+    setActive(i)
+    if (props.sync) {
+      localStorage.setItem("livemark-tab-" + props.sync, names[i]!)
+      window.dispatchEvent(
+        new CustomEvent("livemark-tab-sync", {
+          detail: { sync: props.sync, title: names[i] },
+        }),
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (!props.sync) return
+    const handler = (e: Event) => {
+      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)
+    }
+    window.addEventListener("livemark-tab-sync", handler)
+    return () => window.removeEventListener("livemark-tab-sync", handler)
+  }, [props.sync, names])
+
+  return (
+    <div className="not-prose my-4 rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+      <div className="flex border-b">
+        {names.map((name, i) => (
+          <button
+            key={name}
+            type="button"
+            onClick={() => handleSelect(i)}
+            className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer ${
+              i === active
+                ? "text-foreground border-b-2 border-primary -mb-px"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+      {children.map((child, i) => (
+        <div
+          key={names[i]}
+          className={
+            i === active
+              ? "[&>figure]:my-0 [&>figure]:rounded-none [&>figure]:border-0 [&>figure]:shadow-none"
+              : "hidden"
+          }
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}

package/build/website/components/Column.tsx

@@ -0,0 +1,4 @@
+/** Single column within a Columns grid */
+export function Column(props: { children: React.ReactNode }) {
+  return <div className="max-w-none">{props.children}</div>
+}

package/build/website/components/Columns.tsx

@@ -0,0 +1,12 @@
+/** 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
+  return (
+    <div className="grid gap-6 my-4 sm:grid-cols-2" style={style}>
+      {props.children}
+    </div>
+  )
+}

package/build/website/components/Content.tsx

@@ -0,0 +1,7 @@
+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>
+  )
+}

package/build/website/components/ContentTab.tsx

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

package/build/website/components/ContentTabs.tsx

@@ -0,0 +1,82 @@
+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
+}) {
+  const children = Children.toArray(props.children)
+  const titles = children.map(child =>
+    isValidElement<{ title: string }>(child) ? child.props.title : "",
+  )
+
+  const getInitialIndex = () => {
+    if (!props.sync) return 0
+    const saved =
+      typeof window !== "undefined"
+        ? localStorage.getItem("livemark-tab-" + props.sync)
+        : null
+    if (!saved) return 0
+    const idx = titles.indexOf(saved)
+    return idx >= 0 ? idx : 0
+  }
+
+  const [active, setActive] = useState(getInitialIndex)
+
+  const handleSelect = (i: number) => {
+    setActive(i)
+    if (props.sync) {
+      localStorage.setItem("livemark-tab-" + props.sync, titles[i]!)
+      window.dispatchEvent(
+        new CustomEvent("livemark-tab-sync", {
+          detail: { sync: props.sync, title: titles[i] },
+        }),
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (!props.sync) return
+    const handler = (e: Event) => {
+      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)
+    }
+    window.addEventListener("livemark-tab-sync", handler)
+    return () => window.removeEventListener("livemark-tab-sync", handler)
+  }, [props.sync, titles])
+
+  return (
+    <div className="not-prose my-4 rounded-xl border bg-card">
+      <div className="flex border-b">
+        {titles.map((title, i) => (
+          <button
+            key={title}
+            type="button"
+            onClick={() => handleSelect(i)}
+            className={`px-4 py-2 text-sm font-medium transition-colors cursor-pointer ${
+              i === active
+                ? "text-foreground border-b-2 border-primary -mb-px"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {title}
+          </button>
+        ))}
+      </div>
+      {children.map((child, i) => (
+        <div
+          key={titles[i]}
+          className={
+            i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"
+          }
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}

package/build/website/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,54 @@
+import type { ErrorComponentProps } from "@tanstack/react-router"
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from "@tanstack/react-router"
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: state => state.id === rootRouteId,
+  })
+
+  console.error(error)
+
+  return (
+    <div className="min-h-[60vh] flex flex-col items-center justify-center gap-6 px-4">
+      <ErrorComponent error={error} />
+      <div className="flex gap-3 items-center flex-wrap">
+        <button
+          type="button"
+          onClick={() => {
+            router.invalidate()
+          }}
+          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+        >
+          Try Again
+        </button>
+        {isRoot ? (
+          <Link
+            to="/"
+            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+            onClick={(e: any) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

package/build/website/components/DefinitionList.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react"
+
+/** Styled wrapper for definition lists produced by remark-definition-list */
+export function DefinitionList(props: ComponentProps<"dl">) {
+  return <dl {...props} className="not-prose space-y-4" />
+}
+
+/** Styled definition term rendered as bold text */
+export function DefinitionTerm(props: ComponentProps<"dt">) {
+  return <dt {...props} className="text-foreground font-semibold" />
+}
+
+/** 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"
+    />
+  )
+}

package/build/website/components/Details.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react"
+import { ChevronRight } from "lucide-react"
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../elements/collapsible.tsx"
+
+/** Collapsible content section with a summary label */
+export function Details(props: { summary: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="not-prose my-4 rounded-xl border border-border bg-card px-4 py-3"
+    >
+      <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 text-sm font-semibold select-none">
+        <ChevronRight
+          className={`size-4 shrink-0 transition-transform ${open ? "rotate-90" : ""}`}
+        />
+        {props.summary}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3 text-sm [&>p]:my-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {props.children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}