Finish toolbar styling

README.md

@@ -1,11 +1,11 @@
-# Taskfile ([TaskfileGenerator.com](https://taskfilegenerator.com))
+# Taskfile ([taskfile.sh](https://taskfile.sh))
 
 A `./Taskfile` is a task runner in plain and easy [Bash](https://nl.wikipedia.org/wiki/Bash). It adds a list of
 available tasks to your project.
 
-Generate your own Taskfile at [TaskfileGenerator.com](https://taskfilegenerator.com).
+Generate your own Taskfile at [taskfile.sh](https://taskfile.sh).
 
-[![CLI Taskfile preview](./images/cli-preview.gif)](https://taskfilegenerator.com)
+[![CLI Taskfile preview](./images/cli-preview.gif)](https://taskfile.sh)
 
 ## Why
 
@@ -16,6 +16,44 @@ Generate your own Taskfile at [TaskfileGenerator.com](https://taskfilegenerator.
 - Easy to understand and maintain
 - Automatically generated list of available task
 
+## 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.
+
+### 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!
+
 ## Credits
 
 This Taskfile setup is based on [Adrian Cooney's Taskfile](https://github.com/adriancooney/Taskfile) and is widely

Taskfile

@@ -39,7 +39,7 @@ function project:checkout-pr {
 	then
 		echo "You need to provide a pull request number to check out."
 		echo -e "${BLUE}Usage:${RESET} $0 pr ${YELLOW}<number>${RESET}"
-		exit 422
+		exit 1
 	fi
 	echo "Checking out pull request $1..."
 	git fetch origin refs/pull/$1/head:refs/remotes/origin/pr/$1
@@ -135,15 +135,10 @@ 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
-		echo "/usr/local/bin/task already exists."
-	else
-		echo -e "You are about to create /usr/local/bin/task that requires root permission..."
-		sudo curl --location --silent --output /usr/local/bin/task https://enri.se/taskfile-bin
-		sudo chmod +x /usr/local/bin/task
-	fi
-	echo -e "${BLUE}You can now use:${RESET} task ${YELLOW}<task>${RESET} <args>"
+	echo -e "You're about to create ${YELLOW}/usr/local/bin/task${RESET} that requires ${RED}root${RESET} permission..."
+	sudo curl --location --silent --output /usr/local/bin/task https://enri.se/taskfile-bin
+	sudo chmod +x /usr/local/bin/task
+	echo -e "${BLUE}You can now use:${RESET} task ${YELLOW}<task>${RESET} <arguments>"
 }
 
 banner

src/components/Content/content.module.scss

@@ -5,6 +5,7 @@
 	margin: 0 auto;
 	width: 100%;
 	max-width: 80rem;
+	line-height: 150%;
 
 	@include from(small) {
 		padding: 2rem;

src/components/Desktop/Desktop.tsx

@@ -1,16 +1,35 @@
+'use client';
+
 import { ReactElement, ReactNode } from 'react';
 
 import styles from './desktop.module.scss';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
-type WindowProps = {
+type DesktopProps = {
 	children: ReactNode;
 };
 
-const Desktop = ({ children }: WindowProps): ReactElement => (
-	<div className={styles.screen}>
-		<div className={styles.start}></div>
-		<div className={styles.desktop}>{children}</div>
-	</div>
-);
+const Desktop = ({ children }: DesktopProps): ReactElement => {
+	const path = usePathname();
+
+	return (
+		<div className={styles.screen}>
+			<div className={styles.bar}>
+				<div className={styles.container}>
+					<a href="https://enrise.com" target="_blank" className={styles.enrise} />
+					<a href="https://github.com/Enrise/Taskfile" target="_blank" className={styles.github} />
+					<Link href="/" className={`${styles.page} ${path === '/' ? styles.active : ''}`}>
+						Generate <span>your Taskfile</span>
+					</Link>
+					<Link href="/about" className={`${styles.page} ${path === '/about' ? styles.active : ''}`}>
+						About <span>Taskfiles</span>
+					</Link>
+				</div>
+			</div>
+			<div className={styles.desktop}>{children}</div>
+		</div>
+	);
+};
 
 export default Desktop;

src/components/Desktop/desktop.module.scss

@@ -1,17 +1,34 @@
 @use 'mixins/from-size' as *;
+@use 'variables/breakpoints' as *;
+@use 'variables/color' as *;
+
+$bar-height: 3.4rem;
 
 .screen {
 	display: flex;
 	flex-direction: column;
 	min-height: 100dvh;
+
+	@include from(large) {
+		overflow: hidden;
+	}
 }
 
-.start {
-	height: 3.4rem;
+.bar {
+	height: $bar-height;
 	background-color: #0005;
 	width: 100%;
 	flex-grow: 0;
 	flex-shrink: 0;
+	padding: 0 1rem;
+
+	@include from(small) {
+		padding: 0 2rem;
+	}
+
+	@include from(medium) {
+		padding: 0 4rem;
+	}
 
 	@include from(large) {
 		order: 2;
@@ -23,3 +40,90 @@
 	flex-direction: column;
 	flex-grow: 1;
 }
+
+.container {
+	max-width: 72rem;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	height: $bar-height;
+	align-items: center;
+}
+
+.enrise,
+.github,
+.page {
+	flex-direction: row;
+	align-items: center;
+	height: 2.8rem;
+	box-shadow:
+		0 10px 15px -3px rgb(0 0 0 / 0.1),
+		0 4px 6px -4px rgb(0 0 0 / 0.1);
+	outline: 1px solid rgb(255 255 255 / 0.2);
+	border-radius: 0.2rem;
+	background-color: #0003;
+	transition:
+		background-color 300ms,
+		color 300ms,
+		box-shadow 300ms;
+	color: #fff;
+
+	&:hover {
+		background-color: #0006;
+		text-decoration: none;
+		box-shadow: 0 0 1rem $color-blue-50;
+	}
+}
+
+.page {
+	padding: 0 1rem;
+	min-width: 0;
+	flex-grow: 1;
+	flex-shrink: 1;
+	max-width: 20rem;
+	justify-content: flex-start;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	width: auto;
+	padding-top: 0.7rem;
+
+	> span {
+		display: none;
+
+		@include from(medium) {
+			display: inline;
+		}
+	}
+}
+
+.enrise,
+.github {
+	width: 2.8rem;
+	flex-shrink: 0;
+	background-size: 1.4rem;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.enrise {
+	background-image: url('/enrise.svg');
+
+	&:hover {
+		box-shadow: 0 0 2rem $color-yellow-50;
+	}
+}
+
+.github {
+	background-image: url('/github.svg');
+}
+
+.active {
+	background-color: #fff;
+	color: #222;
+
+	&:hover {
+		background-color: #fff;
+	}
+}

src/components/Generator/GeneredTaskfile/taskfile-base.sh

@@ -63,13 +63,9 @@ 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
-		echo "/usr/local/bin/task already exists."
-	else
-		echo -e "You are about to create /usr/local/bin/task that requires root permission..."
-		sudo curl --location --silent --output /usr/local/bin/task https://enri.se/taskfile-bin
-		sudo chmod +x /usr/local/bin/task
-	fi
+	echo -e "You're about to create ${YELLOW}/usr/local/bin/task${RESET} that requires ${RED}root${RESET} permission..."
+	sudo curl --location --silent --output /usr/local/bin/task https://enri.se/taskfile-bin
+	sudo chmod +x /usr/local/bin/task
 	echo -e "${BLUE}You can now use:${RESET} task ${YELLOW}<task>${RESET} <args>"
 }
 

src/components/Generator/generator.module.scss

@@ -6,12 +6,11 @@
 	margin: 0 auto;
 	width: 102rem;
 	max-width: 100%;
-	gap: 1rem;
-	padding: 1rem;
+	gap: 2rem;
+	padding: 2rem 1rem;
 	flex-grow: 1;
 
 	@include from(small) {
-		gap: 2rem;
 		padding: 2rem;
 	}
 

src/style/variables/_color.scss

@@ -1,3 +1,7 @@
+@use 'sass:color';
+
 $color-white: #fff;
 $color-yellow-50: #f2a900;
 $color-blue-50: #0068bc;
+$color-yellow-80: color.adjust($color-yellow-50, $lightness: -30%);
+$color-yellow-70: color.adjust($color-yellow-50, $lightness: -20%);