From 731b53a02d16cc2b704668237314d778b6dbab1f Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 10:41:05 +0200
Subject: feat: create 404 error page with search, recent articles, and easter
 egg

---
 themes/danix-xyz-hacker/layouts/404.html | 169 +++++++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 themes/danix-xyz-hacker/layouts/404.html

(limited to 'themes/danix-xyz-hacker/layouts/404.html')

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
new file mode 100644
index 0000000..8cb694c
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/404.html
@@ -0,0 +1,169 @@
+{{ define "main" }}
+<main class="min-h-screen flex items-center justify-center px-4">
+  <div class="text-center max-w-2xl w-full" x-data="notFoundPage()">
+    <!-- 404 Heading -->
+    <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
+      404
+    </h1>
+
+    <!-- Error Message -->
+    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      {{ i18n "notFound" }}
+    </h2>
+
+    <p class="text-lg text-text-dim mb-8">
+      {{ i18n "notFoundMessage" }}
+    </p>
+
+    <!-- Search Box -->
+    <div class="mb-12">
+      <form id="search-form" class="flex flex-col gap-4">
+        <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
+        <input
+          id="search-input"
+          type="text"
+          placeholder="{{ (i18n "searchPlaceholder") }}"
+          class="px-4 py-3 border-2 border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
+          @input="filterArticles($el.value)"
+        />
+      </form>
+      <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
+        <template x-for="article in filteredArticles" :key="article.title">
+          <div class="p-4 border-l-4 border-accent bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <a :href="article.url" class="block text-left">
+              <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
+              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+      <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
+        {{ i18n "noSearchResults" }}
+      </div>
+    </div>
+
+    <!-- Recent Articles Section -->
+    <div class="mb-12">
+      <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
+      <div class="space-y-4">
+        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
+        <div class="p-4 border-l-4 border-accent bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+          <a href="{{ .Permalink }}" class="block text-left">
+            <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
+            <p class="text-sm text-text-dim mt-1">
+              {{ .Date.Format "Jan 02, 2006" }}
+            </p>
+          </a>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+
+    <!-- Navigation Links -->
+    <div class="space-y-4 flex flex-col items-center mb-12">
+      <a href="{{ .Site.BaseURL }}" class="btn btn-primary">
+        {{ i18n "goHome" }}
+      </a>
+      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/articles/" class="btn btn-secondary">
+        {{ i18n "browseArticles" }}
+      </a>
+      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/here/" class="btn btn-outline">
+        {{ i18n "contactSupport" }}
+      </a>
+    </div>
+
+    <!-- Easter Egg Trigger -->
+    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700">
+      <button
+        @click="toggleEasterEgg()"
+        class="text-sm text-text-dim hover:text-accent transition-colors underline"
+      >
+        {{ i18n "followWhiteRabbit" }}
+      </button>
+    </div>
+
+    <!-- Easter Egg Modal (Hidden by default) -->
+    <div
+      class="fixed inset-0 z-50 hidden"
+      :class="{ 'flex items-center justify-center': showEasterEgg }"
+      x-show="showEasterEgg"
+      x-cloak
+    >
+      <!-- Overlay -->
+      <div
+        class="absolute inset-0 bg-black/50"
+        @click="showEasterEgg = false"
+      ></div>
+
+      <!-- Modal Content -->
+      <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
+        <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
+
+        <div class="space-y-4">
+          <button
+            @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
+            class="w-full btn btn-primary"
+          >
+            💊 {{ i18n "bluePill" }}
+          </button>
+
+          <button
+            @click="goToRandomArticle()"
+            class="w-full btn btn-secondary"
+          >
+            🐰 {{ i18n "redPill" }}
+          </button>
+        </div>
+
+        <button
+          @click="showEasterEgg = false"
+          class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
+          aria-label="Close modal"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script>
+function notFoundPage() {
+  return {
+    showEasterEgg: false,
+    searchQuery: '',
+    filteredArticles: [],
+    allArticles: [
+      {{ range (where .Site.RegularPages "Section" "articles") }}
+      {
+        title: '{{ .Title | safeJS }}',
+        url: '{{ .Permalink }}',
+        date: '{{ .Date.Format "Jan 02, 2006" }}',
+        content: '{{ (.Summary | plainify | safeJS) }}'
+      },
+      {{ end }}
+    ],
+    filterArticles(query) {
+      this.searchQuery = query.toLowerCase();
+      if (!this.searchQuery) {
+        this.filteredArticles = [];
+        return;
+      }
+      this.filteredArticles = this.allArticles.filter(article =>
+        article.title.toLowerCase().includes(this.searchQuery) ||
+        article.content.toLowerCase().includes(this.searchQuery)
+      ).slice(0, 5);
+    },
+    toggleEasterEgg() {
+      this.showEasterEgg = !this.showEasterEgg;
+    },
+    goToRandomArticle() {
+      if (this.allArticles.length > 0) {
+        const randomArticle = this.allArticles[Math.floor(Math.random() * this.allArticles.length)];
+        window.location.href = randomArticle.url;
+      }
+    }
+  };
+}
+</script>
+{{ end }}
-- 
cgit v1.2.3