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

diff --git a/themes/danix-xyz-hacker/assets/js/not-found-page.js b/themes/danix-xyz-hacker/assets/js/not-found-page.js
new file mode 100644 (file)
index 0000000..1590b75
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/js/not-found-page.js
@@ -0,0 +1,38 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('notFoundPage', () => ({
+    showEasterEgg: false,
+    searchQuery: '',
+    filteredArticles: [],
+    allArticles: [],
+
+    init() {
+      // Initialize articles from window.articlesData if available
+      if (window.articlesData) {
+        this.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() {
+      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;
+      }
+    }
+  }));
+});

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index 3e6ef010e6d774a08fd14429099e3b8958037504..beb0b8964643e2a6354831cb0836ee635fcb25a9 100644 (file)
--- 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 10f4392d310a2e0c811c69dc9b328772eb4e8b88..13f3fd2c51ce083d50628feb347e5735600badde 100644 (file)
--- 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 }}