livemark 0.2.0 → 0.7.0

package/build/website/components/FileTree.tsx

@@ -0,0 +1,52 @@
+import { File, Folder } from "lucide-react"
+
+interface TreeItem {
+  name: string
+  isDir: boolean
+  children?: TreeItem[]
+}
+
+/** Renders a file/directory tree from a JSON-serialized tree structure */
+export function FileTree(props: { tree: string }) {
+  const items: TreeItem[] = JSON.parse(props.tree)
+
+  return (
+    <div className="not-prose my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+      <TreeItems items={items} depth={0} />
+    </div>
+  )
+}
+
+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}
+        />
+      ))}
+    </ul>
+  )
+}
+
+function TreeNode(props: { item: TreeItem; depth: number }) {
+  const { item, depth } = props
+
+  return (
+    <li className="py-0.5">
+      <span className="inline-flex items-center gap-2">
+        {item.isDir ? (
+          <Folder className="size-4 shrink-0 text-primary" />
+        ) : (
+          <File className="size-4 shrink-0 text-muted-foreground" />
+        )}
+        <span className={item.isDir ? "font-semibold" : ""}>{item.name}</span>
+      </span>
+      {item.children && item.children.length > 0 && (
+        <TreeItems items={item.children} depth={depth + 1} />
+      )}
+    </li>
+  )
+}

package/build/website/components/Footer.tsx

@@ -0,0 +1,16 @@
+/** Footer shown below article content */
+export function Footer() {
+  return (
+    <p className="mt-12 text-center text-sm text-muted-foreground">
+      Created with <span className="text-red-500">❤</span> and{" "}
+      <a
+        href="https://github.com/datisthq/livemark"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-medium hover:text-foreground transition-colors"
+      >
+        Livemark
+      </a>
+    </p>
+  )
+}

package/build/website/components/FootnoteRef.tsx

