refactor: unify 404 page with shared search functionality

Removes inline window.articlesData from both 404 pages. not-found-page.js now uses shared notFoundPage Alpine component from search.js (lazy-loaded index). Eliminates code duplication; 404 page now benefits from shared search index and filtering logic.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

3 files changed, 7 insertions, 61 deletions

diff --git a/themes/danix-xyz-hacker/assets/js/not-found-page.js b/themes/danix-xyz-hacker/assets/js/not-found-page.js
index 6ec8895..2b4f676 100644
--- a/themes/danix-xyz-hacker/assets/js/not-found-page.js
+++ b/themes/danix-xyz-hacker/assets/js/not-found-page.js
@@ -1,35 +1,9 @@
+// 404 page: initialize shared notFoundPage Alpine component
 document.addEventListener('alpine:init', () => {
-  Alpine.data('notFoundPage', () => ({
-    showEasterEgg: false,
-    searchQuery: '',
-    filteredArticles: [],
-    allArticles: window.articlesData || [],
-
-    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() {
-      console.log('toggleEasterEgg called, current state:', this.showEasterEgg);
-      this.showEasterEgg = !this.showEasterEgg;
-      console.log('new state:', this.showEasterEgg);
-    },
-
-    goToRandomArticle() {
-      if (this.allArticles.length > 0) {
-        const randomArticle = this.allArticles[Math.floor(Math.random() * this.allArticles.length)];
-        window.location.href = randomArticle.url;
-      }
-    }
-  }));
-
-  console.log('notFoundPage Alpine component registered');
+  // Ensure search index is preloaded on 404 page
+  const notFoundElement = document.querySelector('[x-data*="notFoundPage"]');
+  if (notFoundElement && notFoundElement.__x) {
+    notFoundElement.__x.$data.init();
+  }
+  console.log('404 page initialized with shared search functionality');
 });
diff --git a/themes/danix-xyz-hacker/layouts/404.en.html b/themes/danix-xyz-hacker/layouts/404.en.html
index 6ed4892..8d8641d 100644
--- a/themes/danix-xyz-hacker/layouts/404.en.html
+++ b/themes/danix-xyz-hacker/layouts/404.en.html
@@ -1,19 +1,5 @@
 {{ 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">
diff --git a/themes/danix-xyz-hacker/layouts/404.it.html b/themes/danix-xyz-hacker/layouts/404.it.html
index 805b19a..1a8fbbe 100644
--- a/themes/danix-xyz-hacker/layouts/404.it.html
+++ b/themes/danix-xyz-hacker/layouts/404.it.html
@@ -1,19 +1,5 @@
 {{ 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">