From beb32a0b23aa3c456ecb118f0c7a8987c5d82ece Mon Sep 17 00:00:00 2001 From: MooKorea <69235304+MooKorea@users.noreply.github.com> Date: Thu, 26 Oct 2023 23:10:48 -0500 Subject: [PATCH] add content blocks --- public/images/NoteIcon.svg | 15 ++++++++++ public/images/SeeAlsoIcon.svg | 10 +++++++ public/images/WarningIcon.svg | 23 +++++++++++++++ src/assets/pages/documentation/Body.jsx | 36 +++++++++++++++++++---- src/assets/styles/documentation.scss | 38 +++++++++++++++++++++++++ 5 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 public/images/NoteIcon.svg create mode 100644 public/images/SeeAlsoIcon.svg create mode 100644 public/images/WarningIcon.svg diff --git a/public/images/NoteIcon.svg b/public/images/NoteIcon.svg new file mode 100644 index 0000000..b333028 --- /dev/null +++ b/public/images/NoteIcon.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/public/images/SeeAlsoIcon.svg b/public/images/SeeAlsoIcon.svg new file mode 100644 index 0000000..31fd169 --- /dev/null +++ b/public/images/SeeAlsoIcon.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/public/images/WarningIcon.svg b/public/images/WarningIcon.svg new file mode 100644 index 0000000..1875a84 --- /dev/null +++ b/public/images/WarningIcon.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + diff --git a/src/assets/pages/documentation/Body.jsx b/src/assets/pages/documentation/Body.jsx index 0b3f5a7..3bde130 100644 --- a/src/assets/pages/documentation/Body.jsx +++ b/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 ; @@ -40,7 +40,33 @@ export default function Body({ initialPage }) { ); } - } + + //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 ( +
+
+ + {type} +
+

{domToReact(children, options)}

+
+ ); + } + }, }; const handleLoader = () => { diff --git a/src/assets/styles/documentation.scss b/src/assets/styles/documentation.scss index 6534963..0c65e4e 100644 --- a/src/assets/styles/documentation.scss +++ b/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 {