livemark 0.0.0-dev

package/build/website/plugins/shiki-line-highlight.ts

@@ -0,0 +1,174 @@
+interface HastText {
+  type: "text"
+  value: string
+}
+
+interface HastElement {
+  type: "element"
+  properties: Record<string, unknown>
+  children: (HastElement | HastText)[]
+}
+
+interface ShikiTransformer {
+  name: string
+  preprocess?: (
+    this: { options: { meta?: { __raw?: string } } },
+    code: string,
+  ) => void
+  pre?: (pre: HastElement) => HastElement | void
+  line?: (line: HastElement, lineNumber: number) => HastElement | void
+  span?: (span: HastElement) => HastElement | void
+}
+
+function parseLineRanges(meta: string): Set<number> {
+  const lines = new Set<number>()
+  const match = meta.match(/\{([\d,\s-]+)\}/)
+  if (!match) return lines
+
+  const parts = match[1]!.split(",")
+  for (const part of parts) {
+    const trimmed = part.trim()
+    const rangeMatch = trimmed.match(/^(\d+)-(\d+)$/)
+    if (rangeMatch) {
+      const start = Number(rangeMatch[1])
+      const end = Number(rangeMatch[2])
+      for (let i = start; i <= end; i++) {
+        lines.add(i)
+      }
+    } else {
+      const num = Number(trimmed)
+      if (!Number.isNaN(num)) {
+        lines.add(num)
+      }
+    }
+  }
+
+  return lines
+}
+
+function parseLineNumbers(meta: string): { enabled: boolean; start: number } {
+  const match = meta.match(/\blineNumbers(?:=(\d+))?\b/)
+  if (!match) return { enabled: false, start: 1 }
+  const start = match[1] ? Number(match[1]) : 1
+  return { enabled: true, start }
+}
+
+function parseWordHighlight(meta: string): string | undefined {
+  const match = meta.match(/\{word:([^}]+)\}/)
+  return match ? match[1] : undefined
+}
+
+function spanContainsWord(span: HastElement, word: string): boolean {
+  for (const child of span.children) {
+    if (child.type === "text" && child.value.includes(word)) {
+      return true
+    }
+  }
+  return false
+}
+
+const NOTATION_RE =
+  /\/\/\s*\[!code\s+(highlight|focus|\+\+|--|error|warning)\]\s*$/
+const NOTATION_BLOCK_RE =
+  /\/\*\s*\[!code\s+(highlight|focus|\+\+|--|error|warning)\]\s*\*\/\s*$/
+
+function stripNotationFromLine(line: HastElement): string | undefined {
+  for (const child of line.children) {
+    if (child.type === "element") {
+      const result = stripNotationFromLine(child)
+      if (result !== undefined) return result
+    }
+    if (child.type === "text") {
+      const match =
+        child.value.match(NOTATION_RE) ?? child.value.match(NOTATION_BLOCK_RE)
+      if (match) {
+        child.value = child.value.slice(0, match.index).trimEnd()
+        return match[1]!
+      }
+    }
+  }
+  return undefined
+}
+
+/** Shiki transformer that handles comment-based code annotations for highlighting, diffs, and focus effects. */
+export function transformerNotations(): ShikiTransformer {
+  let hasFocus = false
+  let preElement: HastElement | undefined
+
+  return {
+    name: "livemark:notations",
+    preprocess() {
+      hasFocus = false
+      preElement = undefined
+    },
+    line(line) {
+      const notation = stripNotationFromLine(line)
+      if (!notation) return line
+
+      switch (notation) {
+        case "highlight":
+          line.properties["data-highlighted"] = ""
+          break
+        case "++":
+          line.properties["data-diff"] = "add"
+          break
+        case "--":
+          line.properties["data-diff"] = "remove"
+          break
+        case "focus":
+          line.properties["data-focus"] = ""
+          hasFocus = true
+          break
+        case "error":
+          line.properties["data-line-status"] = "error"
+          break
+        case "warning":
+          line.properties["data-line-status"] = "warning"
+          break
+      }
+
+      return line
+    },
+    pre(pre) {
+      preElement = pre
+      if (hasFocus && preElement) {
+        preElement.properties["data-has-focus"] = ""
+      }
+      return pre
+    },
+  }
+}
+
+/** Shiki transformer that highlights specific lines and words based on the code block meta string. */
+export function transformerLineHighlight(): ShikiTransformer {
+  let highlightedLines = new Set<number>()
+  let lineNumbers = { enabled: false, start: 1 }
+  let highlightedWord: string | undefined
+
+  return {
+    name: "livemark:line-highlight",
+    preprocess() {
+      const raw = this.options.meta?.__raw ?? ""
+      highlightedLines = parseLineRanges(raw)
+      lineNumbers = parseLineNumbers(raw)
+      highlightedWord = parseWordHighlight(raw)
+    },
+    line(line, lineNumber) {
+      if (highlightedLines.has(lineNumber)) {
+        line.properties["data-highlighted"] = ""
+      }
+      if (lineNumbers.enabled) {
+        line.properties["data-line-number"] = String(
+          lineNumber - 1 + lineNumbers.start,
+        )
+      }
+      return line
+    },
+    span(span) {
+      if (highlightedWord && spanContainsWord(span, highlightedWord)) {
+        span.properties["data-word-highlighted"] = ""
+      }
+      return span
+    },
+  }
+}

