markdown works

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
         "@testing-library/user-event": "^13.5.0",
+        "markdown-to-jsx": "^7.1.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "5.0.0",
@@ -10844,6 +10845,17 @@
         "tmpl": "1.0.5"
       }
     },
+    "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/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -23832,6 +23844,12 @@
         "tmpl": "1.0.5"
       }
     },
+    "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": {}
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "markdown-to-jsx": "^7.1.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/commandline/CommandLineEntry.jsx

@@ -1,8 +1,43 @@
-function CommandLineEntry() {
-  const text = "This is just a test\n breakline\t tab"
+import Markdown from "markdown-to-jsx";
+import {useEffect, useState} from "react";
+
+import test from "./content/test.png";
+
+function CommandLineEntry(props) {
+  // set the path to the correct md file via props
+  const path = require(`./content/${ props.content }.md`);
+  const [text, updateText] = useState("");
+
+  // fetching the content of path
+  fetch(path).then(r => {
+    return r.text();
+  }).then(text =>  {
+      updateText(text);
+    })
+
+
+  const [displayIndex, setDisplayIndex] = useState(0);
+
+  var intervalId;
+  useEffect(() =>  {
+    intervalId = setInterval(() => {
+      if (displayIndex < text.length) {
+        setDisplayIndex(displayIndex + 1);
+      } else {
+        clearInterval(intervalId);
+      }
+    }, 1);
+    return function cleanup() {
+      clearInterval(intervalId);
+    }
+  });
+
+  const getTextToDisplay = () => {
+    return text.substring(0, displayIndex);
+  }
 
   return(
-    <p>This is a test<br/> breakline </p>
+    <Markdown>{getTextToDisplay()}</Markdown>
   );
 }
 

src/commandline/CommandLineManager.jsx

@@ -18,7 +18,7 @@ function CommandLineManager() {
 
   return(
     <div id="commandLineManager">
-      <CommandLineEntry/>
+      <CommandLineEntry content={"start"}/>
       <Prompt input={input} updateInput={updateInput} submitInput={submitInput}/>
     </div>
   );

src/commandline/content/start.md

@@ -0,0 +1,7 @@
+# Welcome
+This is an interactive website.
+
+You can watch content by typing or clicking on the options below.
+
+
+[about](/about), [projects](/projects), [home](/home)