diff --git a/package-lock.json b/package-lock.json index e1eb32d..e743694 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 445030f..0861f35 100644 --- a/package.json +++ b/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", diff --git a/src/commandline/CommandLineEntry.jsx b/src/commandline/CommandLineEntry.jsx index 7306560..66a9ec1 100644 --- a/src/commandline/CommandLineEntry.jsx +++ b/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( -

This is a test
breakline

+ {getTextToDisplay()} ); } diff --git a/src/commandline/CommandLineManager.jsx b/src/commandline/CommandLineManager.jsx index c825423..e6c7f45 100644 --- a/src/commandline/CommandLineManager.jsx +++ b/src/commandline/CommandLineManager.jsx @@ -18,7 +18,7 @@ function CommandLineManager() { return(
- +
); diff --git a/src/commandline/content/start.md b/src/commandline/content/start.md new file mode 100644 index 0000000..fff142b --- /dev/null +++ b/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) diff --git a/src/commandline/content/test.png b/src/commandline/content/test.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/src/commandline/content/test.png differ