From 1cc4855e167e4c5d3668a3888051503fc4d81025 Mon Sep 17 00:00:00 2001
From: Rick van der Staaij <id@rick.nu>
Date: Fri, 15 Nov 2024 21:09:21 +0100
Subject: [PATCH 1/2] Focus syntax highlighting on tasks

---
 .../Highlighter/highlighter.module.css        |  4 +
 .../Highlighter/lineRenderers.tsx             | 79 ++++++++++++++++---
 .../GeneredTaskfile/taskfile-base.sh          |  3 +-
 3 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
index 1dcda92..70798b4 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
@@ -33,3 +33,7 @@
 .text-blue-light {
 	color: #93c5fd;
 }
+
+.text-green {
+	color: #2c9835;
+}
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
index f6d94ec..9b89aff 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
@@ -4,11 +4,16 @@ import styles from './highlighter.module.css';
 
 enum RendererType {
 	EmptyLines,
+	TaskDefinitions,
 	FunctionDefinitions,
+	Sections,
 	Comments,
 	Variables,
+	TaskCalls,
 	Conditionals,
 	EchoStatements,
+	Titles,
+	FunctionEnds,
 }
 
 type LineRenderer = {
@@ -21,23 +26,47 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 		test: (line) => line.trim() === '',
 		render: (_, i) => <div key={i}>&nbsp;</div>,
 	},
