livemark 0.2.0 → 0.7.0

package/build/website/components/Article.tsx

@@ -0,0 +1,172 @@
+import { MDXContent } from "@content-collections/mdx/react"
+import { Calendar, History, User } from "lucide-react"
+import type { ArticleView } from "../models/article.ts"
+import { TocContext } from "../helpers/toc-context.ts"
+import { Abbr } from "./Abbr.tsx"
+import { AnsiCode } from "./AnsiCode.tsx"
+import { Callout } from "./Callout.tsx"
+import { Card } from "./Card.tsx"
+import { Cards } from "./Cards.tsx"
+import { CodeBlock } from "./CodeBlock.tsx"
+import { CodeTabs } from "./CodeTabs.tsx"
+import { Column } from "./Column.tsx"
+import { Columns } from "./Columns.tsx"
+import { ContentTab } from "./ContentTab.tsx"
+import { ContentTabs } from "./ContentTabs.tsx"
+import {
+  DefinitionDetail,
+  DefinitionList,
+  DefinitionTerm,
+} from "./DefinitionList.tsx"
+import { Details } from "./Details.tsx"
+import { FileTree } from "./FileTree.tsx"
+import { Footer } from "./Footer.tsx"
+import { FootnoteRef } from "./FootnoteRef.tsx"
+import { headingComponents } from "./Heading.tsx"
+import { InlineBadge } from "./InlineBadge.tsx"
+import { InlineIcon } from "./InlineIcon.tsx"
+import { InlineToc } from "./InlineToc.tsx"
+import { LinkButton } from "./LinkButton.tsx"
+import { Mermaid } from "./Mermaid.tsx"
+import { PackageTabs } from "./PackageTabs.tsx"
+import { PageToolbar } from "./PageToolbar.tsx"
+import { PrevNext } from "./PrevNext.tsx"
+import {
+  SortableTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./SortableTable.tsx"
+import { SoundCloud } from "./SoundCloud.tsx"
+import { MobileToc, Toc } from "./Toc.tsx"
+import { YouTube } from "./YouTube.tsx"
+import { ZoomImage } from "./ZoomImage.tsx"
+import { Separator } from "../elements/separator.tsx"
+
+/** Full-page article layout: MDX content, table of contents, toolbar, prev/next, footer */
+export function Article(props: { article: ArticleView }) {
+  const { article } = props
+  const lastUpdated = formatDate(article.lastUpdated)
+  const publishedDate = formatDate(article.date)
+  const authors = article.author
+    ? Array.isArray(article.author)
+      ? article.author
+      : [article.author]
+    : []
+  const hasMeta = publishedDate || authors.length > 0 || lastUpdated
+
+  const H1 = (headingProps: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <>
+      <h1 {...headingProps}>
+        {headingProps.id ? (
+          <a href={`#${headingProps.id}`}>{headingProps.children}</a>
+        ) : (
+          headingProps.children
+        )}
+      </h1>
+      {hasMeta && (
+        <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground !-mt-4 !mb-6">
+          {authors.length > 0 && (
+            <span className="flex items-center gap-1.5">
+              <User className="size-3.5" />
+              {authors.join(", ")}
+            </span>
+          )}
+          {publishedDate && (
+            <span className="flex items-center gap-1.5">
+              <Calendar className="size-3.5" />
+              Published {publishedDate}
+            </span>
+          )}
+          {lastUpdated && (
+            <span className="flex items-center gap-1.5">
+              <History className="size-3.5" />
+              Updated {lastUpdated}
+            </span>
+          )}
+        </p>
+      )}
+      {article.image && (
+        <img
+          src={article.image}
+          alt=""
+          className="!mt-0 !mb-6 w-full rounded-xl border shadow-sm"
+        />
+      )}
+    </>
+  )
+
+  return (
+    <TocContext.Provider value={article.tocItems}>
+      {article.toc !== false && (
+        <MobileToc items={article.tocItems}>
+          <PageToolbar file={article.file} content={article.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">
+            <MDXContent
+              code={article.mdx}
+              components={{
+                hr: Separator,
+                img: ZoomImage,
+                pre: CodeBlock,
+                table: SortableTable,
+                thead: TableHeader,
+                tbody: TableBody,
+                tr: TableRow,
+                th: TableHead,
+                td: TableCell,
+                a: FootnoteRef,
+                Abbr,
+                AnsiCode,
+                Callout,
+                Card,
+                Cards,
+                Column,
+                Columns,
+                CodeTabs,
+                ContentTab,
+                ContentTabs,
+                DefinitionDetail,
+                DefinitionList,
+                DefinitionTerm,
+                Details,
+                FileTree,
+                InlineBadge,
+                InlineIcon,
+                InlineToc,
+                LinkButton,
+                Mermaid,
+                PackageTabs,
+                SoundCloud,
+                YouTube,
+                ...headingComponents,
+                h1: H1,
+              }}
+            />
+          </div>
+          <PrevNext path={article.path} />
+          <Footer />
+        </div>
+        {article.toc !== false && (
+          <Toc items={article.tocItems}>
+            <PageToolbar file={article.file} content={article.content} />
+          </Toc>
+        )}
+      </div>
+    </TocContext.Provider>
+  )
+}
+
+function formatDate(iso?: string) {
+  if (!iso) return undefined
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  })
+}

package/build/website/components/BackToTop.tsx

@@ -0,0 +1,32 @@
+import { ArrowUp } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Button } from "../elements/button.tsx"
+
+/** Floating button that scrolls the page back to the top once the user
+ * has scrolled past a threshold. */
+export function BackToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 400)
+    onScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [])
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      aria-label="Back to top"
+      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+      className={`fixed bottom-6 right-6 z-30 size-10 rounded-full shadow-md transition-all duration-200 ${
+        visible
+          ? "opacity-100 translate-y-0 pointer-events-auto"
+          : "opacity-0 translate-y-2 pointer-events-none"
+      }`}
+    >
+      <ArrowUp className="size-4" />
+    </Button>
+  )
+}

