livemark 0.2.0 → 0.7.1

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/plugins/vite-livemark.ts

@@ -0,0 +1,91 @@
+import { existsSync } from "node:fs"
+import { join } from "node:path"
+import type { Plugin } from "vite"
+
+/** Sub-directories of `website/` that participate in the override mechanism. */
+export const OVERRIDE_SUBDIRS: readonly string[] = [
+  "components",
+  "elements",
+  "styles",
+]
+
+export interface LivemarkOptions {
+  defaultsRoot: string
+  overridesRoot: string
+  subdirs: string[]
+  configPath: string
+}
+
+/** Livemark dev/build integration:
+ * - Redirects imports that land in `<defaultsRoot>/<subdir>/` to the matching
+ *   user file under `<overridesRoot>/<subdir>/` when it exists.
+ * - Watches `livemark.config.ts` and `.livemark/**` so edits, additions and
+ *   deletions trigger the right reload without manual restart. */
+export function livemark(opts: LivemarkOptions): Plugin {
+  const EXT_RE = /\.(tsx|ts|jsx|js|css)(\?|$)/
+  return {
+    name: "livemark",
+    enforce: "pre",
+    async resolveId(id, importer, options) {
+      if (!importer || !EXT_RE.test(id)) return null
+      const resolved = await this.resolve(id, importer, {
+        ...options,
+        skipSelf: true,
+      })
+      if (!resolved) return null
+      const queryIdx = resolved.id.indexOf("?")
+      const path =
+        queryIdx === -1 ? resolved.id : resolved.id.slice(0, queryIdx)
+      const query = queryIdx === -1 ? "" : resolved.id.slice(queryIdx)
+      for (const subdir of opts.subdirs) {
+        const defaultsSubdir = `${join(opts.defaultsRoot, subdir)}/`
+        if (!path.startsWith(defaultsSubdir)) continue
+        const rel = path.slice(defaultsSubdir.length)
+        const userPath = join(opts.overridesRoot, subdir, rel)
+        if (existsSync(userPath)) return userPath + query
+        return null
+      }
+      return null
+    },
+    configureServer(server) {
+      server.watcher.add(opts.configPath)
+      server.watcher.add(join(opts.overridesRoot, "**/*"))
+
+      const overrideRoots = opts.subdirs.map(
+        subdir => `${join(opts.overridesRoot, subdir)}/`,
+      )
+      const routesRoot = `${join(opts.overridesRoot, "routes")}/`
+
+      const onChange = (file: string) => {
+        if (file === opts.configPath) {
+          server.restart()
+          return
+        }
+
+        if (file.startsWith(routesRoot)) {
+          server.restart()
+          return
+        }
+
+        for (let i = 0; i < opts.subdirs.length; i++) {
+          const root = overrideRoots[i]
+          if (!root || !file.startsWith(root)) continue
+          const rel = file.slice(root.length)
+          const subdir = opts.subdirs[i]
+          if (!subdir) continue
+          const defaultPath = join(opts.defaultsRoot, subdir, rel)
+          const mod = server.moduleGraph.getModuleById(defaultPath)
+          if (mod) server.moduleGraph.invalidateModule(mod)
+          server.ws.send({ type: "full-reload" })
+          return
+        }
+      }
+
+      server.watcher.on("add", onChange)
+      server.watcher.on("unlink", onChange)
+      server.watcher.on("change", file => {
+        if (file === opts.configPath) server.restart()
+      })
+    },
+  }
+}

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 './../.livemark/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,92 @@
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router"
+import {
+  currentSection,
+  firstArticle,
+  homeArticle,
+  sortedArticles,
+} from "../content/article.ts"
+import { sectionTags } from "../content/tag.ts"
+import { Article } from "../components/Article.tsx"
+import { BlogIndex } from "../components/BlogIndex.tsx"
+import { ChangelogIndex } from "../components/ChangelogIndex.tsx"
+import { TagIndex } from "../components/TagIndex.tsx"
+import markdownCss from "../styles/markdown.css?url"
+
+export const Route = createFileRoute("/$")({
+  loader: ({ params }) => {
+    if (!params._splat) {
+      if (homeArticle) return { ...homeArticle, sidebar: homeArticle.sidebar }
+      if (!firstArticle) throw notFound()
+      throw redirect({
+        to: "/$",
+        params: { _splat: firstArticle.path.replace(/^\/|\/$/g, "") },
+      })
+    }
+    const splat = `/${params._splat}/`
+    const article = sortedArticles.find(a => a.path === splat)
+    if (article) return article
+
+    const section = currentSection(splat)
+    if (section?.type === "changelog" && section.prefix === splat) {
+      return {
+        changelogIndex: true as const,
+        sectionPrefix: section.prefix,
+        title: section.title,
+        sidebar: true,
+      }
+    }
+    if (section?.type === "blog") {
+      if (section.prefix === splat) {
+        return {
+          blogIndex: true as const,
+          sectionPrefix: section.prefix,
+          title: section.title,
+          sidebar: true,
+        }
+      }
+
+      const tagMatch = splat.match(
+        new RegExp(`^${section.prefix}tags/([^/]+)/$`),
+      )
+      const tag = tagMatch?.[1]
+      if (tag) {
+        const tagMap = sectionTags.get(section.prefix)
+        if (tagMap?.has(tag)) {
+          return {
+            tagPage: true as const,
+            sectionPrefix: section.prefix,
+            tag,
+            title: `Posts tagged '${tag}'`,
+            sidebar: true,
+          }
+        }
+      }
+    }
+
+    throw notFound()
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      ...(loaderData ? [{ title: loaderData.title }] : []),
+      ...("description" in loaderData && loaderData.description
+        ? [{ name: "description", content: loaderData.description }]
+        : []),
+    ],
+    links: [{ rel: "stylesheet", href: markdownCss }],
+  }),
+  component: Component,
+})
+
+function Component() {
+  const data = Route.useLoaderData()
+  if ("blogIndex" in data) {
+    return <BlogIndex sectionPrefix={data.sectionPrefix} />
+  }
+  if ("changelogIndex" in data) {
+    return <ChangelogIndex sectionPrefix={data.sectionPrefix} />
+  }
+  if ("tagPage" in data) {
+    return <TagIndex sectionPrefix={data.sectionPrefix} tag={data.tag} />
+  }
+  return <Article article={data} />
+}

