Statically compile markdown

.markedrc

@@ -0,0 +1,12 @@
+{
+  "marked": {
+    "breaks": true,
+    "pedantic": false,
+    "gfm": true,
+    "tables": true,
+    "sanitize": false,
+    "smartLists": true,
+    "smartypants": false,
+    "xhtml": false
+  }
+}

.parcelrc

@@ -1,4 +1,7 @@
 {
   "extends": "@parcel/config-default",
+  "transformers": {
+    "*.md": [ "parcel-transformer-markdown" ]
+  },
   "reporters":  ["...", "parcel-reporter-static-files-copy"]
 }

package.json

@@ -15,8 +15,6 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.1",
-        "react-markdown": "^8.0.7",
-        "remark-gfm": "^3.0.1",
         "use-http": "^1.0.28"
     },
     "scripts": {
@@ -60,6 +58,7 @@
         "lint-staged": ">=13",
         "parcel": "^2.9.3",
         "parcel-reporter-static-files-copy": "^1.5.2",
+        "parcel-transformer-markdown": "^3.0.1",
         "prettier": "^3.0.1",
         "process": "^0.11.10",
         "react-jsx": "^1.0.0",

src/App.tsx

@@ -5,7 +5,7 @@ import AppCommandBar from "./components/CommandBar";
 import SidePanel from "./components/SidePanel";
 import { useBoolean } from "@fluentui/react-hooks";
 import MoistureMarkers from "./components/MoistureMarkers";
-import Markdown from "./components/Markdown";
+import { Info, Imprint } from "./components/Markdown";
 
 function App() {
     const position: [number, number] = [52.01, 8.542732];
@@ -16,12 +16,8 @@ function App() {
 
     return (
         <div className="App">
-            <SidePanel isOpen={infoOpen} dismissPanel={() => dismissInfo()} children={<Markdown file={"info.md"} />} />
-            <SidePanel
-                isOpen={imprintOpen}
-                dismissPanel={() => dismissImprint()}
-                children={<Markdown file={"imprint.md"} />}
-            />
+            <SidePanel isOpen={infoOpen} dismissPanel={() => dismissInfo()} children={<Info />} />
+            <SidePanel isOpen={imprintOpen} dismissPanel={() => dismissImprint()} children={<Imprint />} />
             <MapContainer zoomControl={false} center={position} zoom={zoom} style={{ height: "100vh" }}>
                 <MoistureMarkers />
                 <TileLayer

src/components/Markdown/index.tsx

@@ -1,26 +1,10 @@
-import { useEffect, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import ImprintStr from "../../resources/markdown/imprint.md";
+import InfoStr from "../../resources/markdown/info.md";
 
-//import content from "../../resources/markdown/info.md";
-const Markdown = ({ file }: { file: string }) => {
-    const [content, setContent] = useState("");
-
-    useEffect(() => {
-        const fetchMarkdown = async () => {
-            try {
-                const response = await fetch(`markdown/${file}`);
-                const markdownContent = await response.text();
-                setContent(markdownContent);
-            } catch (error) {
-                console.error("Error fetching Markdown:", error);
-            }
-        };
-
-        fetchMarkdown();
-    }, [file]);
-
-    return <ReactMarkdown children={content} remarkPlugins={[remarkGfm]} />;
+export const Imprint = () => {
+    return <div dangerouslySetInnerHTML={{ __html: ImprintStr }} />;
 };
 
-export default Markdown;
+export const Info = () => {
+    return <div dangerouslySetInnerHTML={{ __html: InfoStr }} />;
+};

src/components/MoistureMarkers/index.tsx

@@ -56,10 +56,10 @@ const getImageForMeasurment = (record: SensorInfo) => {
     return record.soil_moisture < 10
         ? tree_dead
         : record.soil_moisture < 20
-        ? tree_brown
-        : record.soil_moisture < 25
-        ? tree_yellow
-        : tree_green;
+          ? tree_brown
+          : record.soil_moisture < 25
+            ? tree_yellow
+            : tree_green;
 };
 
 const MoistureMarkers: React.FC = () => {

types/markdown.d.ts

@@ -0,0 +1 @@
+declare module "*.md";