Add local host names check (/etc/hosts) in the generator

src/components/Form/Text/Text.tsx

@@ -1,17 +1,17 @@
-import { HTMLAttributes, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactElement } from 'react';
+import { HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, InputHTMLAttributes, ReactElement } from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
 
 import FormError from '@/components/Form/Error';
 
 import styles from '../form.module.css';
 
 type TextInputProps = {
-	title: string;
+	title?: string;
 	name: string;
 	options?: RegisterOptions;
 	type?: HTMLInputTypeAttribute;
 	autoComplete?: HTMLInputAutoCompleteAttribute;
-} & HTMLAttributes<HTMLInputElement>;
+} & InputHTMLAttributes<HTMLInputElement>;
 
 const TextInput = ({
 	name,
@@ -25,7 +25,7 @@ const TextInput = ({
 
 	return (
 		<label className={styles.label}>
-			<span className={styles.title}>{title}</span>{' '}
+			{title && <span className={styles.title}>{title}</span>}{' '}
 			<input
 				className={styles.input}
 				{...form.register(name, options)}

src/components/Generator/Generator.tsx

@@ -16,6 +16,8 @@ export type GeneratorSettings = {
 	font: Font;
 	runtime: 'local' | 'docker-compose';
 	developmentProxy: boolean;
+	localHosts: boolean;
+	localDomains: { domain: string }[];
 	checkoutGitRequest: 'none' | 'github' | 'gitlab';
 	configureGitHooks: boolean;
 	subTaskfile: boolean;
@@ -30,6 +32,7 @@ const Generator = (): ReactElement => {
 			project: 'Taskfile',
 			font: 'Shadow',
 			runtime: 'local',
+			localDomains: [{ domain: '' }],
 			checkoutGitRequest: 'none',
 		},
 	});

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

@@ -96,7 +96,7 @@ export const lineRenderers: Record<RendererType, LineRenderer> = {
 		},
 	},
 	[RendererType.Conditionals]: {
-		test: (line) => /^if+|^then+|^else+|^fi/.test(line.trim()),
+		test: (line) => /^if+|^then+|^for+|^done+|^else+|^fi/.test(line.trim()),
 		render: (line, i) => (
 			<div key={i} className={styles['text-pink']}>
 				{line}

src/components/Generator/GeneredTaskfile/addons/addons.ts

@@ -3,6 +3,7 @@ import { TaskfileAddons } from '@/components/Generator/GeneredTaskfile/taskfile'
 
 import runtime from './runtime';
 import git from './git';
+import localHosts from './localHosts';
 import subTaskfile from './subTaskfile';
 import fileUtilities from './fileUtilities';
 import appUtilities from '@/components/Generator/GeneredTaskfile/addons/appUtilities';
@@ -16,6 +17,7 @@ import appUtilities from '@/components/Generator/GeneredTaskfile/addons/appUtili
 const renderAddons = (settings: GeneratorSettings, addons: TaskfileAddons): void => {
 	runtime(settings, addons);
 	git(settings, addons);
+	localHosts(settings, addons);
 	fileUtilities(settings, addons);
 	appUtilities(settings, addons);
 	subTaskfile(settings, addons);

src/components/Generator/GeneredTaskfile/addons/localHosts/LocalDomains.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ReactElement, useEffect } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import TextInput from '@/components/Form/Text';
+import { GeneratorSettings } from '@/components/Generator';
+
+import styles from './local-domains.module.scss';
+
+const LocalDomains = (): ReactElement => {
+	const form = useFormContext<GeneratorSettings>();
+	const { fields, append, remove } = useFieldArray<GeneratorSettings, 'localDomains'>({ name: 'localDomains' });
+	const domains = form.watch('localDomains');
+	const lastDomain = domains?.length ? domains[domains.length - 1]?.domain : undefined;
+	const emptyIndex = domains ? domains.slice(0, -1).findIndex((entry) => !entry?.domain) : -1;
+
+	// Remove emptied textboxes and make sure there is always one empty textbox to add a new domain
+	useEffect(() => {
+		if (emptyIndex !== -1) {
+			remove(emptyIndex);
+			return;
+		}
+
+		if (lastDomain !== '') {
+			append({ domain: '' }, { shouldFocus: false });
+		}
+	}, [emptyIndex, lastDomain, append, remove]);
+
+	return (
+		<div className={styles.container}>
+			{fields.map((field, index) => (
+				<TextInput key={field.id} name={`localDomains.${index}.domain`} placeholder="example.local" />
+			))}
+		</div>
+	);
+};
+
+export default LocalDomains;

src/components/Generator/GeneredTaskfile/addons/localHosts/index.ts

@@ -0,0 +1 @@
+export { default } from './localHosts';

src/components/Generator/GeneredTaskfile/addons/localHosts/local-domains.module.scss

@@ -0,0 +1,5 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}

src/components/Generator/GeneredTaskfile/addons/localHosts/localHosts.ts

@@ -0,0 +1,27 @@
+import { GeneratorSettings } from '@/components/Generator';
+import { TaskfileAddons } from '@/components/Generator/GeneredTaskfile/taskfile';
+import loadTemplate from '@/helpers/loadTemplate';
+import setLocalHostsSh from './set-local-hosts.sh';
+
+const localHosts = (settings: GeneratorSettings, addon: TaskfileAddons): void => {
+	if (!settings.localHosts) {
+		return;
+	}
+
+	const domains = (settings.localDomains ?? []).map((entry) => entry.domain.trim()).filter(Boolean);
+
+	if (domains.length === 0) {
+		return;
+	}
+
+	addon.projectFunctions.push(
+		loadTemplate(setLocalHostsSh, {
+			project: settings.project || 'Taskfile',
+			domains: domains.map((domain) => `\t\t"${domain}"`).join('\n'),
+		})
+	);
+
+	addon.initCheckCommands.push('task:set-local-hosts');
+};
+
+export default localHosts;

src/components/Generator/GeneredTaskfile/addons/localHosts/set-local-hosts.sh

@@ -0,0 +1,17 @@
+function task:set-local-hosts { ## Add required local hosts to /etc/hosts
+	title "Checking local hosts"
+	local domains=(
+[[domains]]
+	)
+	local domain pattern
+	for domain in "${domains[@]}"; do
+		pattern="^127\.0\.0\.1[[:space:]]+${domain//./\\.}([[:space:]]|\$)"
+		if grep -qE "$pattern" /etc/hosts; then
+			echo -e "${GREEN}✓${RESET} host ${GREEN}${domain}${RESET} is present."
+		else
+			echo -e "Adding ${YELLOW}${domain}${RESET} to ${YELLOW}/etc/hosts${RESET} (${RED}sudo required${RESET})..."
+			echo "127.0.0.1 ${domain} # project: [[project]]" | sudo tee -a /etc/hosts > /dev/null
+			echo -e "${GREEN}✓${RESET} added host ${GREEN}${domain}${RESET}."
+		fi
+	done
+}

src/components/Generator/Settings/Settings.tsx

@@ -8,6 +8,7 @@ import RadioInput from '@/components/Form/Radio';
 import { useFormContext } from 'react-hook-form';
 import { GeneratorSettings } from '@/components/Generator';
 import Checkbox from '@/components/Form/Checkbox';
+import LocalDomains from '@/components/Generator/GeneredTaskfile/addons/localHosts/LocalDomains';
 
 const Settings = (): ReactElement => {
 	const form = useFormContext<GeneratorSettings>();
@@ -80,6 +81,9 @@ const Settings = (): ReactElement => {
 				]}
 			/>
 			<Checkbox name="configureGitHooks">Configure git hooks</Checkbox>
+			<h2>Local hosts</h2>
+			<Checkbox name="localHosts">Check and add local domains</Checkbox>
+			{settings.localHosts && <LocalDomains />}
 			<h2>SubTaskfile</h2>
 			<Checkbox name="subTaskfile">Include SubTaskfile example</Checkbox>
 			<h2>Utilities</h2>

src/components/Generator/Settings/settings.module.scss

@@ -1,7 +1,7 @@
 .container {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	gap: 0.5rem;
 
 	h2 {
 		font-size: 1rem;