From fe7c7a4841a58dec4b4957e9c9a32aec5adcade6 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 12:24:04 +0200
Subject: fix: use content-based 404 pages with proper language context

Created language-specific 404 content pages (content/en/404.md and
content/it/404.md) that Hugo renders with the correct language context.
Updated redirect rules and created _default/404.html layout that uses
i18n properly. Now .Lang is set correctly for translation strings.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 content/en/404.md                                 |   5 +
 content/it/404.md                                 |   5 +
 hugo.toml                                         |   4 +-
 themes/danix-xyz-hacker/layouts/404.en.html       | 151 ---------------------
 themes/danix-xyz-hacker/layouts/404.it.html       | 151 ---------------------
 themes/danix-xyz-hacker/layouts/_default/404.html | 155 ++++++++++++++++++++++
 6 files changed, 167 insertions(+), 304 deletions(-)
 create mode 100644 content/en/404.md
 create mode 100644 content/it/404.md
 delete mode 100644 themes/danix-xyz-hacker/layouts/404.en.html
 delete mode 100644 themes/danix-xyz-hacker/layouts/404.it.html
 create mode 100644 themes/danix-xyz-hacker/layouts/_default/404.html

diff --git a/content/en/404.md b/content/en/404.md
new file mode 100644
index 0000000..ce95b59
--- /dev/null
+++ b/content/en/404.md
@@ -0,0 +1,5 @@
+---
+title: "404"
+outputs:
+  - html
+---
diff --git a/content/it/404.md b/content/it/404.md
new file mode 100644
index 0000000..ce95b59
--- /dev/null
+++ b/content/it/404.md
@@ -0,0 +1,5 @@
+---
+title: "404"
+outputs:
+  - html
+---
diff --git a/hugo.toml b/hugo.toml
index 364d0d3..efbf60b 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -127,10 +127,10 @@ enableRobotsTXT = true
 
 [[redirects]]
   from = '/it/**'
-  to = '/it/404.html'
+  to = '/it/'
   status = 404
 
 [[redirects]]
   from = '/**'
-  to = '/404.html'
+  to = '/'
   status = 404
