forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

appview/pages: better error page styles

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>

anirudh.fi 634c03e1 1a5f1bc0

verified
Changed files
+113 -18
appview
middleware
pages
+1 -1
appview/middleware/middleware.go
···
if err != nil {
// invalid did or handle
log.Println("failed to resolve repo")
-
mw.pages.Error404(w)
+
mw.pages.ErrorKnot404(w)
return
}
+24 -4
appview/pages/templates/errors/404.html
···
{{ define "title" }}404 &middot; tangled{{ end }}
{{ define "content" }}
-
<h1>404 &mdash; nothing like that here!</h1>
-
<p>
-
It seems we couldn't find what you were looking for. Sorry about that!
-
</p>
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+
<div class="mb-6">
+
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+
{{ i "search-x" "w-8 h-8 text-gray-400 dark:text-gray-500" }}
+
</div>
+
</div>
+
+
<div class="space-y-4">
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+
404 &mdash; page not found
+
</h1>
+
<p class="text-gray-600 dark:text-gray-300">
+
The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.
+
</p>
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+
<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">
+
{{ i "arrow-left" "w-4 h-4" }}
+
go back
+
</a>
+
</div>
+
</div>
+
</div>
+
</div>
{{ end }}
+36 -3
appview/pages/templates/errors/500.html
···
{{ define "title" }}500 &middot; tangled{{ end }}
{{ define "content" }}
-
<h1>500 &mdash; something broke!</h1>
-
<p>We're working on getting service back up. Hang tight!</p>
-
{{ end }}
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+
<div class="mb-6">
+
<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">
+
{{ i "alert-triangle" "w-8 h-8 text-red-500 dark:text-red-400" }}
+
</div>
+
</div>
+
+
<div class="space-y-4">
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+
500 &mdash; internal server error
+
</h1>
+
<p class="text-gray-600 dark:text-gray-300">
+
Something went wrong on our end. We've been notified and are working to fix the issue.
+
</p>
+
<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">
+
<div class="flex items-center gap-2">
+
{{ i "info" "w-4 h-4" }}
+
<span class="font-medium">we're on it!</span>
+
</div>
+
<p class="mt-1">Our team has been automatically notified about this error.</p>
+
</div>
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+
<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">
+
{{ i "refresh-cw" "w-4 h-4" }}
+
try again
+
</button>
+
<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">
+
{{ i "home" "w-4 h-4" }}
+
back to home
+
</a>
+
</div>
+
</div>
+
</div>
+
</div>
+
{{ end }}
+28 -5
appview/pages/templates/errors/503.html
···
{{ define "title" }}503 &middot; tangled{{ end }}
{{ define "content" }}
-
<h1>503 &mdash; unable to reach knot</h1>
-
<p>
-
We were unable to reach the knot hosting this repository. Try again
-
later.
-
</p>
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+
<div class="mb-6">
+
<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">
+
{{ i "server-off" "w-8 h-8 text-blue-500 dark:text-blue-400" }}
+
</div>
+
</div>
+
+
<div class="space-y-4">
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+
503 &mdash; service unavailable
+
</h1>
+
<p class="text-gray-600 dark:text-gray-300">
+
We were unable to reach the knot hosting this repository. The service may be temporarily unavailable.
+
</p>
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+
<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">
+
{{ i "refresh-cw" "w-4 h-4" }}
+
try again
+
</button>
+
<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">
+
{{ i "arrow-left" "w-4 h-4" }}
+
back to timeline
+
</a>
+
</div>
+
</div>
+
</div>
+
</div>
{{ end }}
+24 -5
appview/pages/templates/errors/knot404.html
···
{{ define "title" }}404 &middot; tangled{{ end }}
{{ define "content" }}
-
<h1>404 &mdash; repository not found!</h1>
-
<p>
-
The repository you were looking for could not be found.
-
The knot serving the repository may be unavailable.
-
</p>
+
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+
<div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+
<div class="mb-6">
+
<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">
+
{{ i "book-x" "w-8 h-8 text-orange-500 dark:text-orange-400" }}
+
</div>
+
</div>
+
+
<div class="space-y-4">
+
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+
404 &mdash; repository not found
+
</h1>
+
<p class="text-gray-600 dark:text-gray-300">
+
The repository you were looking for could not be found. The knot serving the repository may be unavailable.
+
</p>
+
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+
<a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline">
+
{{ i "arrow-left" "w-4 h-4" }}
+
back to timeline
+
</a>
+
</div>
+
</div>
+
</div>
+
</div>
{{ end }}