From eca859eb9a89bc225f3c53289670f8b69b1a0b8f Mon Sep 17 00:00:00 2001 From: Rick van der Staaij Date: Fri, 20 Mar 2026 20:12:51 +0100 Subject: [PATCH 1/6] Add subtaskfile setup in the generator --- README.md | 15 +- dev/linting/eslint.config.mjs | 2 +- package-lock.json | 165 +++++++----------- src/components/Generator/Generator.tsx | 16 +- .../Generator/Settings/Settings.tsx | 2 + .../Generator/generator.module.scss | 15 ++ src/components/Window/window.module.scss | 1 + 7 files changed, 104 insertions(+), 112 deletions(-) diff --git a/README.md b/README.md index 08f37cb..c3bc0ee 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Taskfile ([taskfile.sh](https://taskfile.sh)) -A `./Taskfile` is a task runner in plain and easy [Bash](https://en.wikipedia.org/wiki/Bash_(Unix_shell)). It adds a list of -available tasks to your project. +A `./Taskfile` is a task runner in plain and easy [Bash](). It adds a +list of available tasks to your project. Generate your own Taskfile at [taskfile.sh](https://taskfile.sh). @@ -57,6 +57,7 @@ Running `./Taskfile help`, the `task:help` function is triggered. This task will using the double `##` comments you've learned about above. Now it's clear how you can run any other task! # Advanced + ## Auto-completion Autocompletion works when you use `zsh` and `oh-my-zsh`. Create the following file in your oh-my-zsh directory @@ -85,12 +86,12 @@ Now after running `task shorthand`, your `task` commands will get autocompleted. ## SubTaskfiles -SubTaskfiles allow you to divide your tasks across multiple files while still calling them from a single entrypoint -(a familiar, regular Taskfile). +SubTaskfiles allow you to divide your tasks across multiple files while still calling them from a single entrypoint (a +familiar, regular Taskfile). -Use them to split off groups of tasks that can be logically grouped together, like for specific use-cases or because they are rarely -used. For example: git-hooks, frontend- / backend-specific tasks, tasks for (infrequently occurring) procedures, -CI-only tasks, etc. +Use them to split off groups of tasks that can be logically grouped together, like for specific use-cases or because +they are rarely used. For example: git-hooks, frontend- / backend-specific tasks, tasks for (infrequently occurring) +procedures, CI-only tasks, etc. Tasks in SubTaskfiles are never called directly, but "via" a task in the root Taskfile, like this: `Usage: ./Taskfile foo ` diff --git a/dev/linting/eslint.config.mjs b/dev/linting/eslint.config.mjs index 6f698a5..b96b125 100644 --- a/dev/linting/eslint.config.mjs +++ b/dev/linting/eslint.config.mjs @@ -63,6 +63,6 @@ export default [ }, }, { - ignores: ['.next/', 'out/'], + ignores: ['.next/', 'out/', 'next-env.d.ts'], }, ]; diff --git a/package-lock.json b/package-lock.json index dac33a4..04c93b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -759,9 +759,9 @@ } }, "node_modules/@next/env": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.12.tgz", - "integrity": "sha512-pUvdJN1on574wQHjaBfNGDt9Mz5utDSZFsIIQkMzPgNS8ZvT4H2mwOrOIClwsQOb6EGx5M76/CZr6G8i6pSpLg==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.14.tgz", + "integrity": "sha512-aXeirLYuASxEgi4X4WhfXsShCFxWDfNn/8ZeC5YXAS2BB4A8FJi1kwwGL6nvMVboE7fZCzmJPNdMvVHc8JpaiA==", "license": "MIT" }, "node_modules/@next/eslint-plugin-next": { @@ -775,9 +775,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.12.tgz", - "integrity": "sha512-RnRjBtH8S8eXCpUNkQ+543DUc7ys8y15VxmFU9HRqlo9BG3CcBUiwNtF8SNoi2xvGCVJq1vl2yYq+3oISBS0Zg==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.14.tgz", + "integrity": "sha512-Y9K6SPzobnZvrRDPO2s0grgzC+Egf0CqfbdvYmQVaztV890zicw8Z8+4Vqw8oPck8r1TjUHxVh8299Cg4TrxXg==", "cpu": [ "arm64" ], @@ -791,9 +791,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.12.tgz", - "integrity": "sha512-nqa9/7iQlboF1EFtNhWxQA0rQstmYRSBGxSM6g3GxvxHxcoeqVXfGNr9stJOme674m2V7r4E3+jEhhGvSQhJRA==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.14.tgz", + "integrity": "sha512-aNnkSMjSFRTOmkd7qoNI2/rETQm/vKD6c/Ac9BZGa9CtoOzy3c2njgz7LvebQJ8iPxdeTuGnAjagyis8a9ifBw==", "cpu": [ "x64" ], @@ -807,9 +807,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.12.tgz", - "integrity": "sha512-dCzAjqhDHwmoB2M4eYfVKqXs99QdQxNQVpftvP1eGVppamXh/OkDAwV737Zr0KPXEqRUMN4uCjh6mjO+XtF3Mw==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.14.tgz", + "integrity": "sha512-tjlpia+yStPRS//6sdmlVwuO1Rioern4u2onafa5n+h2hCS9MAvMXqpVbSrjgiEOoCs0nJy7oPOmWgtRRNSM5Q==", "cpu": [ "arm64" ], @@ -823,9 +823,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.12.tgz", - "integrity": "sha512-+fpGWvQiITgf7PUtbWY1H7qUSnBZsPPLyyq03QuAKpVoTy/QUx1JptEDTQMVvQhvizCEuNLEeghrQUyXQOekuw==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.14.tgz", + "integrity": "sha512-8B8cngBaLadl5lbDRdxGCP1Lef8ipD6KlxS3v0ElDAGil6lafrAM3B258p1KJOglInCVFUjk751IXMr2ixeQOQ==", "cpu": [ "arm64" ], @@ -839,9 +839,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.12.tgz", - "integrity": "sha512-jSLvgdRRL/hrFAPqEjJf1fFguC719kmcptjNVDJl26BnJIpjL3KH5h6mzR4mAweociLQaqvt4UyzfbFjgAdDcw==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.14.tgz", + "integrity": "sha512-bAS6tIAg8u4Gn3Nz7fCPpSoKAexEt2d5vn1mzokcqdqyov6ZJ6gu6GdF9l8ORFrBuRHgv3go/RfzYz5BkZ6YSQ==", "cpu": [ "x64" ], @@ -855,9 +855,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.12.tgz", - "integrity": "sha512-/uaF0WfmYqQgLfPmN6BvULwxY0dufI2mlN2JbOKqqceZh1G4hjREyi7pg03zjfyS6eqNemHAZPSoP84x17vo6w==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.14.tgz", + "integrity": "sha512-mMxv/FcrT7Gfaq4tsR22l17oKWXZmH/lVqcvjX0kfp5I0lKodHYLICKPoX1KRnnE+ci6oIUdriUhuA3rBCDiSw==", "cpu": [ "x64" ], @@ -871,9 +871,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.12.tgz", - "integrity": "sha512-xhsL1OvQSfGmlL5RbOmU+FV120urrgFpYLq+6U8C6KIym32gZT6XF/SDE92jKzzlPWskkbjOKCpqk5m4i8PEfg==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.14.tgz", + "integrity": "sha512-OTmiBlYThppnvnsqx0rBqjDRemlmIeZ8/o4zI7veaXoeO1PVHoyj2lfTfXTiiGjCyRDhA10y4h6ZvZvBiynr2g==", "cpu": [ "arm64" ], @@ -887,9 +887,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.12.tgz", - "integrity": "sha512-Z1Dh6lhFkxvBDH1FoW6OU/L6prYwPSlwjLiZkExIAh8fbP6iI/M7iGTQAJPYJ9YFlWobCZ1PHbchFhFYb2ADkw==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.14.tgz", + "integrity": "sha512-+W7eFf3RS7m4G6tppVTOSyP9Y6FsJXfOuKzav1qKniiFm3KFByQfPEcouHdjlZmysl4zJGuGLQ/M9XyVeyeNEg==", "cpu": [ "x64" ], @@ -1391,6 +1391,7 @@ "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.56.0", "@typescript-eslint/types": "8.56.0", @@ -1512,13 +1513,13 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "version": "9.0.9", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz", + "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==", "dev": true, "license": "ISC", "dependencies": { - "brace-expansion": "^2.0.1" + "brace-expansion": "^2.0.2" }, "engines": { "node": ">=16 || 14 >=14.17" @@ -1723,13 +1724,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", - "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "version": "9.0.9", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz", + "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==", "dev": true, "license": "ISC", "dependencies": { - "brace-expansion": "^2.0.1" + "brace-expansion": "^2.0.2" }, "engines": { "node": ">=16 || 14 >=14.17" @@ -1978,9 +1979,9 @@ } }, "node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz", + "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==", "license": "MIT", "peer": true, "dependencies": { @@ -3178,6 +3179,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -3590,9 +3592,9 @@ } }, "node_modules/flatted": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz", - "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", + "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==", "dev": true, "license": "ISC" }, @@ -3909,9 +3911,9 @@ } }, "node_modules/immutable": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", - "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", + "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", "devOptional": true, "license": "MIT" }, @@ -4676,9 +4678,9 @@ } }, "node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", + "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==", "dev": true, "license": "ISC", "dependencies": { @@ -4737,12 +4739,12 @@ "license": "MIT" }, "node_modules/next": { - "version": "15.5.12", - "resolved": "https://registry.npmjs.org/next/-/next-15.5.12.tgz", - "integrity": "sha512-Fi/wQ4Etlrn60rz78bebG1i1SR20QxvV8tVp6iJspjLUSHcZoeUXCt+vmWoEcza85ElZzExK/jJ/F6SvtGktjA==", + "version": "15.5.14", + "resolved": "https://registry.npmjs.org/next/-/next-15.5.14.tgz", + "integrity": "sha512-M6S+4JyRjmKic2Ssm7jHUPkE6YUJ6lv4507jprsSZLulubz0ihO2E+S4zmQK3JZ2ov81JrugukKU4Tz0ivgqqQ==", "license": "MIT", "dependencies": { - "@next/env": "15.5.12", + "@next/env": "15.5.14", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", @@ -4755,14 +4757,14 @@ "node": "^18.18.0 || ^19.8.0 || >= 20.0.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "15.5.12", - "@next/swc-darwin-x64": "15.5.12", - "@next/swc-linux-arm64-gnu": "15.5.12", - "@next/swc-linux-arm64-musl": "15.5.12", - "@next/swc-linux-x64-gnu": "15.5.12", - "@next/swc-linux-x64-musl": "15.5.12", - "@next/swc-win32-arm64-msvc": "15.5.12", - "@next/swc-win32-x64-msvc": "15.5.12", + "@next/swc-darwin-arm64": "15.5.14", + "@next/swc-darwin-x64": "15.5.14", + "@next/swc-linux-arm64-gnu": "15.5.14", + "@next/swc-linux-arm64-musl": "15.5.14", + "@next/swc-linux-x64-gnu": "15.5.14", + "@next/swc-linux-x64-musl": "15.5.14", + "@next/swc-win32-arm64-msvc": "15.5.14", + "@next/swc-win32-x64-msvc": "15.5.14", "sharp": "^0.34.3" }, "peerDependencies": { @@ -5158,15 +5160,6 @@ ], "license": "MIT" }, - "node_modules/randombytes": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", - "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "license": "MIT", - "dependencies": { - "safe-buffer": "^5.1.0" - } - }, "node_modules/raw-loader": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", @@ -5393,26 +5386,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, "node_modules/safe-push-apply": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz", @@ -5507,15 +5480,6 @@ "node": ">=10" } }, - "node_modules/serialize-javascript": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", - "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", - "license": "BSD-3-Clause", - "dependencies": { - "randombytes": "^2.1.0" - } - }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -5985,15 +5949,14 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.16", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz", - "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.4.0.tgz", + "integrity": "sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==", "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", "schema-utils": "^4.3.0", - "serialize-javascript": "^6.0.2", "terser": "^5.31.1" }, "engines": { diff --git a/src/components/Generator/Generator.tsx b/src/components/Generator/Generator.tsx index c0d97a8..aaea597 100644 --- a/src/components/Generator/Generator.tsx +++ b/src/components/Generator/Generator.tsx @@ -17,6 +17,7 @@ export type GeneratorSettings = { developmentProxy: boolean; checkoutGitRequest: 'none' | 'github' | 'gitlab'; configureGitHooks: boolean; + subTaskfile: boolean; fileUtilities: boolean; appUtilities: boolean; }; @@ -32,14 +33,23 @@ const Generator = (): ReactElement => { }, }); + const hasSubTaskfile = form.watch('subTaskfile'); + return (
{})}> - - - +
+ + + + {hasSubTaskfile && ( + + Sub taskfile preview + + )} +
); }; diff --git a/src/components/Generator/Settings/Settings.tsx b/src/components/Generator/Settings/Settings.tsx index 4481524..fb26759 100644 --- a/src/components/Generator/Settings/Settings.tsx +++ b/src/components/Generator/Settings/Settings.tsx @@ -80,6 +80,8 @@ const Settings = (): ReactElement => { ]} /> Configure git hooks +

