diff options
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/not-found-page.js | 38 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/404.html | 51 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/baseof.html | 4 |
3 files changed, 54 insertions, 39 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; + } + } + })); +}); 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 }} |