Added support for markdown

package-lock.json

@@ -9,6 +9,7 @@
         "@fontsource/material-icons-rounded": "^4.5.0",
         "@fontsource/vollkorn": "^4.5.1",
         "@fontsource/zen-maru-gothic": "^4.5.3",
+        "markdown-to-jsx": "^7.1.6",
         "next": "^12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2"
@@ -2743,6 +2744,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/markdown-to-jsx": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
+      "integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6081,6 +6093,12 @@
         "yallist": "^4.0.0"
       }
     },
+    "markdown-to-jsx": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
+      "integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
+      "requires": {}
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "@fontsource/material-icons-rounded": "^4.5.0",
     "@fontsource/vollkorn": "^4.5.1",
     "@fontsource/zen-maru-gothic": "^4.5.3",
+    "markdown-to-jsx": "^7.1.6",
     "next": "^12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2"

src/pages/content/[slug]/index.tsx

@@ -7,6 +7,8 @@ import Image from "next/image";
 import { getAssetURL, prettySlug } from "queries/helpers";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
+import SubPanel from "components/Panels/SubPanel";
+import ReturnButton from "components/PanelComponents/ReturnButton";
 
 type Props = {
   content: GetContentQuery;
@@ -24,7 +26,7 @@ export default function Library(props: Props): JSX.Element {
     <>
       <ContentPanel>
         <div className="grid place-items-center">
-          <div className="grid place-items-center gap-12">
+          <div className="grid place-items-center gap-12  mb-12">
             <div>
               <Image
                 className="rounded-lg"

src/pages/content/[slug]/read.tsx

@@ -7,13 +7,16 @@ import Image from "next/image";
 import { getAssetURL, prettySlug } from "queries/helpers";
 import Button from "components/Button";
 import HorizontalLine from "components/HorizontalLine";
+import Markdown from "markdown-to-jsx";
+import SubPanel from "components/Panels/SubPanel";
+import ReturnButton from "components/PanelComponents/ReturnButton";
 
 type Props = {
   content: GetContentTextQuery;
 };
 
 applyCustomAppProps(Library, {
-  useSubPanel: false,
+  useSubPanel: true,
   useContentPanel: true,
 });
 
@@ -22,9 +25,12 @@ export default function Library(props: Props): JSX.Element {
 
   return (
     <>
+      <SubPanel>
+        <ReturnButton href={`/content/${content.slug}`} title="Content" />
+      </SubPanel>
       <ContentPanel>
         <div className="grid place-items-center">
-          <div className="grid place-items-center gap-12">
+          <div className="grid place-items-center gap-12 mb-12">
             <div>
               <Image
                 className="rounded-lg"
@@ -66,8 +72,8 @@ export default function Library(props: Props): JSX.Element {
           <HorizontalLine />
 
           {content.text_set.length > 0 ? (
-            <div className="prose">
+            <div className="prose prose-lg text-black">
-                {content.text_set[0].text}
+              <Markdown>{content.text_set[0].text}</Markdown>
             </div>
           ) : (
             ""