Merge pull request 'First working state' (#1) from dev into senpai

Reviewed-on: #1

.eslintrc.json

@@ -1,3 +1,8 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "semi": ["warn", "always"],
+    "quotes": ["warn", "double"],
+    "eqeqeq": "error"
+  }
 }

components/REPL/REPLHistory.tsx

@@ -0,0 +1,18 @@
+import { NextPage } from "next";
+import { MutableRefObject } from "react";
+import styles from "../../styles/REPL/REPLHistory.module.css";
+
+interface REPLHistoryParams {
+    history: string[];
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+}
+
+const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
+    const focusInput = () => {if (inputRef.current) inputRef.current.focus();};
+
+    return <div className={styles.container} onClick={focusInput}>
+        { history.map((value, idx) => <pre className={styles.line} key={idx}>{value === "" ? "\u00A0" : value}</pre>) }
+    </div>;
+};
+
+export default REPLHistory;

components/REPL/REPLInput.tsx

@@ -0,0 +1,71 @@
+import type { NextPage } from "next";
+import React, { MutableRefObject } from "react";
+import { commandCompletion, executeCommand } from "../../lib/commands";
+import styles from "../../styles/REPL/REPLInput.module.css";
+
+interface REPLInputParams {
+    historyCallback: CallableFunction; 
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+}
+
+const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
+    const typed = React.createRef<HTMLSpanElement>();
+    const completion = React.createRef<HTMLSpanElement>();
+    const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
+    const [justTabbed, setJustTabbed] = React.useState<number>(0);
+
+    const replinOnChange = (e: React.FormEvent<HTMLInputElement>) => {
+        const input = (e.target as HTMLInputElement);
+        const currentInput = input.value.toLowerCase();
+        // Force lowercase
+        input.value = currentInput;
+
+        if (currentInput.includes(" ")) {
+            // Command already typed
+            input.maxLength = 524288; // Default value
+            if (typed.current) typed.current.innerHTML = "";
+            if (completion.current) completion.current.innerHTML = "";
+            setCurrentCmd([]);
+            return;
+        } else {
+            input.maxLength = 20;
+            // Get completion hint
+            const suggest = commandCompletion(currentInput);
+            setCurrentCmd(suggest);
+            if (suggest.length === 0) suggest.push("");
+            if (typed.current) typed.current.innerHTML = currentInput;
+            if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
+        }        
+    };
+
+    const tabComplete = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const input = (e.target as HTMLInputElement);
+        if (e.key === "Tab" && currentCmd.length !== 0) {
+            e.preventDefault();
+            input.value = currentCmd[justTabbed % currentCmd.length];
+            if(typed.current) typed.current.innerHTML = currentCmd[justTabbed % currentCmd.length];
+            if(completion.current) completion.current.innerHTML = "";
+            setJustTabbed(justTabbed + 1);
+        } else setJustTabbed(0);
+
+        if (e.key === "Enter") {
+            const result = executeCommand((e.target as HTMLInputElement).value);
+            input.value = "";
+            if(typed.current) typed.current.innerHTML = "";
+            if(completion.current) completion.current.innerHTML = "";
+            historyCallback(result);
+        }
+
+        return false;
+    };
+
+    return <div className={styles.wrapperwrapper}>
+        <span className={styles.inputstart}>$&nbsp;</span>
+        <div className={styles.wrapper}>
+            <input ref={inputRef as MutableRefObject<HTMLInputElement>} className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus maxLength={20} />
+            <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+        </div>
+    </div>;
+};
+
+export default REPLInput;

components/REPL/index.tsx

@@ -0,0 +1,16 @@
+import { useRef, useState } from "react";
+import REPLInput from "./REPLInput";
+import REPLHistory from "./REPLHistory";
+
+const REPL = () => {
+    const [history, manipulateHistory] = useState<string[]>([]);
+    const inputRef = useRef<HTMLInputElement>();
+    const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
+
+    return (<>
+        <REPLHistory history={history} inputRef={inputRef} />
+        <REPLInput historyCallback={onCommandExecuted} inputRef={inputRef} />
+    </>);
+};
+
+export default REPL;

lib/commands/definitions.ts