-	[RendererType.FunctionDefinitions]: {
-		test: (line) => /^function\s+[a-zA-Z_:]+/.test(line),
+	[RendererType.TaskDefinitions]: {
+		test: (line) => /^function\stask:+[a-zA-Z-_:]+/.test(line),
 		render: (line, i) => {
-			const [, name, rest] = line.match(/^function\s+([a-zA-Z_:]+)(.*)/) || [];
+			const [, name, rest] = line.match(/^function\stask:+([a-zA-Z-_:]+)\s{\s##(.*)/) || [];
 			return (
 				<div key={i} className={styles.line}>
-					<span className={styles['text-purple']}>function </span>
+					<span className={styles['text-gray']}>function</span>
+					<span className={styles['text-white']}> task:</span>
 					<span className={styles['text-yellow']}>{name}</span>
+					<span className={styles['text-gray']}>{' { ##'}</span>
 					<span className={styles['text-white']}>{rest}</span>
 				</div>
 			);
 		},
 	},
+	[RendererType.FunctionDefinitions]: {
+		test: (line) => /^function\s+[a-zA-Z-_:]+/.test(line),
+		render: (line, i) => {
+			const [, name, rest] = line.match(/^function\s+([a-zA-Z-_:]+)(.*)/) || [];
+			return (
+				<div key={i} className={styles.line}>
+					<span className={styles['text-gray']}>function </span>
+					<span className={styles['text-white']}>{name}</span>
+					<span className={styles['text-gray']}>{rest}</span>
+				</div>
+			);
+		},
+	},
+	[RendererType.Sections]: {
+		test: (line) => line.startsWith('## '),
+		render: (line, i) => (
+			<div key={i} className={styles.line}>
+				<span className={styles['text-green']}>## </span>
+				<span className={styles['text-white']}>{line.substring(3)}</span>
+			</div>
+		),
+	},
 	[RendererType.Comments]: {
 		test: (line) => line.trim().startsWith('#'),
 		render: (line, i) => (
-			<div key={i} className={styles['text-gray']}>
+			<div key={i} className={styles['text-green']}>
 				{line}
 			</div>
 		),
@@ -48,7 +77,7 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 			const [varName, ...rest] = line.split('=');
 			return (
 				<div key={i} className={styles.line}>
-					<span className={styles['text-blue']}>{varName}</span>
+					<span className={styles['text-purple']}>{varName}</span>
 					<span className={styles['text-white']}>=</span>
 					<span className={styles['text-yellow-light']}>{rest.join('=')}</span>
 				</div>
@@ -56,7 +85,7 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 		},
 	},
 	[RendererType.Conditionals]: {
-		test: (line) => /^\s*if\s+|^\s*then\s+|^\s*else\s+|^\s*fi\s*/.test(line),
+		test: (line) => /^if+|^then+|^else+|^fi/.test(line.trim()),
 		render: (line, i) => (
 			<div key={i} className={styles['text-pink']}>
 				{line}
@@ -69,11 +98,43 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 			const parts = line.split('echo');
 			return (
 				<div key={i} className={styles.line}>
-					<span className={styles['text-white']}>{parts[0]}</span>
-					<span className={styles['text-blue-light']}>echo</span>
+					<span className={styles['text-white']}>{parts[0]}echo</span>
+					<span className={styles['text-yellow-light']}>{parts[1]}</span>
+				</div>
+			);
+		},
+	},
+	[RendererType.Titles]: {
+		test: (line) => line.trim().startsWith('title'),
+		render: (line, i) => {
+			const parts = line.split('title');
+			return (
+				<div key={i} className={styles.line}>
+					<span className={styles['text-white']}>{parts[0]}title</span>
 					<span className={styles['text-yellow-light']}>{parts[1]}</span>
 				</div>
 			);
 		},
 	},
+	[RendererType.TaskCalls]: {
+		test: (line) => /^\stask:+[a-zA-Z-_:]+/.test(line),
+		render: (line, i) => {
+			const [, space, task] = line.match(/(\s)task:+([a-zA-Z-_:]+)/) || [];
+
+			return (
+				<div key={i} className={styles.line}>
+					<span className={styles['text-white']}>{space}task:</span>
+					<span className={styles['text-yellow']}>{task}</span>
+				</div>
+			);
+		},
+	},
+	[RendererType.FunctionEnds]: {
+		test: (line) => line.trim().startsWith('}'),
+		render: (line, i) => (
+			<div key={i} className={styles['text-gray']}>
+				{line}
+			</div>
+		),
+	},
 };
diff --git a/src/components/Generator/GeneredTaskfile/taskfile-base.sh b/src/components/Generator/GeneredTaskfile/taskfile-base.sh
index 450acef..50ed326 100644
--- a/src/components/Generator/GeneredTaskfile/taskfile-base.sh
+++ b/src/components/Generator/GeneredTaskfile/taskfile-base.sh
@@ -63,8 +63,7 @@ function task:help { ## Show all available tasks
 
 function task:shorthand { ## Create CLI shorthand task instead of ./Taskfile
 	title "Creating task shorthand"
-	if [ -f /usr/local/bin/task ]
-	then
+	if [ -f /usr/local/bin/task ]; then
 		echo "/usr/local/bin/task already exists."
 	else
 		echo -e "You are about to create /usr/local/bin/task that requires root permission..."

From 3dc36d6d8ebf2f5a0025c1e467085866ca57b512 Mon Sep 17 00:00:00 2001
From: Rick van der Staaij <id@rick.nu>
Date: Fri, 15 Nov 2024 21:41:07 +0100
Subject: [PATCH 2/2] Make variables more clear

---
 .../GeneredTaskfile/Highlighter/highlighter.module.css   | 2 +-
 .../GeneredTaskfile/Highlighter/lineRenderers.tsx        | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
index 70798b4..2c883d4 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
@@ -35,5 +35,5 @@
 }
 
 .text-green {
-	color: #2c9835;
+	color: #1d8525;
 }
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
index 9b89aff..d6f4cae 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
@@ -35,7 +35,8 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 					<span className={styles['text-gray']}>function</span>
 					<span className={styles['text-white']}> task:</span>
 					<span className={styles['text-yellow']}>{name}</span>
-					<span className={styles['text-gray']}>{' { ##'}</span>
+					<span className={styles['text-gray']}>{' {'}</span>
+					<span className={styles['text-green']}>{' ##'}</span>
 					<span className={styles['text-white']}>{rest}</span>
 				</div>
 			);
@@ -77,9 +78,9 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 			const [varName, ...rest] = line.split('=');
 			return (
 				<div key={i} className={styles.line}>
-					<span className={styles['text-purple']}>{varName}</span>
-					<span className={styles['text-white']}>=</span>
-					<span className={styles['text-yellow-light']}>{rest.join('=')}</span>
+					<span className={styles['text-blue']}>{varName}</span>
+					<span className={styles['text-gray']}>=</span>
+					<span className={styles['text-white']}>{rest.join('=')}</span>
 				</div>
 			);
 		},