livemark 0.0.0-dev

package/build/website/components/InlineToc.tsx

@@ -0,0 +1,31 @@
+import { useTocItems } from "../helpers/toc-context.ts"
+
+/** Renders the page's table of contents inline within the content */
+export function InlineToc(props: { maxLevel?: string }) {
+  const allItems = useTocItems()
+  const maxDepth = props.maxLevel ? Number(props.maxLevel) : 4
+  const items = allItems.filter(item => item.depth <= maxDepth)
+
+  if (items.length === 0) return null
+
+  return (
+    <nav className="not-prose my-8 rounded-xl border border-border bg-card p-6">
+      <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` }}
+          >
+            <a
+              href={item.url}
+              className="text-muted-foreground hover:text-primary transition-colors"
+            >
+              {item.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

package/build/website/components/Layout.tsx

@@ -0,0 +1,220 @@
+import { useState } from "react"
+import { Link, useLocation } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import {
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  Search as SearchIcon,
+} from "lucide-react"
+import { articleTree } from "../helpers/articles.ts"
+import { articleIcons } from "../helpers/article-icon.ts"
+import type { ArticleNode } from "../models/article.ts"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../elements/collapsible.tsx"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "../elements/sidebar.tsx"
+import { Banner } from "./Banner.tsx"
+import { SearchDialog } from "./SearchDialog.tsx"
+import { SiteTitle } from "./SiteTitle.tsx"
+import { Theme } from "./Theme.tsx"
+
+export function Layout(props: { children?: React.ReactNode }) {
+  useHotkey("J", () =>
+    window.scrollBy({ top: window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+  useHotkey("K", () =>
+    window.scrollBy({ top: -window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="sticky top-0 z-20 flex h-16 shrink-0 items-center bg-background">
+          <div className="flex items-center self-stretch pl-4 pr-0 border-b">
+            <SidebarTrigger />
+          </div>
+          <div className="flex flex-1 items-center gap-8 self-stretch border-b px-6 text-sm">
+            <Link
+              to="/"
+              className="text-foreground font-medium underline underline-offset-4"
+            >
+              Docs
+            </Link>
+            <a
+              href="/blog"
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Blog
+            </a>
+            <a
+              href="https://github.com/datisthq/livemark"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              GitHub <ExternalLink className="inline size-3 -mt-0.5" />
+            </a>
+            <Banner />
+          </div>
+        </header>
+        <main className="flex-1">{props.children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AppSidebar() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const { toggleSidebar } = useSidebar()
+
+  useHotkey("S", toggleSidebar)
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+            Articles
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {articleTree.map(node => (
+                <NavNode
+                  key={node.pathname}
+                  node={node}
+                  currentPath={pathname}
+                />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function splatFor(pathname: string) {
+  return { _splat: pathname.replace(/^\/|\/$/g, "") }
+}
+
+function isActive(articlePathname: string, currentPath: string) {
+  const normalized = `/${currentPath.replace(/^\/|\/$/g, "")}/`
+  return articlePathname === normalized
+}
+
+function NavNode(props: { node: ArticleNode; currentPath: string }) {
+  const { node, currentPath } = props
+  const Icon = articleIcons[node.icon] ?? FileText
+  const active = isActive(node.pathname, currentPath)
+
+  if (node.children.length === 0) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={active}
+          className={active ? "" : "opacity-75"}
+          render={<Link to="/$" params={splatFor(node.pathname)} />}
+        >
+          <Icon className="size-4" />
+          <span>{node.title}</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <Collapsible defaultOpen className="group/collapsible">
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={active}
+          className={active ? "" : "opacity-75"}
+          render={<Link to="/$" params={splatFor(node.pathname)} />}
+        >
+          <Icon className="size-4" />
+          <span>{node.title}</span>
+        </SidebarMenuButton>
+        <CollapsibleTrigger className="absolute right-1 top-1.5 p-1 rounded-md hover:bg-sidebar-accent">
+          <ChevronRight className="size-3.5 transition-transform group-data-[open]/collapsible:rotate-90" />
+        </CollapsibleTrigger>
+      </SidebarMenuItem>
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {node.children.map(child => {
+            const childIsActive = isActive(child.pathname, currentPath)
+            return (
+              <SidebarMenuSubItem key={child.pathname}>
+                <SidebarMenuSubButton
+                  isActive={childIsActive}
+                  className={childIsActive ? "" : "opacity-75"}
+                  render={<Link to="/$" params={splatFor(child.pathname)} />}
+                >
+                  <span>{child.title}</span>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            )
+          })}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function Search() {
+  const [open, setOpen] = useState(false)
+
+  useHotkey("/", () => setOpen(true))
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="flex w-full items-center gap-2 rounded-xl border border-border bg-sidebar-accent/70 px-3 py-2 text-sm text-muted-foreground shadow-xs hover:bg-background transition-colors cursor-pointer"
+      >
+        <SearchIcon className="size-4" />
+        <span className="flex-1 text-left">Search...</span>
+        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
+          /
+        </kbd>
+      </button>
+      <SearchDialog open={open} onOpenChange={setOpen} />
+    </>
+  )
+}

package/build/website/components/LinkButton.tsx

@@ -0,0 +1,31 @@
+import { buttonVariants } from "../elements/button.tsx"
+import { cn } from "../helpers/style.ts"
+
+/** Styled link button rendered from ::button leaf directives */
+export function LinkButton(props: {
+  href: string
+  label: string
+  variant?:
+    | "default"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "destructive"
+    | "link"
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <a
+      href={props.href}
+      className={cn(
+        buttonVariants({
+          variant: props.variant,
+          size: props.size,
+        }),
+        "no-underline",
+      )}
+    >
+      {props.label}
+    </a>
+  )
+}

package/build/website/components/Mermaid.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react"
+import mermaid from "mermaid"
+
+mermaid.initialize({ startOnLoad: false })
+
+/** Renders a Mermaid diagram from a chart definition string */
+export function Mermaid(props: { children: string }) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const render = () => {
+      const isDark = document.documentElement.classList.contains("dark")
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: isDark ? "dark" : "default",
+      })
+      el.textContent = props.children
+      el.removeAttribute("data-processed")
+      mermaid.run({ nodes: [el] })
+    }
+
+    render()
+
+    const observer = new MutationObserver(render)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    return () => observer.disconnect()
+  }, [props.children])
+
+  return <div ref={ref} className="not-prose mermaid flex justify-center" />
+}

package/build/website/components/NotFound.tsx

@@ -0,0 +1,27 @@
+import { Link } from "@tanstack/react-router"
+
+export function NotFound({ children }: { children?: any }) {
+  return (
+    <div className="min-h-[60vh] flex flex-col items-center justify-center text-center px-4">
+      <h1 className="font-sans text-6xl font-semibold mb-4">404</h1>
+      <div className="text-muted-foreground mb-6">
+        {children || <p>The page you're looking for doesn't exist.</p>}
+      </div>
+      <div className="flex items-center gap-4">
+        <button
+          type="button"
+          onClick={() => window.history.back()}
+          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+        >
+          Go Back
+        </button>
+        <Link
+          to="/"
+          className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+        >
+          Home
+        </Link>
+      </div>
+    </div>
+  )
+}

package/build/website/components/PackageTabs.tsx

@@ -0,0 +1,74 @@
+import { Check, Clipboard } from "lucide-react"
+import { useState } from "react"
+
+type Manager = "npm" | "pnpm" | "yarn" | "bun"
+
+const managers: Manager[] = ["npm", "pnpm", "yarn", "bun"]
+
+interface PackageTabsProps {
+  npm: string
+  pnpm: string
+  yarn: string
+  bun: string
+}
+
+/** Tabbed code block showing a command for each package manager */
+export function PackageTabs(props: PackageTabsProps) {
+  const [active, setActive] = useState<Manager>("npm")
+  const [copied, setCopied] = useState(false)
+
+  const commands: Record<Manager, string> = {
+    npm: props.npm,
+    pnpm: props.pnpm,
+    yarn: props.yarn,
+    bun: props.bun,
+  }
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(commands[active])
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <figure className="not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+      <div className="flex items-center border-b">
+        <div className="flex flex-1 items-center">
+          {managers.map(pm => (
+            <button
+              key={pm}
+              type="button"
+              onClick={() => setActive(pm)}
+              className={`px-3 py-2 text-xs font-medium transition-colors ${
+                pm === active
+                  ? "text-foreground border-b-2 border-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {pm}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={handleCopy}
+          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" />
+          )}
+        </button>
+      </div>
+      <div className="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px]">
+        <pre className="min-w-full w-max">
+          <code className="flex flex-col">
+            <span className="px-4">{commands[active]}</span>
+          </code>
+        </pre>
+      </div>
+    </figure>
+  )
+}