@@ -0,0 +1,181 @@
+import type { Command, Flag } from "./types";
+import type { Project } from "../projects/types";
+import projectList from "../projects";
+
+function getCommandByName(name: string): Command|undefined {
+    return commandList.find(cmd => cmd.name === name);
+}
+
+function illegalUse(raw: string, cmd: Command): string[] {
+    return [
+        "Syntax error!",
+        `Cannot parse "${raw}"`,
+        ""
+    ].concat(printSyntax(cmd));
+}
+
+function checkFlags(flags: string[], cmd: Command): boolean {
+    if (!flags || flags === []) return true;
+    if (!cmd.flags) return false;
+
+    for (const flag of flags) {
+        const isLong = flag.substring(0,2) === "--";
+        const flagObj = Object.values(cmd.flags).find(f => isLong ? f.long === flag.substring(2) : f.short === flag.substring(1));
+        if (!flagObj) return false;
+    }
+    return true;
+}
+
+function checkSubcmd(subcmds: string[], cmd: Command): boolean {
+    if (!subcmds || subcmds === []) return true;
+    if (!cmd.subcommands) return false;
+
+    for (const sc of subcmds) {
+        const flagObj = Object.values(cmd.subcommands).find(s => s.name === sc);
+        if (!flagObj) return false;
+    }
+    return true;
+}
+
+function checkFlagInclude(flagsProvided: string[], flag: Flag): boolean {
+    if (!flag) return false;
+    return flagsProvided.includes(`-${flag.short}`) || flagsProvided.includes(`--${flag.long}`);
+}
+
+export function printSyntax(cmd: Command): string[] {
+    let flagsOption = "";
+    let flagsDesc = [];
+    if (cmd.flags && Object.keys(cmd.flags).length > 0) {
+        flagsOption = " [";
+        flagsDesc.push("");
+        flagsDesc.push("Flags:");
+        Object.values(cmd.flags).forEach((flag => {
+            flagsOption += `-${flag.short} `;
+            flagsDesc.push(`\t-${flag.short}\t--${flag.long}\t${flag.desc}`);
+        }));
+        flagsOption = flagsOption.substring(0, flagsOption.length-1) + "]";
+    }
+
+    let subcmdOption = "";
+    let subcmdDesc = [];
+    if (cmd.subcommands && Object.keys(cmd.subcommands).length > 0) {
+        subcmdOption = " [";
+        subcmdDesc.push("");
+        subcmdDesc.push("Arguments:");
+        Object.values(cmd.subcommands).forEach((subcmd => {
+            subcmdOption += `${subcmd.name}|`;
+            subcmdDesc.push(`\t${subcmd.name}\t${subcmd.desc}`);
+        }));
+        subcmdOption = subcmdOption.substring(0, subcmdOption.length-1) + "]";
+    }
+
+    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc);   
+}
+
+const about: Command = {
+    name: "about",
+    desc: "Show information about this page.",
+    execute: () => {
+        return [
+            "Hello there wanderer.",
+            "So you want to know what this is about?",
+            "",
+            "Well, the answer is pretty unspectecular:",
+            "This site presents some stuff that the user named C0ntroller created.",
+            "If you wander arround you will find various projects.",
+            "",
+            "The navigation is done via this console interface.",
+            "Even when you open a project page you don't need your mouse - just press Esc to close it.",
+            "",
+            "I hope you enjoy your stay here!",
+            "If you wanted more information about the page itself, type 'project this' or 'help -t'."
+        ];
+    }
+};
+
+const help: Command = {
+    name: "help",
+    desc: "Shows helptext.",
+    flags: {more: { long: "this", short: "t", desc: "Show information about this site." }},
+    execute: (flags) => {
+        if (help.flags && checkFlagInclude(flags, help.flags.more)) {
+            return [
+                "Hello user!",
+                "What you see here should resemble an CLI. If you ever used Linux this should be pretty easy for you.",
+                "Everyone else: Have no fear. It is pretty simple. You just type in commands and the output is shown here or it does something on the webite.",
+                "To find out, which commands are available, you can type just 'help'.",
+                "",
+                "Have fun!"
+            ];
+        } else {
+            const available = ["Available commands:"];
+            commandList.forEach(cmd => available.push(`\t${cmd.name}\t${cmd.desc}`));
+            available.concat([
+                "",
+                "Need more help? Type 'help -m'!"
+            ]);
+            return available;
+        }
+    }
+};
+
+const man: Command = {
+    name: "man",
+    desc: "Provides a manual for a command.",
+    subcommands: {
+        command: {name: "command", desc: "Name of a command"}
+    },
+    execute: (_flags, args) => {
+        if (args.length !== 1) {
+            return printSyntax(man);
+        } else {
+            const cmd = getCommandByName(args[0]);
+            if (!cmd) return [`Cannot find command '${args[0]}'.`];
+            else return printSyntax(cmd);
+        }
+    }
+};
+
+const project: Command = {
+    name: "project",
+    desc: "Show information about a project.",
+    flags: {
+        minimal: {short: "m", long: "minimal", desc: "Only show minimal information."},
+        source: {short: "s", long: "source", desc: "Open git repository of project."},
+        list: {short: "l", long: "list", desc: "Show list of projects."}
+    },
+    subcommands: {name: {name: "name", desc: "Name of the project."}},
+    execute: (flags, args) => {
+        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}`));
+            return result;
+        }
+
+        if (args.length !== 1) return printSyntax(project);
+
+        if (args[0] === "this") args[0] = "homepage";
+
+        const pjt = projectList.find(p => p.name === args[0]);
+        if (!pjt) return [
+            `Cannot find project ${args[0]}!`,
+            "You can see available projects using 'project -l'."
+        ];
+
+        if (project.flags && checkFlagInclude(flags, project.flags.source)) {
+            try {
+                window && window.open(pjt.repo, "_blank");
+                return ["Opened repository in new tab."];
+            } catch {
+                return ["Sorry, no repository for this project."];
+            }
+        }
+        if (project.flags && checkFlagInclude(flags, project.flags.minimal)) return pjt.desc;
+
+        // TODO
+        // Open project page here.
+        return [];
+    }
+};
+
+export const commandList = [about, help, man, project];

lib/commands/index.ts

@@ -0,0 +1,29 @@
+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;
+}
+
+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));
+
+    const parsed = seperateFlags(args.splice(1));
+    const result = parsed.flags.includes("--help") ? printSyntax(cmd) : cmd.execute(parsed.flags, parsed.subcmds, command);
+
+    return [`$ ${command}`].concat(result);
+}
+
+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};
+}
+
+function illegalCommand(command: string): string[] {
+    return [`Command '${command}' not found.`, "Type 'help' for help."];
+}

lib/commands/types.tsx

@@ -0,0 +1,19 @@
+export interface Flag {
+    short: string;
+    long: string;
+    desc: string;
+}
+
+interface SubCommand {
+    name: string;
+    desc: string;
+}
+
+export interface Command {
+    name: string;
+    hidden?: boolean;
+    desc: string;
+    flags?: Record<string,Flag>;
+    subcommands?: Record<string,SubCommand>;
+    execute: (flags: string[], args: string[], raw: string, extra?: any) => string[];
+}

lib/projects/index.ts

@@ -0,0 +1,21 @@
+import type { Project } from "./types";
+
+const projectList: Project[] = [
+    {
+        name: "homepage",
+        short: "This website.",
+        desc: [
+            "This is my homepage.",
+            "What you see here should resemble an CLI. If you ever used Linux this should be pretty easy for you.",
+            "Everyone else: Have no fear. It is pretty simple. You just type in commands and the output is shown here or it does something on the webite.",
+            "To find out, which commands are available, you can type just 'help'.",
+            "",
+            "Currently everything is still in development. So if you come back in a few days/weeks/months/years something could have been changed!",
+            "",
+            "Have fun!"
+        ],
+        repo: "https://git.c0ntroller.de/c0ntroller/frontpage"
+    }
+];
+
+export default projectList;

lib/projects/types.ts

@@ -0,0 +1,7 @@
+export interface Project {
+    name: string;
+    desc: string[];
+    short: string;
+    more?: string;
+    repo?: string;
+}

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package-lock.json

@@ -6,7 +6,7 @@
     "": {
       "name": "my_website",
       "dependencies": {
-        "next": "12.0.4",
+        "next": "12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2"
       },
@@ -842,9 +842,9 @@
       "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA=="
     },
     "node_modules/@next/env": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.4.tgz",
-      "integrity": "sha512-QtZ6X5c6Zqa7oWs5csEmZ7xy+gLdtRKKg02SOT5l0Ziea4P5IU8mSOCyNC4fZmXewcRVjpbY+yGqAAP7hJUfOA=="
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz",
+      "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "12.0.4",
@@ -856,14 +856,14 @@
       }
     },
     "node_modules/@next/polyfill-module": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.4.tgz",
-      "integrity": "sha512-mk9yCDNpfXINTJKFTZNgwYs7eqRFpc5D/49O/fKB59blihyKl1GY1sZ0l7a2bn5l1X/WuaZzcIfqnrwkneqeaQ=="
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz",
+      "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A=="
     },
     "node_modules/@next/react-dev-overlay": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.4.tgz",
-      "integrity": "sha512-9O0lXyzv5goFSmDwq9Hp8JE+DcObvd+bTXvmGSSvYR91AlIoVlH8/PwATx8Rf5YEuqggn/XKR1hn2kBYcbcGnA==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz",
+      "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==",
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "anser": "1.4.9",
@@ -953,9 +953,9 @@
       }
     },
     "node_modules/@next/react-refresh-utils": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.4.tgz",
-      "integrity": "sha512-kNUDmpBaJ+8Lb8CtKNynRFF9oijCjUKKru6Ont+JKhti9//5dNFFIcuo607bJSH86un06OEK0TZUt5XWVlbkjw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz",
+      "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==",
       "peerDependencies": {
         "react-refresh": "0.8.3",
         "webpack": "^4 || ^5"
@@ -967,9 +967,9 @@
       }
     },
     "node_modules/@next/swc-android-arm64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.4.tgz",
-      "integrity": "sha512-6mXumia8ZPcy7bYu9kjItfWxrE6SFaJyqQDaFy9G9WrU9x3M1R1Yok8B2X1mboM8itD0tq+t3R/ebQEkkmevUw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.7.tgz",
+      "integrity": "sha512-yViT7EEc7JqxncRT+ZTeTsrAYXLlcefo0Y0eAfYmmalGD2605L4FWAVrJi4WnrSLji7l+veczw1WBmNeHICKKA==",
       "cpu": [
         "arm64"
       ],
@@ -982,9 +982,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.4.tgz",
-      "integrity": "sha512-7WMen1qhF5JmjKD9S5IEgEoaPJOXyIZj/Nsqa8ZSWxdF5oogp3uYYbKb/rvMYoKzpIbjyoLH/OCM5lm5IFM4iw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.7.tgz",
+      "integrity": "sha512-vhAyW2rDEUcQesRVaj0z1hSoz7QhDzzGd0V1/5/5i9YJOfOtyrPsVJ82tlf7BfXl6/Ep+eKNfWVIb5/Jv89EKg==",
       "cpu": [
         "arm64"
       ],
@@ -997,9 +997,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.4.tgz",
-      "integrity": "sha512-PVgefMWjxP6CU1HQs39+Bfpjcue6qErJfvJ/+n2zimjLzyeQAmD6LM9f1lDSttW2LjKjasoxR5qkRNLVlqzlaA==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz",
+      "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==",
       "cpu": [
         "x64"
       ],
@@ -1012,9 +1012,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.4.tgz",
-      "integrity": "sha512-8xGQu3sJiIdriKiCux3jDJ9pwivELEg7z2zfW0CqmQMbKNB7qP9lc0pq6CxshtKyXRMczNWRMtQ3Cjwep+UvNg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.7.tgz",
+      "integrity": "sha512-d0zWr877YqZ2cf/DQy6obouaR39r0FPebcXj2nws9AC99m68CO2xVpWv9jT7mFvpY+T40HJisLH80jSZ2iQ9sA==",
       "cpu": [
         "arm"
       ],
@@ -1027,9 +1027,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.4.tgz",
-      "integrity": "sha512-HhEWcBkqGr3E7SYLtN9VnYUGamAWaLcXawHN33Em0WP7gzXrBqz0iIJNH7uEzHDS6980EqU/rrkLyhCHrYSZgQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.7.tgz",
+      "integrity": "sha512-fdobh5u6gG13Gd5LkHhJ+W8tF9hbaFolRW99FhzArMe5/nMKlLdBymOxvitE3K4gSFQxbXJA6TbU0Vv0e59Kww==",
       "cpu": [
         "arm64"
       ],
@@ -1042,9 +1042,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.4.tgz",
-      "integrity": "sha512-oZyQ9wjtE7OX9RlnovP7izNx2AR/RzTuYWU4Ttim8ssABsipQSxSlfRaeb+Qi6jTc6k+lrPhjRfaZ+fGv/m2Ag==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.7.tgz",
+      "integrity": "sha512-vx0c5Q3oIScFNT/4jI9rCe0yPzKuCqWOkiO/OOV0ixSI2gLhbrwDIcdkm79fKVn3i8JOJunxE4zDoFeR/g8xqQ==",
       "cpu": [
         "arm64"
       ],
@@ -1057,9 +1057,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.4.tgz",
-      "integrity": "sha512-aBuf78QzL93T59Lk9kEGfHcA+9SzYIH7dGon1nqVxtAd2iqicKYNVaVcb38VKeiIBXMSUHXTdu6Ee053ZCOmSw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.7.tgz",
+      "integrity": "sha512-9ITyp6s6uGVKNx3C/GP7GrYycbcwTADG7TdIXzXUxOOZORrdB1GNg3w/EL3Am4VMPPEpO6v1RfKo2IKZpVKfTA==",
       "cpu": [
         "x64"
       ],
@@ -1072,9 +1072,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.4.tgz",
-      "integrity": "sha512-yDgqUqL4H8M3Y0hv30ZyL9UvjnK4iXmD4I6iJz+XIHSRdA/VUiyKKoL7okf9hxr0mSxBtagbZ5A3qEoW/VliUQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.7.tgz",
+      "integrity": "sha512-C+k+cygbIZXYfc+Hx2fNPUBEg7jzio+mniP5ywZevuTXW14zodIfQ3ZMoMJR8EpOVvYpjWFk2uAjiwqgx8vo/g==",
       "cpu": [
         "x64"
       ],
@@ -1087,9 +1087,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.4.tgz",
-      "integrity": "sha512-evDUrEYsUo+PMHsedaymfZO98VwV9wNFzuWVCyKgqg6SD1ZRpzbpqYQY7aINIuqZVdIWZElBE6EM+oxaj7PuWQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.7.tgz",
+      "integrity": "sha512-7jTRjOKkDVnb5s7VoHT7eX+eyT/5BQJ/ljP2G56riAgKGqPL63/V7FXemLhhLT67D+OjoP8DRA2E2ne6IPHk4w==",
       "cpu": [
         "arm64"
       ],
@@ -1102,9 +1102,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.4.tgz",
-      "integrity": "sha512-Lbmz0xlo8vW4EDWyzCfy3nGfqt7skqwxaERwe+vDVTBZ56mvJ5dsdyjqK24sxu4FFkWR7SaU4eNlHwZR+A3kTg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.7.tgz",
+      "integrity": "sha512-2u5pGDsk7H6gGxob2ATIojzlwKzgYsrijo7RRpXOiPePVqwPWg6/pmhaJzLdpfjaBgRg1NFmwSp/7Ump9X8Ijg==",
       "cpu": [
         "ia32"
       ],
@@ -1117,9 +1117,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.4.tgz",
-      "integrity": "sha512-f+7WNIJOno5QEelrmob+3vN5EZJb3KCkOrnvUsQ0+LCCD0dIPIhCjeHAh3BGj9msGu8ijnXvD7JxVxE5V26cnQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.7.tgz",
+      "integrity": "sha512-frEWtbf+q8Oz4e2UqKJrNssk6DZ6/NLCQXn5/ORWE9dPAfe9XS6aK5FRZ6DuEPmmKd5gOoRkKJFFz5nYd+TeyQ==",
       "cpu": [
         "x64"
       ],
@@ -4070,17 +4070,17 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.0.4.tgz",
-      "integrity": "sha512-1pvjcSZBm5OLoGmDhp4JwKwIE798WbqUNLuyU7w6a2jUkdWaxOYtkE/ROXQTi2pXHj7+6rm68AvhxROLX2NHQg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz",
+      "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==",
       "dependencies": {
         "@babel/runtime": "7.15.4",
         "@hapi/accept": "5.0.2",
         "@napi-rs/triples": "1.0.3",
-        "@next/env": "12.0.4",
-        "@next/polyfill-module": "12.0.4",
-        "@next/react-dev-overlay": "12.0.4",
-        "@next/react-refresh-utils": "12.0.4",
+        "@next/env": "12.0.7",
+        "@next/polyfill-module": "12.0.7",
+        "@next/react-dev-overlay": "12.0.7",
+        "@next/react-refresh-utils": "12.0.7",
         "acorn": "8.5.0",
         "assert": "2.0.0",
         "browserify-zlib": "0.2.0",
@@ -4122,7 +4122,7 @@
         "use-subscription": "1.5.1",
         "util": "0.12.4",
         "vm-browserify": "1.1.2",
-        "watchpack": "2.1.1"
+        "watchpack": "2.3.0"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -4131,23 +4131,23 @@
         "node": ">=12.22.0"
       },
       "optionalDependencies": {
-        "@next/swc-android-arm64": "12.0.4",
-        "@next/swc-darwin-arm64": "12.0.4",
-        "@next/swc-darwin-x64": "12.0.4",
-        "@next/swc-linux-arm-gnueabihf": "12.0.4",
-        "@next/swc-linux-arm64-gnu": "12.0.4",
-        "@next/swc-linux-arm64-musl": "12.0.4",
-        "@next/swc-linux-x64-gnu": "12.0.4",
-        "@next/swc-linux-x64-musl": "12.0.4",
-        "@next/swc-win32-arm64-msvc": "12.0.4",
-        "@next/swc-win32-ia32-msvc": "12.0.4",
-        "@next/swc-win32-x64-msvc": "12.0.4"
+        "@next/swc-android-arm64": "12.0.7",
+        "@next/swc-darwin-arm64": "12.0.7",
+        "@next/swc-darwin-x64": "12.0.7",
+        "@next/swc-linux-arm-gnueabihf": "12.0.7",
+        "@next/swc-linux-arm64-gnu": "12.0.7",
+        "@next/swc-linux-arm64-musl": "12.0.7",
+        "@next/swc-linux-x64-gnu": "12.0.7",
+        "@next/swc-linux-x64-musl": "12.0.7",
+        "@next/swc-win32-arm64-msvc": "12.0.7",
+        "@next/swc-win32-ia32-msvc": "12.0.7",
+        "@next/swc-win32-x64-msvc": "12.0.7"
       },
       "peerDependencies": {
         "fibers": ">= 3.1.0",
         "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
-        "react": "^17.0.2 || ^18.0.0",
-        "react-dom": "^17.0.2 || ^18.0.0",
+        "react": "^17.0.2 || ^18.0.0-0",
+        "react-dom": "^17.0.2 || ^18.0.0-0",
         "sass": "^1.3.0"
       },
       "peerDependenciesMeta": {
@@ -5500,9 +5500,9 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
     "node_modules/watchpack": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
-      "integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz",
+      "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -6266,9 +6266,9 @@
       "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA=="
     },
     "@next/env": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.4.tgz",
-      "integrity": "sha512-QtZ6X5c6Zqa7oWs5csEmZ7xy+gLdtRKKg02SOT5l0Ziea4P5IU8mSOCyNC4fZmXewcRVjpbY+yGqAAP7hJUfOA=="
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz",
+      "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q=="
     },
     "@next/eslint-plugin-next": {
       "version": "12.0.4",
@@ -6280,14 +6280,14 @@
       }
     },
     "@next/polyfill-module": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.4.tgz",
-      "integrity": "sha512-mk9yCDNpfXINTJKFTZNgwYs7eqRFpc5D/49O/fKB59blihyKl1GY1sZ0l7a2bn5l1X/WuaZzcIfqnrwkneqeaQ=="
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz",
+      "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A=="
     },
     "@next/react-dev-overlay": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.4.tgz",
-      "integrity": "sha512-9O0lXyzv5goFSmDwq9Hp8JE+DcObvd+bTXvmGSSvYR91AlIoVlH8/PwATx8Rf5YEuqggn/XKR1hn2kBYcbcGnA==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz",
+      "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==",
       "requires": {
         "@babel/code-frame": "7.12.11",
         "anser": "1.4.9",
@@ -6348,75 +6348,75 @@
       }
     },
     "@next/react-refresh-utils": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.4.tgz",
-      "integrity": "sha512-kNUDmpBaJ+8Lb8CtKNynRFF9oijCjUKKru6Ont+JKhti9//5dNFFIcuo607bJSH86un06OEK0TZUt5XWVlbkjw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz",
+      "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==",
       "requires": {}
     },
     "@next/swc-android-arm64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.4.tgz",
-      "integrity": "sha512-6mXumia8ZPcy7bYu9kjItfWxrE6SFaJyqQDaFy9G9WrU9x3M1R1Yok8B2X1mboM8itD0tq+t3R/ebQEkkmevUw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.0.7.tgz",
+      "integrity": "sha512-yViT7EEc7JqxncRT+ZTeTsrAYXLlcefo0Y0eAfYmmalGD2605L4FWAVrJi4WnrSLji7l+veczw1WBmNeHICKKA==",
       "optional": true
     },
     "@next/swc-darwin-arm64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.4.tgz",
-      "integrity": "sha512-7WMen1qhF5JmjKD9S5IEgEoaPJOXyIZj/Nsqa8ZSWxdF5oogp3uYYbKb/rvMYoKzpIbjyoLH/OCM5lm5IFM4iw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.7.tgz",
+      "integrity": "sha512-vhAyW2rDEUcQesRVaj0z1hSoz7QhDzzGd0V1/5/5i9YJOfOtyrPsVJ82tlf7BfXl6/Ep+eKNfWVIb5/Jv89EKg==",
       "optional": true
     },
     "@next/swc-darwin-x64": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.4.tgz",
-      "integrity": "sha512-PVgefMWjxP6CU1HQs39+Bfpjcue6qErJfvJ/+n2zimjLzyeQAmD6LM9f1lDSttW2LjKjasoxR5qkRNLVlqzlaA==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz",
+      "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==",
       "optional": true
     },
     "@next/swc-linux-arm-gnueabihf": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.4.tgz",
-      "integrity": "sha512-8xGQu3sJiIdriKiCux3jDJ9pwivELEg7z2zfW0CqmQMbKNB7qP9lc0pq6CxshtKyXRMczNWRMtQ3Cjwep+UvNg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.7.tgz",
+      "integrity": "sha512-d0zWr877YqZ2cf/DQy6obouaR39r0FPebcXj2nws9AC99m68CO2xVpWv9jT7mFvpY+T40HJisLH80jSZ2iQ9sA==",
       "optional": true
     },
     "@next/swc-linux-arm64-gnu": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.4.tgz",
-      "integrity": "sha512-HhEWcBkqGr3E7SYLtN9VnYUGamAWaLcXawHN33Em0WP7gzXrBqz0iIJNH7uEzHDS6980EqU/rrkLyhCHrYSZgQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.7.tgz",
+      "integrity": "sha512-fdobh5u6gG13Gd5LkHhJ+W8tF9hbaFolRW99FhzArMe5/nMKlLdBymOxvitE3K4gSFQxbXJA6TbU0Vv0e59Kww==",
       "optional": true
     },
     "@next/swc-linux-arm64-musl": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.4.tgz",
-      "integrity": "sha512-oZyQ9wjtE7OX9RlnovP7izNx2AR/RzTuYWU4Ttim8ssABsipQSxSlfRaeb+Qi6jTc6k+lrPhjRfaZ+fGv/m2Ag==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.7.tgz",
+      "integrity": "sha512-vx0c5Q3oIScFNT/4jI9rCe0yPzKuCqWOkiO/OOV0ixSI2gLhbrwDIcdkm79fKVn3i8JOJunxE4zDoFeR/g8xqQ==",
       "optional": true
     },
     "@next/swc-linux-x64-gnu": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.4.tgz",
-      "integrity": "sha512-aBuf78QzL93T59Lk9kEGfHcA+9SzYIH7dGon1nqVxtAd2iqicKYNVaVcb38VKeiIBXMSUHXTdu6Ee053ZCOmSw==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.7.tgz",
+      "integrity": "sha512-9ITyp6s6uGVKNx3C/GP7GrYycbcwTADG7TdIXzXUxOOZORrdB1GNg3w/EL3Am4VMPPEpO6v1RfKo2IKZpVKfTA==",
       "optional": true
     },
     "@next/swc-linux-x64-musl": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.4.tgz",
-      "integrity": "sha512-yDgqUqL4H8M3Y0hv30ZyL9UvjnK4iXmD4I6iJz+XIHSRdA/VUiyKKoL7okf9hxr0mSxBtagbZ5A3qEoW/VliUQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.7.tgz",
+      "integrity": "sha512-C+k+cygbIZXYfc+Hx2fNPUBEg7jzio+mniP5ywZevuTXW14zodIfQ3ZMoMJR8EpOVvYpjWFk2uAjiwqgx8vo/g==",
       "optional": true
     },
     "@next/swc-win32-arm64-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.4.tgz",
-      "integrity": "sha512-evDUrEYsUo+PMHsedaymfZO98VwV9wNFzuWVCyKgqg6SD1ZRpzbpqYQY7aINIuqZVdIWZElBE6EM+oxaj7PuWQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.7.tgz",
+      "integrity": "sha512-7jTRjOKkDVnb5s7VoHT7eX+eyT/5BQJ/ljP2G56riAgKGqPL63/V7FXemLhhLT67D+OjoP8DRA2E2ne6IPHk4w==",
       "optional": true
     },
     "@next/swc-win32-ia32-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.4.tgz",
-      "integrity": "sha512-Lbmz0xlo8vW4EDWyzCfy3nGfqt7skqwxaERwe+vDVTBZ56mvJ5dsdyjqK24sxu4FFkWR7SaU4eNlHwZR+A3kTg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.7.tgz",
+      "integrity": "sha512-2u5pGDsk7H6gGxob2ATIojzlwKzgYsrijo7RRpXOiPePVqwPWg6/pmhaJzLdpfjaBgRg1NFmwSp/7Ump9X8Ijg==",
       "optional": true
     },
     "@next/swc-win32-x64-msvc": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.4.tgz",
-      "integrity": "sha512-f+7WNIJOno5QEelrmob+3vN5EZJb3KCkOrnvUsQ0+LCCD0dIPIhCjeHAh3BGj9msGu8ijnXvD7JxVxE5V26cnQ==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.7.tgz",
+      "integrity": "sha512-frEWtbf+q8Oz4e2UqKJrNssk6DZ6/NLCQXn5/ORWE9dPAfe9XS6aK5FRZ6DuEPmmKd5gOoRkKJFFz5nYd+TeyQ==",
       "optional": true
     },
     "@nodelib/fs.scandir": {
@@ -8639,28 +8639,28 @@
       "dev": true
     },
     "next": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.0.4.tgz",
-      "integrity": "sha512-1pvjcSZBm5OLoGmDhp4JwKwIE798WbqUNLuyU7w6a2jUkdWaxOYtkE/ROXQTi2pXHj7+6rm68AvhxROLX2NHQg==",
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz",
+      "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==",
       "requires": {
         "@babel/runtime": "7.15.4",
         "@hapi/accept": "5.0.2",
         "@napi-rs/triples": "1.0.3",
-        "@next/env": "12.0.4",
-        "@next/polyfill-module": "12.0.4",
-        "@next/react-dev-overlay": "12.0.4",
-        "@next/react-refresh-utils": "12.0.4",
-        "@next/swc-android-arm64": "12.0.4",
-        "@next/swc-darwin-arm64": "12.0.4",
-        "@next/swc-darwin-x64": "12.0.4",
-        "@next/swc-linux-arm-gnueabihf": "12.0.4",
-        "@next/swc-linux-arm64-gnu": "12.0.4",
-        "@next/swc-linux-arm64-musl": "12.0.4",
-        "@next/swc-linux-x64-gnu": "12.0.4",
-        "@next/swc-linux-x64-musl": "12.0.4",
-        "@next/swc-win32-arm64-msvc": "12.0.4",
-        "@next/swc-win32-ia32-msvc": "12.0.4",
-        "@next/swc-win32-x64-msvc": "12.0.4",
+        "@next/env": "12.0.7",
+        "@next/polyfill-module": "12.0.7",
+        "@next/react-dev-overlay": "12.0.7",
+        "@next/react-refresh-utils": "12.0.7",
+        "@next/swc-android-arm64": "12.0.7",
+        "@next/swc-darwin-arm64": "12.0.7",
+        "@next/swc-darwin-x64": "12.0.7",
+        "@next/swc-linux-arm-gnueabihf": "12.0.7",
+        "@next/swc-linux-arm64-gnu": "12.0.7",
+        "@next/swc-linux-arm64-musl": "12.0.7",
+        "@next/swc-linux-x64-gnu": "12.0.7",
+        "@next/swc-linux-x64-musl": "12.0.7",
+        "@next/swc-win32-arm64-msvc": "12.0.7",
+        "@next/swc-win32-ia32-msvc": "12.0.7",
+        "@next/swc-win32-x64-msvc": "12.0.7",
         "acorn": "8.5.0",
         "assert": "2.0.0",
         "browserify-zlib": "0.2.0",
@@ -8702,7 +8702,7 @@
         "use-subscription": "1.5.1",
         "util": "0.12.4",
         "vm-browserify": "1.1.2",
-        "watchpack": "2.1.1"
+        "watchpack": "2.3.0"
       }
     },
     "node-fetch": {
@@ -9716,9 +9716,9 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
     "watchpack": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
-      "integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz",
+      "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==",
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"

package.json

@@ -8,7 +8,7 @@
     "lint": "npx next lint"
   },
   "dependencies": {
-    "next": "12.0.4",
+    "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

pages/_app.tsx

@@ -1,8 +1,38 @@
-import type { AppProps } from 'next/app'
-import "../styles/globals.css"
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <>
+    <Head>
+      <meta charSet="utf-8"/>
+      <meta name="description" content="This is the homepage of C0ntroller." />
+      <meta name="keyword" content="private, homepage, cli, hacker, terminal, javascript, js, nextjs, react, responsive" />
+      <meta name="author" content="C0ntroller" />
+      <meta name="copyright" content="C0ntroller" />
+      <meta name="robots" content="index,nofollow" />
+
+      <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+      <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+      <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+      <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+      <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
+      <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
+      <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
+      <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
+      <link rel="icon" type="image/png" sizes="192x192"  href="/android-chrome-192x192.png" />
+      <link rel="icon" type="image/png" sizes="512x512"  href="/android-chrome-512x512.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+      <link rel="manifest" href="/manifest.json" />
+      <meta name="msapplication-TileColor" content="#444444" />
+      <meta name="msapplication-TileImage" content="/mstile-310x310.png" />
+      <meta name="theme-color" content="#444444" />
+    </Head>
+    <Component {...pageProps} />;
+  </>;
 }
 
-export default MyApp
+export default MyApp;

pages/api/hello.ts

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
   name: string
@@ -9,5 +9,5 @@ export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }

pages/index.tsx

@@ -1,9 +1,17 @@
-import type { NextPage } from 'next'
+import type { NextPage } from "next";
+import Head from "next/head";
+import REPL from "../components/REPL";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
-  return (
-    <>Hallu</>
-  )
-}
+  return (<>
+    <Head>
+      <title>c0ntroller.de</title>
+    </Head>
+    <div className={styles.container}>
+      <REPL />
+    </div>
+  </>);
+};
 
-export default Home
+export default Home;

public/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "c0ntroller.de",
+  "short_name": "c0ntroller.de",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#444444",
+  "background_color": "#444444",
+  "display": "standalone"
+}

public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

styles/Home.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    padding: 10px;
+}

styles/REPL/REPLHistory.module.css

@@ -0,0 +1,16 @@
+.container {
+    overflow: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 2;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
+}
+
+.line {
+    padding: 3px 0;
+    white-space: pre-wrap;
+    font-family: inherit;
+    display: block;
+    margin: 0;
+}

styles/REPL/REPLInput.module.css

@@ -0,0 +1,69 @@
+.wrapper > input, .wrapper > span {
+    padding: .125rem 0;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    color: var(--repl-color);
+}
+
+.wrapper {
+    position: relative;
+    flex-grow: 2;
+    display: block;
+}
+
+.wrapperwrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.inputstart {
+    padding: .125rem 0;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
+}
+
+.in {
+    border: 0;
+    background: transparent;
+    width: 100%;
+    appearance: none !important;
+    caret-color: var(--repl-color);
+    outline: none;
+}
+
+.in::-moz-focus-outer, .in::-moz-focus-inner, .in:focus, .in:focus *, .in:-moz-focusring, .in:-moz-focusring * {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.completionWrapper {
+    position: absolute;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    width: min-content;
+}
+
+.completionWrapper span {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.typed {
+    opacity: 0;
+    flex-shrink: 1;
+    overflow-x: hidden;
+}
+
+.completion {
+    color: var(--repl-color-hint);
+    flex-grow: 1;
+}

styles/globals.css

@@ -1,4 +1,17 @@
 @font-face {
-    font-family: CascadiaCode;
-    src: url(fonts/CascadiaCode.woff2);
-  }
+  font-family: CascadiaCode;
+  src: url(fonts/CascadiaCode.woff2);
+}
+
+* {
+  box-sizing: border-box;
+  --repl-color: #188a18;
+  --repl-color-hint: #092909;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--repl-color);
+  background: #000;
+}