added TopBar to MarkdownPage

ganymedelabs · Aug 13, 2024 · 88dc54b · 88dc54b
1 parent 657429a
commit 88dc54b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -83,18 +83,9 @@ export default function App() {
                 <Route path="/collab/:bibId" element={<Bibliography />} />
                 <Route path="/bib/:bibId/settings" element={<BibliographySettings />} />
                 <Route path="/collab/:bibId/settings" element={<BibliographySettings />} />
-                <Route
-                    path="/about"
-                    element={<MarkdownPage title="About CiteEase" filePath="/citeease/markdown/about.md" />}
-                />
-                <Route
-                    path="/terms"
-                    element={<MarkdownPage title="Terms of Use" filePath="/citeease/markdown/terms.md" />}
-                />
-                <Route
-                    path="/privacy"
-                    element={<MarkdownPage title="Privacy Policy" filePath="/citeease/markdown/privacy.md" />}
-                />
+                <Route path="/about" element={<MarkdownPage filePath="/citeease/markdown/about.md" />} />
+                <Route path="/terms" element={<MarkdownPage filePath="/citeease/markdown/terms.md" />} />
+                <Route path="/privacy" element={<MarkdownPage filePath="/citeease/markdown/privacy.md" />} />
                 <Route path="*" element={<NotFoundPage />} />
             </Routes>
         </main>

diff --git a/src/pages/MarkdownPage.jsx b/src/pages/MarkdownPage.jsx
@@ -1,23 +1,32 @@
 import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
+import { TopBar } from "../components/ui/MaterialComponents";
 
-export default function MarkdownPage(props) {
-    const { title, filePath } = props;
+export default function MarkdownPage({ title = undefined, filePath }) {
     const [content, setContent] = useState("");
+    const [firstHeading, setFirstHeading] = useState("");
 
     useEffect(() => {
         async function fetchContent() {
             const response = await fetch(filePath);
             const text = await response.text();
-            setContent(text);
+
+            const headings = text.split("\n").filter((line) => line.startsWith("#"));
+            const firstHeadingMatch = headings.find((heading) => heading.startsWith("# "));
+            if (firstHeadingMatch && !title) {
+                setContent(text.replace(firstHeadingMatch, ""));
+                setFirstHeading(firstHeadingMatch.trim().slice(2));
+            } else {
+                setContent(text);
+            }
         }
         fetchContent();
     }, [filePath]);
 
     return (
-        <div className="mx-auto max-w-[50rem] p-4">
-            <h1 className="hidden">{title}</h1> {/* For screen readers and tab title */}
-            <ReactMarkdown>{content}</ReactMarkdown>
+        <div className="mx-auto max-w-[50rem]">
+            <TopBar headline={title || firstHeading} />
+            <ReactMarkdown className="p-4">{content}</ReactMarkdown>
         </div>
     );
 }