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

1 files changed, 38 insertions, 0 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
new file mode 100644
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;
+      }
+    }
+  }));
+});