@@ -0,0 +1,52 @@
+import { type ComponentProps, useEffect, useState } from "react"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../elements/hover-card.tsx"
+
+const FOOTNOTE_PREFIX = "#user-content-fn-"
+
+/** Wraps footnote reference links in a HoverCard that previews footnote content inline */
+export function FootnoteRef(props: ComponentProps<"a">) {
+  const href = props.href ?? ""
+  if (!href.startsWith(FOOTNOTE_PREFIX)) {
+    return <a {...props} />
+  }
+
+  return <FootnoteHoverCard {...props} href={href} />
+}
+
+function FootnoteHoverCard(props: ComponentProps<"a"> & { href: string }) {
+  const [footnoteHtml, setFootnoteHtml] = useState("")
+
+  useEffect(() => {
+    const targetId = props.href.slice(1)
+    const el = document.getElementById(targetId)
+    if (!el) return
+
+    const wrapper = document.createElement("div")
+    wrapper.innerHTML = el.innerHTML
+    for (const backref of wrapper.querySelectorAll("[data-footnote-backref]")) {
+      backref.remove()
+    }
+    setFootnoteHtml(wrapper.innerHTML)
+  }, [props.href])
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger render={<a {...props} />} />
+      <HoverCardContent
+        className="prose dark:prose-invert text-sm w-80 [&>p]:my-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0"
+        side="top"
+        sideOffset={8}
+      >
+        {footnoteHtml ? (
+          <div dangerouslySetInnerHTML={{ __html: footnoteHtml }} />
+        ) : (
+          <p className="text-muted-foreground">Footnote not found</p>
+        )}
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

package/build/website/components/Heading.tsx

@@ -0,0 +1,20 @@
+/** Heading component that wraps content in an anchor link to itself */
+function createHeading(Tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6") {
+  return function Heading(props: React.HTMLAttributes<HTMLHeadingElement>) {
+    if (!props.id) return <Tag {...props} />
+    return (
+      <Tag {...props}>
+        <a href={`#${props.id}`}>{props.children}</a>
+      </Tag>
+    )
+  }
+}
+
+export const headingComponents = {
+  h1: createHeading("h1"),
+  h2: createHeading("h2"),
+  h3: createHeading("h3"),
+  h4: createHeading("h4"),
+  h5: createHeading("h5"),
+  h6: createHeading("h6"),
+}

package/build/website/components/InlineBadge.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "../elements/badge.tsx"
+
+/** Inline badge rendered from :badge text directives */
+export function InlineBadge(props: {
+  label: string
+  variant?: "default" | "secondary" | "destructive" | "outline"
+}) {
+  return <Badge variant={props.variant}>{props.label}</Badge>
+}

package/build/website/components/InlineIcon.tsx

@@ -0,0 +1,10 @@
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+
+/** Renders a Lucide icon inline by name */
+export function InlineIcon(props: { name: string; className?: string }) {
+  const className = props.className
+    ? `inline-block size-4 align-text-bottom ${props.className}`
+    : "inline-block size-4 align-text-bottom"
+
+  return <DynamicIcon name={props.name} className={className} />
+}

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,190 @@
+import { Link, useLocation, useMatch } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { ExternalLink } from "lucide-react"
+import {
+  currentSection,
+  sectionFirstArticle,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { sectionIcon } from "../helpers/section.ts"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "../elements/sidebar.tsx"
+import { BackToTop } from "./BackToTop.tsx"
+import { Banner } from "./Banner.tsx"
+import { BlogSidebar } from "./BlogSidebar.tsx"
+import { ChangelogSidebar } from "./ChangelogSidebar.tsx"
+import { MiniSidebar } from "./MiniSidebar.tsx"
+import { Sidebar } from "./Sidebar.tsx"
+import { SiteTitle } from "./SiteTitle.tsx"
+
+function splatFor(pathname: string) {
+  return { _splat: pathname.replace(/^\/|\/$/g, "") }
+}
+
+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
+    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+    : undefined
+
+  useHotkey("J", () =>
+    window.scrollBy({ top: window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+  useHotkey("K", () =>
+    window.scrollBy({ top: -window.innerHeight * 0.8, behavior: "smooth" }),
+  )
+
+  const sections = import.meta.env.CONFIG.sections
+
+  const header = (
+    <header className="sticky top-0 z-20 flex h-16 shrink-0 items-center border-b bg-background">
+      <div
+        className={`flex items-center self-stretch pl-4 ${props.withSidebar ? "pr-4" : "md:pr-20"}`}
+      >
+        {props.withSidebar ? (
+          <>
+            <div className="hidden md:flex">
+              <SidebarTrigger />
+            </div>
+            <Link to="/" className="md:hidden flex items-center gap-2">
+              <SiteTitle />
+            </Link>
+          </>
+        ) : (
+          <Link to="/" className="flex items-center gap-2">
+            <SiteTitle />
+          </Link>
+        )}
+      </div>
+      <div className="hidden md:flex flex-1 items-center gap-8 self-stretch px-6 text-sm">
+        {sections?.length ? (
+          sections
+            .filter(section => section.position === "header")
+            .map(section => {
+              const isActive = activeSection?.prefix === section.prefix
+              const target =
+                section.type === "blog" || section.type === "changelog"
+                  ? section.prefix
+                  : sectionFirstArticle.get(section.prefix)
+              const latestVersion =
+                section.type === "changelog" && section.version
+                  ? sortedArticles.find(
+                      a =>
+                        a.path === sectionFlatArticles.get(section.prefix)?.[0],
+                    )?.title
+                  : undefined
+              return (
+                <Link
+                  key={section.prefix}
+                  to={target === "/" ? "/" : "/$"}
+                  params={target && target !== "/" ? splatFor(target) : {}}
+                  className={`inline-flex items-center gap-1.5 text-foreground ${
+                    isActive
+                      ? "font-medium border-b-2 border-foreground pb-0.5 -mb-0.5"
+                      : "opacity-80 hover:opacity-100 transition-opacity"
+                  }`}
+                >
+                  <DynamicIcon
+                    name={sectionIcon(section)}
+                    className="size-3.5"
+                  />
+                  <span>
+                    {section.title}
+                    {latestVersion && (
+                      <span className="opacity-80"> ({latestVersion})</span>
+                    )}
+                  </span>
+                </Link>
+              )
+            })
+        ) : (
+          <Link
+            to="/"
+            className="text-foreground font-medium underline underline-offset-4"
+          >
+            Docs
+          </Link>
+        )}
+        {import.meta.env.CONFIG.links
+          ?.filter(
+            link =>
+              link.position === "header" &&
+              (!link.prefix || link.prefix === activeSection?.prefix),
+          )
+          .map(link => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-foreground opacity-80 hover:opacity-100 transition-opacity"
+            >
+              {link.icon && (
+                <DynamicIcon
+                  name={link.icon}
+                  className="inline size-3.5 align-[-0.125em]"
+                />
+              )}{" "}
+              {link.title}{" "}
+              <ExternalLink className="inline size-3 align-[-0.125em]" />
+            </a>
+          ))}
+        <Banner />
+      </div>
+      <div className="md:hidden ml-auto pr-2">
+        <SidebarTrigger />
+      </div>
+    </header>
+  )
+
+  const SidebarComponent = !props.withSidebar
+    ? MiniSidebar
+    : activeSection?.type === "blog"
+      ? BlogSidebar
+      : activeSection?.type === "changelog"
+        ? ChangelogSidebar
+        : Sidebar
+
+  return (
+    <SidebarProvider
+      key={props.withSidebar ? "sidebar" : "mini"}
+      defaultOpen={!!props.withSidebar}
+    >
+      <SidebarShell SidebarComponent={SidebarComponent} header={header}>
+        {props.children}
+      </SidebarShell>
+    </SidebarProvider>
+  )
+}
+
+function SidebarShell(props: {
+  SidebarComponent: React.ComponentType
+  header: React.ReactNode
+  children?: React.ReactNode
+}) {
+  const { isMobile, setOpenMobile } = useSidebar()
+  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!isMobile) return
+    if ((event.target as HTMLElement).closest("a")) setOpenMobile(false)
+  }
+  return (
+    <div style={{ display: "contents" }} onClick={onClick}>
+      <props.SidebarComponent />
+      <SidebarInset>
+        {props.header}
+        <main className="flex-1">{props.children}</main>
+        <BackToTop />
+      </SidebarInset>
+    </div>
+  )
+}

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,18 @@
+import { Suspense, lazy } from "react"
+
+const MermaidRenderer = lazy(() => import("./MermaidRenderer.tsx"))
+
+/** Lazily loads and renders a Mermaid diagram */
+export function Mermaid(props: { children: string }) {
+  return (
+    <Suspense
+      fallback={
+        <div className="not-prose mermaid flex justify-center">
+          Loading diagram…
+        </div>
+      }
+    >
+      <MermaidRenderer>{props.children}</MermaidRenderer>
+    </Suspense>
+  )
+}

package/build/website/components/MermaidRenderer.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 default function MermaidRenderer(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/MiniSidebar.tsx

@@ -0,0 +1,49 @@
+import { Link } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import {
+  Sidebar as SidebarRoot,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  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"
+
+/** Minimal sidebar used on pages without an article tree. On desktop the
+ * SidebarProvider keeps it off-canvas; on mobile it drives the sheet so
+ * users can still reach Sections / Links / Search / Theme. */
+export function MiniSidebar() {
+  const { toggleSidebar } = useSidebar()
+  useHotkey("S", toggleSidebar)
+
+  return (
+    <SidebarRoot>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSections />
+        <SidebarLinks />
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </SidebarRoot>
+  )
+}

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>
+  )
+}