{{ 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">
<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>
</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 }}