livemark 0.0.0-dev

package/build/website/helpers/resolve-includes.ts

@@ -0,0 +1,131 @@
+import { readFileSync } from "node:fs"
+import { dirname, extname, resolve } from "node:path"
+
+const INCLUDE_RE = /^::include\{(.+)\}$/
+const FRONTMATTER_RE = /^---\n[\s\S]*?\n---\n?/
+const FENCE_RE = /^(`{3,}|~{3,})/
+
+const extToLang: Record<string, string> = {
+  ".ts": "typescript",
+  ".tsx": "tsx",
+  ".js": "javascript",
+  ".jsx": "jsx",
+  ".py": "python",
+  ".rs": "rust",
+  ".go": "go",
+  ".rb": "ruby",
+  ".java": "java",
+  ".kt": "kotlin",
+  ".swift": "swift",
+  ".c": "c",
+  ".cpp": "cpp",
+  ".h": "c",
+  ".cs": "csharp",
+  ".css": "css",
+  ".scss": "scss",
+  ".html": "html",
+  ".json": "json",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+  ".toml": "toml",
+  ".xml": "xml",
+  ".sql": "sql",
+  ".sh": "bash",
+  ".bash": "bash",
+  ".zsh": "zsh",
+  ".fish": "fish",
+  ".ps1": "powershell",
+  ".dockerfile": "dockerfile",
+  ".graphql": "graphql",
+  ".proto": "protobuf",
+  ".lua": "lua",
+  ".php": "php",
+  ".r": "r",
+  ".zig": "zig",
+  ".ex": "elixir",
+  ".exs": "elixir",
+}
+
+function parseAttributes(raw: string): Record<string, string> {
+  const attrs: Record<string, string> = {}
+  const re = /(\w+)="([^"]+)"/g
+  let m: RegExpExecArray | null = null
+  while ((m = re.exec(raw)) !== null) {
+    attrs[m[1]!] = m[2]!
+  }
+  return attrs
+}
+
+function resolveDirective(
+  rawAttrs: string,
+  fileDir: string,
+  depth: number,
+): string | undefined {
+  const attrs = parseAttributes(rawAttrs)
+  const file = attrs.file
+  if (!file) return undefined
+
+  const absolutePath = resolve(fileDir, file)
+  try {
+    let included = readFileSync(absolutePath, "utf-8")
+
+    const ext = extname(file).toLowerCase()
+    const lang = extToLang[ext]
+
+    if (lang && !file.endsWith(".md")) {
+      const filename = file.split("/").pop()!
+      const title = `title="${filename}"`
+      const meta = attrs.meta ? ` ${attrs.meta}` : ""
+      return (
+        "```" + lang + " " + title + meta + "\n" + included.trimEnd() + "\n```"
+      )
+    }
+
+    included = included.replace(FRONTMATTER_RE, "")
+    return resolveIncludes(included.trim(), absolutePath, depth + 1)
+  } catch {
+    return undefined
+  }
+}
+
+/** Resolves ::include{file="..."} directives by replacing them with referenced file contents */
+export function resolveIncludes(
+  content: string,
+  filePath: string,
+  depth = 0,
+): string {
+  if (depth > 5) return content
+
+  const fileDir = dirname(filePath)
+  const lines = content.split("\n")
+  const result: string[] = []
+  let fenceMarker: string | undefined
+
+  for (const line of lines) {
+    const fenceMatch = FENCE_RE.exec(line)
+    if (fenceMatch) {
+      if (!fenceMarker) {
+        fenceMarker = fenceMatch[1]!
+      } else if (line.startsWith(fenceMarker)) {
+        fenceMarker = undefined
+      }
+      result.push(line)
+      continue
+    }
+
+    if (fenceMarker) {
+      result.push(line)
+      continue
+    }
+
+    const includeMatch = INCLUDE_RE.exec(line)
+    if (includeMatch) {
+      const resolved = resolveDirective(includeMatch[1]!, fileDir, depth)
+      result.push(resolved ?? line)
+    } else {
+      result.push(line)
+    }
+  }
+
+  return result.join("\n")
+}

package/build/website/helpers/resolve-includes.unit.ts

@@ -0,0 +1,126 @@
+import { mkdirSync, writeFileSync } from "node:fs"
+import { join } from "node:path"
+import { describe, expect, it } from "vite-plus/test"
+import { temporaryDirectory } from "tempy"
+import { resolveIncludes } from "./resolve-includes.ts"
+
+describe("resolveIncludes", () => {
+  it("should replace include directive with file content", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "snippet.md"), "Hello from snippet")
+    const result = resolveIncludes(
+      '::include{file="snippet.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Hello from snippet")
+  })
+
+  it("should strip frontmatter from included files", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(
+      join(dir, "snippet.md"),
+      "---\ntitle: Test\n---\nContent here",
+    )
+    const result = resolveIncludes(
+      '::include{file="snippet.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Content here")
+  })
+
+  it("should preserve surrounding content", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "snippet.md"), "Included text")
+    const result = resolveIncludes(
+      'Before\n\n::include{file="snippet.md"}\n\nAfter',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Before\n\nIncluded text\n\nAfter")
+  })
+
+  it("should keep directive when file is missing", () => {
+    const result = resolveIncludes(
+      '::include{file="nonexistent.md"}',
+      "/tmp/main.md",
+    )
+    expect(result).toBe('::include{file="nonexistent.md"}')
+  })
+
+  it("should resolve nested includes", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "inner.md"), "Inner content")
+    writeFileSync(join(dir, "outer.md"), '::include{file="inner.md"}')
+    const result = resolveIncludes(
+      '::include{file="outer.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Inner content")
+  })
+
+  it("should limit recursion depth", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "recursive.md"), '::include{file="recursive.md"}')
+    const result = resolveIncludes(
+      '::include{file="recursive.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe('::include{file="recursive.md"}')
+  })
+
+  it("should resolve relative paths from included file location", () => {
+    const dir = temporaryDirectory()
+    mkdirSync(join(dir, "sub"))
+    writeFileSync(join(dir, "sub", "child.md"), "Child content")
+    writeFileSync(join(dir, "parent.md"), '::include{file="sub/child.md"}')
+    const result = resolveIncludes(
+      '::include{file="parent.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Child content")
+  })
+
+  it("should handle multiple includes in one file", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "a.md"), "Alpha")
+    writeFileSync(join(dir, "b.md"), "Beta")
+    const result = resolveIncludes(
+      '::include{file="a.md"}\n\n::include{file="b.md"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Alpha\n\nBeta")
+  })
+
+  it("should wrap code files in fenced blocks", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "example.ts"), 'const x = 1\nconst y = "hello"')
+    const result = resolveIncludes(
+      '::include{file="example.ts"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe(
+      '```typescript title="example.ts"\nconst x = 1\nconst y = "hello"\n```',
+    )
+  })
+
+  it("should pass meta to code fence", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "app.tsx"), "export default function App() {}")
+    const result = resolveIncludes(
+      '::include{file="app.tsx" meta="{1} lineNumbers"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe(
+      '```tsx title="app.tsx" {1} lineNumbers\nexport default function App() {}\n```',
+    )
+  })
+
+  it("should treat unknown extensions as markdown", () => {
+    const dir = temporaryDirectory()
+    writeFileSync(join(dir, "notes.txt"), "Plain text")
+    const result = resolveIncludes(
+      '::include{file="notes.txt"}',
+      join(dir, "main.md"),
+    )
+    expect(result).toBe("Plain text")
+  })
+})

package/build/website/helpers/search-text.ts

@@ -0,0 +1,15 @@
+/** Strip markdown syntax to extract plain searchable text */
+export function extractSearchText(markdown: string) {
+  return markdown
+    .replace(/^---[\s\S]*?---\n*/m, "")
+    .replace(/```[\s\S]*?```/g, "")
+    .replace(/:::\w+[\s\S]*?:::/g, "")
+    .replace(/::\w+(?:\[.*?\])?(?:\{.*?\})?/g, "")
+    .replace(/!\[.*?\]\(.*?\)/g, "")
+    .replace(/\[([^\]]*)\]\(.*?\)/g, "$1")
+    .replace(/<[^>]+>/g, "")
+    .replace(/#{1,6}\s*/g, "")
+    .replace(/[*_~`>|]/g, "")
+    .replace(/\n{2,}/g, "\n")
+    .trim()
+}