package/build/website/public/logo.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   data-v-0dd9719b=""
+   version="1.0"
+   viewBox="0 0 200 200"
+   preserveAspectRatio="xMidYMid"
+   color-interpolation-filters="sRGB"
+   id="svg14"
+   sodipodi:docname="fairspec-logo.svg"
+   inkscape:version="1.4.2 (1:1.4.2+202505120737+ebf0e940d0)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.4555556"
+     inkscape:cx="92.239817"
+     inkscape:cy="110.56561"
+     inkscape:window-width="1920"
+     inkscape:window-height="1108"
+     inkscape:window-x="0"
+     inkscape:window-y="53"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <!---->
+  <g
+     id="g7"
+     style="overflow:visible"
+     transform="matrix(1.9217834,0,0,1.9217834,-1.7872586,9.8749299)">
+    <polygon
+       fill="#0067b5"
+       points="16.19,19.77 29.19,42.29 3.19,42.29 0.93,46.2 44.32,46.2 22.63,8.63 "
+       id="polygon2"
+       style="fill:#2c7cfd;fill-opacity:1" />
+    <polygon
+       fill="#009fe8"
+       points="57.31,1.18 44.31,23.69 31.31,1.18 26.8,1.18 48.49,38.75 70.18,1.18 "
+       id="polygon3"
+       style="fill:#8ec5ff;fill-opacity:1" />
+    <polygon
+       fill="#009fe8"
+       points="94.44,27.66 68.43,27.66 81.44,5.15 79.18,1.24 57.49,38.81 100.87,38.81 "
+       id="polygon4"
+       style="fill:#8ec5ff;fill-opacity:1" />
+    <polygon
+       fill="#009fe8"
+       points="89.74,72.81 76.74,50.3 102.74,50.3 105,46.39 61.62,46.39 83.31,83.96 "
+       id="polygon5"
+       style="fill:#8ec5ff;fill-opacity:1" />
+    <polygon
+       fill="#0067b5"
+       points="48.62,91.41 61.62,68.89 74.62,91.41 79.13,91.41 57.45,53.83 35.75,91.41 "
+       id="polygon6"
+       style="fill:#2c7cfd;fill-opacity:1" />
+    <polygon
+       fill="#0067b5"
+       points="11.49,64.92 37.49,64.92 24.5,87.43 26.75,91.34 48.44,53.78 5.05,53.78 "
+       id="polygon7"
+       style="fill:#2c7cfd;fill-opacity:1" />
+  </g>
+  <defs
+     v-gra="od"
+     id="defs14" />
+</svg>

package/build/website/routeTree.gen.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SplatRouteImport } from './routes/$'
+import { Route as IndexRouteImport } from './routes/index'
+
+const SplatRoute = SplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/$'
+  id: '__root__' | '/' | '/$'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SplatRoute: typeof SplatRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SplatRoute: SplatRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/build/website/router.tsx

@@ -0,0 +1,34 @@
+import { QueryClient } from "@tanstack/react-query"
+import { createRouter } from "@tanstack/react-router"
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query"
+import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary.tsx"
+import { NotFound } from "./components/NotFound.tsx"
+import { routeTree } from "./routeTree.gen.ts"
+
+export function getRouter() {
+  const queryClient = new QueryClient()
+
+  const router = createRouter({
+    routeTree,
+    context: { queryClient },
+    trailingSlash: "always",
+    defaultPreload: "intent",
+    defaultViewTransition: true,
+    defaultErrorComponent: DefaultCatchBoundary,
+    defaultNotFoundComponent: () => <NotFound />,
+    scrollRestoration: true,
+  })
+
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+  })
+
+  return router
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/build/website/routes/$.tsx

