Added 404 page

app/Controllers/DirectoryController.php

@@ -6,6 +6,7 @@ use DI\Container;
 use PHLAK\Config\Config;
 use Slim\Psr7\Response;
 use Slim\Views\Twig;
+use Symfony\Component\Finder\Exception\DirectoryNotFoundException;
 use Symfony\Component\Finder\Finder;
 use Tightenco\Collect\Support\Collection;
 
@@ -45,9 +46,15 @@ class DirectoryController
      */
     public function __invoke(Finder $files, Response $response, string $path = '.')
     {
+        try {
+            $files = $files->in($path);
+        } catch (DirectoryNotFoundException $exception) {
+            return $this->view->render($response->withStatus(404), '404.twig');
+        }
+
         return $this->view->render($response, 'index.twig', [
             'breadcrumbs' => $this->breadcrumbs($path),
-            'files' => $files->in($path),
+            'files' => $files,
             'is_root' => $this->isRoot($path),
         ]);
     }

app/resources/sass/app.scss

@@ -10,6 +10,6 @@ $fa-font-path: "./webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid.scss";
 
 // Fonts
-// @import url("https://fonts.googleapis.com/css?family=Lato");
+@import url("https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap");
 
 @import "dark-mode.scss";

app/resources/views/404.twig

@@ -0,0 +1,9 @@
+{% extends 'layouts/app.twig' %}
+
+{% block content %}
+    <div id="content" class="container flex flex-col justify-center items-center h-screen mx-auto px-4">
+        <p class="font-sans font-light text-4xl text-gray-600">
+            404 &bull; Not Found
+        </p>
+    </div>
+{% endblock %}

app/resources/views/components/header.twig

@@ -0,0 +1,9 @@
+<header id="header" class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
+    <div class="container mx-auto p-4">
+        <a href="/" class="hover:underline">Home</a>
+
+        {% for name, path in breadcrumbs %}
+            / <a href="{{ path }}" class="hover:underline">{{ name }}</a>
+        {% endfor %}
+    </div>
+</header>

app/resources/views/index.twig

@@ -1,15 +1,7 @@
 {% extends "layouts/app.twig" %}
 
 {% block content %}
-    <header id="header" class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
-        <div class="container mx-auto p-4">
-            <a href="/" class="hover:underline">Home</a>
-
-            {% for name, path in breadcrumbs %}
-                / <a href="{{ path }}" class="hover:underline">{{ name }}</a>
-            {% endfor %}
-        </div>
-    </header>
+    {% include "components/header.twig" %}
 
     <div id="content" class="container mx-auto px-4">
         <ul id="file-list" class="py-4">

tailwind.config.js

@@ -1,6 +1,23 @@
 module.exports = {
     theme: {
         extend: {
+            fontFamily: {
+                sans: [
+                    'Work Sans',
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    '"Segoe UI"',
+                    'Roboto',
+                    '"Helvetica Neue"',
+                    'Arial',
+                    '"Noto Sans"',
+                    'sans-serif',
+                    '"Apple Color Emoji"',
+                    '"Segoe UI Emoji"',
+                    '"Segoe UI Symbol"',
+                    '"Noto Color Emoji"',
+                ]
+            },
             textColor: {
                 github: '#171515',
                 twitter: '#1DA1F2'