livemark 0.2.0 → 0.7.0

package/build/website/components/SidebarLinks.tsx

@@ -0,0 +1,70 @@
+import { useLocation } from "@tanstack/react-router"
+import { ExternalLink } from "lucide-react"
+import { currentSection } from "../content/article.ts"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "../elements/sidebar.tsx"
+
+/** Shared Links group. Renders sidebar-positioned links always, and
+ * header-positioned links only on mobile (mobile collapses all chrome
+ * links into the sidebar since the header strip is hidden below `md`). */
+export function SidebarLinks() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const links =
+    import.meta.env.CONFIG.links?.filter(
+      link => !link.prefix || link.prefix === section?.prefix,
+    ) ?? []
+
+  if (!links.length) return null
+  const hasDesktopItems = links.some(l => l.position === "sidebar")
+
+  return (
+    <SidebarGroup className={hasDesktopItems ? undefined : "md:hidden"}>
+      <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+        Links
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {links.map(link => {
+            const mobileOnly = link.position !== "sidebar"
+            return (
+              <SidebarMenuItem
+                key={link.url}
+                className={mobileOnly ? "md:hidden" : undefined}
+              >
+                <SidebarMenuButton
+                  className="text-muted-foreground"
+                  render={
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    />
+                  }
+                >
+                  {link.icon && (
+                    <DynamicIcon name={link.icon} className="size-4" />
+                  )}
+                  <span>
+                    {link.title}{" "}
+                    <ExternalLink
+                      className="inline -mt-0.5 opacity-75"
+                      style={{ width: 12, height: 12 }}
+                    />
+                  </span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

package/build/website/components/SidebarSections.tsx

@@ -0,0 +1,71 @@
+import { Link, useLocation, useMatch } from "@tanstack/react-router"
+import { currentSection, sectionFirstArticle } from "../content/article.ts"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { sectionIcon } from "../helpers/section.ts"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "../elements/sidebar.tsx"
+
+function splatFor(pathname: string) {
+  return { _splat: pathname.replace(/^\/|\/$/g, "") }
+}
+
+/** Shared Sections group. Renders sidebar-positioned sections always, and
+ * header-positioned sections only on mobile (mobile collapses all sections
+ * into the sidebar since the header nav strip is hidden below `md`). */
+export function SidebarSections() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
+  const section = articleRoute
+    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+    : undefined
+  const sections = import.meta.env.CONFIG.sections ?? []
+
+  if (!sections.length) return null
+  const hasDesktopItems = sections.some(s => s.position === "sidebar")
+
+  return (
+    <SidebarGroup className={hasDesktopItems ? undefined : "md:hidden"}>
+      <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+        Sections
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {sections.map(s => {
+            const target =
+              s.type === "blog" || s.type === "changelog"
+                ? s.prefix
+                : (sectionFirstArticle.get(s.prefix) ?? s.prefix)
+            const active = section?.prefix === s.prefix
+            const mobileOnly = s.position !== "sidebar"
+            return (
+              <SidebarMenuItem
+                key={s.prefix}
+                className={mobileOnly ? "md:hidden" : undefined}
+              >
+                <SidebarMenuButton
+                  isActive={active}
+                  className={active ? "" : "opacity-75"}
+                  render={
+                    <Link
+                      to={target === "/" ? "/" : "/$"}
+                      params={target && target !== "/" ? splatFor(target) : {}}
+                    />
+                  }
+                >
+                  <DynamicIcon name={sectionIcon(s)} className="size-4" />
+                  <span>{s.title}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

package/build/website/components/SiteTitle.tsx

@@ -0,0 +1,21 @@
+import defaultLogo from "../assets/logo.svg"
+
+/** Renders the site logo, title, and description in the sidebar header */
+export function SiteTitle() {
+  const logo = import.meta.env.CONFIG.logo ?? defaultLogo
+  return (
+    <div className="flex items-end gap-2.5 text-sm">
+      <img
+        src={logo}
+        alt={import.meta.env.CONFIG.title}
+        className="size-6.5 mb-1.25"
+      />
+      <div className="flex flex-col gap-0.5 leading-none">
+        <span className="font-semibold">{import.meta.env.CONFIG.title}</span>
+        <span className="text-xs opacity-80">
+          {import.meta.env.CONFIG.description}
+        </span>
+      </div>
+    </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/TagIndex.tsx

@@ -0,0 +1,120 @@
+import { Link } from "@tanstack/react-router"
+import { History } from "lucide-react"
+import { sortedArticles } from "../content/article.ts"
+import { sectionTags } from "../content/tag.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"
+
+/** Blog tag page listing posts filtered by a specific tag */
+export function TagIndex(props: { sectionPrefix: string; tag: string }) {
+  const tagMap = sectionTags.get(props.sectionPrefix)
+  const paths = tagMap?.get(props.tag) ?? []
+  const posts = paths
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+
+  const tocItems = posts.map(post => ({
+    url: `#${slugOf(post.path)}`,
+    title: post.title,
+    depth: 2,
+  }))
+
+  const title = `Posts tagged '${props.tag}'`
+
+  const content = [
+    `# ${title}`,
+    ...posts.map(post => {
+      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,
+        )
+      }
+      if (post.description) parts.push("", post.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">Posts tagged &lsquo;{props.tag}&rsquo;</a>
+            </h1>
+            {posts[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(posts[0].date)}
+                </span>
+              </p>
+            )}
+          </div>
+          <div className="space-y-6">
+            {posts.map((post, i) => (
+              <article key={post.path} id={slugOf(post.path)}>
+                {i > 0 && <Separator className="mb-6" />}
+                <h2 className="text-2xl">
+                  <Link
+                    to="/$"
+                    params={{ _splat: post.path.replace(/^\/|\/$/g, "") }}
+                    className="font-medium hover:text-primary transition-colors"
+                  >
+                    {post.title}
+                  </Link>
+                </h2>
+                <p className="text-sm text-muted-foreground mt-1 flex gap-3">
+                  {post.date && <span>{formatDate(post.date)}</span>}
+                  {post.author && (
+                    <span>
+                      {Array.isArray(post.author)
+                        ? post.author.join(", ")
+                        : post.author}
+                    </span>
+                  )}
+                </p>
+                {post.description && (
+                  <p className="text-muted-foreground mt-2">
+                    {post.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/Theme.tsx

@@ -0,0 +1,39 @@
+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"
+      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,226 @@
+import { ChevronDown } from "lucide-react"
+import { useEffect, useRef, useState, type ReactNode } from "react"
+import type { TocItem } from "../models/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>
+  )
+}
+
+/** Mobile-only sticky secondary bar showing the active heading and an
+ * overlay dropdown with the Contents + page Actions. */
+export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
+  const activeId = useActiveHeading(props.items)
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: MouseEvent) => {
+      if (!wrapperRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false)
+    }
+    document.addEventListener("mousedown", onPointerDown)
+    document.addEventListener("keydown", onKey)
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown)
+      document.removeEventListener("keydown", onKey)
+    }
+  }, [open])
+
+  if (props.items.length === 0 && !props.children) return null
+
+  const active = props.items.find(item => item.url.slice(1) === activeId)
+  const title = active?.title ?? props.items[0]?.title ?? "Contents"
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="xl:hidden sticky top-16 z-20 border-b bg-background"
+    >
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-muted-foreground"
+      >
+        <ScrollProgressRing />
+        <span className="truncate flex-1 text-left">{title}</span>
+        <ChevronDown
+          className={`size-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      {open && (
+        <div className="absolute top-full left-0 right-0 mt-px max-h-[calc(100vh-8rem)] overflow-auto border-b bg-background shadow-md animate-in slide-in-from-top-2 fade-in-0 duration-200">
+          <div className="space-y-4 px-4 pt-4 pb-4">
+            {props.children}
+            {props.items.length > 0 && (
+              <nav>
+                <p className="mb-2 text-sm font-medium">Contents</p>
+                <ul className="border-l border-border text-sm">
+                  {props.items.map(item => (
+                    <li key={item.url}>
+                      <a
+                        href={item.url}
+                        data-active={
+                          activeId === item.url.slice(1) || undefined
+                        }
+                        onClick={() => setOpen(false)}
+                        className={`-ms-px block border-l border-transparent py-1.5 text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:font-medium data-[active]:text-primary ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
+                      >
+                        {item.title}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ScrollProgressRing() {
+  const progress = useScrollProgress()
+  const radius = 6
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference * (1 - progress)
+  return (
+    <svg viewBox="0 0 16 16" className="size-4 shrink-0 -rotate-90" aria-hidden>
+      <circle
+        cx="8"
+        cy="8"
+        r={radius}
+        className="stroke-muted-foreground/30"
+        strokeWidth="2"
+        fill="none"
+      />
+      <circle
+        cx="8"
+        cy="8"
+        r={radius}
+        className="stroke-primary transition-[stroke-dashoffset] duration-150"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+      />
+    </svg>
+  )
+}
+
+function useScrollProgress() {
+  const [progress, setProgress] = useState(0)
+  useEffect(() => {
+    const update = () => {
+      const max = document.documentElement.scrollHeight - window.innerHeight
+      const next = max > 0 ? window.scrollY / max : 0
+      setProgress(Math.min(1, Math.max(0, next)))
+    }
+    update()
+    window.addEventListener("scroll", update, { passive: true })
+    window.addEventListener("resize", update)
+    return () => {
+      window.removeEventListener("scroll", update)
+      window.removeEventListener("resize", update)
+    }
+  }, [])
+  return progress
+}
+
+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,25 @@
+import { useEffect, useState, 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 [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  const src = props.src ?? ""
+  let imgProps = props
+  if (src.endsWith("#light")) {
+    imgProps = { ...props, src: src.slice(0, -6), className: "dark:hidden" }
+  } else if (src.endsWith("#dark")) {
+    imgProps = {
+      ...props,
+      src: src.slice(0, -5),
+      className: "hidden dark:block",
+    }
+  }
+
+  const img = <img {...imgProps} alt={imgProps.alt ?? ""} />
+  if (!mounted) return img
+  return <Zoom>{img}</Zoom>
+}