Add color command

lib/commands/definitions.ts

@@ -1,7 +1,8 @@
 import type { Diary, Project } from "../content/types";
 import type { Command, Flag } from "./types";
+import Color from "color";
 
-function getCommandByName(name: string): Command|undefined {
+function getCommandByName(name: string): Command | undefined {
     return commandList.find(cmd => cmd.name === name);
 }
 
@@ -18,7 +19,7 @@ function checkFlags(flags: string[], cmd: Command): boolean {
     if (!cmd.flags) return false;
 
     for (const flag of flags) {
-        const isLong = flag.substring(0,2) === "--";
+        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;
     }
@@ -52,7 +53,7 @@ export function printSyntax(cmd: Command): string[] {
             flagsOption += `-${flag.short} `;
             flagsDesc.push(`\t-${flag.short}\t--${flag.long}\t${flag.desc}`);
         }));
-        flagsOption = flagsOption.substring(0, flagsOption.length-1) + "]";
+        flagsOption = flagsOption.substring(0, flagsOption.length - 1) + "]";
     }
 
     let subcmdOption = "";
@@ -65,10 +66,10 @@ export function printSyntax(cmd: Command): string[] {
             subcmdOption += `${subcmd.name}|`;
             subcmdDesc.push(`\t${subcmd.name}\t${subcmd.desc}`);
         }));
-        subcmdOption = subcmdOption.substring(0, subcmdOption.length-1) + "]";
+        subcmdOption = subcmdOption.substring(0, subcmdOption.length - 1) + "]";
     }
 
-    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc);   
+    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc);
 }
 
 const about: Command = {
@@ -95,7 +96,7 @@ const about: Command = {
 const help: Command = {
     name: "help",
     desc: "Shows helptext.",
-    flags: {more: { long: "this", short: "t", desc: "Show information about this site." }},
+    flags: { more: { long: "this", short: "t", desc: "Show information about this site." } },
     execute: (flags) => {
         if (help.flags && checkFlagInclude(flags, help.flags.more)) {
             return [
@@ -122,7 +123,7 @@ const man: Command = {
     name: "man",
     desc: "Provides a manual for a command.",
     subcommands: {
-        command: {name: "command", desc: "Name of a command"}
+        command: { name: "command", desc: "Name of a command" }
     },
     execute: (_flags, args) => {
         if (args.length !== 1) {
@@ -139,22 +140,22 @@ const project: Command = {
     name: "project",
     desc: "Show information about a project.",
     flags: {
-        minimal: {short: "m", long: "minimal", desc: "Only show minimal information."},
+        minimal: { short: "m", long: "minimal", desc: "Only show minimal information." },
-        source: {short: "s", long: "source", desc: "Open git repository of project."},
+        source: { short: "s", long: "source", desc: "Open git repository of project." },
-        list: {short: "l", long: "list", desc: "\tShow list of projects."}
+        list: { short: "l", long: "list", desc: "\tShow list of projects." }
     },
-    subcommands: {name: {name: "name", desc: "Name of the project."}},
+    subcommands: { name: { name: "name", desc: "Name of the project." } },
     execute: (flags, args, _raw, cmdIf) => {
         if (project.flags && checkFlagInclude(flags, project.flags.list)) {
             const result = ["Found the following projects:"];
 
             const projects = cmdIf.content.filter(p => p.type === "project");
-            if(projects.length === 0) result.push("\tNo projects found.");
+            if (projects.length === 0) result.push("\tNo projects found.");
             else projects.forEach(project => result.push(`\t${project.name}\t${project.short_desc}`));
 
             result.push("And the following diaries:");
             const diaries = cmdIf.content.filter(p => p.type === "diary");
-            if(diaries.length === 0) result.push("\tNo diaries found.");
+            if (diaries.length === 0) result.push("\tNo diaries found.");
             else diaries.forEach(diary => result.push(`\t${diary.name}\t${diary.short_desc}`));
 
             return result;
@@ -164,7 +165,7 @@ const project: Command = {
 
         if (args[0] === "this") args[0] = "homepage";
 
-        let [pjt] = [cmdIf.content.find(p => p.name === args[0]) as Project|Diary|undefined];
+        let [pjt] = [cmdIf.content.find(p => p.name === args[0]) as Project | Diary | undefined];
         if (!pjt) return [
             `Cannot find project ${args[0]}!`,
             "You can see available projects using 'project -l'."
@@ -209,4 +210,32 @@ const clear: Command = {
     execute: () => []
 };
 
-export const commandList = [about, help, man, project, exitCmd, clear].sort((a, b) => a.name.localeCompare(b.name));
+const color: Command = {
+    name: "color",
+    desc: "Changes the color of the site.",
+    subcommands: {
+        reset: { name: "reset", desc: "Resets the color." },
+    },
+    execute: (_flags, args, _raw, _cmdIf) => {
+        if (!window || !window.document) return [];
+        if (args.length !== 1) return printSyntax(color);
+        if (args[0] === "reset") {
+            window.document.documentElement.style.removeProperty("--repl-color");
+            window.document.documentElement.style.removeProperty("--repl-color-link");
+            window.document.documentElement.style.removeProperty("--repl-color-hint");
+            return ["Color reset."];
+        } else {
+            try {
+                const color = Color(args.join().trim());
+                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());
+            } catch {
+                return ["Invalid color!"];
+            }
+            return ["Color set.", "#{Link|https://google.de}.", "%{command}"];
+        }
+    }
+};
+
+export const commandList = [about, help, man, project, exitCmd, clear, color].sort((a, b) => a.name.localeCompare(b.name));

package-lock.json

@@ -7,6 +7,7 @@
       "name": "c0ntroller.de",
       "dependencies": {
         "asciidoctor": "^2.2.5",
+        "color": "^4.2.3",
         "next": "12.1.0",
         "node-fetch": "^3.2.0",
         "phosphor-react": "^1.3.1",
@@ -15,6 +16,7 @@
         "swr": "^1.1.2"
       },
       "devDependencies": {
+        "@types/color": "^3.0.3",
         "@types/node": "16.11.11",
         "@types/react": "17.0.37",
         "eslint": "7.32.0",
@@ -464,6 +466,30 @@
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "node_modules/@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -959,6 +985,18 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -975,6 +1013,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2022,6 +2069,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -3088,6 +3140,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3826,6 +3886,30 @@
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "dev": true,
+      "requires": {
+        "@types/color-convert": "*"
+      }
+    },
+    "@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "dev": true,
+      "requires": {
+        "@types/color-name": "*"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4167,6 +4251,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4180,6 +4273,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4973,6 +5075,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -5697,6 +5804,14 @@
         "object-inspect": "^1.9.0"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "asciidoctor": "^2.2.5",
+    "color": "^4.2.3",
     "next": "12.1.0",
     "node-fetch": "^3.2.0",
     "phosphor-react": "^1.3.1",
@@ -17,6 +18,7 @@
     "swr": "^1.1.2"
   },
   "devDependencies": {
+    "@types/color": "^3.0.3",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "eslint": "7.32.0",

styles/globals.css

@@ -5,9 +5,12 @@
 
 * {
   box-sizing: border-box !important;
-  --repl-color: #188a18;
+}
-  --repl-color-link: #2ac02a;
+
-  --repl-color-hint: #092909;
+:root {  
+  --repl-color: rgb(24, 138, 24);
+  --repl-color-link: rgb(31, 179, 31);
+  --repl-color-hint: rgba(24, 138, 24, 0.3);
 }
 
 body {