@@ -0,0 +1,149 @@
+import { MDXContent } from "@content-collections/mdx/react"
+import { createFileRoute, notFound } from "@tanstack/react-router"
+import { sortedArticles } from "../helpers/articles.ts"
+import { Callout } from "../components/Callout.tsx"
+import { Columns, Column } from "../components/Columns.tsx"
+import { Card, Cards } from "../components/Cards.tsx"
+import { CodeBlock } from "../components/CodeBlock.tsx"
+import { headingComponents } from "../components/Heading.tsx"
+import { Calendar } from "lucide-react"
+import { CodeTabs } from "../components/CodeTabs.tsx"
+import { ContentTab } from "../components/ContentTab.tsx"
+import { ContentTabs } from "../components/ContentTabs.tsx"
+import { Details } from "../components/Details.tsx"
+import { FileTree } from "../components/FileTree.tsx"
+import { InlineIcon } from "../components/InlineIcon.tsx"
+import { Abbr } from "../components/Abbr.tsx"
+import { FootnoteRef } from "../components/FootnoteRef.tsx"
+import {
+  DefinitionList,
+  DefinitionTerm,
+  DefinitionDetail,
+} from "../components/DefinitionList.tsx"
+import { AnsiCode } from "../components/AnsiCode.tsx"
+import { InlineBadge } from "../components/InlineBadge.tsx"
+import { LinkButton } from "../components/LinkButton.tsx"
+import { Mermaid } from "../components/Mermaid.tsx"
+import { PackageTabs } from "../components/PackageTabs.tsx"
+import { SoundCloud } from "../components/SoundCloud.tsx"
+import { YouTube } from "../components/YouTube.tsx"
+import { InlineToc } from "../components/InlineToc.tsx"
+import { PageToolbar } from "../components/PageToolbar.tsx"
+import { PrevNext } from "../components/PrevNext.tsx"
+import { Toc } from "../components/Toc.tsx"
+import { ZoomImage } from "../components/ZoomImage.tsx"
+import { Separator } from "../elements/separator.tsx"
+import { TocContext } from "../helpers/toc-context.ts"
+import {
+  SortableTable,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "../components/SortableTable.tsx"
+
+export const Route = createFileRoute("/$")({
+  loader: ({ params }) => {
+    const splat = `/${params._splat}/`
+    const article = sortedArticles.find(a => a.pathname === splat)
+    if (!article) throw notFound()
+    return article
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      ...(loaderData ? [{ title: loaderData.title }] : []),
+      ...(loaderData?.description
+        ? [{ name: "description", content: loaderData.description }]
+        : []),
+    ],
+  }),
+  component: Component,
+})
+
+function Component() {
+  const article = Route.useLoaderData()
+  const lastUpdated = formatDate(article.lastUpdated)
+
+  const H1 = (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <>
+      <h1 {...props}>
+        {props.id ? (
+          <a href={`#${props.id}`}>{props.children}</a>
+        ) : (
+          props.children
+        )}
+      </h1>
+      {lastUpdated && (
+        <p className="flex items-center gap-1.5 text-sm text-muted-foreground !-mt-4 !mb-6">
+          <Calendar className="size-3.5" />
+          Last updated {lastUpdated}
+        </p>
+      )}
+    </>
+  )
+
+  return (
+    <TocContext.Provider value={article.toc}>
+      <div className="flex flex-1 gap-10 p-6 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 pathname={article.pathname} />
+        </div>
+        <Toc items={article.toc}>
+          <PageToolbar filePath={article.filePath} 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/routes/__root.tsx

@@ -0,0 +1,84 @@
+import { TanStackDevtools } from "@tanstack/react-devtools"
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools"
+import {
+  createRootRoute,
+  HeadContent,
+  Outlet,
+  Scripts,
+} from "@tanstack/react-router"
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
+import type * as React from "react"
+import { Layout } from "../components/Layout.tsx"
+import { DefaultCatchBoundary } from "../components/DefaultCatchBoundary.tsx"
+import { NotFound } from "../components/NotFound.tsx"
+import { Toaster } from "../elements/sonner.tsx"
+import generalCss from "../styles/general.css?url"
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { title: "Title" },
+      { name: "description", content: "Description" },
+      { property: "og:title", content: "Title" },
+      { property: "og:description", content: "Description" },
+      { property: "og:site_name", content: "Title" },
+      { property: "og:type", content: "website" },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+    ],
+    links: [
+      { rel: "icon", href: "/logo.svg", type: "image/svg+xml" },
+      { rel: "stylesheet", href: generalCss },
+      // TODO: recover
+      // { rel: "canonical", href: settings.HOST },
+    ],
+  }),
+  notFoundComponent: () => <NotFound />,
+  errorComponent: props => {
+    return (
+      <Document>
+        <DefaultCatchBoundary {...props} />
+      </Document>
+    )
+  },
+  component: () => {
+    return (
+      <Document>
+        <Outlet />
+      </Document>
+    )
+  },
+})
+
+function Document(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Layout>{props.children}</Layout>
+        <Toaster position="top-center" />
+        <TanStackDevtools
+          config={{ hideUntilHover: true }}
+          plugins={[
+            {
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />,
+              defaultOpen: true,
+            },
+            {
+              name: "TanStack Router",
+              render: <TanStackRouterDevtoolsPanel />,
+              defaultOpen: false,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/build/website/routes/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router"
+import { sortedArticles } from "../helpers/articles.ts"
+
+export const Route = createFileRoute("/")({
+  beforeLoad: () => {
+    const first = sortedArticles[0]
+    if (!first) throw notFound()
+    throw redirect({
+      to: "/$",
+      params: { _splat: first.pathname.replace(/^\/|\/$/g, "") },
+    })
+  },
+})

package/build/website/server.ts

@@ -0,0 +1,7 @@
+import handler, { createServerEntry } from "@tanstack/react-start/server-entry"
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request)
+  },
+})