livemark 0.2.0 → 0.7.1

package/build/website/content/article.ts

@@ -0,0 +1,78 @@
+import { allArticles } from "content-collections"
+import type { ArticleGroup } from "../models/article.ts"
+import {
+  buildArticleTree,
+  flattenArticleTree,
+  groupArticleTree,
+} from "../helpers/article.ts"
+import { matchSection, partitionBySection } from "../helpers/section.ts"
+
+/**
+ * Articles sorted by frontmatter `order`:
+ * positive values first (ascending), then unordered, then negative values
+ * (so `order: -1` lands at the very end, `-2` just before it, and so on).
+ */
+export const sortedArticles = [...allArticles].sort(
+  (a, b) => orderKey(a.order) - orderKey(b.order),
+)
+
+/** The article whose path is `/`, if any (rendered in place at the root) */
+export const homeArticle = sortedArticles.find(a => a.path === "/")
+
+/** Sidebar sections derived from the path tree, partitioned by `group` */
+export const articleGroups = groupArticleTree(
+  buildArticleTree(sortedArticles),
+  sortedArticles,
+)
+
+/** Articles in depth-first order across all sections (matches sidebar walk) */
+export const flatArticles = articleGroups.flatMap(group =>
+  flattenArticleTree(group.nodes),
+)
+
+/** The first article in sidebar order, used as the default landing page */
+export const firstArticle = sortedArticles.find(a => a.path === flatArticles[0])
+
+function orderKey(order?: number) {
+  if (order === undefined) return Number.MAX_SAFE_INTEGER / 2
+  if (order < 0) return Number.MAX_SAFE_INTEGER + order
+  return order
+}
+
+const configSections = import.meta.env.CONFIG.sections
+
+/** Per-section article groups, keyed by section prefix */
+export const sectionArticleGroups = new Map<string, ArticleGroup[]>()
+
+/** Per-section flat article lists, keyed by section prefix */
+export const sectionFlatArticles = new Map<string, string[]>()
+
+/** Per-section first article path, keyed by section prefix */
+export const sectionFirstArticle = new Map<string, string | undefined>()
+
+if (configSections?.length) {
+  const sectionByPrefix = new Map(configSections.map(s => [s.prefix, s]))
+  const buckets = partitionBySection(sortedArticles, configSections)
+  for (const [key, bucket] of buckets) {
+    const section = sectionByPrefix.get(key)
+    const sorted =
+      section?.type === "blog" || section?.type === "changelog"
+        ? [...bucket].sort(
+            (a, b) =>
+              new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
+          )
+        : bucket
+    const tree = buildArticleTree(sorted)
+    const groups = groupArticleTree(tree, sorted)
+    const flat = groups.flatMap(g => flattenArticleTree(g.nodes))
+    sectionArticleGroups.set(key, groups)
+    sectionFlatArticles.set(key, flat)
+    sectionFirstArticle.set(key, flat[0])
+  }
+}
+
+/** Find which config section an article path belongs to */
+export function currentSection(path: string) {
+  if (!configSections?.length) return undefined
+  return matchSection(path, configSections)
+}

package/build/website/content/tag.ts

@@ -0,0 +1,29 @@
+import { sectionFlatArticles, sortedArticles } from "./article.ts"
+
+const configSections = import.meta.env.CONFIG.sections
+
+/** Per-section tag → article paths mapping. Articles sorted by date descending. */
+export const sectionTags = new Map<string, Map<string, string[]>>()
+
+if (configSections?.length) {
+  for (const section of configSections) {
+    if (section.type !== "blog") continue
+    const flat = sectionFlatArticles.get(section.prefix) ?? []
+    const tagMap = new Map<string, string[]>()
+    for (const path of flat) {
+      const article = sortedArticles.find(a => a.path === path)
+      if (!article?.tags) continue
+      for (const tag of article.tags) {
+        const list = tagMap.get(tag)
+        if (list) {
+          list.push(path)
+        } else {
+          tagMap.set(tag, [path])
+        }
+      }
+    }
+    if (tagMap.size > 0) {
+      sectionTags.set(section.prefix, tagMap)
+    }
+  }
+}