Sub Taskfile

+ Include Sub Taskfile

Utilities

File checks Application dependencies diff --git a/src/components/Generator/generator.module.scss b/src/components/Generator/generator.module.scss index 448cd69..67085f5 100644 --- a/src/components/Generator/generator.module.scss +++ b/src/components/Generator/generator.module.scss @@ -39,3 +39,18 @@ flex-shrink: 1; height: 100%; } + +.outputContainer { + display: flex; + flex-direction: column; + gap: 2rem; + flex-grow: 1; + flex-shrink: 1; + height: 100%; + width: 100%; + overflow: hidden; + + @include from(large) { + max-height: calc(100dvh - 11.5rem); + } +} diff --git a/src/components/Window/window.module.scss b/src/components/Window/window.module.scss index 0018bb7..20c22a6 100644 --- a/src/components/Window/window.module.scss +++ b/src/components/Window/window.module.scss @@ -10,6 +10,7 @@ outline: 1px solid rgb(255 255 255 / 0.2); overflow: hidden; background-color: #fff; + min-height: 20rem; @include from(large) { max-height: calc(100dvh - 11.5rem); From d15ce4316fd4348e09042f2c75f9f5d90f604f8d Mon Sep 17 00:00:00 2001 From: Rick van der Staaij Date: Fri, 20 Mar 2026 20:28:27 +0100 Subject: [PATCH 2/6] Add subtaskfile content --- .../Form/Checkbox/checkbox.module.css | 4 ++++ src/components/Generator/Generator.tsx | 3 ++- .../Generator/GeneredTaskfile/SubTaskfile.tsx | 19 +++++++++++++++++++ .../GeneredTaskfile/sub-taskfile-base.sh | 17 +++++++++++++++++ .../Generator/GeneredTaskfile/taskfile.ts | 5 +++++ src/components/Window/window.module.scss | 2 +- 6 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 src/components/Generator/GeneredTaskfile/SubTaskfile.tsx create mode 100644 src/components/Generator/GeneredTaskfile/sub-taskfile-base.sh diff --git a/src/components/Form/Checkbox/checkbox.module.css b/src/components/Form/Checkbox/checkbox.module.css index f76864b..7876e48 100644 --- a/src/components/Form/Checkbox/checkbox.module.css +++ b/src/components/Form/Checkbox/checkbox.module.css @@ -61,6 +61,10 @@ transform: translateY(-50%) scale(1); } +.checkbox input:checked + span { + background: #a1e1aa76; +} + .label { user-select: none; } diff --git a/src/components/Generator/Generator.tsx b/src/components/Generator/Generator.tsx index aaea597..de2e43d 100644 --- a/src/components/Generator/Generator.tsx +++ b/src/components/Generator/Generator.tsx @@ -9,6 +9,7 @@ import Settings from './Settings'; import GeneratedTaskfile from './GeneredTaskfile'; import Form from '@/components/Form'; import { Font } from './GeneredTaskfile/buildHeader'; +import SubTaskfile from '@/components/Generator/GeneredTaskfile/SubTaskfile'; export type GeneratorSettings = { project: string; @@ -46,7 +47,7 @@ const Generator = (): ReactElement => { {hasSubTaskfile && ( - Sub taskfile preview + )} diff --git a/src/components/Generator/GeneredTaskfile/SubTaskfile.tsx b/src/components/Generator/GeneredTaskfile/SubTaskfile.tsx new file mode 100644 index 0000000..2bb841b --- /dev/null +++ b/src/components/Generator/GeneredTaskfile/SubTaskfile.tsx @@ -0,0 +1,19 @@ +'use client'; + +import { ReactElement } from 'react'; +import { subTaskfile } from '@/components/Generator/GeneredTaskfile/taskfile'; +import SaveFile from './SaveFile'; +import { highlighter } from './Highlighter'; + +const SubTaskfile = (): ReactElement => { + const resultTaskfile = subTaskfile(); + + return ( + <> + + 
{highlighter(resultTaskfile)}
+ + ); +}; + +export default SubTaskfile; diff --git a/src/components/Generator/GeneredTaskfile/sub-taskfile-base.sh b/src/components/Generator/GeneredTaskfile/sub-taskfile-base.sh new file mode 100644 index 0000000..622b423 --- /dev/null +++ b/src/components/Generator/GeneredTaskfile/sub-taskfile-base.sh @@ -0,0 +1,17 @@ +#!/bin/bash +# ========================================================= +## Example sub task +# ========================================================= + +function task:example { ## This is an example sub task + title "Run example sub task" + echo -e "${GREEN}Success!${RESET}" +} + +# ========================================================= +# Sub Taskfile helper +# ========================================================= + +function task:subtasks-help { # Show all available tasks + task:help "$SUBTASKFILE_DIR/SubTaskfile" +} diff --git a/src/components/Generator/GeneredTaskfile/taskfile.ts b/src/components/Generator/GeneredTaskfile/taskfile.ts index cb2941c..a3772ae 100644 --- a/src/components/Generator/GeneredTaskfile/taskfile.ts +++ b/src/components/Generator/GeneredTaskfile/taskfile.ts @@ -2,6 +2,7 @@ import { GeneratorSettings } from '@/components/Generator'; import buildHeaderFunction from './buildHeader'; import { renderUtilities } from './helpers'; import loadTemplate from '@/helpers/loadTemplate'; +import subTaskfileBase from './sub-taskfile-base.sh'; import taskfileBase from './taskfile-base.sh'; import customSection from './custom-section.sh'; import renderAddons from './addons'; @@ -59,3 +60,7 @@ export const taskfile = (settings: GeneratorSettings): string => { globals: renderFragment(addons.globals, `# Define global variables here`), }); }; + +export const subTaskfile = (): string => { + return loadTemplate(subTaskfileBase); +}; diff --git a/src/components/Window/window.module.scss b/src/components/Window/window.module.scss index 20c22a6..7d1ec01 100644 --- a/src/components/Window/window.module.scss +++ b/src/components/Window/window.module.scss @@ -10,7 +10,7 @@ outline: 1px solid rgb(255 255 255 / 0.2); overflow: hidden; background-color: #fff; - min-height: 20rem; + min-height: 24rem; @include from(large) { max-height: calc(100dvh - 11.5rem); From 948e2f75941a10b429c78fb672b20269506231e9 Mon Sep 17 00:00:00 2001 From: Rick van der Staaij Date: Fri, 20 Mar 2026 21:20:03 +0100 Subject: [PATCH 3/6] Style sub pages for docs --- README.md | 122 +-------------------- docs/auto-completion.md | 25 +++++ docs/how-does-it-work.md | 39 +++++++ docs/sub-taskfiles.md | 49 +++++++++ src/app/docs/auto-completion/page.tsx | 14 +++ src/app/docs/how-does-it-work/page.tsx | 14 +++ src/app/{about => docs}/page.tsx | 2 +- src/app/docs/sub-taskfiles/page.tsx | 14 +++ src/components/Content/Content.tsx | 54 +++++++-- src/components/Content/content.module.scss | 54 ++++++++- src/components/Desktop/Desktop.tsx | 4 +- 11 files changed, 261 insertions(+), 130 deletions(-) create mode 100644 docs/auto-completion.md create mode 100644 docs/how-does-it-work.md create mode 100644 docs/sub-taskfiles.md create mode 100644 src/app/docs/auto-completion/page.tsx create mode 100644 src/app/docs/how-does-it-work/page.tsx rename src/app/{about => docs}/page.tsx (90%) create mode 100644 src/app/docs/sub-taskfiles/page.tsx diff --git a/README.md b/README.md index c3bc0ee..7212035 100644 --- a/README.md +++ b/README.md @@ -16,130 +16,16 @@ Generate your own Taskfile at [taskfile.sh](https://taskfile.sh). - Easy to understand and maintain - Automatically generated list of available tasks -# How does it work? +## Documentation -Taskfiles are simple bash scripts, but an easy-to-read function format. There are some things that we need to explain -for our Taskfile setup. It all starts with a `Taskfile`. Download your `Taskfile` from -[taskfile.sh](https://taskfile.sh) and save it. Make sure the Taskfile is executable: `chmod +x ./Taskfile`. You can now -run `./Taskfile` in your terminal. +- [How does it work](/docs/how-does-it-work.md) -## Tasks - -A task is defined by creating a function that starts with `task:`. This defines a task that can be triggered by running -the `./Taskfile`. Right next to the task, you should add a task definition with two hashes. This will let the -`task:help` function know that you're writing the task function definition. So an example task will look like the -following: - -```shell -function task:example { ## Show some example text - title "Example" - echo "This is an example task." -} -``` - -In a task you can call other functions, and run all tooling you desire. Now running `./Taskfile example` will execute -the new task. - -## Sections - -To group multiple tasks, sections can be created in your Taskfile. A section is created by creating a comment line with -a double hashtag like so: - -```shell -## Project section -``` - -Lines with only a single `#` will not appear as section in `task:help` and can be seen as plain comments. - -## Help command - -Running `./Taskfile help`, the `task:help` function is triggered. This task will list all available sections and tasks -using the double `##` comments you've learned about above. Now it's clear how you can run any other task! - -# Advanced - -## Auto-completion - -Autocompletion works when you use `zsh` and `oh-my-zsh`. Create the following file in your oh-my-zsh directory -`~/.oh-my-zsh/completions/_task.zsh`: - -```shell -#compdef task - -_task() { - local -a commands - local tasks=$(task comp_targets) - - while IFS= read -r line; do - if [[ -n "$line" ]]; then - commands+=("$line") - fi - done <<< "$tasks" - - _describe -t commands 'task commands' commands -} - -_task "$@" -``` - -Now after running `task shorthand`, your `task` commands will get autocompleted. - -## SubTaskfiles - -SubTaskfiles allow you to divide your tasks across multiple files while still calling them from a single entrypoint (a -familiar, regular Taskfile). - -Use them to split off groups of tasks that can be logically grouped together, like for specific use-cases or because -they are rarely used. For example: git-hooks, frontend- / backend-specific tasks, tasks for (infrequently occurring) -procedures, CI-only tasks, etc. - -Tasks in SubTaskfiles are never called directly, but "via" a task in the root Taskfile, like this: -`Usage: ./Taskfile foo ` - -### How - -Put this in the root Taskfile: - -```shell -function task:foo { ## bar - SUBTASKFILE_DIR="./path/to/subtaskfile/" - - source "$SUBTASKFILE_DIR/SubTaskfile" - - task:"${@-_help}" -} - -# Optional: use proxy-tasks like this for tasks you want to run straight from the root Taskfile -function task:baz { ## Call `foo baz` directly - task:foo baz -} -``` - -Create a file named `SubTaskfile` in a relevant location. It should only contain the tasks and sections you think useful -for that location (as utility stuff like `task:help`, `BLUE` env vars, `file:ensure`, etc. are provided by the root -Taskfile), and has a few notes: - -```shell -#!/bin/bash -# Adding `#!/bin/bash` is optional but recommended, as it hints editors etc. what syntax highlighting to use. - -# When you refer to files in the SubTaskfile's directory, you need prefix them with $SUBTASKFILE_DIR -function task:call-script { ## Call a script - "$SUBTASKFILE_DIR/some-script.sh" -} - -# Without this, you cannot run `./Taskfile foo` or `./Taskfile foo help` -function task:_help { ## Show all available tasks - task:help "$SUBTASKFILE_DIR/SubTaskfile" -} -``` - -# Credits +## Credits This Taskfile setup is based on [Adrian Cooney's Taskfile](https://github.com/adriancooney/Taskfile) and is widely adopted by [Enrise](https://enrise.com) in our modified flavor. -# Contributors +## Contributors A big thanks to all the contributors of Taskfile! diff --git a/docs/auto-completion.md b/docs/auto-completion.md new file mode 100644 index 0000000..7ba3027 --- /dev/null +++ b/docs/auto-completion.md @@ -0,0 +1,25 @@ +# Auto-completion + +Autocompletion works when you use `zsh` and `oh-my-zsh`. Create the following file in your oh-my-zsh directory +`~/.oh-my-zsh/completions/_task.zsh`: + +```shell +#compdef task + +_task() { + local -a commands + local tasks=$(task comp_targets) + + while IFS= read -r line; do + if [[ -n "$line" ]]; then + commands+=("$line") + fi + done <<< "$tasks" + + _describe -t commands 'task commands' commands +} + +_task "$@" +``` + +Now after running `task shorthand`, your `task` commands will get autocompleted. diff --git a/docs/how-does-it-work.md b/docs/how-does-it-work.md new file mode 100644 index 0000000..77a0cce --- /dev/null +++ b/docs/how-does-it-work.md @@ -0,0 +1,39 @@ +# How does it work? + +Taskfiles are simple bash scripts, but an easy-to-read function format. There are some things that we need to explain +for our Taskfile setup. It all starts with a `Taskfile`. Download your `Taskfile` from +[taskfile.sh](https://taskfile.sh) and save it. Make sure the Taskfile is executable: `chmod +x ./Taskfile`. You can now +run `./Taskfile` in your terminal. + +## Tasks + +A task is defined by creating a function that starts with `task:`. This defines a task that can be triggered by running +the `./Taskfile`. Right next to the task, you should add a task definition with two hashes. This will let the +`task:help` function know that you're writing the task function definition. So an example task will look like the +following: + +```shell +function task:example { ## Show some example text + title "Example" + echo "This is an example task." +} +``` + +In a task you can call other functions, and run all tooling you desire. Now running `./Taskfile example` will execute +the new task. + +## Sections + +To group multiple tasks, sections can be created in your Taskfile. A section is created by creating a comment line with +a double hashtag like so: + +```shell +## Project section +``` + +Lines with only a single `#` will not appear as section in `task:help` and can be seen as plain comments. + +## Help command + +Running `./Taskfile help`, the `task:help` function is triggered. This task will list all available sections and tasks +using the double `##` comments you've learned about above. Now it's clear how you can run any other task! diff --git a/docs/sub-taskfiles.md b/docs/sub-taskfiles.md new file mode 100644 index 0000000..1714c51 --- /dev/null +++ b/docs/sub-taskfiles.md @@ -0,0 +1,49 @@ +# SubTaskfiles + +SubTaskfiles allow you to divide your tasks across multiple files while still calling them from a single entrypoint (a +familiar, regular Taskfile). + +Use them to split off groups of tasks that can be logically grouped together, like for specific use-cases or because +they are rarely used. For example: git-hooks, frontend- / backend-specific tasks, tasks for (infrequently occurring) +procedures, CI-only tasks, etc. + +Tasks in SubTaskfiles are never called directly, but "via" a task in the root Taskfile, like this: +`Usage: ./Taskfile foo ` + +## How + +Put this in the root Taskfile: + +```shell +function task:foo { ## bar + SUBTASKFILE_DIR="./path/to/subtaskfile/" + + source "$SUBTASKFILE_DIR/SubTaskfile" + + task:"${@-_help}" +} + +# Optional: use proxy-tasks like this for tasks you want to run straight from the root Taskfile +function task:baz { ## Call `foo baz` directly + task:foo baz +} +``` + +Create a file named `SubTaskfile` in a relevant location. It should only contain the tasks and sections you think useful +for that location (as utility stuff like `task:help`, `BLUE` env vars, `file:ensure`, etc. are provided by the root +Taskfile), and has a few notes: + +```shell +#!/bin/bash +# Adding `#!/bin/bash` is optional but recommended, as it hints editors etc. what syntax highlighting to use. + +# When you refer to files in the SubTaskfile's directory, you need prefix them with $SUBTASKFILE_DIR +function task:call-script { ## Call a script + "$SUBTASKFILE_DIR/some-script.sh" +} + +# Without this, you cannot run `./Taskfile foo` or `./Taskfile foo help` +function task:_help { ## Show all available tasks + task:help "$SUBTASKFILE_DIR/SubTaskfile" +} +``` diff --git a/src/app/docs/auto-completion/page.tsx b/src/app/docs/auto-completion/page.tsx new file mode 100644 index 0000000..3257ad7 --- /dev/null +++ b/src/app/docs/auto-completion/page.tsx @@ -0,0 +1,14 @@ +import { Metadata } from 'next'; +import Content from '@/components/Content'; + +import markdown from '@/../docs/auto-completion.md'; + +export const generateMetadata = (): Metadata => ({ + title: 'Auto completion • taskfile.sh', + description: + 'Quickly kick start your project by moving all your development commands to one easy to understand and maintain place.', +}); + +export default function Page() { + return ; +} diff --git a/src/app/docs/how-does-it-work/page.tsx b/src/app/docs/how-does-it-work/page.tsx new file mode 100644 index 0000000..e95dea1 --- /dev/null +++ b/src/app/docs/how-does-it-work/page.tsx @@ -0,0 +1,14 @@ +import { Metadata } from 'next'; +import Content from '@/components/Content'; + +import markdown from '@/../docs/how-does-it-work.md'; + +export const generateMetadata = (): Metadata => ({ + title: 'How does it work? • taskfile.sh', + description: + 'Quickly kick start your project by moving all your development commands to one easy to understand and maintain place.', +}); + +export default function Page() { + return ; +} diff --git a/src/app/about/page.tsx b/src/app/docs/page.tsx similarity index 90% rename from src/app/about/page.tsx rename to src/app/docs/page.tsx index 9eb34e0..2639cc0 100644 --- a/src/app/about/page.tsx +++ b/src/app/docs/page.tsx @@ -4,7 +4,7 @@ import Content from '@/components/Content'; import readme from '@/../README.md'; export const generateMetadata = (): Metadata => ({ - title: 'Information • taskfile.sh', + title: 'Documentation • taskfile.sh', description: 'Quickly kick start your project by moving all your development commands to one easy to understand and maintain place.', }); diff --git a/src/app/docs/sub-taskfiles/page.tsx b/src/app/docs/sub-taskfiles/page.tsx new file mode 100644 index 0000000..fde63a9 --- /dev/null +++ b/src/app/docs/sub-taskfiles/page.tsx @@ -0,0 +1,14 @@ +import { Metadata } from 'next'; +import Content from '@/components/Content'; + +import markdown from '@/../docs/sub-taskfiles.md'; + +export const generateMetadata = (): Metadata => ({ + title: 'Sub Taskfiles • taskfile.sh', + description: + 'Quickly kick start your project by moving all your development commands to one easy to understand and maintain place.', +}); + +export default function Page() { + return ; +} diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index 50b873b..c81df91 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -1,16 +1,44 @@ +'use client'; + import { ReactElement } from 'react'; import styles from './content.module.scss'; import Window from '@/components/Window'; import Markdown from 'markdown-to-jsx'; import { highlighter } from '@/components/Generator/GeneredTaskfile/Highlighter'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; + +const links = [ + { href: '/docs', label: 'About Taskfile' }, + { href: '/docs/how-does-it-work', label: 'How does it work?' }, + { href: '/docs/auto-completion', label: 'Auto completion' }, + { href: '/docs/sub-taskfiles', label: 'Sub Taskfiles' }, +] type WindowProps = { content: string; }; -const Content = ({ content }: WindowProps): ReactElement => ( +const Content = ({ content }: WindowProps): ReactElement => { + const path = usePathname(); + + return (
+
+ +
+ {links.map(({ href, label }) => ( + + {label} + + ))} +
+ +
( overrides: { pre: (original) => 
{highlighter(original.children.props.children)}
, img: ({ alt, src }) => {alt}, - a: ({ href, props, children }) => ( - - {children} - - ), + a: ({ href, props, children }) => { + if (href.includes('.md')) { + const target = href.replace('.md', ''); + + return ( + + {children} + + ); + } + + return ( + + {children} + + ); + }, }, }} > @@ -30,6 +70,6 @@ const Content = ({ content }: WindowProps): ReactElement => (
-); +)}; export default Content; diff --git a/src/components/Content/content.module.scss b/src/components/Content/content.module.scss index 83124a9..1d6e87c 100644 --- a/src/components/Content/content.module.scss +++ b/src/components/Content/content.module.scss @@ -1,11 +1,15 @@ @use 'mixins/from-size' as *; .container { + display: flex; + gap: 1rem; + flex-direction: column; padding: 1rem; margin: 0 auto; width: 100%; - max-width: 54rem; + max-width: 80rem; line-height: 150%; + justify-content: start; @include from(small) { padding: 2rem; @@ -13,13 +17,55 @@ @include from(medium) { padding: 4rem; + gap: 4rem; + } + + @include from(large) { + flex-direction: row; + } +} + +.menu { + width: 100%; + min-height: 1rem; + + @include from(large) { + width: 20rem; + flex-shrink: 0; + flex-grow: 0; + } + + .menuWindow { + min-height: 1rem; + } +} + +.links { + display: flex; + flex-direction: column; + gap: 0.5rem; + + a { + display: block; + padding: 0.5rem 1rem; + background: #f0f0f0; + font-weight: 'semi-bold'; + border-radius: 0.5rem; + color: #000; + transition: background 0.2s; + + &:hover, + &.active { + background: #a1e1aa76; + text-decoration: none; + } } } .content { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.5rem; ul { padding-left: 2rem; @@ -38,6 +84,10 @@ padding: 0.2rem; border-radius: 0.2rem; } + + img { + border-radius: 0.5rem; + } } .image { diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx index 568974c..fa8853f 100644 --- a/src/components/Desktop/Desktop.tsx +++ b/src/components/Desktop/Desktop.tsx @@ -22,8 +22,8 @@ const Desktop = ({ children }: DesktopProps): ReactElement => { Generate your Taskfile - - About Taskfiles + + Documentation From c8ee02d9e3fc0b7431e706b3593d9912ca298bba Mon Sep 17 00:00:00 2001 From: Rick van der Staaij Date: Fri, 20 Mar 2026 21:33:48 +0100 Subject: [PATCH 4/6] Improve colors --- README.md | 2 + src/app/globals.scss | 12 ++-- src/components/Content/Content.tsx | 84 +++++++++++----------- src/components/Content/content.module.scss | 4 +- src/style/variables/_color.scss | 9 ++- 5 files changed, 60 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 7212035..26d9b97 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,8 @@ Generate your own Taskfile at [taskfile.sh](https://taskfile.sh). ## Documentation - [How does it work](/docs/how-does-it-work.md) +- [Auto completion](/docs/auto-completion.md) +- [Sub Taskfiles](/docs/sub-taskfiles.md) ## Credits diff --git a/src/app/globals.scss b/src/app/globals.scss index a90e5f9..669a29b 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -8,12 +8,12 @@ } body { - background: #ff00cc; /* fallback for old browsers */ - background: -webkit-linear-gradient(to left, #ff00cc, #333399); /* Chrome 10-25, Safari 5.1-6 */ + background: $color-yellow-50; /* fallback for old browsers */ background: linear-gradient( - to left, - #ff00cc, - #333399 + 220deg, + $color-yellow-50, + $color-purple-50, + $color-black, ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: var(--font-text), sans-serif; } @@ -25,7 +25,7 @@ pre { } a { - color: $color-blue-50; + color: $color-purple-50; text-decoration: none; } diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index c81df91..db2ad15 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -14,7 +14,7 @@ const links = [ { href: '/docs/how-does-it-work', label: 'How does it work?' }, { href: '/docs/auto-completion', label: 'Auto completion' }, { href: '/docs/sub-taskfiles', label: 'Sub Taskfiles' }, -] +]; type WindowProps = { content: string; @@ -24,52 +24,50 @@ const Content = ({ content }: WindowProps): ReactElement => { const path = usePathname(); return ( -
-
- -
- {links.map(({ href, label }) => ( - - {label} - - ))} -
- -
- - 
{highlighter(original.children.props.children)}
, - img: ({ alt, src }) => {alt}, - a: ({ href, props, children }) => { - if (href.includes('.md')) { - const target = href.replace('.md', ''); +
+
+ +
+ {links.map(({ href, label }) => ( + + {label} + + ))} +
+ +
+ + 
{highlighter(original.children.props.children)}
, + img: ({ alt, src }) => {alt}, + a: ({ href, props, children }) => { + if (href.includes('.md')) { + const target = href.replace('.md', ''); + + return ( + + {children} + + ); + } return ( - + {children} - + ); - } - - return ( - - {children} - - ); + }, }, - }, - }} - > - {content} - - -
-)}; + }} + > + {content} + + +
+ ); +}; export default Content; diff --git a/src/components/Content/content.module.scss b/src/components/Content/content.module.scss index 1d6e87c..93c8067 100644 --- a/src/components/Content/content.module.scss +++ b/src/components/Content/content.module.scss @@ -1,4 +1,5 @@ @use 'mixins/from-size' as *; +@use 'variables/color' as *; .container { display: flex; @@ -13,6 +14,7 @@ @include from(small) { padding: 2rem; + gap: 2rem; } @include from(medium) { @@ -56,7 +58,7 @@ &:hover, &.active { - background: #a1e1aa76; + background: $color-purple-10; text-decoration: none; } } diff --git a/src/style/variables/_color.scss b/src/style/variables/_color.scss index 9930e3a..963a032 100644 --- a/src/style/variables/_color.scss +++ b/src/style/variables/_color.scss @@ -1,7 +1,14 @@ @use 'sass:color'; $color-white: #fff; -$color-yellow-50: #f2a900; + $color-blue-50: #0068bc; + +$color-purple-50: #5D4CB6; +$color-purple-10: color.adjust($color-purple-50, $lightness: 40%); + +$color-black: #221D3D; + +$color-yellow-50: #f2a900; $color-yellow-80: color.adjust($color-yellow-50, $lightness: -30%); $color-yellow-70: color.adjust($color-yellow-50, $lightness: -20%); From c8fce694868fc0e11d5cc07e8d27449daa5da239 Mon Sep 17 00:00:00 2001 From: Rick van der Staaij Date: Fri, 20 Mar 2026 21:40:26 +0100 Subject: [PATCH 5/6] Finalize new design --- src/app/globals.scss | 2 +- src/components/Content/Content.tsx | 8 +++++++- src/components/Content/content.module.scss | 9 ++++++--- .../Generator/GeneredTaskfile/SaveFile/SaveFile.tsx | 5 +++-- src/style/variables/_color.scss | 4 ++-- 5 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/app/globals.scss b/src/app/globals.scss index 669a29b..30eb559 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -13,7 +13,7 @@ body { 220deg, $color-yellow-50, $color-purple-50, - $color-black, + $color-black ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: var(--font-text), sans-serif; } diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index db2ad15..8672f3c 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -8,6 +8,7 @@ import Markdown from 'markdown-to-jsx'; import { highlighter } from '@/components/Generator/GeneredTaskfile/Highlighter'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import SaveFile from '@/components/Generator/GeneredTaskfile/SaveFile'; const links = [ { href: '/docs', label: 'About Taskfile' }, @@ -41,7 +42,12 @@ const Content = ({ content }: WindowProps): ReactElement => { className={styles.content} options={{ overrides: { - pre: (original) => 
{highlighter(original.children.props.children)}
, + pre: (original) => ( + 
+									
+									{highlighter(original.children.props.children)}
+
+ ), img: ({ alt, src }) => {alt}, a: ({ href, props, children }) => { if (href.includes('.md')) { diff --git a/src/components/Content/content.module.scss b/src/components/Content/content.module.scss index 93c8067..4b65658 100644 --- a/src/components/Content/content.module.scss +++ b/src/components/Content/content.module.scss @@ -74,10 +74,12 @@ } pre { + position: relative; padding: 1rem; font-size: 0.8rem; background: rgba(16, 0, 31, 0.87); border-radius: 0.5rem; + overflow: hidden; } code { @@ -86,12 +88,13 @@ padding: 0.2rem; border-radius: 0.2rem; } +} - img { - border-radius: 0.5rem; - } +.content .preSave { + top: 1rem; } .image { max-width: 100%; + border-radius: 0.5rem; } diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx b/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx index baeb701..a85eafc 100644 --- a/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx +++ b/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx @@ -6,9 +6,10 @@ import styles from './save-file.module.scss'; type SaveFileProps = { content: string; + className?: string; }; -const SaveFile = ({ content }: SaveFileProps): ReactElement => { +const SaveFile = ({ content, className = '' }: SaveFileProps): ReactElement => { const [isCopied, setCopied] = useState(false); const copyToClipboard = (): void => { @@ -29,7 +30,7 @@ const SaveFile = ({ content }: SaveFileProps): ReactElement => { }; return ( -
+