livemark 0.0.0-dev

package/build/website/components/SearchDialog.tsx

@@ -0,0 +1,245 @@
+import { useState, useRef, useCallback, useMemo } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import { FileText } from "lucide-react"
+import { create, insertMultiple, search } from "@orama/orama"
+import { sortedArticles } from "../helpers/articles.ts"
+import { articleIcons } from "../helpers/article-icon.ts"
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../elements/command.tsx"
+
+interface SearchResult {
+  title: string
+  pathname: string
+  icon: string
+  snippet: string
+  group: string
+}
+
+/** Full-text search dialog powered by Orama */
+export function SearchDialog(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  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 toResult = useCallback(
+    (article: (typeof sortedArticles)[number], term: string): SearchResult => ({
+      title: article.title,
+      pathname: article.pathname,
+      icon: article.icon,
+      snippet: term
+        ? extractSnippet(article.searchText, term)
+        : (article.description ?? ""),
+      group: groupFor(article.pathname),
+    }),
+    [],
+  )
+
+  const handleSearch = 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,
+                pathname: "",
+                searchText: hit.document.description,
+                description: hit.document.description,
+                icon: "",
+              },
+              term,
+            )
+          return toResult(article, term)
+        }),
+      )
+    },
+    [ensureIndex, toResult],
+  )
+
+  const handleSelect = useCallback(
+    (pathname: string) => {
+      props.onOpenChange(false)
+      setQuery("")
+      setResults([])
+      navigate({
+        to: "/$",
+        params: { _splat: pathname.replace(/^\/|\/$/g, "") },
+      })
+    },
+    [navigate, props.onOpenChange],
+  )
+
+  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 (
+    <CommandDialog
+      title="Search"
+      description="Search documentation"
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      shouldFilter={false}
+      loop
+    >
+      <CommandInput
+        placeholder="Search docs..."
+        value={query}
+        onValueChange={handleSearch}
+        onClear={() => handleSearch("")}
+      />
+      <CommandList className="max-h-80">
+        <CommandEmpty>
+          {query.trim()
+            ? "No results found."
+            : "Type to search across all documentation."}
+        </CommandEmpty>
+        {[...grouped.entries()].map(([group, items]) => (
+          <CommandGroup key={group} heading={group}>
+            {items.map(result => {
+              const Icon = articleIcons[result.icon] ?? FileText
+              return (
+                <CommandItem
+                  key={result.pathname}
+                  value={result.pathname}
+                  onSelect={() => handleSelect(result.pathname)}
+                  className="py-2.5"
+                >
+                  <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={query} />
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              )
+            })}
+          </CommandGroup>
+        ))}
+      </CommandList>
+      <div className="flex items-center gap-4 border-t mt-2 px-4 py-2.5 text-sm text-muted-foreground">
+        <span className="flex items-center gap-1.5">
+          <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono">
+            ↑↓
+          </kbd>
+          navigate
+        </span>
+        <span className="flex items-center gap-1.5">
+          <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono">
+            ↵
+          </kbd>
+          select
+        </span>
+        <span className="flex items-center gap-1.5">
+          <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono">
+            esc
+          </kbd>
+          close
+        </span>
+      </div>
+    </CommandDialog>
+  )
+}
+
+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 lower = text.toLowerCase()
+  const idx = lower.indexOf(term.toLowerCase())
+  if (idx === -1) return text.slice(0, 120)
+  const start = Math.max(0, idx - 40)
+  const end = Math.min(text.length, idx + term.length + 80)
+  const prefix = start > 0 ? "…" : ""
+  const suffix = end < text.length ? "…" : ""
+  return `${prefix}${text.slice(start, end)}${suffix}`
+}
+
+function HighlightedText(props: { text: string; term: string }) {
+  if (!props.term.trim()) return <>{props.text}</>
+  const escaped = props.term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  const regex = new RegExp(`(${escaped})`, "gi")
+  const parts = props.text.split(regex)
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <span key={i} className="text-foreground font-medium">
+            {part}
+          </span>
+        ) : (
+          part
+        ),
+      )}
+    </>
+  )
+}

package/build/website/components/Section.tsx

@@ -0,0 +1,24 @@
+import { cn } from "../helpers/style.ts"
+import { useInView } from "../hooks/in-view.ts"
+
+export function Section(props: {
+  children: React.ReactNode
+  className?: string
+  id?: string
+}) {
+  const { ref, isVisible } = useInView()
+
+  return (
+    <section
+      ref={ref}
+      id={props.id}
+      className={cn(
+        "py-16 md:py-24 transition-all duration-700",
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
+        props.className,
+      )}
+    >
+      {props.children}
+    </section>
+  )
+}