package/build/website/components/Banner.tsx

@@ -0,0 +1,32 @@
+import { Star, MessageCircle } from "lucide-react"
+
+/** Technical preview banner displayed in the header */
+export function Banner() {
+  return (
+    <div className="hidden md:flex flex-1 items-center justify-end">
+      <div className="rounded-xl border border-primary/20 bg-primary/2 dark:bg-primary/5 shadow-xs px-3 py-1.5 text-sm text-primary">
+        <span>
+          This project is in technical preview.{" "}
+          <a
+            href="https://github.com/datisthq/livemark"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-semibold hover:underline underline-offset-2"
+          >
+            <Star className="inline size-3.5 align-[-0.125em]" /> Star on GitHub
+          </a>{" "}
+          and{" "}
+          <a
+            href="https://github.com/datisthq/livemark/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-semibold hover:underline underline-offset-2"
+          >
+            <MessageCircle className="inline size-3.5 align-[-0.125em]" /> share
+            feedback!
+          </a>
+        </span>
+      </div>
+    </div>
+  )
+}

package/build/website/components/BlogIndex.tsx

@@ -0,0 +1,121 @@
+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 blog index listing all posts by date */
+export function BlogIndex(props: { sectionPrefix: string }) {
+  const section = currentSection(props.sectionPrefix)
+  const flat = sectionFlatArticles.get(props.sectionPrefix) ?? []
+  const posts = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+
+  const tocItems = posts.map(post => ({
+    url: `#${slugOf(post.path)}`,
+    title: post.title,
+    depth: 2,
+  }))
+
+  const content = [
+    `# ${section?.title ?? "Blog"}`,
+    ...posts.map(post => {
+      const parts = [`## ${post.title}`]
+      if (post.date) parts.push(formatDate(post.date))
+      if (post.author) {
+        parts.push(
+          Array.isArray(post.author) ? post.author.join(", ") : post.author,
+        )
+      }
+      if (post.description) parts.push("", post.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 ?? "Blog"}</a>
+            </h1>
+            {posts[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(posts[0].date)}
+                </span>
+              </p>
+            )}
+          </div>
+          <div className="space-y-6">
+            {posts.map((post, i) => (
+              <article key={post.path} id={slugOf(post.path)}>
+                {i > 0 && <Separator className="mb-6" />}
+                <h2 className="text-2xl">
+                  <Link
+                    to="/$"
+                    params={{ _splat: post.path.replace(/^\/|\/$/g, "") }}
+                    className="font-medium hover:text-primary transition-colors"
+                  >
+                    {post.title}
+                  </Link>
+                </h2>
+                <p className="text-sm text-muted-foreground mt-1 flex gap-3">
+                  {post.date && <span>{formatDate(post.date)}</span>}
+                  {post.author && (
+                    <span>
+                      {Array.isArray(post.author)
+                        ? post.author.join(", ")
+                        : post.author}
+                    </span>
+                  )}
+                </p>
+                {post.description && (
+                  <p className="text-muted-foreground mt-2">
+                    {post.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/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

@@ -0,0 +1,22 @@
+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">
+        {section?.title ?? import.meta.env.CONFIG.title}
+      </Link>
+      <span>/</span>
+      {loaderData?.title && (
+        <span className="text-foreground font-medium">{loaderData.title}</span>
+      )}
+    </nav>
+  )
+}

package/build/website/components/Callout.tsx

@@ -0,0 +1,72 @@
+import { AlertTriangle, Flame, Info, Lightbulb } from "lucide-react"
+import { cn } from "../helpers/style.ts"
+
+type CalloutType = "note" | "tip" | "info" | "warning" | "danger"
+
+interface CalloutConfig {
+  icon: React.ElementType
+  label: string
+  classes: string
+}
+
+const configs: Record<CalloutType, CalloutConfig> = {
+  note: {
+    icon: Info,
+    label: "Note",
+    classes:
+      "border-blue-500/30 bg-blue-50/50 text-blue-900 dark:bg-blue-950/30 dark:text-blue-200",
+  },
+  info: {
+    icon: Info,
+    label: "Info",
+    classes:
+      "border-blue-500/30 bg-blue-50/50 text-blue-900 dark:bg-blue-950/30 dark:text-blue-200",
+  },
+  tip: {
+    icon: Lightbulb,
+    label: "Tip",
+    classes:
+      "border-green-500/30 bg-green-50/50 text-green-900 dark:bg-green-950/30 dark:text-green-200",
+  },
+  warning: {
+    icon: AlertTriangle,
+    label: "Warning",
+    classes:
+      "border-yellow-500/30 bg-yellow-50/50 text-yellow-900 dark:bg-yellow-950/30 dark:text-yellow-200",
+  },
+  danger: {
+    icon: Flame,
+    label: "Danger",
+    classes:
+      "border-red-500/30 bg-red-50/50 text-red-900 dark:bg-red-950/30 dark:text-red-200",
+  },
+}
+
+/** Styled callout block for notes, tips, warnings, and other admonitions */
+export function Callout(props: {
+  type?: CalloutType
+  title?: string
+  children: React.ReactNode
+}) {
+  const type = props.type ?? "note"
+  const config = configs[type]
+  const Icon = config.icon
+  const title = props.title ?? config.label
+
+  return (
+    <aside
+      className={cn(
+        "not-prose my-4 rounded-xl border px-4 py-3",
+        config.classes,
+      )}
+    >
+      <div className="flex items-center gap-2 font-semibold text-sm mb-2">
+        <Icon className="size-4 shrink-0" />
+        <span>{title}</span>
+      </div>
+      <div className="text-sm [&>p]:my-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {props.children}
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,8 @@
+/** Grid container for card components */
+export function Cards(props: { children: React.ReactNode }) {
+  return (
+    <div className="not-prose grid grid-cols-1 gap-4 my-4 sm:grid-cols-2">
+      {props.children}
+    </div>
+  )
+}