feat(server/web): error display pages

lukewhrit · Jul 6, 2024 · be01023 · be01023
1 parent 979efce
commit be01023
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 1 deletion.
diff --git a/internal/server/fetch.go b/internal/server/fetch.go
@@ -57,7 +57,7 @@ func (s *Server) StaticDocument(w http.ResponseWriter, r *http.Request) {
 	// Validate document ID
 	if len(id) != s.Config.IDLength && !slices.Contains(s.Config.Documents, id) {
 		err := fmt.Errorf("id is of length %d, should be %d", len(id), s.Config.IDLength)
-		util.WriteError(w, http.StatusBadRequest, err)
+		util.RenderError(&resources, w, http.StatusBadRequest, err)
 		return
 	}
 

diff --git a/internal/server/web/error.html b/internal/server/web/error.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Spacebin</title>
+
+    <meta property="og:title" content="Spacebin: Text sharing for the final frontier" />
+    <meta property="og:url" content="spaceb.in" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description"
+        content="A highly-reliable pastebin server, built in Go, that's capable of serving notes, code, or any other documents." />
+    <meta name="description"
+        content="Spacebin is a highly-reliable pastebin server, built with Go, that's capable of serving notes, code, or any other documents." />
+    <meta property="og:color" content="#e34b4a" />
+
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" type="text/css" href="/static/normalize.css">
+    <link rel="stylesheet" type="text/css" href="/static/global.css">
+</head>
+
+<body>
+    <header>
+        <img src="/static/logo.svg" alt="Spacebin Logo" />
+
+        <a id="home" href="/" aria-label="Spacebin Home Page">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
+                class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" stroke-width="2">
+                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" />
+            </svg>
+        </a>
+
+
+        <a id="github" href="https://github.com/orca-group/spirit" aria-label="Spacebin Github">
+            <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+            </svg>
+        </a>
+
+        <a id="wiki" href="https://github.com/orca-group/spirit/blob/main/README.md/#-spirit"
+            aria-label="Spacebin Documentation">
+            <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+            </svg>
+        </a>
+
+        <p id="donate" aria-label="Spacebin Donation Page">
+            Keep Spacebin free of ads by <a href="https://github.com/sponsors/lukewhrit">donating</a>. ❤️
+        </p>
+    </header>
+
+    <main>
+        <h1 id="error">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" id="warning" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" x2="12" y1="8" y2="12" />
+                <line x1="12" x2="12.01" y1="16" y2="16" />
+            </svg>
+            {{.Status}}
+        </h1>
+        <p>{{.Error}}</p>
+    </main>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>
diff --git a/internal/server/web/static/global.css b/internal/server/web/static/global.css
@@ -44,6 +44,11 @@ textarea {
     display: inline;
 }
 
+textarea:hover, textarea:focus {
+    outline: none;
+    border: none;
+}
+
 header {
     padding: 3px 9px;
     margin: 0;
@@ -100,3 +105,20 @@ img {
     max-width: 24px;
     height: auto;
 }
+
+h1 {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+    margin-bottom: 5px;
+    padding: 0;
+}
+
+#error {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#warning {
+    color: #F97583;
+}
diff --git a/internal/util/helpers.go b/internal/util/helpers.go
@@ -17,6 +17,7 @@
 package util
 
 import (
+	"embed"
 	"encoding/json"
 	"fmt"
 	"html/template"
@@ -105,3 +106,26 @@ func WriteError(w http.ResponseWriter, status int, e error) error {
 
 	return nil
 }
+
+// RenderError renders errors to the client using an HTML template.
+func RenderError(r *embed.FS, w http.ResponseWriter, status int, err error) error {
+	tmpl := template.Must(template.ParseFS(r, "web/error.html"))
+
+	w.Header().Set("Content-Type", "text/html")
+	w.WriteHeader(status)
+
+	data := struct {
+		Status string
+		Error  string
+	}{
+		Status: strings.Join([]string{fmt.Sprintf("%d", status), http.StatusText(status)}, " "),
+		Error:  err.Error(),
+	}
+
+	err = tmpl.Execute(w, data)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}