blob: e1fd8c5412614e5f7661fd7424bfd3687620b0e6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
{{ define "main" }}
<!-- Pass articles data to JavaScript for Alpine.js -->
<script>
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="text-center">
<!-- 404 Heading -->
<h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
404
</h1>
<!-- Error Message -->
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Page Not Found
</h2>
<p class="text-lg text-text-dim mb-8">
Sorry, the page you're looking for doesn't exist. Try searching or browse the articles below.
</p>
<!-- Search Box -->
<div class="mb-12">
<form id="search-form" class="flex flex-col gap-4">
<label for="search-input" class="sr-only">Search articles...</label>
<input
id="search-input"
type="text"
placeholder="Search articles..."
class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
@input="filterArticles($el.value)"
/>
</form>
<div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
<template x-for="article in filteredArticles" :key="article.title">
<div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
<a :href="article.url" class="block text-left">
<h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
<p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
</a>
</div>
</template>
</div>
<div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
No articles found matching your search.
</div>
</div>
<!-- Recent Articles Section -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-6">Recent Articles</h3>
<div class="space-y-4">
{{ range first 5 (where .Site.RegularPages "Section" "articles") }}
<div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
<a href="{{ .Permalink }}" class="block text-left">
<h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
<p class="text-sm text-text-dim mt-1">
{{ .Date.Format "Jan 02, 2006" }}
</p>
</a>
</div>
{{ end }}
</div>
</div>
<!-- Navigation Links -->
<div class="space-y-4 flex flex-col items-center mb-12">
<a href="/" class="btn btn-primary">
Go Home
</a>
<a href="/articles/" class="btn btn-secondary">
Browse Articles
</a>
<a href="/is/here/" class="btn btn-outline">
Get in Touch
</a>
</div>
<!-- Easter Egg Trigger -->
<div class="mt-12 pt-8 border-t border-border">
<button
type="button"
@click="toggleEasterEgg()"
class="text-sm text-text-dim hover:text-accent transition-colors underline"
>
Follow the white rabbit...
</button>
</div>
<!-- Easter Egg Modal (Hidden by default) -->
<div
class="fixed inset-0 z-50"
:class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
x-show="showEasterEgg"
x-cloak
>
<!-- Overlay -->
<div
class="absolute inset-0 bg-black/50"
@click="showEasterEgg = false"
></div>
<!-- Modal Content -->
<div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
<h2 class="text-2xl font-bold mb-6 text-accent">Choose Your Path</h2>
<div class="space-y-4">
<button
type="button"
@click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
class="w-full btn btn-primary"
>
💊 Stay Here
</button>
<button
type="button"
@click="goToRandomArticle()"
class="w-full btn btn-secondary"
>
🐰 Show Me More
</button>
</div>
<button
type="button"
@click="showEasterEgg = false"
class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
aria-label="Close modal"
>
✕
</button>
</div>
</div>
</div>
</div>
</main>
{{ end }}
|
