218 lines
7.6 KiB
JavaScript
218 lines
7.6 KiB
JavaScript
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import rehypeHighlight from "rehype-highlight";
|
|
import rehypeSlug from "rehype-slug";
|
|
import { BookOpen, Rocket, Terminal, Monitor, FolderOpen, HelpCircle, MessageCircle, Mouse, Folder, Lock, Zap, Smartphone, Lightbulb, AlertTriangle, CheckCircle, ArrowRight, Layers, Plug, Cloud, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server, PartyPopper, Siren, Link2, Target, Heart, Check, Home, Package, Wrench, OctagonX, Search, Globe, Container } from "lucide-react";
|
|
|
|
const PAGE_ICONS = {
|
|
"Welcome to 9Router": BookOpen,
|
|
"Introduction": BookOpen,
|
|
"Getting Started": Rocket,
|
|
"Quick Start": Rocket,
|
|
"Installation": Terminal,
|
|
"Providers": Layers,
|
|
"Subscription (Maximize)": Sparkles,
|
|
"Cheap (Backup)": Wallet,
|
|
"Free (Fallback)": Gift,
|
|
"Features": Zap,
|
|
"Smart Routing": GitBranch,
|
|
"Combos & Fallback": Layers,
|
|
"Quota Tracking": BarChart3,
|
|
"Integration": Plug,
|
|
"Claude Code": Code2,
|
|
"OpenAI Codex": Code2,
|
|
"Cursor": Code2,
|
|
"Cline": Code2,
|
|
"Roo": Code2,
|
|
"Continue": Code2,
|
|
"Other Tools": Plug,
|
|
"Deployment": Cloud,
|
|
"Localhost": Monitor,
|
|
"Cloud (VPS/Docker)": Server,
|
|
"Troubleshooting": HelpCircle,
|
|
"FAQ": MessageCircle,
|
|
"Frequently Asked Questions": MessageCircle
|
|
};
|
|
|
|
const ICON_MAP = {
|
|
"terminal": Terminal,
|
|
"monitor": Monitor,
|
|
"mouse": Mouse,
|
|
"folder": Folder,
|
|
"lock": Lock,
|
|
"zap": Zap,
|
|
"smartphone": Smartphone,
|
|
"lightbulb": Lightbulb,
|
|
"alert-triangle": AlertTriangle,
|
|
"check-circle": CheckCircle,
|
|
"arrow-right": ArrowRight,
|
|
};
|
|
|
|
// Emoji to lucide icon mapping (auto-converted in markdown)
|
|
const EMOJI_ICON_MAP = {
|
|
"✅": { Icon: CheckCircle, color: "text-green-600" },
|
|
"✓": { Icon: Check, color: "text-green-600" },
|
|
"❌": { Icon: AlertTriangle, color: "text-red-500" },
|
|
"⚠️": { Icon: AlertTriangle, color: "text-yellow-600" },
|
|
"⚠": { Icon: AlertTriangle, color: "text-yellow-600" },
|
|
"🚨": { Icon: Siren, color: "text-red-500" },
|
|
"🛑": { Icon: OctagonX, color: "text-red-500" },
|
|
"💡": { Icon: Lightbulb, color: "text-yellow-500" },
|
|
"🔄": { Icon: GitBranch, color: "text-[#E68A6E]" },
|
|
"🚀": { Icon: Rocket, color: "text-[#E68A6E]" },
|
|
"⚡": { Icon: Zap, color: "text-yellow-500" },
|
|
"🔌": { Icon: Plug, color: "text-[#E68A6E]" },
|
|
"☁️": { Icon: Cloud, color: "text-blue-500" },
|
|
"☁": { Icon: Cloud, color: "text-blue-500" },
|
|
"📦": { Icon: Package, color: "text-[#E68A6E]" },
|
|
"💰": { Icon: Wallet, color: "text-green-600" },
|
|
"🎁": { Icon: Gift, color: "text-pink-500" },
|
|
"📊": { Icon: BarChart3, color: "text-[#E68A6E]" },
|
|
"💻": { Icon: Code2, color: "text-gray-700" },
|
|
"✨": { Icon: Sparkles, color: "text-[#E68A6E]" },
|
|
"🖥️": { Icon: Server, color: "text-gray-700" },
|
|
"🖥": { Icon: Server, color: "text-gray-700" },
|
|
"📖": { Icon: BookOpen, color: "text-[#E68A6E]" },
|
|
"🔒": { Icon: Lock, color: "text-gray-700" },
|
|
"➡️": { Icon: ArrowRight, color: "text-[#E68A6E]" },
|
|
"📱": { Icon: Smartphone, color: "text-[#E68A6E]" },
|
|
"📂": { Icon: Folder, color: "text-[#E68A6E]" },
|
|
"📁": { Icon: Folder, color: "text-[#E68A6E]" },
|
|
"🖱️": { Icon: Mouse, color: "text-[#E68A6E]" },
|
|
"🎉": { Icon: PartyPopper, color: "text-pink-500" },
|
|
"🔗": { Icon: Link2, color: "text-blue-500" },
|
|
"🎯": { Icon: Target, color: "text-red-500" },
|
|
"❤": { Icon: Heart, color: "text-red-500" },
|
|
"❤️": { Icon: Heart, color: "text-red-500" },
|
|
"🏠": { Icon: Home, color: "text-[#E68A6E]" },
|
|
"🔧": { Icon: Wrench, color: "text-gray-700" },
|
|
"🔍": { Icon: Search, color: "text-gray-700" },
|
|
"🌐": { Icon: Globe, color: "text-blue-500" },
|
|
"🐳": { Icon: Container, color: "text-blue-500" }
|
|
};
|
|
|
|
const EMOJI_REGEX = new RegExp(`^(${Object.keys(EMOJI_ICON_MAP).map(e => e.replace(/[.*+?^${}()|[\\]\\\\]/g, "\\\\$&")).join("|")})\\s*`);
|
|
|
|
export function parseMarkdown(content) {
|
|
return content;
|
|
}
|
|
|
|
// Unicode-aware slugify: keeps letters/numbers from any language (Vietnamese, Chinese, Japanese, etc.)
|
|
export function slugify(text) {
|
|
return text
|
|
.toLowerCase()
|
|
.normalize("NFC")
|
|
.replace(/[\s_]+/g, "-")
|
|
.replace(/[^\p{L}\p{N}-]+/gu, "")
|
|
.replace(/^-+|-+$/g, "");
|
|
}
|
|
|
|
// Extract leading emoji from heading children and replace with lucide icon
|
|
function renderHeadingWithEmoji(tag, children, props) {
|
|
const Tag = tag;
|
|
const text = (Array.isArray(children) ? children : [children])
|
|
.map(c => (typeof c === "string" ? c : ""))
|
|
.join("");
|
|
const emojiMatch = text.match(EMOJI_REGEX);
|
|
const textForId = emojiMatch ? text.slice(emojiMatch[0].length).trim() : text;
|
|
const id = slugify(textForId);
|
|
if (emojiMatch) {
|
|
const { Icon, color } = EMOJI_ICON_MAP[emojiMatch[1]];
|
|
const rest = text.slice(emojiMatch[0].length);
|
|
return (
|
|
<Tag id={id} {...props}>
|
|
<Icon className={`inline-block mr-2 align-[-0.15em] w-[1em] h-[1em] ${color}`} />
|
|
{rest}
|
|
</Tag>
|
|
);
|
|
}
|
|
return <Tag id={id} {...props}>{children}</Tag>;
|
|
}
|
|
|
|
export function MarkdownRenderer({ content }) {
|
|
return (
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeHighlight]}
|
|
className="markdown-content"
|
|
components={{
|
|
h1: ({ node, children, ...props }) => {
|
|
const text = children?.toString() || "";
|
|
const IconComponent = PAGE_ICONS[text];
|
|
const id = slugify(text);
|
|
|
|
return (
|
|
<h1 id={id} {...props}>
|
|
{IconComponent && <IconComponent className="inline-block mr-3" />}
|
|
{children}
|
|
</h1>
|
|
);
|
|
},
|
|
h2: ({ node, children, ...props }) => renderHeadingWithEmoji("h2", children, props),
|
|
h3: ({ node, children, ...props }) => renderHeadingWithEmoji("h3", children, props),
|
|
li: ({ node, children, ...props }) => {
|
|
// Extract text from children (handle React elements)
|
|
const extractText = (child) => {
|
|
if (typeof child === 'string') return child;
|
|
if (Array.isArray(child)) return child.map(extractText).join('');
|
|
if (child?.props?.children) return extractText(child.props.children);
|
|
return '';
|
|
};
|
|
|
|
const text = extractText(children);
|
|
const iconMatch = text.match(/^\[icon:([a-z-]+)\]\s*(.*)$/);
|
|
|
|
if (iconMatch) {
|
|
const iconName = iconMatch[1];
|
|
const restText = iconMatch[2];
|
|
const IconComponent = ICON_MAP[iconName];
|
|
|
|
return (
|
|
<li {...props}>
|
|
{IconComponent && <IconComponent className="inline-block mr-2 w-4 h-4 text-[#E68A6E]" />}
|
|
{restText}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
// Auto-convert leading emoji to lucide icon
|
|
const emojiMatch = text.match(EMOJI_REGEX);
|
|
if (emojiMatch) {
|
|
const { Icon, color } = EMOJI_ICON_MAP[emojiMatch[1]];
|
|
const restText = text.slice(emojiMatch[0].length);
|
|
return (
|
|
<li {...props}>
|
|
<Icon className={`inline-block mr-2 w-4 h-4 ${color}`} />
|
|
{restText}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return <li {...props}>{children}</li>;
|
|
},
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
);
|
|
}
|
|
|
|
export function extractHeadings(content) {
|
|
const headingRegex = /^(#{2,3})\s+(.+)$/gm;
|
|
const headings = [];
|
|
let match;
|
|
|
|
while ((match = headingRegex.exec(content)) !== null) {
|
|
const level = match[1].length;
|
|
const text = match[2].replace(EMOJI_REGEX, "").trim();
|
|
const id = slugify(text);
|
|
|
|
headings.push({
|
|
level,
|
|
text,
|
|
id
|
|
});
|
|
}
|
|
|
|
return headings;
|
|
}
|