feat: customize 404

.idea/.name

@@ -0,0 +1 @@
+_redirects

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

src/404.md

@@ -1,13 +1,22 @@
 ---
-title: Oops! Not Found
+title: '404'
 layout: default
 permalink: 404.html
 ---
-
+{% image './src/assets/img/404.jpg', title, 'w-full rounded-lg', '1200px' %}
-<h2
+<div class="text-center w-full">
-  class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-2"
+  <h2 class="m-0 text-4xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-6xl mb-4">{{ title }}</h2>
->
+  <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6">
-  {{ title }}
+    What kind of idiots do you have working here?
-</h2>
+  </h3>
-
+  <div class="flex justify-center not-prose">
-Sorry, looks like there's nothing here.
+    <a href="/">
+      <button class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full text-white dark:text-gray-900 !bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
+        <span class="pt-1 md:pt-0 mr-1">
+          {% heroicon "outline" "receipt-percent" "Receipt" "width=20 height=20" %}
+        </span>
+        <span>Skip out on the room service bill</span>
+      </button>
+    </a>
+  </div>
+</div>

src/_includes/forms/search.liquid

@@ -0,0 +1,26 @@
+<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+<style>
+  :root {
+    --pagefind-ui-font: InterVariable, ui-sans-serif, system-ui, -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";
+    --pagefind-ui-primary: #374151;
+    --pagefind-ui-text: #374151;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --pagefind-ui-primary: #e5e7eb;
+      --pagefind-ui-text: #e5e7eb;
+      --pagefind-ui-background: #152028;
+      --pagefind-ui-border: #152028;
+      --pagefind-ui-tag: #152028;
+    }
+  }
+</style>
+<div id="search" class="search"></div>
+<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
+<script>
+  if (plausible) {
+    document.querySelector('#search').addEventListener('focusout', (e) => {
+      plausible('Search', { props: { query: e.target.value }})
+    })
+  }
+</script>

src/search.md

@@ -17,29 +17,4 @@ meta:
   image:
     src: https://coryd.dev/assets/img/avatar.webp
 ---
-<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+{% include "forms/search.liquid" %}
-<style>
-  :root {
-    --pagefind-ui-font: InterVariable, ui-sans-serif, system-ui, -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";
-    --pagefind-ui-primary: #374151;
-    --pagefind-ui-text: #374151;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --pagefind-ui-primary: #e5e7eb;
-      --pagefind-ui-text: #e5e7eb;
-      --pagefind-ui-background: #152028;
-      --pagefind-ui-border: #152028;
-      --pagefind-ui-tag: #152028;
-    }
-  }
-</style>
-<div id="search" class="search"></div>
-<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
-<script>
-  if (plausible) {
-    document.querySelector('#search').addEventListener('focusout', (e) => {
-        plausible('Search', { props: { query: e.target.value }})
-    })
-  }
-</script>