diff --git a/themes/danix-xyz-hacker/layouts/404.en.html b/themes/danix-xyz-hacker/layouts/404.en.html
deleted file mode 100644
index e1fd8c5..0000000
--- a/themes/danix-xyz-hacker/layouts/404.en.html
+++ /dev/null
@@ -1,151 +0,0 @@
-{{ define "main" }}
-
-<!-- Pass articles data to JavaScript for Alpine.js -->
-<script>
-window.articlesData = [
-  {{ range (where .Site.RegularPages "Section" "articles") }}
-  {
-    title: '{{ .Title | safeJS }}',
-    url: '{{ .Permalink }}',
-    date: '{{ .Date.Format "Jan 02, 2006" }}',
-    content: '{{ (.Summary | plainify | safeJS) }}'
-  },
-  {{ end }}
-];
-</script>
-
-<main class="min-h-screen px-4 py-12">
-  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
-    <div class="text-center">
-    <!-- 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">
-      Page Not Found
-    </h2>
-
-    <p class="text-lg text-text-dim mb-8">
-      Sorry, the page you're looking for doesn't exist. Try searching or browse the articles below.
-    </p>
-
-    <!-- Search Box -->
-    <div class="mb-12">
-      <form id="search-form" class="flex flex-col gap-4">
-        <label for="search-input" class="sr-only">Search articles...</label>
-        <input
-          id="search-input"
-          type="text"
-          placeholder="Search articles..."
-          class="px-4 py-3 border-2 border-border 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-bg/50 hover:bg-bg/70 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">
-        No articles found matching your search.
-      </div>
-    </div>
-
-    <!-- Recent Articles Section -->
-    <div class="mb-12">
-      <h3 class="text-2xl font-bold mb-6">Recent Articles</h3>
-      <div class="space-y-4">
-        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
-        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 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="/" class="btn btn-primary">
-        Go Home
-      </a>
-      <a href="/articles/" class="btn btn-secondary">
-        Browse Articles
-      </a>
-      <a href="/is/here/" class="btn btn-outline">
-        Get in Touch
-      </a>
-    </div>
-
-    <!-- Easter Egg Trigger -->
-    <div class="mt-12 pt-8 border-t border-border">
-      <button
-        type="button"
-        @click="toggleEasterEgg()"
-        class="text-sm text-text-dim hover:text-accent transition-colors underline"
-      >
-        Follow the white rabbit...
-      </button>
-    </div>
-
-      <!-- Easter Egg Modal (Hidden by default) -->
-      <div
-        class="fixed inset-0 z-50"
-        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !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">Choose Your Path</h2>
-
-          <div class="space-y-4">
-            <button
-              type="button"
-              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
-              class="w-full btn btn-primary"
-            >
-              💊 Stay Here
-            </button>
-
-            <button
-              type="button"
-              @click="goToRandomArticle()"
-              class="w-full btn btn-secondary"
-            >
-              🐰 Show Me More
-            </button>
-          </div>
-
-          <button
-            type="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>
-  </div>
-</main>
-
-{{ end }}
diff --git a/themes/danix-xyz-hacker/layouts/404.it.html b/themes/danix-xyz-hacker/layouts/404.it.html
deleted file mode 100644
index 3b4ea2e..0000000
--- a/themes/danix-xyz-hacker/layouts/404.it.html
+++ /dev/null
@@ -1,151 +0,0 @@
-{{ define "main" }}
-
-<!-- Pass articles data to JavaScript for Alpine.js -->
-<script>
-window.articlesData = [
-  {{ range (where .Site.RegularPages "Section" "articles") }}
-  {
-    title: '{{ .Title | safeJS }}',
-    url: '{{ .Permalink }}',
-    date: '{{ .Date.Format "Jan 02, 2006" }}',
-    content: '{{ (.Summary | plainify | safeJS) }}'
-  },
-  {{ end }}
-];
-</script>
-
-<main class="min-h-screen px-4 py-12">
-  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
-    <div class="text-center">
-    <!-- 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">
-      Pagina Non Trovata
-    </h2>
-
-    <p class="text-lg text-text-dim mb-8">
-      Mi dispiace, la pagina che stai cercando non esiste. Prova a cercare o sfoglia gli articoli qui sotto.
-    </p>
-
-    <!-- Search Box -->
-    <div class="mb-12">
-      <form id="search-form" class="flex flex-col gap-4">
-        <label for="search-input" class="sr-only">Cerca articoli...</label>
-        <input
-          id="search-input"
-          type="text"
-          placeholder="Cerca articoli..."
-          class="px-4 py-3 border-2 border-border 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-bg/50 hover:bg-bg/70 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">
-        Nessun articolo trovato che corrisponda alla tua ricerca.
-      </div>
-    </div>
-
-    <!-- Recent Articles Section -->
-    <div class="mb-12">
-      <h3 class="text-2xl font-bold mb-6">Articoli Recenti</h3>
-      <div class="space-y-4">
-        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
-        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 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="/it/" class="btn btn-primary">
-        Torna a Casa
-      </a>
-      <a href="/it/articles/" class="btn btn-secondary">
-        Sfoglia Articoli
-      </a>
-      <a href="/it/is/here/" class="btn btn-outline">
-        Contattami
-      </a>
-    </div>
-
-    <!-- Easter Egg Trigger -->
-    <div class="mt-12 pt-8 border-t border-border">
-      <button
-        type="button"
-        @click="toggleEasterEgg()"
-        class="text-sm text-text-dim hover:text-accent transition-colors underline"
-      >
-        Segui il coniglio bianco...
-      </button>
-    </div>
-
-      <!-- Easter Egg Modal (Hidden by default) -->
-      <div
-        class="fixed inset-0 z-50"
-        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !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">Scegli il Tuo Percorso</h2>
-
-          <div class="space-y-4">
-            <button
-              type="button"
-              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'"
-              class="w-full btn btn-primary"
-            >
-              💊 Rimani Qui
-            </button>
-
-            <button
-              type="button"
-              @click="goToRandomArticle()"
-              class="w-full btn btn-secondary"
-            >
-              🐰 Mostrami di Più
-            </button>
-          </div>
-
-          <button
-            type="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>
-  </div>
-</main>
-
-{{ end }}
diff --git a/themes/danix-xyz-hacker/layouts/_default/404.html b/themes/danix-xyz-hacker/layouts/_default/404.html
new file mode 100644
index 0000000..4b313cd
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/_default/404.html
@@ -0,0 +1,155 @@
+{{ define "main" }}
+
+<!-- Pass articles data to JavaScript for Alpine.js -->
+<script>
+window.articlesData = [
+  {{ range (where .Site.RegularPages "Section" "articles") }}
+  {
+    title: '{{ .Title | safeJS }}',
+    url: '{{ .Permalink }}',
+    date: '{{ .Date.Format "Jan 02, 2006" }}',
+    content: '{{ (.Summary | plainify | safeJS) }}'
+  },
+  {{ end }}
+];
+</script>
+
+<main class="min-h-screen px-4 py-12">
+  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
+    <div class="text-center">
+    <!-- 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-border 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-bg/50 hover:bg-bg/70 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-bg/50 hover:bg-bg/70 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">
+      {{ $homeLink := "/" }}
+      {{ if eq .Lang "it" }}
+        {{ $homeLink = "/it/" }}
+      {{ end }}
+      <a href="{{ $homeLink }}" class="btn btn-primary">
+        {{ i18n "goHome" }}
+      </a>
+      <a href="{{ if eq .Lang "it" }}/it{{ end }}/articles/" class="btn btn-secondary">
+        {{ i18n "browseArticles" }}
+      </a>
+      <a href="{{ if eq .Lang "it" }}/it{{ end }}/is/here/" class="btn btn-outline">
+        {{ i18n "contactSupport" }}
+      </a>
+    </div>
+
+    <!-- Easter Egg Trigger -->
+    <div class="mt-12 pt-8 border-t border-border">
+      <button
+        type="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"
+        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !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
+              type="button"
+              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}{{ if eq .Lang "it" }}it/{{ end }}'"
+              class="w-full btn btn-primary"
+            >
+              💊 {{ i18n "bluePill" }}
+            </button>
+
+            <button
+              type="button"
+              @click="goToRandomArticle()"
+              class="w-full btn btn-secondary"
+            >
+              🐰 {{ i18n "redPill" }}
+            </button>
+          </div>
+
+          <button
+            type="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>
+  </div>
+</main>
+
+{{ end }}
-- 
cgit v1.2.3