feat(web): basic reader mode

lukewhrit · Nov 11, 2024 · 1fa11e2 · 1fa11e2
1 parent 9ee00a4
commit 1fa11e2
Show file tree

Hide file tree

Showing 5 changed files with 1,359 additions and 26 deletions.
diff --git a/internal/server/fetch.go b/internal/server/fetch.go
@@ -62,37 +62,57 @@ func (s *Server) StaticDocument(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	t, err := template.ParseFS(resources, "web/document.html")
+	// Reader mode or code mode?
+	if r.URL.Query().Get("reader") != "" {
+		t, err := template.ParseFS(resources, "web/reader.html")
 
-	if err != nil {
-		util.RenderError(&resources, w, http.StatusInternalServerError, err)
-		return
-	}
+		if err != nil {
+			util.RenderError(&resources, w, http.StatusInternalServerError, err)
+			return
+		}
 
-	extension := ""
+		data := map[string]interface{}{
+			"Content":   document.Content,
+			"Analytics": template.HTML(config.Config.Analytics),
+		}
 
-	if len(params) == 2 {
-		extension = params[1]
-	}
+		if err := t.Execute(w, data); err != nil {
+			util.RenderError(&resources, w, http.StatusInternalServerError, err)
+			return
+		}
+	} else {
+		t, err := template.ParseFS(resources, "web/document.html")
 
-	highlighted, css, err := util.Highlight(document.Content, extension)
+		if err != nil {
+			util.RenderError(&resources, w, http.StatusInternalServerError, err)
+			return
+		}
 
-	if err != nil {
-		util.RenderError(&resources, w, http.StatusInternalServerError, err)
-		return
-	}
+		extension := ""
 
-	data := map[string]interface{}{
-		"Stylesheet":  template.CSS(css),
-		"Content":     document.Content,
-		"Highlighted": template.HTML(highlighted),
-		"Extension":   extension,
-		"Analytics":   template.HTML(config.Config.Analytics),
-	}
+		if len(params) == 2 {
+			extension = params[1]
+		}
 
-	if err := t.Execute(w, data); err != nil {
-		util.RenderError(&resources, w, http.StatusInternalServerError, err)
-		return
+		highlighted, css, err := util.Highlight(document.Content, extension)
+
+		if err != nil {
+			util.RenderError(&resources, w, http.StatusInternalServerError, err)
+			return
+		}
+
+		data := map[string]interface{}{
+			"Stylesheet":  template.CSS(css),
+			"Content":     document.Content,
+			"Highlighted": template.HTML(highlighted),
+			"Extension":   extension,
+			"Analytics":   template.HTML(config.Config.Analytics),
+		}
+
+		if err := t.Execute(w, data); err != nil {
+			util.RenderError(&resources, w, http.StatusInternalServerError, err)
+			return
+		}
 	}
 }
 

diff --git a/internal/server/web/document.html b/internal/server/web/document.html
@@ -48,7 +48,7 @@
             </svg>
         </a>
 
-        <a id="wiki" href="https://docs.spaceb.in" aria-label="Spacebin Documentation">
+        <a id="reader-mode" href="?reader=true" aria-label="Enable reader mode">
             <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" />
@@ -81,4 +81,4 @@
     </main>
 </body>
 
-</html>
+</html>
diff --git a/internal/server/web/reader.html b/internal/server/web/reader.html
@@ -0,0 +1,85 @@
+<!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" />
+
+    <style>{{.Stylesheet}}</style>
+
+
+    <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">
+    <link rel="stylesheet" type="text/css" href="/static/reader.css">
+
+    {{.Analytics}}
+
+</head>
+
+<body>
+    <header>
+        <img src="/static/logo.svg" alt="Spacebin Logo" />
+
+        <a id="home" href="/" aria-label="Home">
+            <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="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/lukewhrit/spacebin" 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="reader-mode" href="?reader=true" aria-label="Enable reader mode">
+            <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>
+
+        <button id="copy" aria-label="Copy Document" onclick="navigator.clipboard.writeText('{{.Content}}')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+        </button>
+
+        <p id="donate-long">
+            Keep Spacebin free of ads by
+            <a id="donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">donating.</a>
+            💕
+        </p>
+        <p id="donate-short">
+            <a id="short-donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">Donate 💕</a>
+        </p>
+    </header>
+
+    <main class="markdown-body">
+        {{.Content}}
+    </main>
+</body>
+
+</html>
diff --git a/internal/server/web/static/global.css b/internal/server/web/static/global.css
@@ -154,3 +154,11 @@ h1 {
 .chroma {
     background-color: transparent !important;
 }
+
+.markdown-body {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--color-foreground);
+    margin: 0 auto;
+    padding: 0 25%;
+}