fix: move notFoundPage() function definition before x-data initialization to fix easter egg button

1 files changed, 43 insertions, 40 deletions

diff --git a/themes/danix-xyz-hacker/layouts/404.html b/themes/danix-xyz-hacker/layouts/404.html
index e39784e..3e6ef01 100644
--- a/themes/danix-xyz-hacker/layouts/404.html
+++ b/themes/danix-xyz-hacker/layouts/404.html
@@ -1,4 +1,46 @@
 {{ define "main" }}
+
+<!-- Define Alpine.js component function first (before x-data references it) -->
+<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;
+      }
+    }
+  };
+}
+</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">
@@ -68,7 +110,7 @@
       <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/articles/" class="btn btn-secondary">
         {{ i18n "browseArticles" }}
       </a>
-      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/here/" class="btn btn-outline">
+      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/is/here/" class="btn btn-outline">
         {{ i18n "contactSupport" }}
       </a>
     </div>
@@ -129,43 +171,4 @@
   </div>
 </main>
 
-<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;
-      }
-    }
-  };
-}
-</script>
 {{ end }}