ansxor.ca
forked from
tangled.org/core
this repo has no description
appview/pages: better error page styles
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>
anirudh.fi
+1
-1
appview/middleware/middleware.go
+1
-1
appview/middleware/middleware.go
+24
-4
appview/pages/templates/errors/404.html
+24
-4
appview/pages/templates/errors/404.html
···
1
1
{{ define "title" }}404 · tangled{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>404 — nothing like that here!</h1>
5
-
<p>
6
-
It seems we couldn't find what you were looking for. Sorry about that!
7
-
</p>
4
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
5
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
6
+
<div class="mb-6">
7
+
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
8
+
{{ i "search-x" "w-8 h-8 text-gray-400 dark:text-gray-500" }}
9
+
</div>
10
+
</div>
11
+
12
+
<div class="space-y-4">
13
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
14
+
404 — page not found
15
+
</h1>
16
+
<p class="text-gray-600 dark:text-gray-300">
17
+
The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.
18
+
</p>
19
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
20
+
<a href="javascript:history.back()" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
21
+
{{ i "arrow-left" "w-4 h-4" }}
22
+
go back
23
+
</a>
24
+
</div>
25
+
</div>
26
+
</div>
27
+
</div>
8
28
{{ end }}
+36
-3
appview/pages/templates/errors/500.html
+36
-3
appview/pages/templates/errors/500.html
···
1
1
{{ define "title" }}500 · tangled{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>500 — something broke!</h1>
5
-
<p>We're working on getting service back up. Hang tight!</p>
6
-
{{ end }}
4
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
5
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
6
+
<div class="mb-6">
7
+
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
8
+
{{ i "alert-triangle" "w-8 h-8 text-red-500 dark:text-red-400" }}
9
+
</div>
10
+
</div>
11
+
12
+
<div class="space-y-4">
13
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
14
+
500 — internal server error
15
+
</h1>
16
+
<p class="text-gray-600 dark:text-gray-300">
17
+
Something went wrong on our end. We've been notified and are working to fix the issue.
18
+
</p>
19
+
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-3 text-sm text-yellow-800 dark:text-yellow-200">
20
+
<div class="flex items-center gap-2">
21
+
{{ i "info" "w-4 h-4" }}
22
+
<span class="font-medium">we're on it!</span>
23
+
</div>
24
+
<p class="mt-1">Our team has been automatically notified about this error.</p>
25
+
</div>
26
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
27
+
<button onclick="location.reload()" class="btn-create px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline hover:text-white">
28
+
{{ i "refresh-cw" "w-4 h-4" }}
29
+
try again
30
+
</button>
31
+
<a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
32
+
{{ i "home" "w-4 h-4" }}
33
+
back to home
34
+
</a>
35
+
</div>
36
+
</div>
37
+
</div>
38
+
</div>
39
+
{{ end }}
+28
-5
appview/pages/templates/errors/503.html
+28
-5
appview/pages/templates/errors/503.html
···
1
1
{{ define "title" }}503 · tangled{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>503 — unable to reach knot</h1>
5
-
<p>
6
-
We were unable to reach the knot hosting this repository. Try again
7
-
later.
8
-
</p>
4
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
5
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
6
+
<div class="mb-6">
7
+
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
8
+
{{ i "server-off" "w-8 h-8 text-blue-500 dark:text-blue-400" }}
9
+
</div>
10
+
</div>
11
+
12
+
<div class="space-y-4">
13
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
14
+
503 — service unavailable
15
+
</h1>
16
+
<p class="text-gray-600 dark:text-gray-300">
17
+
We were unable to reach the knot hosting this repository. The service may be temporarily unavailable.
18
+
</p>
19
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
20
+
<button onclick="location.reload()" class="btn-create px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline hover:text-white">
21
+
{{ i "refresh-cw" "w-4 h-4" }}
22
+
try again
23
+
</button>
24
+
<a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
25
+
{{ i "arrow-left" "w-4 h-4" }}
26
+
back to timeline
27
+
</a>
28
+
</div>
29
+
</div>
30
+
</div>
31
+
</div>
9
32
{{ end }}
+24
-5
appview/pages/templates/errors/knot404.html
+24
-5
appview/pages/templates/errors/knot404.html
···
1
1
{{ define "title" }}404 · tangled{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>404 — repository not found!</h1>
5
-
<p>
6
-
The repository you were looking for could not be found.
7
-
The knot serving the repository may be unavailable.
8
-
</p>
4
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
5
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
6
+
<div class="mb-6">
7
+
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
8
+
{{ i "book-x" "w-8 h-8 text-orange-500 dark:text-orange-400" }}
9
+
</div>
10
+
</div>
11
+
12
+
<div class="space-y-4">
13
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
14
+
404 — repository not found
15
+
</h1>
16
+
<p class="text-gray-600 dark:text-gray-300">
17
+
The repository you were looking for could not be found. The knot serving the repository may be unavailable.
18
+
</p>
19
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
20
+
<a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline">
21
+
{{ i "arrow-left" "w-4 h-4" }}
22
+
back to timeline
23
+
</a>
24
+
</div>
25
+
</div>
26
+
</div>
27
+
</div>
9
28
{{ end }}