Add save function

components/ProjectModal.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState, isValidElement } from "react";
 import { useRouter } from "next/router";
 import styles from "../styles/ProjectModal.module.css";
 import type { Project, Diary } from "../lib/content/types";
-import { useCommands } from "./contexts/CommandInterface";
+import { useCommands } from "../lib/commands/ContextProvider";
 import { generateContent, projectEmpty } from "../lib/content/generate";
 import { useModalFunctions } from "./contexts/ModalFunctions";
 import Spinner from "./Spinner";

components/REPL/REPLHistory.tsx

@@ -87,7 +87,7 @@ const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
     };
 
     return <div className={styles.container} onClick={focusInput}>
-        { history.map((value, idx) => <div className={styles.line} key={idx}>
+        { history.map((value, idx) => <div className={styles.line} key={`${idx}${value}`}>
                 {parseLine(value)}
             </div>)
         }

components/REPL/REPLInput.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from "next";
-import { MutableRefObject, useState, createRef } from "react";
+import { MutableRefObject, useState, createRef, useEffect } from "react";
 import { CommandInterface } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
-import { useCommands } from "../contexts/CommandInterface";
+import { useCommands } from "../../lib/commands/ContextProvider";
 import { useModalFunctions } from "../contexts/ModalFunctions";
 
 interface REPLInputParams {
@@ -19,9 +19,11 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
     const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
     const [cmdHistory, setCmdHistory] = useState<string[]>([]);
     const [usrInputTmp, setUsrInputTmp] = useState<string>("");
-    const {cmdContext: cmdIf} = useCommands();
+    const {cmdContext: cmdIf, updateCallbacks} = useCommands();
     const { modalFunctions } = useModalFunctions();
 
+    updateCallbacks({ getCmdHistory: () => cmdHistory });
+
     const setInput = (inputRef: HTMLInputElement, input: string) => {
         const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
         if (!nativeSetter) return;
@@ -145,6 +147,16 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
         }
     };
 
+    useEffect(() => {
+        if (!window || !cmdIf) return;
+        const color = window.localStorage.getItem("color");
+        if(color) cmdIf.executeCommand(`color ${color}`);
+        const history = window.localStorage.getItem("history");
+        try {
+            if (history) setCmdHistory(JSON.parse(history));     
+        } catch {}
+    }, [cmdIf]);
+
     return <div className={styles.wrapperwrapper}>
         <span className={styles.inputstart}>$&nbsp;</span>
         <div className={styles.wrapper}>

components/REPL/index.tsx

@@ -2,7 +2,8 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import REPLInput from "./REPLInput";
 import REPLHistory from "./REPLHistory";
 import styles from "../../styles/REPL/REPLComplete.module.css";
-import type { NextPage, GetStaticProps } from "next";
+import type { NextPage } from "next";
+import { useCommands } from "../../lib/commands/ContextProvider";
 
 interface IREPLProps {
     inputRef: MutableRefObject<HTMLInputElement|null>;
@@ -12,6 +13,7 @@ interface IREPLProps {
 const REPL: NextPage<IREPLProps> = ({ inputRef, buildTime }) => {
     const [history, manipulateHistory] = useState<string[]>([`cer0 0S - Build ${buildTime}`]);
     const containerRef = useRef<HTMLDivElement>(null);
+
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
     const onClearHistory = () => manipulateHistory([]);
 

lib/commands/ContextProvider.tsx

@@ -1,13 +1,8 @@
 import { createContext, useContext } from "react";
 import type { PropsWithChildren } from "react";
-import { CommandInterface } from "../../lib/commands";
+import { CommandInterface } from ".";
-import type { Diary, Project, ContentList } from "../../lib/content/types";
+import type { ContentList } from "../content/types";
-
+import type { CommandInterfaceCallbacks } from "./types";
-interface CommandInterfaceCallbacks {
-    setModalVisible?: (visible: boolean) => void; 
-    setModalContent?: (content: Project | Diary, selectedPage?: number) => void;
-    setModalHTML?: (html: any) => void;
-}
 
 const commandInterface = new CommandInterface();
 const CommandContext = createContext(commandInterface);

lib/commands/definitions.ts

@@ -210,6 +210,19 @@ const clear: Command = {
     execute: () => []
 };
 
+const getColors = () => {
+    const replColor = window.document.documentElement.style.getPropertyValue("--repl-color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color") || "rgb(24, 138, 24)";
+    const linkColor = window.document.documentElement.style.getPropertyValue("--repl-color-link") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-link") || "rgb(31, 179, 31)";
+    const hintColor = window.document.documentElement.style.getPropertyValue("--repl-color-hint") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-hint") || "rgba(24, 138, 24, 0.3)";
+    return [replColor, linkColor, hintColor];
+};
+
+const setColors = (color: Color) => {
+    window?.document.documentElement.style.setProperty("--repl-color", color.string());
+    window?.document.documentElement.style.setProperty("--repl-color-link", color.lighten(0.3).rgb().string());
+    window?.document.documentElement.style.setProperty("--repl-color-hint", color.fade(0.7).string());
+};
+
 const color: Command = {
     name: "color",
     desc: "Changes the color of the site.",
@@ -219,7 +232,15 @@ const color: Command = {
     },
     execute: (_flags, args, _raw, cmdIf) => {
         if (!window || !window.document) return [];
-        if (args.length !== 1) return printSyntax(color);
+        if (args.length === 0) {
+            const colors = getColors();
+            return [
+                "Current colors:",
+                `Text:\t\t${colors[0]}`,
+                `Links:\t\t${colors[1]}`,
+                `Completion:\t${colors[2]}`
+            ];
+        }
         if (args[0] === "reset") {
             window.document.documentElement.style.removeProperty("--repl-color");
             window.document.documentElement.style.removeProperty("--repl-color-link");
@@ -228,15 +249,12 @@ const color: Command = {
         } else {
             let color: Color;
             try {
-                color = Color(args.join().trim());
+                color = Color(args.join(" ").trim());
             } catch {
                 return ["Invalid color!"];
             }
-            window?.document.documentElement.style.setProperty("--repl-color", color.string());
+            setColors(color);
-            window?.document.documentElement.style.setProperty("--repl-color-link", color.lighten(0.3).rgb().string());
-            window?.document.documentElement.style.setProperty("--repl-color-hint", color.fade(0.7).string());
 
-            console.log(color.hex().toLowerCase());
             switch(true) {
                 case color.hex().toLowerCase() === "#1f1e33": {
                     // eslint-disable-next-line quotes
@@ -251,4 +269,43 @@ const color: Command = {
     }
 };
 
-export const commandList = [about, help, man, project, exitCmd, clear, color].sort((a, b) => a.name.localeCompare(b.name));
+const save: Command = {
+    name: "save",
+    desc: "Saves the current color and command history to local storage.",
+    subcommands: {
+        clear: { name: "clear", desc: "Clear the saved data." },
+        confirm: { name: "confirm", desc: "You explicitly confirm, you allow saving to the local storage." }
+    },
+    execute: (_flags, args, _raw, cmdIf) => {
+        const defaultRet = [
+            "You can save the current color and command history to local storage.", 
+            "To do so, use %{save confirm}.",
+            "By using this command above you agree on saving the non-functional data to local storage.",
+            "The data will never leave your computer!"
+        ];
+
+        if (args.length === 0) {
+            return defaultRet;
+        } else if (args[0] === "clear") {
+            window.localStorage.clear();
+            return ["Colors and history removed from storage."];
+        } else if (args[0] === "confirm") {
+            const result = [];
+
+            const currentColors = getColors();
+            const color = new Color(currentColors[0]);
+            if(color.contrast(new Color("#000")) === 1 || color.alpha() < 0.1) result.push("Skipping saving the color because it's too dark.");
+            else window.localStorage.setItem("color", currentColors[0]);
+
+            const history = cmdIf.callbacks?.getCmdHistory ? cmdIf.callbacks.getCmdHistory() : [];
+            window.localStorage.setItem("history", JSON.stringify(history));
+
+            result.push("Colors and history saved to storage.");
+            return result;
+        } else {
+            return printSyntax(save);
+        }
+    },
+};
+
+export const commandList = [about, help, man, project, exitCmd, clear, color, save].sort((a, b) => a.name.localeCompare(b.name));

lib/commands/index.ts

@@ -1,11 +1,6 @@
-import type { ContentList, Diary, Project } from "../content/types";
+import type { ContentList } from "../content/types";
 import { printSyntax, commandList } from "./definitions";
-
+import { CommandInterfaceCallbacks } from "./types";
-interface CommandInterfaceCallbacks {
-    setModalVisible?: (visible: boolean) => void; 
-    setModalContent?: (content: Project|Diary, selectedPage?: number) => void;
-    setModalHTML?: (html: string) => void;
-}
 
 export class CommandInterface {
     callbacks?: CommandInterfaceCallbacks;

lib/commands/types.tsx

@@ -1,4 +1,5 @@
 import type { CommandInterface } from ".";
+import type { Diary, Project } from "../content/types";
 
 export interface Flag {
     short: string;
@@ -19,3 +20,10 @@ export interface Command {
     subcommands?: Record<string,SubCommand>;
     execute: (flags: string[], args: string[], raw: string, cmdIf: CommandInterface) => string[];
 }
+
+export interface CommandInterfaceCallbacks {
+    setModalVisible?: (visible: boolean) => void; 
+    setModalContent?: (content: Project | Diary, selectedPage?: number) => void;
+    setModalHTML?: (html: any) => void;
+    getCmdHistory?: () => string[];
+}

pages/_app.tsx

@@ -2,7 +2,7 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import "../styles/globals.css";
 import "../styles/customAsciidoc.scss";
-import { CommandsProvider } from "../components/contexts/CommandInterface";
+import { CommandsProvider } from "../lib/commands/ContextProvider";
 import { ModalFunctionProvider } from "../components/contexts/ModalFunctions";
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/index.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
 import { useEffect, useRef,useCallback } from "react";
-import { useCommands } from "../components/contexts/CommandInterface";
+import { useCommands } from "../lib/commands/ContextProvider";
 import { useModalFunctions } from "../components/contexts/ModalFunctions";
 import ProjectModal from "../components/ProjectModal";
 import REPL from "../components/REPL";