livemark 0.0.0-dev → 0.7.0

package/build/website/components/BlogSidebar.tsx

@@ -0,0 +1,162 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { Clock, List, Rss, Tag } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+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"
+
+/** Blog-specific sidebar with Posts, Tags, and Links */
+export function BlogSidebar() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const { toggleSidebar } = useSidebar()
+
+  useHotkey("S", toggleSidebar)
+
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
+  const posts = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+  const recentPosts = posts.slice(0, 5)
+
+  const allTags = new Set<string>()
+  for (const post of posts) {
+    for (const tag of post.tags ?? []) {
+      allTags.add(tag)
+    }
+  }
+  const tags = [...allTags].sort()
+
+  const normalized = `/${pathname.replace(/^\/|\/$/g, "")}/`
+  const isIndex = section ? normalized === section.prefix : false
+  const sectionPath = (section?.prefix ?? "/blog/").replace(/^\/|\/$/g, "")
+
+  return (
+    <SidebarRoot>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSections />
+        <SidebarGroup>
+          <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+            Posts
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  isActive={isIndex}
+                  className={isIndex ? "" : "opacity-75"}
+                  render={<Link to="/$" params={{ _splat: sectionPath }} />}
+                >
+                  <List className="size-4" />
+                  <span>All Posts</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton className="opacity-75">
+                  <Clock className="size-4" />
+                  <span>Recent Posts</span>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  {recentPosts.map(post => {
+                    const active = normalized === post.path
+                    return (
+                      <SidebarMenuSubItem key={post.path}>
+                        <SidebarMenuSubButton
+                          isActive={active}
+                          className={active ? "" : "opacity-75"}
+                          render={
+                            <Link
+                              to="/$"
+                              params={{
+                                _splat: post.path.replace(/^\/|\/$/g, ""),
+                              }}
+                            />
+                          }
+                        >
+                          <span>{post.title}</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    )
+                  })}
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton className="opacity-75">
+                  <Rss className="size-4" />
+                  <span>RSS Feed</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {tags.length > 0 && (
+          <SidebarGroup>
+            <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+              Tags
+            </SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {tags.map(tag => {
+                  const tagPath = `${sectionPath}/tags/${tag}`
+                  const tagActive = normalized === `/${tagPath}/`
+                  return (
+                    <SidebarMenuItem key={tag}>
+                      <SidebarMenuButton
+                        isActive={tagActive}
+                        className={tagActive ? "" : "opacity-75"}
+                        render={<Link to="/$" params={{ _splat: tagPath }} />}
+                      >
+                        <Tag className="size-3.5" />
+                        <span>{tag}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  )
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
+        <SidebarLinks />
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </SidebarRoot>
+  )
+}

package/build/website/components/Breadcrumbs.tsx

@@ -1,14 +1,17 @@
-import { Link, useMatches } from "@tanstack/react-router"
+import { Link, useLocation, useMatches } from "@tanstack/react-router"
+import { currentSection } from "../content/article.ts"
 
 export function Breadcrumbs() {
   const matches = useMatches()
   const last = matches[matches.length - 1]
   const loaderData = last?.loaderData as { title?: string } | undefined
+  const pathname = useLocation({ select: l => l.pathname })
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
 
   return (
     <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
       <Link to="/" className="hover:text-foreground transition-colors">
-        Docs
+        {section?.title ?? import.meta.env.CONFIG.title}
       </Link>
       <span>/</span>
       {loaderData?.title && (

package/build/website/components/Card.tsx

@@ -0,0 +1,48 @@
+import { Link } from "@tanstack/react-router"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import {
+  Card as CardElement,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../elements/card.tsx"
+
+/** Card component with optional icon, title, description, and link */
+export function Card(props: {
+  title: string
+  href?: string
+  icon?: string
+  children?: React.ReactNode
+}) {
+  const card = (
+    <CardElement size="sm" className="transition-colors hover:bg-accent">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {props.icon && (
+            <DynamicIcon name={props.icon} className="size-5 text-primary" />
+          )}
+          {props.title}
+        </CardTitle>
+      </CardHeader>
+      {props.children && (
+        <CardContent>
+          <div className="text-muted-foreground text-sm">{props.children}</div>
+        </CardContent>
+      )}
+    </CardElement>
+  )
+
+  if (props.href?.startsWith("http")) {
+    return (
+      <a href={props.href} target="_blank" rel="noopener noreferrer">
+        {card}
+      </a>
+    )
+  }
+
+  if (props.href) {
+    return <Link to={props.href}>{card}</Link>
+  }
+
+  return card
+}

package/build/website/components/Cards.tsx

@@ -1,19 +1,3 @@
-import { Link } from "@tanstack/react-router"
-import { icons } from "lucide-react"
-import {
-  Card as CardElement,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../elements/card.tsx"
-
-function toPascalCase(name: string) {
-  return name
-    .split("-")
-    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-    .join("")
-}
-
 /** Grid container for card components */
 export function Cards(props: { children: React.ReactNode }) {
   return (
@@ -22,45 +6,3 @@ export function Cards(props: { children: React.ReactNode }) {
     </div>
   )
 }
-
-/** Card component with optional icon, title, description, and link */
-export function Card(props: {
-  title: string
-  href?: string
-  icon?: string
-  children?: React.ReactNode
-}) {
-  const Icon = props.icon
-    ? icons[toPascalCase(props.icon) as keyof typeof icons]
-    : undefined
-
-  const card = (
-    <CardElement size="sm" className="transition-colors hover:bg-accent">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          {Icon && <Icon className="size-5 text-primary" />}
-          {props.title}
-        </CardTitle>
-      </CardHeader>
-      {props.children && (
-        <CardContent>
-          <div className="text-muted-foreground text-sm">{props.children}</div>
-        </CardContent>
-      )}
-    </CardElement>
-  )
-
-  if (props.href?.startsWith("http")) {
-    return (
-      <a href={props.href} target="_blank" rel="noopener noreferrer">
-        {card}
-      </a>
-    )
-  }
-
-  if (props.href) {
-    return <Link to={props.href}>{card}</Link>
-  }
-
-  return card
-}

package/build/website/components/ChangelogIndex.tsx

@@ -0,0 +1,111 @@
+import { Link } from "@tanstack/react-router"
+import { History } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.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"
+
+/** Auto-generated changelog index listing all versions by date */
+export function ChangelogIndex(props: { sectionPrefix: string }) {
+  const section = currentSection(props.sectionPrefix)
+  const flat = sectionFlatArticles.get(props.sectionPrefix) ?? []
+  const entries = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+
+  const tocItems = entries.map(entry => ({
+    url: `#${slugOf(entry.path)}`,
+    title: entry.title,
+    depth: 2,
+  }))
+
+  const content = [
+    `# ${section?.title ?? "Changelog"}`,
+    ...entries.map(entry => {
+      const parts = [`## ${entry.title}`]
+      if (entry.date) parts.push(formatDate(entry.date))
+      if (entry.description) parts.push("", entry.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">{section?.title ?? "Changelog"}</a>
+            </h1>
+            {entries[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(entries[0].date)}
+                </span>
+              </p>
+            )}
+          </div>
+          <div className="space-y-6">
+            {entries.map((entry, i) => (
+              <article key={entry.path} id={slugOf(entry.path)}>
+                {i > 0 && <Separator className="mb-6" />}
+                <h2 className="text-2xl">
+                  <Link
+                    to="/$"
+                    params={{ _splat: entry.path.replace(/^\/|\/$/g, "") }}
+                    className="font-medium hover:text-primary transition-colors"
+                  >
+                    {entry.title}
+                  </Link>
+                </h2>
+                {entry.date && (
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {formatDate(entry.date)}
+                  </p>
+                )}
+                {entry.description && (
+                  <p className="text-muted-foreground mt-2">
+                    {entry.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/ChangelogSidebar.tsx

@@ -0,0 +1,120 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { useHotkey } from "@tanstack/react-hotkeys"
+import { Clock, List } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+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"
+
+/** Changelog-specific sidebar with Releases and shared Links */
+export function ChangelogSidebar() {
+  const pathname = useLocation({ select: l => l.pathname })
+  const { toggleSidebar } = useSidebar()
+
+  useHotkey("S", toggleSidebar)
+
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
+  const entries = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+  const recent = entries.slice(0, 10)
+
+  const normalized = `/${pathname.replace(/^\/|\/$/g, "")}/`
+  const isIndex = section ? normalized === section.prefix : false
+  const sectionPath = (section?.prefix ?? "/changelog/").replace(/^\/|\/$/g, "")
+
+  return (
+    <SidebarRoot>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link to="/" />}>
+              <SiteTitle />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSections />
+        <SidebarGroup>
+          <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+            Releases
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  isActive={isIndex}
+                  className={isIndex ? "" : "opacity-75"}
+                  render={<Link to="/$" params={{ _splat: sectionPath }} />}
+                >
+                  <List className="size-4" />
+                  <span>All Releases</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton className="opacity-75">
+                  <Clock className="size-4" />
+                  <span>Recent Releases</span>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  {recent.map(entry => {
+                    const active = normalized === entry.path
+                    return (
+                      <SidebarMenuSubItem key={entry.path}>
+                        <SidebarMenuSubButton
+                          isActive={active}
+                          className={active ? "" : "opacity-75"}
+                          render={
+                            <Link
+                              to="/$"
+                              params={{
+                                _splat: entry.path.replace(/^\/|\/$/g, ""),
+                              }}
+                            />
+                          }
+                        >
+                          <span>{entry.title}</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    )
+                  })}
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarLinks />
+      </SidebarContent>
+      <SidebarFooter className="p-4 space-y-2">
+        <Search />
+        <Theme />
+      </SidebarFooter>
+      <SidebarRail />
+    </SidebarRoot>
+  )
+}

package/build/website/components/CodeBlock.tsx

@@ -1,5 +1,10 @@
 import { Check, ChevronDown, Clipboard, WrapText } from "lucide-react"
 import { useRef, useState } from "react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../elements/tooltip.tsx"
 
 export function CodeBlock(props: React.ComponentProps<"pre">) {
   const [copied, setCopied] = useState(false)
@@ -41,49 +46,61 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             />
           )}
           <span className="flex-1 truncate text-xs font-medium">{title}</span>
-          <button
-            type="button"
-            onClick={handleWrapToggle}
-            className={`-me-2 p-1 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
-            aria-label="Toggle word wrap"
-          >
-            <WrapText className="size-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={handleCopy}
-            className="-me-2 p-1 rounded-md hover:text-foreground transition-colors"
-            aria-label="Copy code"
-          >
-            {copied ? (
-              <Check className="size-3.5" />
-            ) : (
-              <Clipboard className="size-3.5" />
-            )}
-          </button>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleWrapToggle}
+              aria-label={wrap ? "Disable wrap" : "Enable wrap"}
+              className={`-me-2 p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            >
+              <WrapText className="size-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>
+              {wrap ? "Disable wrap" : "Enable wrap"}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleCopy}
+              aria-label={copied ? "Copied" : "Copy code"}
+              className="-me-2 p-1.5 rounded-md hover:text-foreground transition-colors"
+            >
+              {copied ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Clipboard className="size-3.5" />
+              )}
+            </TooltipTrigger>
+            <TooltipContent>{copied ? "Copied!" : "Copy code"}</TooltipContent>
+          </Tooltip>
         </div>
       ) : (
         <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-lg text-muted-foreground">
-          <button
-            type="button"
-            onClick={handleWrapToggle}
-            className={`p-1 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
-            aria-label="Toggle word wrap"
-          >
-            <WrapText className="size-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={handleCopy}
-            className="p-1 rounded-md hover:text-foreground transition-colors"
-            aria-label="Copy code"
-          >
-            {copied ? (
-              <Check className="size-3.5" />
-            ) : (
-              <Clipboard className="size-3.5" />
-            )}
-          </button>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleWrapToggle}
+              aria-label={wrap ? "Disable wrap" : "Enable wrap"}
+              className={`p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            >
+              <WrapText className="size-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>
+              {wrap ? "Disable wrap" : "Enable wrap"}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              onClick={handleCopy}
+              aria-label={copied ? "Copied" : "Copy code"}
+              className="p-1.5 rounded-md hover:text-foreground transition-colors"
+            >
+              {copied ? (
+                <Check className="size-3.5" />
+              ) : (
+                <Clipboard className="size-3.5" />
+              )}
+            </TooltipTrigger>
+            <TooltipContent>{copied ? "Copied!" : "Copy code"}</TooltipContent>
+          </Tooltip>
         </div>
       )}
       <div

package/build/website/components/Column.tsx

@@ -0,0 +1,4 @@
+/** Single column within a Columns grid */
+export function Column(props: { children: React.ReactNode }) {
+  return <div className="max-w-none">{props.children}</div>
+}

package/build/website/components/Columns.tsx

@@ -10,8 +10,3 @@ export function Columns(props: { cols?: string; children: React.ReactNode }) {
     </div>
   )
 }
-
-/** Single column within a Columns grid */
-export function Column(props: { children: React.ReactNode }) {
-  return <div className="max-w-none">{props.children}</div>
-}

package/build/website/components/Footer.tsx

@@ -1,9 +1,16 @@
+/** Footer shown below article content */
 export function Footer() {
   return (
-    <footer className="border-t bg-card">
-      <div className="w-full max-w-7xl mx-auto px-4 md:px-10 py-4 flex items-center justify-center text-xs text-muted-foreground">
-        <span>&copy; {new Date().getFullYear()} My Project</span>
-      </div>
-    </footer>
+    <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>
   )
 }