package/build/website/content-collections.ts

@@ -0,0 +1,208 @@
+import { execSync } from "node:child_process"
+import { basename, relative, resolve } from "node:path"
+import { defineCollection, defineConfig } from "@content-collections/core"
+import { compileMDX } from "@content-collections/mdx"
+import rehypeShiki from "@shikijs/rehype"
+import { transformerTwoslash } from "@shikijs/twoslash"
+import rehypeKatex from "rehype-katex"
+import rehypeSlug from "rehype-slug"
+import remarkDefinitionList from "remark-definition-list"
+import remarkDirective from "remark-directive"
+import remarkGemoji from "remark-gemoji"
+import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
+import { loadConfig } from "../actions/config/load.ts"
+import { buildChangelog, cacheIncludeGlob } from "../actions/changelog/build.ts"
+import { Article } from "./models/article.ts"
+import { pickDefaultIcon } from "./helpers/article-icon.ts"
+import slugify from "@sindresorhus/slugify"
+import remarkCustomHeadingId from "./plugins/remark-custom-heading-id.ts"
+import { remarkCallout } from "./plugins/remark-callout.ts"
+import { remarkCard } from "./plugins/remark-card.ts"
+import { remarkColumns } from "./plugins/remark-columns.ts"
+import { remarkTab } from "./plugins/remark-tab.ts"
+import { remarkBadge } from "./plugins/remark-badge.ts"
+import { remarkButton } from "./plugins/remark-button.ts"
+import { remarkAbbr } from "./plugins/remark-abbr.ts"
+import { remarkDeflist } from "./plugins/remark-deflist.ts"
+import { remarkDetails } from "./plugins/remark-details.ts"
+import { remarkFiletree } from "./plugins/remark-filetree.ts"
+import { remarkIcon } from "./plugins/remark-icon.ts"
+import { remarkCodeTabs } from "./plugins/remark-code-tabs.ts"
+import { remarkGithubCallout } from "./plugins/remark-github-callout.ts"
+import { remarkImage } from "./plugins/remark-image.ts"
+import { remarkMedia } from "./plugins/remark-media.ts"
+import { remarkAnsi } from "./plugins/remark-ansi.ts"
+import { remarkMermaid } from "./plugins/remark-mermaid.ts"
+import { remarkToc } from "./plugins/remark-toc.ts"
+import { remarkNpm } from "./plugins/remark-npm.ts"
+import { remarkSteps } from "./plugins/remark-steps.ts"
+import {
+  transformerLineHighlight,
+  transformerNotations,
+} from "./plugins/shiki-line-highlight.ts"
+import { rehypeInlineCode } from "./plugins/rehype-inline-code.ts"
+import { rehypeTaskListA11y } from "./plugins/rehype-task-list-a11y.ts"
+import { transformerIcon } from "./plugins/shiki-icon.ts"
+import { resolveAssetPath } from "./helpers/resolve-asset-path.ts"
+import { resolveIncludes } from "./helpers/resolve-includes.ts"
+import { extractSearchText } from "./helpers/search-text.ts"
+import { extractToc } from "./helpers/toc.ts"
+
+const config = await loadConfig()
+
+const changelogSections =
+  config.sections?.filter(s => s.type === "changelog") ?? []
+for (const section of changelogSections) {
+  await buildChangelog(section, config)
+}
+
+const configInclude = Array.isArray(config.include)
+  ? config.include
+  : [config.include]
+const include = changelogSections.length
+  ? [...configInclude, cacheIncludeGlob()]
+  : configInclude
+
+// content-collections compiles this file to .content-collections/cache/;
+// going up 2 levels reconstructs the baseDirectory it uses for path resolution
+const baseDir = resolve(import.meta.dirname, "../..")
+const directory = relative(baseDir, config.root) || "."
+
+function toPath(filePath: string) {
+  const name = basename(filePath).replace(/\.\w+$/, "")
+  return slugify(name)
+}
+
+function getLastUpdated(filePath: string) {
+  try {
+    const timestamp = execSync(`git log -1 --format=%cI -- "${filePath}"`, {
+      cwd: config.root,
+      encoding: "utf-8",
+    }).trim()
+    return timestamp || undefined
+  } catch {
+    return undefined
+  }
+}
+
+function extractTitle(content: string, path: string) {
+  const match = /^#\s+(.+)$/m.exec(content)
+  if (match) return match[1]!
+  return (
+    path
+      .split("/")
+      .pop()
+      ?.replace(/\.\w+$/, "") ?? path
+  )
+}
+
+const articles = defineCollection({
+  name: "articles",
+  directory,
+  include,
+  exclude: config.exclude,
+  schema: Article,
+  transform: async (document, context) => {
+    const patch = config.patches?.find(p => p.file === document._meta.filePath)
+    const doc = patch ? { ...document, ...patch.article } : document
+    const filePath = resolve(config.root, doc._meta.filePath)
+    const content = resolveIncludes(doc.content, filePath)
+    const title = doc.title ?? extractTitle(content, doc._meta.path)
+    const icon = doc.icon ?? pickDefaultIcon(doc._meta.path)
+    const path = doc.path ?? toPath(doc._meta.filePath)
+    const mdx = await compileMDX(
+      context,
+      { ...doc, content },
+      {
+        remarkPlugins: [
+          remarkGfm,
+          remarkGemoji,
+          remarkDefinitionList,
+          remarkDeflist,
+          remarkMath,
+          remarkDirective,
+          remarkCallout,
+          remarkCard,
+          remarkColumns,
+          remarkTab,
+          remarkDetails,
+          remarkFiletree,
+          remarkIcon,
+          remarkBadge,
+          remarkButton,
+          remarkAbbr,
+          remarkGithubCallout,
+          [
+            remarkImage,
+            {
+              filePath: resolve(config.root, doc._meta.filePath),
+              root: config.root,
+            },
+          ],
+          remarkAnsi,
+          remarkMermaid,
+          remarkMedia,
+          remarkToc,
+          remarkNpm,
+          remarkCodeTabs,
+          remarkSteps,
+          remarkCustomHeadingId,
+        ],
+        rehypePlugins: [
+          [
+            rehypeShiki,
+            {
+              themes: {
+                light: config.codeThemeLight,
+                dark: config.codeThemeDark,
+              },
+              // Darken catppuccin-latte's green (the colour used for strings and
+              // some comments) — the theme default #40A02B lands at 3.2:1 on the
+              // code-block background, below the WCAG AA 4.5:1 threshold.
+              colorReplacements: {
+                "catppuccin-latte": {
+                  "#40a02b": "#2a7e16",
+                },
+              },
+              transformers: [
+                transformerTwoslash({ explicitTrigger: true }),
+                transformerIcon(),
+                transformerNotations(),
+                transformerLineHighlight(),
+              ],
+              parseMetaString: (meta: string) => ({ "data-meta": meta }),
+            },
+          ],
+          rehypeInlineCode,
+          rehypeSlug,
+          rehypeKatex,
+          rehypeTaskListA11y,
+        ],
+      },
+    )
+    const tocItems = extractToc(content)
+    const searchText = extractSearchText(content)
+    const lastUpdated = getLastUpdated(doc._meta.filePath)
+    const image = doc.image
+      ? resolveAssetPath(doc.image, filePath, config.root)
+      : undefined
+    return {
+      ...doc,
+      file: doc._meta.filePath,
+      lastUpdated,
+      image,
+      title,
+      icon,
+      path,
+      tocItems,
+      searchText,
+      mdx,
+    }
+  },
+})
+
+export default defineConfig({
+  // @ts-expect-error tsgo picks wrong overload when rehype-slug augments unified types
+  content: [articles],
+})

package/build/website/elements/accordion.tsx

@@ -0,0 +1,78 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "../helpers/style.ts"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/build/website/elements/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "../helpers/style.ts"
+import { Button } from "./button.tsx"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "cn-font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/build/website/elements/alert.tsx

@@ -0,0 +1,74 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../helpers/style.ts"
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/build/website/elements/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../helpers/style.ts"
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }