livemark 0.0.0-dev

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

@@ -0,0 +1,99 @@
+import type { Root } from "mdast"
+import type { TextDirective } from "mdast-util-directive"
+import { describe, expect, it } from "vite-plus/test"
+import { transformAbbrDirectives } from "./remark-abbr.ts"
+
+function makeTextDirective(
+  name: string,
+  text: string,
+  attributes?: Record<string, string>,
+): TextDirective {
+  return {
+    type: "textDirective",
+    name,
+    attributes: attributes ?? {},
+    children: [{ type: "text", value: text }],
+  }
+}
+
+function makeTree(...children: Root["children"]): Root {
+  return { type: "root", children }
+}
+
+describe("transformAbbrDirectives", () => {
+  function process(tree: Root) {
+    transformAbbrDirectives(tree)
+    return tree
+  }
+
+  it("should convert :abbr directive to Abbr JSX element", () => {
+    const directive = makeTextDirective("abbr", "HTML", {
+      title: "HyperText Markup Language",
+    })
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    const node = paragraph.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxTextElement",
+      name: "Abbr",
+      attributes: [
+        { type: "mdxJsxAttribute", name: "text", value: "HTML" },
+        {
+          type: "mdxJsxAttribute",
+          name: "title",
+          value: "HyperText Markup Language",
+        },
+      ],
+      children: [],
+    })
+  })
+
+  it("should use empty string when title is not provided", () => {
+    const directive = makeTextDirective("abbr", "CSS")
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    const node = paragraph.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxTextElement",
+      name: "Abbr",
+      attributes: [
+        { type: "mdxJsxAttribute", name: "text", value: "CSS" },
+        { type: "mdxJsxAttribute", name: "title", value: "" },
+      ],
+    })
+  })
+
+  it("should ignore non-abbr text directives", () => {
+    const directive = makeTextDirective("other", "Text")
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    expect(paragraph.children[0]).toMatchObject({
+      type: "textDirective",
+      name: "other",
+    })
+  })
+})

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

@@ -0,0 +1,247 @@
+import type { Root } from "mdast"
+import type { Plugin } from "unified"
+
+interface AnsiState {
+  bold: boolean
+  dim: boolean
+  italic: boolean
+  underline: boolean
+  strikethrough: boolean
+  fg: string | undefined
+  bg: string | undefined
+}
+
+const STANDARD_COLORS: ReadonlyArray<string> = [
+  "#4f5b66", // 0 black
+  "#bf616a", // 1 red
+  "#a3be8c", // 2 green
+  "#ebcb8b", // 3 yellow
+  "#8fa1b3", // 4 blue
+  "#b48ead", // 5 magenta
+  "#96b5b4", // 6 cyan
+  "#c0c5ce", // 7 white
+]
+
+const BRIGHT_COLORS: ReadonlyArray<string> = [
+  "#65737e", // 8 bright black
+  "#bf616a", // 9 bright red
+  "#a3be8c", // 10 bright green
+  "#ebcb8b", // 11 bright yellow
+  "#8fa1b3", // 12 bright blue
+  "#b48ead", // 13 bright magenta
+  "#96b5b4", // 14 bright cyan
+  "#eff1f5", // 15 bright white
+]
+
+function color256(n: number): string | undefined {
+  if (n < 8) return STANDARD_COLORS[n]
+  if (n < 16) return BRIGHT_COLORS[n - 8]
+  if (n < 232) {
+    const idx = n - 16
+    const r = Math.floor(idx / 36)
+    const g = Math.floor((idx % 36) / 6)
+    const b = idx % 6
+    const toHex = (v: number) =>
+      (v === 0 ? 0 : 55 + v * 40).toString(16).padStart(2, "0")
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  }
+  if (n < 256) {
+    const v = (8 + (n - 232) * 10).toString(16).padStart(2, "0")
+    return `#${v}${v}${v}`
+  }
+  return undefined
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+function buildStyle(state: AnsiState): string {
+  const parts: string[] = []
+  if (state.fg) parts.push(`color:${state.fg}`)
+  if (state.bg) parts.push(`background-color:${state.bg}`)
+  if (state.bold) parts.push("font-weight:bold")
+  if (state.dim) parts.push("opacity:0.7")
+  if (state.italic) parts.push("font-style:italic")
+  if (state.underline) parts.push("text-decoration:underline")
+  if (state.strikethrough) parts.push("text-decoration:line-through")
+  return parts.join(";")
+}
+
+function makeDefaultState(): AnsiState {
+  return {
+    bold: false,
+    dim: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    fg: undefined,
+    bg: undefined,
+  }
+}
+
+function applyParams(state: AnsiState, params: ReadonlyArray<number>) {
+  let i = 0
+  while (i < params.length) {
+    const code = params[i]!
+    switch (code) {
+      case 0: {
+        const reset = makeDefaultState()
+        state.bold = reset.bold
+        state.dim = reset.dim
+        state.italic = reset.italic
+        state.underline = reset.underline
+        state.strikethrough = reset.strikethrough
+        state.fg = reset.fg
+        state.bg = reset.bg
+        break
+      }
+      case 1:
+        state.bold = true
+        break
+      case 2:
+        state.dim = true
+        break
+      case 3:
+        state.italic = true
+        break
+      case 4:
+        state.underline = true
+        break
+      case 9:
+        state.strikethrough = true
+        break
+      case 22:
+        state.bold = false
+        state.dim = false
+        break
+      case 23:
+        state.italic = false
+        break
+      case 24:
+        state.underline = false
+        break
+      case 29:
+        state.strikethrough = false
+        break
+      case 39:
+        state.fg = undefined
+        break
+      case 49:
+        state.bg = undefined
+        break
+      default:
+        if (code >= 30 && code <= 37) {
+          state.fg = STANDARD_COLORS[code - 30]
+        } else if (code >= 40 && code <= 47) {
+          state.bg = STANDARD_COLORS[code - 40]
+        } else if (code >= 90 && code <= 97) {
+          state.fg = BRIGHT_COLORS[code - 90]
+        } else if (code >= 100 && code <= 107) {
+          state.bg = BRIGHT_COLORS[code - 100]
+        } else if (code === 38 || code === 48) {
+          const kind = params[i + 1]
+          if (kind === 5) {
+            const colorIdx = params[i + 2]
+            if (colorIdx !== undefined) {
+              const c = color256(colorIdx)
+              if (code === 38) state.fg = c
+              else state.bg = c
+            }
+            i += 2
+          } else if (kind === 2) {
+            const r = params[i + 2] ?? 0
+            const g = params[i + 3] ?? 0
+            const b = params[i + 4] ?? 0
+            const toHex = (v: number) => v.toString(16).padStart(2, "0")
+            const c = `#${toHex(r)}${toHex(g)}${toHex(b)}`
+            if (code === 38) state.fg = c
+            else state.bg = c
+            i += 4
+          }
+        }
+        break
+    }
+    i++
+  }
+}
+
+/** Convert a string containing ANSI escape sequences into HTML with inline styles */
+export function ansiToHtml(input: string): string {
+  const sgr = /\u001b\[([0-9;]*)m/g
+  const state = makeDefaultState()
+  const parts: string[] = []
+  let lastIndex = 0
+
+  let match = sgr.exec(input)
+  while (match !== null) {
+    const textBefore = input.slice(lastIndex, match.index)
+    if (textBefore) {
+      const style = buildStyle(state)
+      if (style) {
+        parts.push(`<span style="${style}">${escapeHtml(textBefore)}</span>`)
+      } else {
+        parts.push(escapeHtml(textBefore))
+      }
+    }
+
+    const rawParams = match[1]!
+    const params =
+      rawParams === ""
+        ? [0]
+        : rawParams.split(";").map(s => Number.parseInt(s, 10))
+    applyParams(state, params)
+    lastIndex = match.index + match[0].length
+    match = sgr.exec(input)
+  }
+
+  const trailing = input.slice(lastIndex)
+  if (trailing) {
+    const style = buildStyle(state)
+    if (style) {
+      parts.push(`<span style="${style}">${escapeHtml(trailing)}</span>`)
+    } else {
+      parts.push(escapeHtml(trailing))
+    }
+  }
+
+  return parts.join("")
+}
+
+/** Walk a mdast tree and convert ansi code blocks into AnsiCode JSX elements */
+export function transformAnsiCodeBlocks(tree: Root) {
+  const children = tree.children
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i]
+    if (node?.type !== "code" || node.lang !== "ansi") continue
+
+    const html = ansiToHtml(node.value)
+
+    const jsxNode = {
+      type: "mdxJsxFlowElement" as const,
+      name: "AnsiCode",
+      attributes: [
+        {
+          type: "mdxJsxAttribute" as const,
+          name: "html",
+          value: html,
+        },
+      ],
+      children: [],
+    }
+
+    // @ts-expect-error mdxJsxFlowElement is not in mdast types
+    children[i] = jsxNode
+  }
+}
+
+/** Remark plugin that converts ansi code blocks into colored HTML output */
+export const remarkAnsi: Plugin<[], Root> = () => {
+  return tree => {
+    transformAnsiCodeBlocks(tree)
+  }
+}

package/build/website/plugins/remark-ansi.unit.ts

@@ -0,0 +1,197 @@
+import type { Root } from "mdast"
+import { describe, expect, it } from "vite-plus/test"
+import { ansiToHtml, transformAnsiCodeBlocks } from "./remark-ansi.ts"
+
+function makeTree(...children: Root["children"]): Root {
+  return { type: "root", children }
+}
+
+describe("ansiToHtml", () => {
+  it("should return plain text unchanged", () => {
+    expect(ansiToHtml("hello world")).toBe("hello world")
+  })
+
+  it("should escape HTML characters", () => {
+    expect(ansiToHtml("<div>&</div>")).toBe("&lt;div&gt;&amp;&lt;/div&gt;")
+  })
+
+  it("should render standard foreground colors", () => {
+    const input = "\x1b[31mred text\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="color:#bf616a">red text</span>',
+    )
+  })
+
+  it("should render bold text", () => {
+    const input = "\x1b[1mbold\x1b[0m"
+    expect(ansiToHtml(input)).toBe('<span style="font-weight:bold">bold</span>')
+  })
+
+  it("should render italic text", () => {
+    const input = "\x1b[3mitalic\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="font-style:italic">italic</span>',
+    )
+  })
+
+  it("should render underline text", () => {
+    const input = "\x1b[4munderline\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="text-decoration:underline">underline</span>',
+    )
+  })
+
+  it("should render dim text", () => {
+    const input = "\x1b[2mdim\x1b[0m"
+    expect(ansiToHtml(input)).toBe('<span style="opacity:0.7">dim</span>')
+  })
+
+  it("should render strikethrough text", () => {
+    const input = "\x1b[9mstruck\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="text-decoration:line-through">struck</span>',
+    )
+  })
+
+  it("should render background colors", () => {
+    const input = "\x1b[42mgreen bg\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="background-color:#a3be8c">green bg</span>',
+    )
+  })
+
+  it("should combine foreground and background", () => {
+    const input = "\x1b[31;42mred on green\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="color:#bf616a;background-color:#a3be8c">red on green</span>',
+    )
+  })
+
+  it("should handle bright foreground colors", () => {
+    const input = "\x1b[91mbright red\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="color:#bf616a">bright red</span>',
+    )
+  })
+
+  it("should handle bright background colors", () => {
+    const input = "\x1b[102mbright green bg\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="background-color:#a3be8c">bright green bg</span>',
+    )
+  })
+
+  it("should handle 256-color foreground", () => {
+    const input = "\x1b[38;5;196mcolor\x1b[0m"
+    expect(ansiToHtml(input)).toBe('<span style="color:#ff0000">color</span>')
+  })
+
+  it("should handle 256-color background", () => {
+    const input = "\x1b[48;5;21mbg\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="background-color:#0000ff">bg</span>',
+    )
+  })
+
+  it("should handle 24-bit RGB foreground", () => {
+    const input = "\x1b[38;2;255;128;0mrgb\x1b[0m"
+    expect(ansiToHtml(input)).toBe('<span style="color:#ff8000">rgb</span>')
+  })
+
+  it("should handle 24-bit RGB background", () => {
+    const input = "\x1b[48;2;0;128;255mbg\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="background-color:#0080ff">bg</span>',
+    )
+  })
+
+  it("should handle reset via empty escape", () => {
+    const input = "\x1b[31mred\x1b[mnormal"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="color:#bf616a">red</span>normal',
+    )
+  })
+
+  it("should handle multiple segments", () => {
+    const input = "start \x1b[32mgreen\x1b[0m middle \x1b[34mblue\x1b[0m end"
+    expect(ansiToHtml(input)).toBe(
+      'start <span style="color:#a3be8c">green</span> middle <span style="color:#8fa1b3">blue</span> end',
+    )
+  })
+
+  it("should handle combined bold and color", () => {
+    const input = "\x1b[1;33mbold yellow\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="color:#ebcb8b;font-weight:bold">bold yellow</span>',
+    )
+  })
+
+  it("should handle 256-color grayscale", () => {
+    const input = "\x1b[38;5;232mblack\x1b[0m"
+    expect(ansiToHtml(input)).toBe('<span style="color:#080808">black</span>')
+  })
+
+  it("should reset individual attributes", () => {
+    const input = "\x1b[1;3mbold italic\x1b[23mnot italic\x1b[0m"
+    expect(ansiToHtml(input)).toBe(
+      '<span style="font-weight:bold;font-style:italic">bold italic</span><span style="font-weight:bold">not italic</span>',
+    )
+  })
+})
+
+describe("transformAnsiCodeBlocks", () => {
+  function process(tree: Root) {
+    transformAnsiCodeBlocks(tree)
+    return tree
+  }
+
+  it("should convert ansi code block to AnsiCode JSX element", () => {
+    const tree = process(
+      makeTree({ type: "code", lang: "ansi", value: "\x1b[31mhello\x1b[0m" }),
+    )
+
+    const node = tree.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxFlowElement",
+      name: "AnsiCode",
+      attributes: [
+        {
+          type: "mdxJsxAttribute",
+          name: "html",
+          value: '<span style="color:#bf616a">hello</span>',
+        },
+      ],
+    })
+  })
+
+  it("should ignore non-ansi code blocks", () => {
+    const tree = process(
+      makeTree({ type: "code", lang: "javascript", value: "const x = 1" }),
+    )
+
+    const node = tree.children[0]
+    expect(node).toMatchObject({
+      type: "code",
+      lang: "javascript",
+    })
+  })
+
+  it("should handle plain text in ansi code block", () => {
+    const tree = process(
+      makeTree({ type: "code", lang: "ansi", value: "no escapes here" }),
+    )
+
+    const node = tree.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxFlowElement",
+      name: "AnsiCode",
+      attributes: [
+        {
+          type: "mdxJsxAttribute",
+          name: "html",
+          value: "no escapes here",
+        },
+      ],
+    })
+  })
+})

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

@@ -0,0 +1,50 @@
+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 :badge text directives into InlineBadge JSX elements */
+export function transformBadgeDirectives(tree: Root) {
+  visit(tree, "textDirective", (node: TextDirective, index, parent) => {
+    if (node.name !== "badge" || index === undefined || !parent) return
+
+    const label = node.children
+      .map(c => ("value" in c ? String(c.value) : ""))
+      .join("")
+
+    const variant = node.attributes?.variant
+
+    const jsxNode = {
+      type: "mdxJsxTextElement" as const,
+      name: "InlineBadge",
+      attributes: [
+        {
+          type: "mdxJsxAttribute" as const,
+          name: "label",
+          value: label,
+        },
+        ...(variant
+          ? [
+              {
+                type: "mdxJsxAttribute" as const,
+                name: "variant",
+                value: variant,
+              },
+            ]
+          : []),
+      ],
+      children: [],
+      data: { _mdxExplicitJsx: true },
+    }
+
+    // @ts-expect-error mdxJsxTextElement is not in mdast types
+    parent.children.splice(index, 1, jsxNode)
+  })
+}
+
+/** Remark plugin that converts :badge text directives into InlineBadge JSX elements */
+export const remarkBadge: Plugin<[], Root> = () => {
+  return tree => {
+    transformBadgeDirectives(tree)
+  }
+}

package/build/website/plugins/remark-badge.unit.ts

@@ -0,0 +1,96 @@
+import type { Root } from "mdast"
+import type { TextDirective } from "mdast-util-directive"
+import { describe, expect, it } from "vite-plus/test"
+import { transformBadgeDirectives } from "./remark-badge.ts"
+
+function makeTextDirective(
+  name: string,
+  text: string,
+  attributes?: Record<string, string>,
+): TextDirective {
+  return {
+    type: "textDirective",
+    name,
+    attributes: attributes ?? {},
+    children: [{ type: "text", value: text }],
+  }
+}
+
+function makeTree(...children: Root["children"]): Root {
+  return { type: "root", children }
+}
+
+describe("transformBadgeDirectives", () => {
+  function process(tree: Root) {
+    transformBadgeDirectives(tree)
+    return tree
+  }
+
+  it("should convert :badge directive to InlineBadge JSX element", () => {
+    const directive = makeTextDirective("badge", "Beta")
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    const node = paragraph.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxTextElement",
+      name: "InlineBadge",
+      attributes: [{ type: "mdxJsxAttribute", name: "label", value: "Beta" }],
+      children: [],
+    })
+  })
+
+  it("should pass variant attribute when provided", () => {
+    const directive = makeTextDirective("badge", "Deprecated", {
+      variant: "destructive",
+    })
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    const node = paragraph.children[0]
+    expect(node).toMatchObject({
+      type: "mdxJsxTextElement",
+      name: "InlineBadge",
+      attributes: [
+        { type: "mdxJsxAttribute", name: "label", value: "Deprecated" },
+        {
+          type: "mdxJsxAttribute",
+          name: "variant",
+          value: "destructive",
+        },
+      ],
+    })
+  })
+
+  it("should ignore non-badge text directives", () => {
+    const directive = makeTextDirective("other", "Text")
+    const tree = process(
+      makeTree({
+        type: "paragraph",
+        children: [directive],
+      }),
+    )
+
+    const paragraph = tree.children[0]
+    if (!paragraph || paragraph.type !== "paragraph")
+      throw new Error("Expected paragraph")
+    expect(paragraph.children[0]).toMatchObject({
+      type: "textDirective",
+      name: "other",
+    })
+  })
+})