livemark 0.2.0 → 0.7.0

package/build/website/components/PageToolbar.tsx

@@ -0,0 +1,75 @@
+import { useState, useCallback } from "react"
+import { Pencil, Copy, Check, ExternalLink } from "lucide-react"
+
+/** 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(() => {
+    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>
+        {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" />
+          ) : (
+            <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,60 @@
+import { Link } from "@tanstack/react-router"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+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: { 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 ? flat[index - 1] : undefined
+  const nextPath = index < flat.length - 1 ? flat[index + 1] : undefined
+  const prev = prevPath
+    ? sortedArticles.find(a => a.path === prevPath)
+    : undefined
+  const next = nextPath
+    ? sortedArticles.find(a => a.path === nextPath)
+    : undefined
+
+  if (!prev && !next) return null
+
+  return (
+    <nav className="not-prose mt-10 flex gap-4">
+      {prev && (
+        <Link
+          to="/$"
+          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" />
+            Previous
+          </span>
+          <span className="mt-1 block font-medium">{prev.title}</span>
+        </Link>
+      )}
+      {next && (
+        <Link
+          to="/$"
+          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
+            <ChevronRight className="size-4" />
+          </span>
+          <span className="mt-1 block font-medium">{next.title}</span>
+        </Link>
+      )}
+    </nav>
+  )
+}

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

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 "../content/article.ts"
+import { articleIcons } from "../helpers/article-icon.ts"
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../elements/command.tsx"
+
+interface SearchResult {
+  title: string
+  path: 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,
+      path: article.path,
+      icon: article.icon,
+      snippet: term
+        ? extractSnippet(article.searchText, term)
+        : (article.description ?? ""),
+      group: groupFor(article.path),
+    }),
+    [],
+  )
+
+  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,
+                path: "",
+                searchText: hit.document.description,
+                description: hit.document.description,
+                icon: "",
+              },
+              term,
+            )
+          return toResult(article, term)
+        }),
+      )
+    },
+    [ensureIndex, toResult],
+  )
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      props.onOpenChange(false)
+      setQuery("")
+      setResults([])
+      navigate({
+        to: "/$",
+        params: { _splat: path.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.path}
+                  value={result.path}
+                  onSelect={() => handleSelect(result.path)}
+                  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/Sidebar.tsx

@@ -0,0 +1,160 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { ChevronRight, FileText } from "lucide-react"
+import {
+  articleGroups,
+  currentSection,
+  sectionArticleGroups,
+} from "../content/article.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 as SidebarRoot,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  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"
+
+/** Application sidebar with article navigation, search, and theme toggle */
+export function Sidebar() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const { toggleSidebar } = useSidebar()
+
+  useHotkey("S", toggleSidebar)
+
+  const configSections = import.meta.env.CONFIG.sections
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const groups = configSections?.length
+    ? (sectionArticleGroups.get(section?.prefix ?? "__default__") ??
+      articleGroups)
+    : articleGroups
+
+  return (
+    <SidebarRoot>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSections />
+        {groups.map((group, index) => (
+          <SidebarGroup key={group.name ?? `__unnamed-${index}`}>
+            {group.name && (
+              <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+                {group.name}
+              </SidebarGroupLabel>
+            )}
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.nodes.map(node => (
+                  <NavNode key={node.path} node={node} currentPath={pathname} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+        <SidebarLinks />
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </SidebarRoot>
+  )
+}
+
+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.path, currentPath)
+
+  if (node.children.length === 0) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={active}
+          className={active ? "" : "opacity-75"}
+          render={<Link to="/$" params={splatFor(node.path)} />}
+        >
+          <Icon className="size-4" />
+          <span>{node.label ?? node.title}</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible defaultOpen className="group/collapsible">
+        <SidebarMenuButton
+          isActive={active}
+          className={active ? "" : "opacity-75"}
+          render={<Link to="/$" params={splatFor(node.path)} />}
+        >
+          <Icon className="size-4" />
+          <span>{node.label ?? node.title}</span>
+        </SidebarMenuButton>
+        <CollapsibleTrigger
+          aria-label={`Toggle ${node.label ?? node.title} submenu`}
+          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>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {node.children.map(child => {
+              const childIsActive = isActive(child.path, currentPath)
+              return (
+                <SidebarMenuSubItem key={child.path}>
+                  <SidebarMenuSubButton
+                    isActive={childIsActive}
+                    className={childIsActive ? "" : "opacity-75"}
+                    render={<Link to="/$" params={splatFor(child.path)} />}
+                  >
+                    <span>{child.label ?? child.title}</span>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              )
+            })}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}