Visual syntax highlighting (#9)

* Add syntax highlighting to console screen

* Always enable syntax highlighting, minor refactor

- Extract styles into module.css
- Remove obsolete types

* Prefer using Records over of keyed arrays

Author: AJGeel

src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx

@@ -5,6 +5,7 @@ import { taskfile } from '@/components/Generator/GeneredTaskfile/taskfile';
 import { useFormContext } from 'react-hook-form';
 import { GeneratorSettings } from '@/components/Generator/Generator';
 import CopyToClipboard from '@/components/Generator/GeneredTaskfile/Copy';
+import { highlighter } from './Highlighter';
 
 const GeneratedTaskfile = (): ReactElement => {
 	const form = useFormContext<GeneratorSettings>();
@@ -16,7 +17,7 @@ const GeneratedTaskfile = (): ReactElement => {
 	return (
 		<>
 			<CopyToClipboard onCopy={() => navigator.clipboard.writeText(resultTaskfile)} />
-			<pre>{resultTaskfile}</pre>
+			<pre>{highlighter(resultTaskfile)}</pre>
 		</>
 	);
 };

src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+
+import styles from './highlighter.module.css';
+
+import { lineRenderers } from './lineRenderers';
+
+export const highlighter = (code: string): ReactElement[] => {
+	const normalizedCode = code.endsWith('\n') ? code : code + '\n';
+	const lines = normalizedCode.split('\n').slice(0, -1);
+
+	return lines.map((line, index) => {
+		const renderer = Object.values(lineRenderers).find((r) => r.test(line));
+
+		if (renderer) {
+			return renderer.render(line, index);
+		}
+
+		return (
+			<div key={index} className={styles['text-white']}>
+				{line}
+			</div>
+		);
+	});
+};

src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css

@@ -0,0 +1,35 @@
+.line {
+	display: flex;
+}
+
+.text-white {
+	color: #fff;
+}
+
+.text-gray {
+	color: #888589;
+}
+
+.text-yellow {
+	color: #fde047;
+}
+
+.text-yellow-light {
+	color: #fef08a;
+}
+
+.text-pink {
+	color: #ec4899;
+}
+
+.text-purple {
+	color: #a855f7;
+}
+
+.text-blue {
+	color: #60a5fa;
+}
+
+.text-blue-light {
+	color: #93c5fd;
+}

src/components/Generator/GeneredTaskfile/Highlighter/index.ts

@@ -0,0 +1 @@
+export * from './Highlighter';

src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx

@@ -0,0 +1,79 @@
+import React, { ReactElement } from 'react';
+
+import styles from './highlighter.module.css';
+
+enum RendererType {
+	EmptyLines,
+	FunctionDefinitions,
+	Comments,
+	Variables,
+	Conditionals,
+	EchoStatements,
+}
+
+type LineRenderer = {
+	test: (line: string) => boolean;
+	render: (line: string, index: number) => ReactElement;
+};
+
+export const lineRenderers: Record<RendererType, LineRenderer> = {
+	[RendererType.EmptyLines]: {
+		test: (line) => line.trim() === '',
+		render: (_, i) => <div key={i}>&nbsp;</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-purple']}>function </span>
+					<span className={styles['text-yellow']}>{name}</span>
+					<span className={styles['text-white']}>{rest}</span>
+				</div>
+			);
+		},
+	},
+	[RendererType.Comments]: {
+		test: (line) => line.trim().startsWith('#'),
+		render: (line, i) => (
+			<div key={i} className={styles['text-gray']}>
+				{line}
+			</div>
+		),
+	},
+	[RendererType.Variables]: {
+		test: (line) => /^[A-Z_]+=.*/.test(line),
+		render: (line, i) => {
+			const [varName, ...rest] = line.split('=');
+			return (
+				<div key={i} className={styles.line}>
+					<span className={styles['text-blue']}>{varName}</span>
+					<span className={styles['text-white']}>=</span>
+					<span className={styles['text-yellow-light']}>{rest.join('=')}</span>
+				</div>
+			);
+		},
+	},
+	[RendererType.Conditionals]: {
+		test: (line) => /^\s*if\s+|^\s*then\s+|^\s*else\s+|^\s*fi\s*/.test(line),
+		render: (line, i) => (
+			<div key={i} className={styles['text-pink']}>
+				{line}
+			</div>
+		),
+	},
+	[RendererType.EchoStatements]: {
+		test: (line) => line.includes('echo'),
+		render: (line, i) => {
+			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-yellow-light']}>{parts[1]}</span>
+				</div>
+			);
+		},
+	},
+};