{title}

From 8f9d96b60fe18e0b126022096505c1c693b51108 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sat, 21 Dec 2024 19:18:40 -0800 Subject: feat: add ability to dynamically render markdown files in public dir --- src/components/MarkdownRenderer.jsx | 46 +++++++++++++++++++++++++++++++++++++ src/layouts/Layout.astro | 10 +++++--- src/pages/md.astro | 8 +++++++ 3 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 src/components/MarkdownRenderer.jsx create mode 100644 src/pages/md.astro (limited to 'src') 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

{error}

; + } + + if (!file) { + return

Loading...

; + } + return

; +}; + +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; --- @@ -40,7 +45,7 @@ const { title } = Astro.props; {title} - + @@ -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"; +--- + + + + -- cgit v1.2.3