"use client";
import React, { createContext, useContext } from "react";
import ReactMarkdown from "react-markdown";
import type { Components } from "react-markdown";
import type { Element } from "hast";
// Lets the `code` renderer know it's inside a `pre` block vs. inline.
// React renders parent-to-child, so the Provider in `pre` is active
// when `code` renders inside it.
const InsidePreContext = createContext(false);
function GoldDot() {
return (
);
}
function BlueDot() {
return (
);
}
function KeyBadge({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// Extracts plain text from a HAST element's text children,
// stripping a trailing colon (e.g. "Backend:" → "Backend").
function extractHastText(node: Element): string {
return (node.children ?? [])
.filter((c): c is { type: "text"; value: string } => c.type === "text")
.map((c) => c.value)
.join("")
.replace(/:$/, "")
.trim();
}
function CodeRenderer({ children }: { children?: React.ReactNode }) {
const insidePre = useContext(InsidePreContext);
if (insidePre) {
return (
{children}
);
}
return (
{children}
);
}
const components: Components = {
h1: ({ children }) => (
{children}
),
h2: ({ children }) => (
{children}
),
h3: ({ children }) => (
{children}
),
p: ({ children }) => (
{children}
),
ul: ({ children }) => (
),
li: ({ node, children }) => {
// Inspect HAST to detect the `- **Key:** value` pattern.
// HAST tagName is always 'strong' regardless of custom component overrides.
const firstHast = node?.children?.[0];
const isKeyValue =
firstHast?.type === "element" &&
firstHast.tagName === "strong";
if (isKeyValue) {
const keyText = extractHastText(firstHast);
// Skip index 0 (the rendered element) — works because react-markdown
// emits strong as child[0] for tight lists with the `- **Key:** value` pattern.
// Tight lists only: loose lists wrap content in , changing the HAST structure.
const rest = React.Children.toArray(children).slice(1);
return (
{keyText}
{rest}
);
}
return (
{children}
);
},
a: ({ href, children }) => {
const isExternal = !!href && /^https?:\/\//.test(href);
return (
{children}
);
},
strong: ({ children }) => (
{children}
),
em: ({ children }) => (
{children}
),
// `pre` wraps `code` for fenced code blocks. The Provider lets the
// nested `code` renderer know it's in a block context (not inline).
pre: ({ children }) => (
{children}
),
code: CodeRenderer,
};
export default function MarkdownContent({ content }: { content: string }) {
return {content};
}