package/build/website/components/SectionHeader.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../helpers/style.ts"
+
+export function SectionHeader(props: {
+  label?: string
+  title: string
+  subtitle?: string
+  className?: string
+  align?: "left" | "center"
+}) {
+  const align = props.align ?? "center"
+
+  return (
+    <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}
+        </p>
+      )}
+      <h2 className="font-serif text-3xl md:text-4xl lg:text-5xl font-semibold italic mb-4">
+        {props.title}
+      </h2>
+      {props.subtitle && (
+        <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+          {props.subtitle}
+        </p>
+      )}
+    </div>
+  )
+}

package/build/website/components/SiteTitle.tsx

@@ -0,0 +1,16 @@
+/** Renders the site title and description in the sidebar header */
+export function SiteTitle() {
+  return (
+    <>
+      <img
+        src="/logo.svg"
+        alt={import.meta.env.SITE_TITLE}
+        className="size-8 rounded-lg"
+      />
+      <div className="flex flex-col gap-0.5 leading-none">
+        <span className="font-semibold">{import.meta.env.SITE_TITLE}</span>
+        <span className="text-xs">{import.meta.env.SITE_DESCRIPTION}</span>
+      </div>
+    </>
+  )
+}

package/build/website/components/SortableTable.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, type ComponentProps } from "react"
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "../elements/table.tsx"
+
+/** Wraps markdown tables with click-to-sort column headers */
+export function SortableTable(props: ComponentProps<"table">) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = ref.current
+    if (!container) return
+
+    let activeCol = -1
+    let ascending = true
+
+    const headers = container.querySelectorAll<HTMLElement>("th")
+    const cleanups: (() => void)[] = []
+
+    headers.forEach((th, colIndex) => {
+      th.style.cursor = "pointer"
+      th.classList.add("select-none")
+
+      const handler = () => {
+        if (activeCol === colIndex) {
+          ascending = !ascending
+        } else {
+          activeCol = colIndex
+          ascending = true
+        }
+
+        const tbody = container.querySelector("tbody")
+        if (!tbody) return
+
+        const rows = Array.from(tbody.querySelectorAll("tr"))
+        rows.sort((a, b) => {
+          const aVal = a.children[colIndex]?.textContent?.trim() ?? ""
+          const bVal = b.children[colIndex]?.textContent?.trim() ?? ""
+          const aNum = Number(aVal)
+          const bNum = Number(bVal)
+          const cmp =
+            aVal !== "" && bVal !== "" && !isNaN(aNum) && !isNaN(bNum)
+              ? aNum - bNum
+              : aVal.localeCompare(bVal)
+          return ascending ? cmp : -cmp
+        })
+        for (const row of rows) tbody.appendChild(row)
+
+        headers.forEach((h, i) => {
+          const indicator = h.querySelector("[data-sort]")
+          if (indicator) indicator.remove()
+          if (i === colIndex) {
+            const span = document.createElement("span")
+            span.dataset.sort = ""
+            span.className = "ml-1 text-muted-foreground"
+            span.textContent = ascending ? "↑" : "↓"
+            h.appendChild(span)
+          }
+        })
+      }
+
+      th.addEventListener("click", handler)
+      cleanups.push(() => th.removeEventListener("click", handler))
+    })
+
+    return () => cleanups.forEach(fn => fn())
+  }, [])
+
+  return (
+    <div ref={ref} className="not-prose">
+      <Table {...props} />
+    </div>
+  )
+}
+
+export { TableHeader, TableBody, TableRow, TableHead, TableCell }

package/build/website/components/SoundCloud.tsx