package/build/website/components/PageToolbar.tsx

@@ -0,0 +1,65 @@
+import { useState, useCallback } from "react"
+import { Pencil, Copy, Check, ExternalLink } from "lucide-react"
+
+/** Toolbar with action buttons displayed below the article content */
+export function PageToolbar(props: { filePath: string; content: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(props.content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [props.content])
+
+  const handleOpenIn = useCallback(
+    (url: string) => {
+      navigator.clipboard.writeText(props.content)
+      window.open(url, "_blank", "noopener,noreferrer")
+    },
+    [props.content],
+  )
+
+  const buttonClass =
+    "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+
+  return (
+    <>
+      <div className="mb-6 flex flex-col gap-2 text-sm">
+        <p className="text-sm font-medium mb-1">Actions</p>
+        <a
+          href={`https://github.com/datisthq/livemark/edit/main/${props.filePath}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={buttonClass}
+        >
+          <Pencil className="size-3.5" />
+          Edit on GitHub
+        </a>
+        <button type="button" onClick={handleCopy} className={buttonClass}>
+          {copied ? (
+            <Check className="size-3.5" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
+          Copy Markdown
+        </button>
+        <button
+          type="button"
+          onClick={() => handleOpenIn("https://chatgpt.com/")}
+          className={buttonClass}
+        >
+          <ExternalLink className="size-3.5" />
+          Open in ChatGPT
+        </button>
+        <button
+          type="button"
+          onClick={() => handleOpenIn("https://claude.ai/")}
+          className={buttonClass}
+        >
+          <ExternalLink className="size-3.5" />
+          Open in Claude
+        </button>
+      </div>
+    </>
+  )
+}

package/build/website/components/PrevNext.tsx

@@ -0,0 +1,52 @@
+import { Link } from "@tanstack/react-router"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { sortedArticles, flatArticles } from "../helpers/articles.ts"
+
+/** Previous/next article navigation shown at the bottom of each article page */
+export function PrevNext(props: { pathname: string }) {
+  const index = flatArticles.indexOf(props.pathname)
+  if (index < 0) return null
+
+  const prevPath = index > 0 ? flatArticles[index - 1] : undefined
+  const nextPath =
+    index < flatArticles.length - 1 ? flatArticles[index + 1] : undefined
+  const prev = prevPath
+    ? sortedArticles.find(a => a.pathname === prevPath)
+    : undefined
+  const next = nextPath
+    ? sortedArticles.find(a => a.pathname === nextPath)
+    : undefined
+
+  if (!prev && !next) return null
+
+  return (
+    <nav className="not-prose mt-10 flex gap-4">
+      {prev && (
+        <Link
+          to="/$"
+          params={{ _splat: prev.pathname.replace(/^\/|\/$/g, "") }}
+          className="flex-1 rounded-xl border shadow-sm bg-sidebar p-4 hover:bg-background transition-colors"
+        >
+          <span className="flex items-center gap-1 text-sm text-muted-foreground">
+            <ChevronLeft className="size-4" />
+            Previous
+          </span>
+          <span className="mt-1 block font-medium">{prev.title}</span>
+        </Link>
+      )}
+      {next && (
+        <Link
+          to="/$"
+          params={{ _splat: next.pathname.replace(/^\/|\/$/g, "") }}
+          className="flex-1 rounded-xl border shadow-sm bg-sidebar p-4 hover:bg-background transition-colors text-right"
+        >
+          <span className="flex items-center justify-end gap-1 text-sm text-muted-foreground">
+            Next
+            <ChevronRight className="size-4" />
+          </span>
+          <span className="mt-1 block font-medium">{next.title}</span>
+        </Link>
+      )}
+    </nav>
+  )
+}