livemark 0.0.0-dev → 0.7.0

package/build/website/components/InlineIcon.tsx

@@ -1,21 +1,10 @@
-import { icons } from "lucide-react"
-
-function toPascalCase(name: string) {
-  return name
-    .split("-")
-    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-    .join("")
-}
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
 
 /** Renders a Lucide icon inline by name */
 export function InlineIcon(props: { name: string; className?: string }) {
-  const key = toPascalCase(props.name)
-  if (!(key in icons)) return null
-  const Icon = icons[key as keyof typeof icons]
-
   const className = props.className
     ? `inline-block size-4 align-text-bottom ${props.className}`
     : "inline-block size-4 align-text-bottom"
 
-  return <Icon className={className} />
+  return <DynamicIcon name={props.name} className={className} />
 }

package/build/website/components/Layout.tsx

@@ -1,46 +1,42 @@
-import { useState } from "react"
-import { Link, useLocation } from "@tanstack/react-router"
+import { Link, useLocation, useMatch } from "@tanstack/react-router"
 import { useHotkey } from "@tanstack/react-hotkeys"
+import { ExternalLink } from "lucide-react"
 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"
+  currentSection,
+  sectionFirstArticle,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { sectionIcon } from "../helpers/section.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 { BackToTop } from "./BackToTop.tsx"
 import { Banner } from "./Banner.tsx"
-import { SearchDialog } from "./SearchDialog.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"
-import { Theme } from "./Theme.tsx"
 
-export function Layout(props: { children?: React.ReactNode }) {
+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" }),
   )
@@ -48,173 +44,147 @@ export function Layout(props: { children?: React.ReactNode }) {
     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
+  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
-              href="/blog"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-            >
-              Blog
-            </a>
-            <a
-              href="https://github.com/datisthq/livemark"
+              key={link.url}
+              href={link.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground transition-colors"
+              className="text-foreground opacity-80 hover:opacity-100 transition-opacity"
             >
-              GitHub <ExternalLink className="inline size-3 -mt-0.5" />
+              {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>
-        </header>
-        <main className="flex-1">{props.children}</main>
-      </SidebarInset>
-    </SidebarProvider>
+          ))}
+        <Banner />
+      </div>
+      <div className="md:hidden ml-auto pr-2">
+        <SidebarTrigger />
+      </div>
+    </header>
   )
-}
-
-function AppSidebar() {
-  const pathname = useLocation({ select: l => l.pathname })
-  const { toggleSidebar } = useSidebar()
 
-  useHotkey("S", toggleSidebar)
+  const SidebarComponent = !props.withSidebar
+    ? MiniSidebar
+    : activeSection?.type === "blog"
+      ? BlogSidebar
+      : activeSection?.type === "changelog"
+        ? ChangelogSidebar
+        : Sidebar
 
   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>
+    <SidebarProvider
+      key={props.withSidebar ? "sidebar" : "mini"}
+      defaultOpen={!!props.withSidebar}
+    >
+      <SidebarShell SidebarComponent={SidebarComponent} header={header}>
+        {props.children}
+      </SidebarShell>
+    </SidebarProvider>
   )
 }
 
-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>
-    )
+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 (
-    <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} />
-    </>
+    <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/Mermaid.tsx

@@ -1,37 +1,18 @@
-import { useEffect, useRef } from "react"
-import mermaid from "mermaid"
+import { Suspense, lazy } from "react"
 
-mermaid.initialize({ startOnLoad: false })
+const MermaidRenderer = lazy(() => import("./MermaidRenderer.tsx"))
 
-/** Renders a Mermaid diagram from a chart definition string */
+/** Lazily loads and renders a Mermaid diagram */
 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" />
+  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/PageToolbar.tsx

@@ -1,8 +1,8 @@
 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 }) {
+/** Toolbar with action buttons displayed for the article content */
+export function PageToolbar(props: { file?: string; content: string }) {
   const [copied, setCopied] = useState(false)
 
   const handleCopy = useCallback(() => {
@@ -26,15 +26,25 @@ export function PageToolbar(props: { filePath: string; content: string }) {
     <>
       <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>
+        {props.file ? (
+          <a
+            href={`https://github.com/datisthq/livemark/edit/main/${props.file}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={buttonClass}
+          >
+            <Pencil className="size-3.5" />
+            Edit on GitHub
+          </a>
+        ) : (
+          <span
+            className={`${buttonClass} opacity-50 cursor-not-allowed hover:text-muted-foreground`}
+            aria-disabled="true"
+          >
+            <Pencil className="size-3.5" />
+            Edit on GitHub
+          </span>
+        )}
         <button type="button" onClick={handleCopy} className={buttonClass}>
           {copied ? (
             <Check className="size-3.5" />

package/build/website/components/PrevNext.tsx

@@ -1,20 +1,28 @@
 import { Link } from "@tanstack/react-router"
 import { ChevronLeft, ChevronRight } from "lucide-react"
-import { sortedArticles, flatArticles } from "../helpers/articles.ts"
+import {
+  sortedArticles,
+  flatArticles,
+  currentSection,
+  sectionFlatArticles,
+} from "../content/article.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)
+export function PrevNext(props: { path: string }) {
+  const section = currentSection(props.path)
+  const flat = section
+    ? (sectionFlatArticles.get(section.prefix) ?? flatArticles)
+    : flatArticles
+  const index = flat.indexOf(props.path)
   if (index < 0) return null
 
-  const prevPath = index > 0 ? flatArticles[index - 1] : undefined
-  const nextPath =
-    index < flatArticles.length - 1 ? flatArticles[index + 1] : undefined
+  const prevPath = index > 0 ? flat[index - 1] : undefined
+  const nextPath = index < flat.length - 1 ? flat[index + 1] : undefined
   const prev = prevPath
-    ? sortedArticles.find(a => a.pathname === prevPath)
+    ? sortedArticles.find(a => a.path === prevPath)
     : undefined
   const next = nextPath
-    ? sortedArticles.find(a => a.pathname === nextPath)
+    ? sortedArticles.find(a => a.path === nextPath)
     : undefined
 
   if (!prev && !next) return null
@@ -24,8 +32,8 @@ export function PrevNext(props: { pathname: string }) {
       {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"
+          params={{ _splat: prev.path.replace(/^\/|\/$/g, "") }}
+          className="flex-1 rounded-xl border shadow-sm p-4 hover:bg-muted/50 transition-colors"
         >
           <span className="flex items-center gap-1 text-sm text-muted-foreground">
             <ChevronLeft className="size-4" />
@@ -37,8 +45,8 @@ export function PrevNext(props: { pathname: string }) {
       {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"
+          params={{ _splat: next.path.replace(/^\/|\/$/g, "") }}
+          className="flex-1 rounded-xl border shadow-sm p-4 hover:bg-muted/50 transition-colors text-right"
         >
           <span className="flex items-center justify-end gap-1 text-sm text-muted-foreground">
             Next

package/build/website/components/Search.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { Search as SearchIcon } from "lucide-react"
+import { SearchDialog } from "./SearchDialog.tsx"
+
+/** Search button with "/" keyboard shortcut and command palette dialog */
+export 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} />
+    </>
+  )
+}