package/build/website/routes/__root.tsx

@@ -0,0 +1,97 @@
+import { TanStackDevtools } from "@tanstack/react-devtools"
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools"
+import {
+  createRootRoute,
+  HeadContent,
+  Outlet,
+  Scripts,
+  useMatch,
+} 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 { faviconType } from "../helpers/favicon.ts"
+import defaultFavicon from "../assets/logo.svg"
+import generalCss from "../styles/general.css?url"
+
+export const Route = createRootRoute({
+  head: () => {
+    const favicon =
+      import.meta.env.CONFIG.favicon ??
+      import.meta.env.CONFIG.logo ??
+      defaultFavicon
+    return {
+      meta: [
+        { charSet: "utf-8" },
+        { title: import.meta.env.CONFIG.title },
+        { name: "description", content: import.meta.env.CONFIG.description },
+        { property: "og:title", content: import.meta.env.CONFIG.title },
+        {
+          property: "og:description",
+          content: import.meta.env.CONFIG.description,
+        },
+        { property: "og:site_name", content: import.meta.env.CONFIG.title },
+        { property: "og:type", content: "website" },
+        {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1",
+        },
+      ],
+      links: [
+        { rel: "icon", href: favicon, type: faviconType(favicon) },
+        { rel: "stylesheet", href: generalCss },
+      ],
+    }
+  },
+  notFoundComponent: () => <NotFound />,
+  errorComponent: props => {
+    return (
+      <Document>
+        <DefaultCatchBoundary {...props} />
+      </Document>
+    )
+  },
+  component: () => {
+    return (
+      <Document>
+        <Outlet />
+      </Document>
+    )
+  },
+})
+
+function Document(props: { children: React.ReactNode }) {
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
+  const withSidebar = articleRoute?.loaderData?.sidebar
+
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Layout withSidebar={withSidebar}>{props.children}</Layout>
+        <Toaster position="top-center" />
+        <TanStackDevtools
+          config={{ hideUntilHover: true, position: "bottom-left" }}
+          plugins={[
+            {
+              name: "TanStack Query",
+              render: <ReactQueryDevtoolsPanel />,
+              defaultOpen: true,
+            },
+            {
+              name: "TanStack Router",
+              render: <TanStackRouterDevtoolsPanel />,
+              defaultOpen: false,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

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