add content blocks

src/assets/pages/documentation/Body.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { PageChange } from ".";
 import { motion } from "framer-motion";
 import Image from "./Image";
-import parse from "html-react-parser";
+import parse, { domToReact } from "html-react-parser";
 
 export default function Body({ initialPage }) {
   const [page, setPage] = useContext(PageChange);
@@ -12,9 +12,9 @@ export default function Body({ initialPage }) {
     (async () => {
       setHTML(null);
       let p = page;
-      if (initialPage === undefined) return
+      if (initialPage === undefined) return;
       if (page === "home") {
-        p = initialPage.slice(0, -3)
+        p = initialPage.slice(0, -3);
       }
       const data = await fetch(`/docs/${p}.html`);
       if (data.status === 404) {
@@ -27,7 +27,7 @@ export default function Body({ initialPage }) {
   }, [page, initialPage]);
 
   const options = {
-    replace: ({ name, attribs, children }) => {
+    replace: ({ name, attribs, children, data }) => {
       //convert all images to clickable images
       if (name === "img") {
         return <Image attribs={attribs} />;
@@ -40,7 +40,33 @@ export default function Body({ initialPage }) {
           </a>
         );
       }
-    }
+
+      //content blocks
+      function handleContentBlock(data) {
+        const type = ["Note", "See Also", "Warning"];
+        for (let i = 0; i < type.length; i++) {
+          if (data?.slice(0, type[i].length + 1) === `${type[i].toUpperCase()}:`) {
+            return type[i];
+          }
+        }
+        return false;
+      }
+
+      if ((name === "p" || name === "li") && children[0].data !== undefined) {
+        const type = handleContentBlock(children[0].data);
+        if (!type) return;
+        const typeNoSpace = type.replace(" ", "");
+        return (
+          <div className="block">
+            <div className={`header ${typeNoSpace}Header`}>
+              <img src={`/images/${typeNoSpace}Icon.svg`} className="icon" />
+              {type}
+            </div>
+            <p>{domToReact(children, options)}</p>
+          </div>
+        );
+      }
+    },
   };
 
   const handleLoader = () => {

src/assets/styles/documentation.scss

@@ -79,6 +79,44 @@
       cursor: zoom-out;
     }
   }
+
+  .block {
+    background-color: #d9dde2;
+    border-radius: 0.4em;
+    overflow: hidden;
+    margin-block: 0.8em;
+    p {
+      margin-inline: 0.7em;
+    }
+
+    .header {
+      color: #ffffff;
+      font-weight: 700;
+      letter-spacing: 0.6px;
+      padding-left: 0.7em;
+      padding-block: 0.2em;
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+
+    .icon {
+      height: 20px;
+      filter: invert(1);
+    }
+
+    .NoteHeader {
+      background-color: $noteCol;
+    }
+    .SeeAlsoHeader {
+      background-color: $seeAlsoCol;
+    }
+    .WarningHeader {
+      background-color: $warningCol;
+    }
+  }
+
+
 }
 
 .documentation-container .sidebar {