diff options
| author | Pinapelz <yukais@pinapelz.com> | 2024-12-21 19:18:40 -0800 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2024-12-21 19:18:40 -0800 |
| commit | 8f9d96b60fe18e0b126022096505c1c693b51108 (patch) | |
| tree | 0fe14c9d0be93a780b5bc3da9b4ea60972fcab42 /src | |
| parent | e19f06c1caf2ba57bbed09a212bb49ba97a815dd (diff) | |
feat: add ability to dynamically render markdown files in public dir
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/MarkdownRenderer.jsx | 46 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 10 | ||||
| -rw-r--r-- | src/pages/md.astro | 8 |
3 files changed, 61 insertions, 3 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; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 8ebd2f2..343c12b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,9 +1,14 @@ --- interface Props { title: string; + textColor?: string; } -const { title } = Astro.props; +const { + title, + textColor = "var(--zinc-950)", + background = "#fff4e6", +} = Astro.props; --- <!doctype html> @@ -40,7 +45,7 @@ const { title } = Astro.props; <meta name="generator" content={Astro.generator} /> <title>{title}</title> </head> - <body> + <body style={`color: ${textColor}; background: ${background};`}> <slot /> </body> </html> @@ -70,7 +75,6 @@ const { title } = Astro.props; } body { - background: #fff4e6; padding: 20px; } diff --git a/src/pages/md.astro b/src/pages/md.astro new file mode 100644 index 0000000..3111817 --- /dev/null +++ b/src/pages/md.astro @@ -0,0 +1,8 @@ +--- +import MarkdownRenderer from "../components/MarkdownRenderer"; +import Layout from "../layouts/Layout.astro"; +--- + +<Layout title="Moekyun Web Services" textColor="#F48FB1" background="#232023"> + <MarkdownRenderer client:load /> +</Layout> |