(null);
+ const [progress, setProgress] = useState(0);
+
+ const progressWidth = useMemo(() => `${Math.min(100, Math.max(0, progress))}%`, [progress]);
+
+ const handleScroll = () => {
+ const el = scrollerRef.current;
+ if (!el) return;
+
+ const scrollable = el.scrollHeight - el.clientHeight;
+ if (scrollable <= 0) {
+ setProgress(100);
+ return;
+ }
+
+ setProgress((el.scrollTop / scrollable) * 100);
+ };
+
+ return (
+
+
+
+
+
+ ← Back to blog
+
+
+
+ {post.category}
+
+ {post.title}
+
+
+ {post.author} - {post.date} - {post.readTime}
+
+
+ {post.excerpt}
+
+
+
+
+
+
+
+
+ (
+
+ {children}
+
+ ),
+ h3: ({ children }) => (
+
+ {children}
+
+ ),
+ p: ({ children }) => (
+
+ {children}
+
+ ),
+ li: ({ children }) => (
+ {children}
+ ),
+ blockquote: ({ children }) => (
+
+ {children}
+
+ ),
+ table: ({ children }) => (
+
+ ),
+ thead: ({ children }) => {children},
+ tr: ({ children }) => {children}
,
+ th: ({ children }) => (
+ {children} |
+ ),
+ td: ({ children }) => (
+ {children} |
+ ),
+ code: ({ className, children }) => {
+ const match = /language-(\w+)/.exec(className ?? "");
+ const codeText = String(children).replace(/\n$/, "");
+ const language = match?.[1] ?? "";
+
+ if (!match) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (language === "mermaid") {
+ return ;
+ }
+
+ return (
+
+ {codeText}
+
+ );
+ },
+ }}
+ >
+ {post.markdown}
+
+
+
+