Custom Markdown Parser

Co-authored-by: Copilot <copilot@github.com>

Author: dwijbavisi

site/modules/md/components/BlockNodes.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type {
+    BlockNode,
+    HeadingNode,
+    ParagraphNode,
+    BlockquoteNode,
+    ListNode,
+    MathBlockNode,
+    CodeBlockNode,
+} from "../types";
+import { RenderInline } from "./InlineNodes";
+
+export function renderBlockNode(node: BlockNode, key: string | number): React.ReactNode {
+    switch (node.type) {
+        case "heading": {
+            const n = node as HeadingNode;
+            const inner = <RenderInline nodes={n.children} />;
+            switch (n.level) {
+                case 1: return <h1 key={key}>{inner}</h1>;
+                case 2: return <h2 key={key}>{inner}</h2>;
+                case 3: return <h3 key={key}>{inner}</h3>;
+                case 4: return <h4 key={key}>{inner}</h4>;
+                case 5: return <h5 key={key}>{inner}</h5>;
+                case 6: return <h6 key={key}>{inner}</h6>;
+            }
+            break;
+        }
+
+        case "paragraph":
+            return (
+                <p key={key}>
+                    <RenderInline nodes={(node as ParagraphNode).children} />
+                </p>
+            );
+
+        case "blockquote":
+            return (
+                <blockquote key={key}>
+                    {(node as BlockquoteNode).children.map((c, i) => renderBlockNode(c, i))}
+                </blockquote>
+            );
+
+        case "list": {
+            const n = node as ListNode;
+            const items = n.items.map((item, i) => (
+                <li key={i}>
+                    <RenderInline nodes={item.children} />
+                </li>
+            ));
+            return n.ordered
+                ? <ol key={key}>{items}</ol>
+                : <ul key={key}>{items}</ul>;
+        }
+
+        case "hr":
+            return <hr key={key} />;
+
+        case "math-block":
+            return (
+                <div key={key} className="math-block">
+                    {(node as MathBlockNode).source}
+                </div>
+            );
+
+        case "code-block": {
+            const n = node as CodeBlockNode;
+            return (
+                <pre key={key}>
+                    <code className={n.lang ? `language-${n.lang}` : undefined}>{n.code}</code>
+                </pre>
+            );
+        }
+
+        default: {
+            const _: never = node;
+            return null;
+        }
+    }
+}

site/modules/md/components/InlineNodes.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type {
+    TextNode,
+    BoldNode,
+    ItalicNode,
+    LinkNode,
+    InlineCodeNode,
+    MathInlineNode,
+    SupNode,
+    SubNode,
+    BrNode,
+    InlineNode,
+} from "../types";
+
+export function renderInlineNode(node: InlineNode, key: string | number): React.ReactNode {
+    switch (node.type) {
+        case "text":
+            return (node as TextNode).value;
+
+        case "bold":
+            return (
+                <strong key={key}>
+                    {(node as BoldNode).children.map((c, i) => renderInlineNode(c, i))}
+                </strong>
+            );
+
+        case "italic":
+            return (
+                <em key={key}>
+                    {(node as ItalicNode).children.map((c, i) => renderInlineNode(c, i))}
+                </em>
+            );
+
+        case "link": {
+            const n = node as LinkNode;
+            return (
+                <a key={key} href={n.href}>
+                    {n.children.map((c, i) => renderInlineNode(c, i))}
+                </a>
+            );
+        }
+
+        case "inline-code":
+            return <code key={key}>{(node as InlineCodeNode).value}</code>;
+
+        case "math-inline":
+            return (
+                <span key={key} className="math-inline">
+                    {(node as MathInlineNode).source}
+                </span>
+            );
+
+        case "sup":
+            return (
+                <sup key={key}>
+                    {(node as SupNode).children.map((c, i) => renderInlineNode(c, i))}
+                </sup>
+            );
+
+        case "sub":
+            return (
+                <sub key={key}>
+                    {(node as SubNode).children.map((c, i) => renderInlineNode(c, i))}
+                </sub>
+            );
+
+        case "br":
+            return <br key={key} />;
+
+        default: {
+            const _: never = node;
+            return null;
+        }
+    }
+}
+
+export function RenderInline({ nodes }: { nodes: InlineNode[] }): JSX.Element {
+    return <>{nodes.map((n, i) => renderInlineNode(n, i))}</>;
+}

site/modules/md/components/Renderer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import type { BlockNode } from "../types";
+import { renderBlockNode } from "./BlockNodes";
+
+interface MarkdownRendererProps {
+    nodes: BlockNode[];
+}
+
+export function MarkdownRenderer({ nodes }: MarkdownRendererProps): JSX.Element {
+    return <>{nodes.map((node, i) => renderBlockNode(node, i))}</>;
+}

site/modules/md/index.ts

@@ -0,0 +1,25 @@
+export type {
+    BlockNode,
+    InlineNode,
+    HeadingNode,
+    ParagraphNode,
+    BlockquoteNode,
+    ListNode,
+    ListItem,
+    HrNode,
+    MathBlockNode,
+    CodeBlockNode,
+    TextNode,
+    BoldNode,
+    ItalicNode,
+    LinkNode,
+    InlineCodeNode,
+    MathInlineNode,
+    SupNode,
+    SubNode,
+    BrNode,
+    ParsedMetadata,
+    ParseResult,
+} from "./types";
+
+export { parse, parseInline } from "./parser";