Add Modal

2022-01-14 14:27:19 +01:00
parent ee8e4b9fb9
commit a2f035ce1a
13 changed files with 592 additions and 101 deletions
--- a/components/ProjectModal.tsx
+++ b/components/ProjectModal.tsx
@@ -0,0 +1,63 @@
+import type { NextPage } from "next";
+import { useEffect, useRef, useState } from "react";
+import asciidoctor from "asciidoctor";
+import styles from "../styles/ProjectModal.module.css";
+
+interface ModalInput {
+    project: string;
+    visible: boolean;
+    setVisible: CallableFunction;
+}
+
+const ad = asciidoctor();
+
+const ProjectModal: NextPage<ModalInput> = ({ project, visible, setVisible }) => {
+    const projectEmpty = "<div>Kein Projekt ausgewählt.</div>";
+    const [projectData, setProjectData] = useState<string>(projectEmpty);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const projectNotFoundHtml = `<div class="${"error"}">Sorry! There is no data for this project. Please check back later to see if that changed!</div>`;
+    const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error happend when the project data was fetched!</div>`;
+
+    useEffect(() => {
+        if (project && project !== "") {
+            // TODO
+            // set Spinner
+            fetch(`/api/get_project?projectName=${project}`).then((res) => {
+                if (res.status === 404) setProjectData(projectNotFoundHtml);
+                if (res.status !== 200) setProjectData(projectServerErrorHtml);
+                res.text().then(data => {
+                    try {
+                        setProjectData(ad.convert(data).toString());
+                    } catch {
+                        setProjectData(projectServerErrorHtml);
+                    }
+                });
+            });
+        } else if (project === "") setProjectData(projectEmpty)
+    }, [project])
+
+    useEffect(() => {
+        if (projectData && containerRef.current && projectData !== "") {
+            containerRef.current.innerHTML = projectData;
+        }
+
+    }, [projectData, visible])
+
+    const onEscClose = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setVisible(false);
+        }
+    }
+    
+    if (!visible) return <></>
+
+    return <div className={styles.modal} onKeyDown={onEscClose}>
+        <div ref={containerRef} className={styles.modalContainer}>
+        </div>
+    </div>
+}
+
+
+export default ProjectModal;
--- a/components/REPL/REPLInput.tsx
+++ b/components/REPL/REPLInput.tsx
@@ -1,19 +1,24 @@
 import type { NextPage } from "next";
 import React, { MutableRefObject } from "react";
-import { commandCompletion, executeCommand } from "../../lib/commands";
+import { CommandInterface } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";

 interface REPLInputParams {
    historyCallback: CallableFunction;
    historyClear: CallableFunction;
    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    modalManipulation: {
+        setModalVisible: CallableFunction;
+        setModalProject: CallableFunction;
+    }
 }

-const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
+const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef, modalManipulation}) => {
    const typed = React.createRef<HTMLSpanElement>();
    const completion = React.createRef<HTMLSpanElement>();
    const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
    const [justTabbed, setJustTabbed] = React.useState<number>(0);
+    const cmdIf = new CommandInterface(modalManipulation);

    const clearInput = (inputRef: HTMLInputElement) => {
        inputRef.value = "";
@@ -37,7 +42,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
        } else {
            input.maxLength = 20;
            // Get completion hint
-            const suggest = commandCompletion(currentInput);
+            const suggest = CommandInterface.commandCompletion(currentInput);
            setCurrentCmd(suggest);
            if (suggest.length === 0) suggest.push("");
            if (typed.current) typed.current.innerHTML = currentInput;
@@ -64,7 +69,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
                historyClear();
                return false;
            }
-            const result = executeCommand(command);
+            const result = cmdIf.executeCommand(command);
            clearInput(input);
            historyCallback(result);
            return false;
@@ -72,7 +77,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in

        if (e.key === "d" && e.ctrlKey) {
            e.preventDefault();
-            const result = executeCommand("exit");
+            const result = cmdIf.executeCommand("exit");
            clearInput(input);
            historyCallback(result);
            return false;
--- a/components/REPL/index.tsx
+++ b/components/REPL/index.tsx
@@ -4,7 +4,15 @@ import REPLHistory from "./REPLHistory";
 import styles from "../../styles/REPL/REPLComplete.module.css";
 import type { NextPage } from "next";

-const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> = ({ inputRef }) => {
+interface IREPLProps {
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    modalManipulation: {
+        setModalVisible: CallableFunction;
+        setModalProject: CallableFunction;
+    }
+}
+
+const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
    const [history, manipulateHistory] = useState<string[]>([]);
    const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
    const onClearHistory = () => manipulateHistory([]);
@@ -15,7 +23,7 @@ const REPL: NextPage<{inputRef: MutableRefObject<HTMLInputElement|undefined>}> =

    return (<div className={styles.container}>
        <REPLHistory history={history} inputRef={inputRef} />
-        <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
+        <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
        <div style={{flexGrow: 2}} onClick={focusInput}></div>
    </div>);
 };
--- a/lib/commands/definitions.ts
+++ b/lib/commands/definitions.ts
@@ -145,7 +145,7 @@ const project: Command = {
        list: {short: "l", long: "list", desc: "Show list of projects."}
    },
    subcommands: {name: {name: "name", desc: "Name of the project."}},
-    execute: (flags, args) => {
+    execute: (flags, args, _raw, cmdIf) => {
        if (project.flags && checkFlagInclude(flags, project.flags.list)) {
            const result = ["Found the following projects:"];
            projectList.forEach(project => result.push(`\t${project.name}\t${project.short}`));
@@ -172,8 +172,8 @@ const project: Command = {
        }
        if (project.flags && checkFlagInclude(flags, project.flags.minimal)) return pjt.desc;

-        // TODO
-        // Open project page here.
+        cmdIf.callbacks.setModalProject(args[0]);
+        cmdIf.callbacks.setModalVisible(true);
        return [];
    }
 };
--- a/lib/commands/index.ts
+++ b/lib/commands/index.ts
@@ -1,29 +1,42 @@
 import { printSyntax, commandList } from "./definitions";

-export function commandCompletion(input: string): string[] {
-    if (input === "") return [];
-    const candidates = commandList.filter(cmd => cmd.name.substring(0, input.length) === input).map(cmd => cmd.name);
-    return candidates;
+interface CommandInterfaceCallbacks {
+    setModalVisible: CallableFunction, 
+    setModalProject: CallableFunction
 }

-export function executeCommand(command: string): string[] {
-    if (!command) return [`$ ${command}`].concat(illegalCommand(command));
-    const args = command.split(" ");
-    const cmd = commandList.find(cmd => cmd.name === args[0]);
-    if (!cmd) return [`$ ${command}`].concat(illegalCommand(command));
+export class CommandInterface {
+    callbacks: CommandInterfaceCallbacks;

-    const parsed = seperateFlags(args.splice(1));
-    const result = parsed.flags.includes("--help") ? printSyntax(cmd) : cmd.execute(parsed.flags, parsed.subcmds, command);
+    constructor(callbacks: CommandInterfaceCallbacks) {
+        this.callbacks = callbacks;
+    }

-    return [`$ ${command}`].concat(result);
-}
+    static commandCompletion(input: string): string[] {
+        if (input === "") return [];
+        const candidates = commandList.filter(cmd => cmd.name.substring(0, input.length) === input).map(cmd => cmd.name);
+        return candidates;
+    }

-function seperateFlags(args: string[]): {flags: string[], subcmds: string[]} {
-    const flags = args.filter(arg => arg.substring(0,1) === "-");
-    const subcmds = args.filter(arg => arg.substring(0,1) !== "-");
-    return {flags, subcmds};
-}
+    executeCommand(command: string): string[] {
+        if (!command) return [`$ ${command}`].concat(this.illegalCommand(command));
+        const args = command.split(" ");
+        const cmd = commandList.find(cmd => cmd.name === args[0]);
+        if (!cmd) return [`$ ${command}`].concat(this.illegalCommand(command));
+    
+        const parsed = this.seperateFlags(args.splice(1));
+        const result = parsed.flags.includes("--help") ? printSyntax(cmd) : cmd.execute(parsed.flags, parsed.subcmds, command, this);
+    
+        return [`$ ${command}`].concat(result);
+    }

-function illegalCommand(command: string): string[] {
-    return [`Command '${command}' not found.`, "Type 'help' for help."];
+    private seperateFlags(args: string[]): {flags: string[], subcmds: string[]} {
+        const flags = args.filter(arg => arg.substring(0,1) === "-");
+        const subcmds = args.filter(arg => arg.substring(0,1) !== "-");
+        return {flags, subcmds};
+    }
+
+    private illegalCommand(command: string): string[] {
+        return [`Command '${command}' not found.`, "Type 'help' for help."];
+    }
 }
--- a/lib/commands/types.tsx
+++ b/lib/commands/types.tsx
@@ -1,3 +1,5 @@
+import type { CommandInterface } from ".";
+
 export interface Flag {
    short: string;
    long: string;
@@ -15,5 +17,5 @@ export interface Command {
    desc: string;
    flags?: Record<string,Flag>;
    subcommands?: Record<string,SubCommand>;
-    execute: (flags: string[], args: string[], raw: string, extra?: any) => string[];
+    execute: (flags: string[], args: string[], raw: string, cmdIf: CommandInterface) => string[];
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
    "": {
      "name": "my_website",
      "dependencies": {
+        "asciidoctor": "^2.2.5",
        "next": "12.0.7",
        "phosphor-react": "^1.3.1",
        "react": "17.0.2",
@@ -19,6 +20,39 @@
        "typescript": "4.5.2"
      }
    },
+    "node_modules/@asciidoctor/cli": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/cli/-/cli-3.4.0.tgz",
+      "integrity": "sha512-jOtxA0I6zB+6z+GGwm9+xhlmGTqCTkFPE902L6fauFlE6v7LxjhLYNxvjDVyn0zMrFLybvoSRcAnM3DcticNoQ==",
+      "dependencies": {
+        "yargs": "15.3.1"
+      },
+      "bin": {
+        "asciidoctor": "bin/asciidoctor",
+        "asciidoctorjs": "bin/asciidoctor"
+      },
+      "engines": {
+        "node": ">=8.11",
+        "npm": ">=5.0.0"
+      },
+      "peerDependencies": {
+        "@asciidoctor/core": "^2.0.0-rc.1"
+      }
+    },
+    "node_modules/@asciidoctor/core": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/core/-/core-2.2.5.tgz",
+      "integrity": "sha512-jtQPQ5EivgFbwvSyGKas4ANnMGGHPbmu791H9xrZKooA65JNI30jM2em5MvUXTTetSPgb6saUf+PJibEuSB6uw==",
+      "dependencies": {
+        "asciidoctor-opal-runtime": "0.3.3",
+        "unxhr": "1.0.1"
+      },
+      "engines": {
+        "node": ">=8.11",
+        "npm": ">=5.0.0",
+        "yarn": ">=1.1.0"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.12.11",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -1534,6 +1568,52 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/asciidoctor": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/asciidoctor/-/asciidoctor-2.2.5.tgz",
+      "integrity": "sha512-rrmCK34faw+w+xGFQggjwPB0/pcISnwOXaulfJvn7j4Nm0bFwz+x4tG3ZANIA9+9i6Csex/PO0fSLBO8CSdzVA==",
+      "dependencies": {
+        "@asciidoctor/cli": "3.4.0",
+        "@asciidoctor/core": "2.2.5"
+      },
+      "bin": {
+        "asciidoctor": "bin/asciidoctor",
+        "asciidoctorjs": "bin/asciidoctor"
+      },
+      "engines": {
+        "node": ">=8.11",
+        "npm": ">=5.0.0",
+        "yarn": ">=1.1.0"
+      }
+    },
+    "node_modules/asciidoctor-opal-runtime": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/asciidoctor-opal-runtime/-/asciidoctor-opal-runtime-0.3.3.tgz",
+      "integrity": "sha512-/CEVNiOia8E5BMO9FLooo+Kv18K4+4JBFRJp8vUy/N5dMRAg+fRNV4HA+o6aoSC79jVU/aT5XvUpxSxSsTS8FQ==",
+      "dependencies": {
+        "glob": "7.1.3",
+        "unxhr": "1.0.1"
+      },
+      "engines": {
+        "node": ">=8.11"
+      }
+    },
+    "node_modules/asciidoctor-opal-runtime/node_modules/glob": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/asn1.js": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
@@ -1605,8 +1685,7 @@
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
    "node_modules/base64-js": {
      "version": "1.5.1",
@@ -1652,7 +1731,6 @@
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
      "dependencies": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
@@ -1811,6 +1889,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001283",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001283.tgz",
@@ -1867,6 +1953,16 @@
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1893,8 +1989,7 @@
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
    "node_modules/constants-browserify": {
      "version": "1.0.0",
@@ -2059,6 +2154,14 @@
        "ms": "2.0.0"
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3111,8 +3214,7 @@
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
    "node_modules/fsevents": {
      "version": "2.3.2",
@@ -3147,6 +3249,14 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -3456,7 +3566,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
      "dependencies": {
        "once": "^1.3.0",
        "wrappy": "1"
@@ -3581,7 +3690,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -4035,7 +4143,6 @@
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
      "dependencies": {
        "brace-expansion": "^1.1.7"
      },
@@ -4313,7 +4420,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
      "dependencies": {
        "wrappy": "1"
      }
@@ -4433,7 +4539,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -4788,6 +4893,14 @@
        "url": "https://github.com/sponsors/mysticatea"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -4797,6 +4910,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "node_modules/resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -4917,6 +5035,11 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
    "node_modules/setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -5118,7 +5241,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "dependencies": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
@@ -5131,8 +5253,7 @@
    "node_modules/string-width/node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
    },
    "node_modules/string.prototype.matchall": {
      "version": "4.0.6",
@@ -5462,6 +5583,14 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/unxhr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unxhr/-/unxhr-1.0.1.tgz",
+      "integrity": "sha512-MAhukhVHyaLGDjyDYhy8gVjWJyhTECCdNsLwlMoGFoNJ3o79fpQhtQuzmAE4IxCMDwraF4cW8ZjpAV0m9CRQbg==",
+      "engines": {
+        "node": ">=8.11"
+      }
+    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5568,6 +5697,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
    "node_modules/which-typed-array": {
      "version": "1.1.7",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.7.tgz",
@@ -5596,11 +5730,53 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
    },
    "node_modules/xtend": {
      "version": "4.0.2",
@@ -5610,12 +5786,50 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "node_modules/yargs": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
+      "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -5629,6 +5843,23 @@
    }
  },
  "dependencies": {
+    "@asciidoctor/cli": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/cli/-/cli-3.4.0.tgz",
+      "integrity": "sha512-jOtxA0I6zB+6z+GGwm9+xhlmGTqCTkFPE902L6fauFlE6v7LxjhLYNxvjDVyn0zMrFLybvoSRcAnM3DcticNoQ==",
+      "requires": {
+        "yargs": "15.3.1"
+      }
+    },
+    "@asciidoctor/core": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/core/-/core-2.2.5.tgz",
+      "integrity": "sha512-jtQPQ5EivgFbwvSyGKas4ANnMGGHPbmu791H9xrZKooA65JNI30jM2em5MvUXTTetSPgb6saUf+PJibEuSB6uw==",
+      "requires": {
+        "asciidoctor-opal-runtime": "0.3.3",
+        "unxhr": "1.0.1"
+      }
+    },
    "@babel/code-frame": {
      "version": "7.12.11",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -6710,6 +6941,39 @@
        "es-abstract": "^1.19.0"
      }
    },
+    "asciidoctor": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/asciidoctor/-/asciidoctor-2.2.5.tgz",
+      "integrity": "sha512-rrmCK34faw+w+xGFQggjwPB0/pcISnwOXaulfJvn7j4Nm0bFwz+x4tG3ZANIA9+9i6Csex/PO0fSLBO8CSdzVA==",
+      "requires": {
+        "@asciidoctor/cli": "3.4.0",
+        "@asciidoctor/core": "2.2.5"
+      }
+    },
+    "asciidoctor-opal-runtime": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/asciidoctor-opal-runtime/-/asciidoctor-opal-runtime-0.3.3.tgz",
+      "integrity": "sha512-/CEVNiOia8E5BMO9FLooo+Kv18K4+4JBFRJp8vUy/N5dMRAg+fRNV4HA+o6aoSC79jVU/aT5XvUpxSxSsTS8FQ==",
+      "requires": {
+        "glob": "7.1.3",
+        "unxhr": "1.0.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
    "asn1.js": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
@@ -6771,8 +7035,7 @@
    "balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
    "base64-js": {
      "version": "1.5.1",
@@ -6798,7 +7061,6 @@
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
      "requires": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
@@ -6935,6 +7197,11 @@
      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
      "dev": true
    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
    "caniuse-lite": {
      "version": "1.0.30001283",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001283.tgz",
@@ -6979,6 +7246,16 @@
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7005,8 +7282,7 @@
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
    "constants-browserify": {
      "version": "1.0.0",
@@ -7150,6 +7426,11 @@
        "ms": "2.0.0"
      }
    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
    "deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -7962,8 +8243,7 @@
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
    "fsevents": {
      "version": "2.3.2",
@@ -7988,6 +8268,11 @@
      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
      "peer": true
    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
    "get-intrinsic": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -8204,7 +8489,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
      "requires": {
        "once": "^1.3.0",
        "wrappy": "1"
@@ -8289,8 +8573,7 @@
    "is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
    },
    "is-generator-function": {
      "version": "1.0.10",
@@ -8624,7 +8907,6 @@
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
      "requires": {
        "brace-expansion": "^1.1.7"
      }
@@ -8822,7 +9104,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
      "requires": {
        "wrappy": "1"
      }
@@ -8916,8 +9197,7 @@
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
    },
    "path-key": {
      "version": "3.1.1",
@@ -9182,12 +9462,22 @@
      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
      "dev": true
    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
    "require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
      "dev": true
    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -9261,6 +9551,11 @@
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
    "setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -9425,7 +9720,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "requires": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
@@ -9435,8 +9729,7 @@
        "emoji-regex": {
          "version": "8.0.0",
          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
        }
      }
    },
@@ -9687,6 +9980,11 @@
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
    },
+    "unxhr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unxhr/-/unxhr-1.0.1.tgz",
+      "integrity": "sha512-MAhukhVHyaLGDjyDYhy8gVjWJyhTECCdNsLwlMoGFoNJ3o79fpQhtQuzmAE4IxCMDwraF4cW8ZjpAV0m9CRQbg=="
+    },
    "uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -9778,6 +10076,11 @@
        "is-symbol": "^1.0.3"
      }
    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
    "which-typed-array": {
      "version": "1.1.7",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.7.tgz",
@@ -9797,23 +10100,87 @@
      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
      "dev": true
    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "yargs": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
+      "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.1"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
    "yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "lint": "npx next lint"
  },
  "dependencies": {
+    "asciidoctor": "^2.2.5",
    "next": "12.0.7",
    "phosphor-react": "^1.3.1",
    "react": "17.0.2",
--- a/pages/api/get_project.ts
+++ b/pages/api/get_project.ts
@@ -19,7 +19,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse<string
    const project = req.query.projectName;

    try {
-        const path = resolve("./public", "projects", `${project}.md`)
+        const path = resolve("./public", "projects", `${project}.adoc`)
        const data = readFileSync(path).toString();
        console.debug(`[API/get_project]\tRequest for ${project}`);
        res.status(200).send(data);
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,44 +2,55 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import ProjectModal from "../components/ProjectModal";
 import REPL from "../components/REPL";
 import styles from "../styles/Home.module.css";

 const Home: NextPage = () => {
-  const inputRef = useRef<HTMLInputElement>();
+    const inputRef = useRef<HTMLInputElement>();
+    const [modalVisible, setModalVisible] = useState<boolean>(false);
+    const [modalProject, setModalProject] = useState<string>("");

-  const focusInput = () => {if (inputRef.current) inputRef.current.focus();};
-  
-  return (<>
-    <Head>
-      <title>c0ntroller.de</title>
-    </Head>
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
-        <Link href="https://git.c0ntroller.de/c0ntroller/frontpage"><a>Source</a></Link>
-        <span className={styles.divider}>|</span>
-        <Link href="https://git.c0ntroller.de/c0ntroller/frontpage/issues/new"><a>Bug?</a></Link>
-        <span className={styles.divider}>|</span>
-        <Link href="https://github.com/C0ntroller" passHref><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
-        <span className={styles.divider}>|</span>
-        <Link href="https://www.instagram.com/c0ntroller/" passHref><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
-        <span className={styles.divider}>|</span>
-        <Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link>
-        <span className={styles.divider}>|</span>
-        <Link href="https://discordapp.com/users/224208617820127233" passHref>
-          <span className={styles.tooltip} style={{cursor: "pointer"}}>
-            <DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
-            <span className={styles.tooltiptext}>
-              C0ntroller_Z#3883
-            </span>
-          </span>
-        </Link><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
-      </div>
-      <REPL inputRef={inputRef} />
-    </div>
-  </>);
+    const focusInput = () => { if (inputRef.current) inputRef.current.focus(); };
+
+    const hideModalOnEsc = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setModalVisible(false);
+        }
+    }
+
+    return (<main onKeyDown={hideModalOnEsc}>
+        <Head>
+            <title>c0ntroller.de</title>
+        </Head>
+        <ProjectModal visible={modalVisible} project={modalProject} setVisible={setModalVisible}/>
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
+                <Link href="https://git.c0ntroller.de/c0ntroller/frontpage"><a>Source</a></Link>
+                <span className={styles.divider}>|</span>
+                <Link href="https://git.c0ntroller.de/c0ntroller/frontpage/issues/new"><a>Bug?</a></Link>
+                <span className={styles.divider}>|</span>
+                <Link href="https://github.com/C0ntroller" passHref><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <span className={styles.divider}>|</span>
+                <Link href="https://www.instagram.com/c0ntroller/" passHref><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <span className={styles.divider}>|</span>
+                <Link href="https://steamcommunity.com/id/c0ntroller/" passHref><GameController color="var(--repl-color)" className={styles.iconLink} /></Link>
+                <span className={styles.divider}>|</span>
+                <Link href="https://discordapp.com/users/224208617820127233" passHref>
+                    <span className={styles.tooltip} style={{ cursor: "pointer" }}>
+                        <DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
+                        <span className={styles.tooltiptext}>
+                            C0ntroller_Z#3883
+                        </span>
+                    </span>
+                </Link><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
+            </div>
+            <REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/>
+        </div>
+    </main>);
 };

 export default Home;
--- a/public/projects/homepage.adoc
+++ b/public/projects/homepage.adoc
@@ -0,0 +1 @@
+Hey. This is a test.
--- a/styles/ProjectModal.module.css
+++ b/styles/ProjectModal.module.css
@@ -0,0 +1,19 @@
+.modal {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 5%;
+    background: transparent;
+}
+
+.modalContainer {
+    background: #333;
+    color: #ccc;
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    border-radius: 20px;
+}
--- a/1
+++ b/1
@@ -0,0 +1 @@
+Miau