fix: refactor 404 page to use Alpine.data() pattern for proper function registration

2 files changed, 16 insertions, 39 deletions

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index 3e6ef01..beb0b89 100644
--- a/themes/danix-xyz-hacker/layouts/404.html
+++ b/themes/danix-xyz-hacker/layouts/404.html
@@ -1,48 +1,21 @@
 {{ define "main" }}
 
-<!-- Define Alpine.js component function first (before x-data references it) -->
+<!-- Pass articles data to JavaScript for Alpine.js -->
 <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;
-      }
-    }
-  };
-}
+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="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()" @notFoundPage:init="init()">
     <div class="text-center">
     <!-- 404 Heading -->
     <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html
index 10f4392..13f3fd2 100644
--- a/themes/danix-xyz-hacker/layouts/_default/baseof.html
+++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html
@@ -91,6 +91,10 @@
   {{ $contactScript := resources.Get "js/contact-form.js" | minify }}
   <script src="{{ $contactScript.RelPermalink }}"></script>
 
+  <!-- 404 Not Found page script -->
+  {{ $notFoundScript := resources.Get "js/not-found-page.js" | minify }}
+  <script src="{{ $notFoundScript.RelPermalink }}"></script>
+
   <!-- Reading progress bar script (on single pages/articles) -->
   {{ if eq .Kind "page" }}
   {{ $progressScript := resources.Get "js/reading-progress.js" | minify }}