Implement mobile view, toolbar and information page (#12)

* Fix sizing issues and mobile view

* Fix pre-commit linting

* Increase max width slightly

* cat lipsum

* temporary info content

* temporary info content

* Run eslint before prettier

* Finish toolbar styling

* Finish about page with readme and highlights

* Fix styling

Author: rick-nu

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](public/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
@@ -100,8 +100,8 @@ function task:typescript { ## Check typescript types
 # =========================================================
 
 function task:pre-commit { ## Clean up code before committing
-	task:prettier
 	task:eslint
+	task:prettier
 	task:typescript
 	title "Committing"
 }
@@ -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

dev/linting/lint-staged.config.mjs

@@ -8,10 +8,10 @@ const config = {
 	// Frontend specific
 	// ==============================
 	'*.{ts,tsx}': [
-		// tsc runs for all files instead of only the edited ones
-		() => 'tsc --noEmit --project . --pretty',
 		'eslint --config dev/linting/eslint.config.mjs',
 		prettier,
+		// tsc runs for all files instead of only the edited ones
+		() => 'tsc --noEmit --project . --pretty',
 	],
 
 	// ==============================

next.config.ts

@@ -1,15 +1,19 @@
 import type { NextConfig } from 'next';
+import path from 'path';
 
 const nextConfig: NextConfig = {
 	output: 'export',
 	webpack: (config) => {
 		config.module.rules.push({
-			test: /\.(txt|sh)$/i,
+			test: /\.(txt|sh|md)$/i,
 			use: 'raw-loader',
 		});
 
 		return config;
 	},
+	sassOptions: {
+		includePaths: [path.join(__dirname, 'src/style')],
+	},
 };
 
 export default nextConfig;