package/build/website/helpers/style.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/build/website/helpers/theme.ts

@@ -0,0 +1,27 @@
+const STORAGE_KEY = "livemark-theme"
+
+export type Theme = "light" | "dark"
+
+export function detectClientTheme(): Theme {
+  const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
+  return stored || "light"
+}
+
+export function activateTheme(theme: Theme) {
+  if (theme === "dark") {
+    globalThis.document.documentElement.classList.add("dark")
+  } else {
+    globalThis.document.documentElement.classList.remove("dark")
+  }
+}
+
+export function getCurrentTheme(): Theme {
+  return globalThis.document?.documentElement.classList.contains("dark")
+    ? "dark"
+    : "light"
+}
+
+export function setTheme(theme: Theme) {
+  activateTheme(theme)
+  localStorage.setItem(STORAGE_KEY, theme)
+}

package/build/website/helpers/toc-context.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react"
+import type { TocItem } from "./toc.ts"
+
+/** React context that provides TOC items to inline components */
+export const TocContext = createContext<TocItem[]>([])
+
+/** Consume the TOC items from the nearest TocContext provider */
+export function useTocItems() {
+  return useContext(TocContext)
+}

package/build/website/helpers/toc.ts

@@ -0,0 +1,51 @@
+import GithubSlugger from "github-slugger"
+
+export interface TocItem {
+  url: string
+  title: string
+  depth: number
+}
+
+const CUSTOM_ID_PATTERN = /\s*\[#([^\]]+)\]\s*$/
+const TOC_HIDDEN_PATTERN = /\s*\[!toc\]\s*$/
+const TOC_ONLY_PATTERN = /\s*\[toc\]\s*$/
+const STEP_PATTERN = /\s*\[step\]\s*$/
+
+/** Extract TOC headings from raw markdown content */
+export function extractToc(content: string): TocItem[] {
+  const slugger = new GithubSlugger()
+  const items: TocItem[] = []
+  const headingRegex = /^(#{2,4})\s+(.+)$/
+  const lines = content.split("\n")
+  let inCodeBlock = false
+
+  for (const line of lines) {
+    if (line.startsWith("```") || line.startsWith("````")) {
+      inCodeBlock = !inCodeBlock
+      continue
+    }
+    if (inCodeBlock) continue
+
+    const match = headingRegex.exec(line)
+    if (!match) continue
+
+    const depth = match[1]!.length
+    const rawTitle = match[2]!
+
+    if (TOC_HIDDEN_PATTERN.test(rawTitle)) continue
+    if (STEP_PATTERN.test(rawTitle)) continue
+
+    const idMatch = CUSTOM_ID_PATTERN.exec(rawTitle)
+    const title = rawTitle
+      .replace(CUSTOM_ID_PATTERN, "")
+      .replace(TOC_ONLY_PATTERN, "")
+      .replace(STEP_PATTERN, "")
+      .replace(/\*\*(.+?)\*\*/g, "$1")
+      .replace(/`(.+?)`/g, "$1")
+    const slug = idMatch?.[1] ?? slugger.slug(title)
+
+    items.push({ url: `#${slug}`, title, depth })
+  }
+
+  return items
+}

package/build/website/helpers/toc.unit.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vite-plus/test"
+import { extractToc } from "./toc.ts"
+
+describe("extractToc", () => {
+  it("should extract headings with auto-generated slugs", () => {
+    const content = "## Introduction\n\n### Getting Started"
+    const toc = extractToc(content)
+    expect(toc).toEqual([
+      { url: "#introduction", title: "Introduction", depth: 2 },
+      { url: "#getting-started", title: "Getting Started", depth: 3 },
+    ])
+  })
+
+  it("should use custom id when [#custom-id] syntax is present", () => {
+    const content = "## My Section [#custom-id]\n\n### Sub Section"
+    const toc = extractToc(content)
+    expect(toc).toEqual([
+      { url: "#custom-id", title: "My Section", depth: 2 },
+      { url: "#sub-section", title: "Sub Section", depth: 3 },
+    ])
+  })
+
+  it("should strip [#id] from the displayed title", () => {
+    const content = "## Installation [#install]"
+    const toc = extractToc(content)
+    expect(toc).toEqual([{ url: "#install", title: "Installation", depth: 2 }])
+  })
+
+  it("should handle inline formatting with custom ids", () => {
+    const content = "## **Bold** Title [#bold-title]"
+    const toc = extractToc(content)
+    expect(toc).toEqual([{ url: "#bold-title", title: "Bold Title", depth: 2 }])
+  })
+
+  it("should handle code formatting with custom ids", () => {
+    const content = "## `config` Options [#config-opts]"
+    const toc = extractToc(content)
+    expect(toc).toEqual([
+      { url: "#config-opts", title: "config Options", depth: 2 },
+    ])
+  })
+
+  it("should skip h1 headings", () => {
+    const content = "# Title\n\n## Section"
+    const toc = extractToc(content)
+    expect(toc).toEqual([{ url: "#section", title: "Section", depth: 2 }])
+  })
+
+  it("should exclude [step] headings from TOC", () => {
+    const content =
+      "## Overview\n\n### Install Dependencies [step]\n\n### Configure Project [step]"
+    const toc = extractToc(content)
+    expect(toc).toEqual([{ url: "#overview", title: "Overview", depth: 2 }])
+  })
+
+  it("should skip headings with [!toc] annotation", () => {
+    const content = "## Visible\n\n## Hidden From TOC [!toc]\n\n## Also Visible"
+    const toc = extractToc(content)
+    expect(toc).toEqual([
+      { url: "#visible", title: "Visible", depth: 2 },
+      { url: "#also-visible", title: "Also Visible", depth: 2 },
+    ])
+  })
+
+  it("should include [toc] headings with annotation stripped from title", () => {
+    const content = "## Regular\n\n## TOC Only [toc]\n\n## Another"
+    const toc = extractToc(content)
+    expect(toc).toEqual([
+      { url: "#regular", title: "Regular", depth: 2 },
+      { url: "#toc-only", title: "TOC Only", depth: 2 },
+      { url: "#another", title: "Another", depth: 2 },
+    ])
+  })
+})

package/build/website/hooks/in-view.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+export function useInView() {
+  const [isVisible, setIsVisible] = useState(false)
+  const elementRef = useRef<Element | null>(null)
+
+  const ref = useCallback((node: Element | null) => {
+    elementRef.current = node
+  }, [])
+
+  useEffect(() => {
+    const node = elementRef.current
+    if (!node) return
+
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0]?.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.1 },
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [])
+
+  return { ref, isVisible }
+}

package/build/website/hooks/media.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/build/website/models/article.ts

@@ -0,0 +1,40 @@
+export interface ArticleNode {
+  pathname: string
+  title: string
+  icon: string
+  children: ArticleNode[]
+}
+
+/** Build a tree from a flat sorted list of articles based on pathname hierarchy */
+export function buildArticleTree(
+  articles: { pathname: string; title: string; icon: string }[],
+) {
+  const nodeMap = new Map<string, ArticleNode>()
+
+  for (const article of articles) {
+    nodeMap.set(article.pathname, {
+      pathname: article.pathname,
+      title: article.title,
+      icon: article.icon,
+      children: [],
+    })
+  }
+
+  const roots: ArticleNode[] = []
+
+  for (const article of articles) {
+    const node = nodeMap.get(article.pathname)!
+    const trimmed = article.pathname.replace(/\/$/, "")
+    const lastSlash = trimmed.lastIndexOf("/")
+    const parentPath = lastSlash > 0 ? `${trimmed.slice(0, lastSlash)}/` : ""
+    const parent = parentPath ? nodeMap.get(parentPath) : undefined
+
+    if (parent) {
+      parent.children.push(node)
+    } else {
+      roots.push(node)
+    }
+  }
+
+  return roots
+}

package/build/website/plugins/rehype-inline-code.ts

@@ -0,0 +1,107 @@
+import type { Plugin } from "unified"
+import { visit } from "unist-util-visit"
+import {
+  type BundledLanguage,
+  bundledLanguages,
+  getSingletonHighlighter,
+} from "shiki"
+
+interface HastText {
+  type: "text"
+  value: string
+}
+
+type PropertyValue =
+  | boolean
+  | number
+  | string
+  | null
+  | undefined
+  | Array<string | number>
+
+interface HastElement {
+  type: "element"
+  tagName: string
+  properties: Record<string, PropertyValue>
+  children: (HastElement | HastText)[]
+}
+
+interface HastRoot {
+  type: "root"
+  children: (HastElement | HastText)[]
+}
+
+type HastNode = HastRoot | HastElement | HastText
+
+const LANG_PREFIX = /^\{:(\w+)\}/
+
+function isBundledLanguage(lang: string): lang is BundledLanguage {
+  return lang in bundledLanguages
+}
+
+/** Rehype plugin that applies Shiki syntax highlighting to inline code spans with a `{:lang}` prefix. */
+export const rehypeInlineCode: Plugin<[], HastRoot> = () => {
+  return async (tree: HastRoot) => {
+    const highlighter = await getSingletonHighlighter({
+      themes: ["catppuccin-latte", "catppuccin-mocha"],
+      langs: [],
+    })
+
+    const nodes: {
+      node: HastElement
+      lang: BundledLanguage
+      code: string
+    }[] = []
+
+    visit(
+      tree,
+      "element",
+      (
+        node: HastNode,
+        _index: number | undefined,
+        parent: HastNode | undefined,
+      ) => {
+        if (node.type !== "element") return
+        if (node.tagName !== "code") return
+        if (parent && parent.type === "element" && parent.tagName === "pre")
+          return
+
+        const textChild = node.children[0]
+        if (!textChild || textChild.type !== "text") return
+
+        const match = LANG_PREFIX.exec(textChild.value)
+        if (!match) return
+
+        const lang = match[1]!
+        if (!isBundledLanguage(lang)) return
+
+        const code = textChild.value.slice(match[0].length)
+        nodes.push({ node, lang, code })
+      },
+    )
+
+    for (const { node, lang, code } of nodes) {
+      await highlighter.loadLanguage(lang)
+      const result = highlighter.codeToHast(code, {
+        themes: { light: "catppuccin-latte", dark: "catppuccin-mocha" },
+        lang,
+      })
+
+      const pre = result.children[0]
+      if (pre && pre.type === "element" && "children" in pre) {
+        const codeEl = pre.children[0]
+        if (codeEl && codeEl.type === "element" && "children" in codeEl) {
+          node.children = codeEl.children.filter(
+            (c): c is HastElement | HastText =>
+              c.type === "element" || c.type === "text",
+          )
+          node.properties = {
+            ...node.properties,
+            className: "shiki-inline",
+            style: codeEl.properties?.style,
+          }
+        }
+      }
+    }
+  }
+}

package/build/website/plugins/remark-abbr.ts

@@ -0,0 +1,46 @@
+import type { Root } from "mdast"
+import type { TextDirective } from "mdast-util-directive"
+import type { Plugin } from "unified"
+import { visit } from "unist-util-visit"
+
+/** Walk a mdast tree and convert :abbr text directives into Abbr JSX elements */
+export function transformAbbrDirectives(tree: Root) {
+  visit(tree, "textDirective", (node: TextDirective, index, parent) => {
+    if (node.name !== "abbr" || index === undefined || !parent) return
+
+    const text = node.children
+      .map(c => ("value" in c ? String(c.value) : ""))
+      .join("")
+
+    const title = node.attributes?.title ?? ""
+
+    const jsxNode = {
+      type: "mdxJsxTextElement" as const,
+      name: "Abbr",
+      attributes: [
+        {
+          type: "mdxJsxAttribute" as const,
+          name: "text",
+          value: text,
+        },
+        {
+          type: "mdxJsxAttribute" as const,
+          name: "title",
+          value: title,
+        },
+      ],
+      children: [],
+      data: { _mdxExplicitJsx: true },
+    }
+
+    // @ts-expect-error mdxJsxTextElement is not in mdast types
+    parent.children.splice(index, 1, jsxNode)
+  })
+}
+
+/** Remark plugin that converts :abbr text directives into Abbr JSX elements */
+export const remarkAbbr: Plugin<[], Root> = () => {
+  return tree => {
+    transformAbbrDirectives(tree)
+  }
+}