feat: add ability to dynamically render markdown files in public dir

1 files changed, 46 insertions, 0 deletions

diff --git a/src/components/MarkdownRenderer.jsx b/src/components/MarkdownRenderer.jsx
new file mode 100644
index 0000000..ca1da75
--- /dev/null
+++ b/src/components/MarkdownRenderer.jsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import { marked } from "marked";
+
+const MarkdownRenderer = () => {
+    const [content, setContent] = useState("");
+    const [error, setError] = useState(null);
+    const [file, setFile] = useState(null);
+
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const fileParam = params.get("q");
+
+        if (!fileParam) {
+            setError("No file specified");
+            return;
+        }
+
+        setFile(fileParam);
+
+        const fetchMarkdown = async () => {
+            try {
+                const response = await fetch(`/md/${fileParam}.md`);
+                if (!response.ok) {
+                    throw new Error(`Could not fetch ${fileParam}.md`);
+                }
+                const text = await response.text();
+                setContent(marked(text));
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+
+        fetchMarkdown();
+    }, []);
+
+    if (error) {
+        return <div style={{ color: "red" }}>{error}</div>;
+    }
+
+    if (!file) {
+        return <div>Loading...</div>;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: content }} />;
+};
+
+export default MarkdownRenderer;