@@ -0,0 +1,16 @@
+/** Renders a SoundCloud iframe embed */
+export function SoundCloud(props: { url: string }) {
+  const src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(props.url)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`
+
+  return (
+    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+      <iframe
+        className="w-full"
+        height={166}
+        src={src}
+        title="SoundCloud audio"
+        allow="autoplay"
+      />
+    </div>
+  )
+}

package/build/website/components/Theme.tsx

@@ -0,0 +1,40 @@
+import { Moon, Sun } from "lucide-react"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { Button } from "../elements/button.tsx"
+import { getCurrentTheme, setTheme } from "../helpers/theme.ts"
+
+export function Theme() {
+  const handleToggle = () => {
+    const oldTheme = getCurrentTheme()
+    const newTheme = oldTheme === "light" ? "dark" : "light"
+    setTheme(newTheme)
+  }
+
+  useHotkey("T", handleToggle)
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleToggle}
+      title="Change Theme"
+      aria-label="Toggle color scheme"
+      className="w-full h-auto rounded-xl cursor-pointer text-xs font-normal justify-start text-muted-foreground bg-sidebar-accent/70 border border-border shadow-xs hover:!bg-background px-3 py-2"
+    >
+      <div className="flex flex-1 gap-2 items-center dark:hidden">
+        <Sun className="size-4" />
+        <span className="flex-1 text-left">Light Theme</span>
+        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
+          T
+        </kbd>
+      </div>
+      <div className="flex-1 gap-2 items-center hidden dark:flex">
+        <Moon className="size-4" />
+        <span className="flex-1 text-left">Dark Theme</span>
+        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
+          T
+        </kbd>
+      </div>
+    </Button>
+  )
+}

package/build/website/components/Toc.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState, type ReactNode } from "react"
+import type { TocItem } from "../helpers/toc.ts"
+
+export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
+  const activeId = useActiveHeading(props.items)
+
+  if (props.items.length === 0 && !props.children) return null
+
+  return (
+    <aside className="hidden xl:block w-56 shrink-0">
+      <div className="sticky top-20 max-h-[calc(100vh-5rem)] overflow-auto [scrollbar-width:none]">
+        {props.children}
+        {props.items.length > 0 && (
+          <nav>
+            <p className="text-sm font-medium mb-3">Contents</p>
+            <ul className="text-sm border-l border-border">
+              {props.items.map(item => (
+                <li key={item.url}>
+                  <a
+                    href={item.url}
+                    data-active={activeId === item.url.slice(1) || undefined}
+                    className={`-ms-px block py-1.5 border-l border-transparent text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:text-primary data-[active]:font-medium ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+    </aside>
+  )
+}
+
+function useActiveHeading(items: TocItem[]) {
+  const [activeId, setActiveId] = useState<string>("")
+  const observer = useRef<IntersectionObserver | null>(null)
+
+  useEffect(() => {
+    const ids = items.map(item => item.url.slice(1))
+    const elements = ids
+      .map(id => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[]
+
+    if (elements.length === 0) return
+
+    const visibleSet = new Map<string, number>()
+
+    observer.current = new IntersectionObserver(
+      entries => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            visibleSet.set(entry.target.id, entry.time)
+          } else {
+            visibleSet.delete(entry.target.id)
+          }
+        }
+
+        if (visibleSet.size > 0) {
+          let latest = ""
+          let latestTime = 0
+          for (const [id, time] of visibleSet) {
+            if (time > latestTime) {
+              latest = id
+              latestTime = time
+            }
+          }
+          setActiveId(latest)
+        } else {
+          const viewTop = window.scrollY
+          let closest = ""
+          let closestDist = Number.POSITIVE_INFINITY
+          for (const el of elements) {
+            const dist = Math.abs(
+              viewTop - el.getBoundingClientRect().top - window.scrollY,
+            )
+            if (dist < closestDist) {
+              closest = el.id
+              closestDist = dist
+            }
+          }
+          setActiveId(closest)
+        }
+      },
+      { threshold: 0.98 },
+    )
+
+    for (const el of elements) {
+      observer.current.observe(el)
+    }
+
+    return () => {
+      observer.current?.disconnect()
+    }
+  }, [items])
+
+  return activeId
+}

package/build/website/components/YouTube.tsx

@@ -0,0 +1,16 @@
+/** Renders a responsive YouTube iframe embed */
+export function YouTube(props: { id: string }) {
+  return (
+    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+      <div className="aspect-video">
+        <iframe
+          className="h-full w-full"
+          src={`https://www.youtube.com/embed/${props.id}`}
+          title="YouTube video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+    </div>
+  )
+}

package/build/website/components/ZoomImage.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react"
+import Zoom from "react-medium-image-zoom"
+import "react-medium-image-zoom/dist/styles.css"
+
+/** Image component with click-to-zoom and light/dark theme variant support */
+export function ZoomImage(props: ComponentProps<"img">) {
+  const src = props.src ?? ""
+
+  if (src.endsWith("#light")) {
+    return (
+      <Zoom>
+        <img {...props} src={src.slice(0, -6)} className="dark:hidden" />
+      </Zoom>
+    )
+  }
+
+  if (src.endsWith("#dark")) {
+    return (
+      <Zoom>
+        <img {...props} src={src.slice(0, -5)} className="hidden dark:block" />
+      </Zoom>
+    )
+  }
+
+  return (
+    <Zoom>
+      <img {...props} />
+    </Zoom>
+  )
+}