From 94f31043f2e64655df30024f5c396a4f28581968 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Sun, 12 Jun 2022 14:55:48 +0200 Subject: [PATCH] Add color command --- lib/commands/definitions.ts | 59 +++++++++++++----- package-lock.json | 115 ++++++++++++++++++++++++++++++++++++ package.json | 2 + styles/globals.css | 9 ++- 4 files changed, 167 insertions(+), 18 deletions(-) diff --git a/lib/commands/definitions.ts b/lib/commands/definitions.ts index 6233848..d1f80fc 100644 --- a/lib/commands/definitions.ts +++ b/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."}, - source: {short: "s", long: "source", desc: "Open git repository of project."}, - list: {short: "l", long: "list", desc: "\tShow list of projects."} + 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: "\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)); \ No newline at end of file +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)); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6866fd7..2fddd3b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 977f71c..f243cb0 100644 --- a/package.json +++ b/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", diff --git a/styles/globals.css b/styles/globals.css index b1a21a7..fb3669d 100644 --- a/styles/globals.css +++ b/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 {