chore: version 1.8

refactor: rework some author logic

.gitignore

@@ -1,2 +1,4 @@
 .env
-docker-compose.yml
+docker-compose.yml
+.DS_Store
+*bin

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Package",
+            "type": "go",
+            "request": "launch",
+            "mode": "auto",
+            "program": "."
+        }
+    ]
+}

README.md

@@ -6,26 +6,56 @@ This project is super lightweight by design. The UI is simple and the frontend i
 
 ## Screenshots
 
-![Home](https://cdn.horizon.pics/7HbXKZ3JBJbBDMtt51DVJgo5THFMYX.png)
+![Home](https://files.horizon.pics/e2b9275c-1409-4978-801b-de981a8d3ae9?a=1&mime1=image&mime2=png)
 
-![Question](https://cdn.horizon.pics/lqEuJMzYpgeB8au4QASsZ0S0BQHknJ.png)
+![Question](https://files.horizon.pics/0f6b0036-87f0-4acd-9a0f-936b5c397a73?a=1&mime1=image&mime2=png)
 
-![Answer](https://cdn.horizon.pics/0RwQtrxH3COTC9sfo0FsQ56I3Opl0m.png)
+![Answer](https://files.horizon.pics/861ec510-644b-43f2-9439-0a2cae841422?a=1&mime1=image&mime2=png)
 
 ## Clearnet Instances
 
-| Instance URL                                         | Region                  | Notes                                                                                            |
-| ---------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ |
-| [code.whatever.social](https://code.whatever.social) | United States & Germany | Operated by [Whatever Social](https://whatever.social) and [http.james](https://httpjames.space) |
-| [overflow.777.tf](https://overflow.777.tf/)          | The Netherlands         | Operated by [Jae](https://777.tf)                                                                |
-| [ao.vern.cc](https://ao.vern.cc)                     | United States           | Operated by [vern.cc](https://vern.cc)                                                           |
+| Instance URL                                                                    | Region                  | Notes                                                                                            |
+| ------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ |
+| [code.whatever.social](https://code.whatever.social)                            | United States & Germany | Operated by [Whatever Social](https://whatever.social) and [http.james](https://httpjames.space) |
+| [overflow.777.tf](https://overflow.777.tf/)                                     | The Netherlands         | Operated by [Jae](https://777.tf)                                                                |
+| [ao.vern.cc](https://ao.vern.cc)                                                | United States           | Operated by [vern.cc](https://vern.cc)                                                           |
+| [overflow.smnz.de](https://overflow.smnz.de)                                    | Germany                 | Operated by [smnz.de](https://smnz.de)                                                           |
+| [anonymousoverflow.esmailelbob.xyz](https://anonymousoverflow.esmailelbob.xyz/) | Canada                  | Operated by [Esmail EL BoB](https://esmailelbob.xyz)                                             |
+| [overflow.lunar.icu](https://overflow.lunar.icu)                                | Germany                 | Operated by [lunar.icu](https://lunar.icu/)                                                      |
+| [overflow.adminforge.de](https://overflow.adminforge.de/)                       | Germany                 | Operated by [adminForge](https://adminforge.de/)                                                 |
+| [ao.foss.wtf](https://ao.foss.wtf)                                              | Germany                 | Operated by [foss.wtf](https://foss.wtf)                                                         |
+| [overflow.hostux.net](https://overflow.hostux.net/)                             | France                  | Operated by [Hostux](https://hostux.net/)                                                        |
 
 ## Other Instances
 
-| Instance URL                                                                                                                                  | Region        | Notes                                  |
-| --------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------- |
-| [ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion](http://ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion) | United States | Operated by [vern.cc](https://vern.cc) |
-| [vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p](http://vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p)           | United States | Operated by [vern.cc](https://vern.cc) |
+| Instance URL                                                                                                                                                                | Region        | Notes                                                |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------- |
+| [ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion](http://ao.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion)                               | United States | Operated by [vern.cc](https://vern.cc)               |
+| [vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p](http://vernmzgraj6aaoafmehupvtkkynpaa67rxcdj2kinwiy6konn6rq.b32.i2p)                                         | United States | Operated by [vern.cc](https://vern.cc)               |
+| [anonymousoverflow.esmail5pdn24shtvieloeedh7ehz3nrwcdivnfhfcedl7gf4kwddhkqd.onion](http://anonymousoverflow.esmail5pdn24shtvieloeedh7ehz3nrwcdivnfhfcedl7gf4kwddhkqd.onion) | Canada        | Operated by [Esmail EL BoB](https://esmailelbob.xyz) |
+
+## Why use AnonymousOverflow over StackOverflow?
+
+-   StackOverflow collects a lot of information
+
+While it's understandable that StackOverflow collects a lot of technical data for product development, debugging and to serve the best experience to its users, not everyone wants their
+
+> internet protocol (IP) address, [...] browser type and version, time zone setting and location, browser plug-in types and versions, operating system, and platform [...] data
+
+to be collected and stored.
+
+-   StackOverflow shares your information with third-parties
+
+StackOverflow does not sell your information, but it does share it with third-parties, including conglomerates.
+
+> We also partner with other third parties, such as Google Ads and Microsoft Bing, to serve advertising content and manage advertising campaigns. When we use Google Ads or Microsoft Bing Customer Match for advertising campaigns, your personal data will be protected using hashed codes.
+> Google users can control the ads that they see on Google services, including Customer Match ads, in their Google Ads Settings.
+
+Their main website also [contains trackers from Alphabet](https://themarkup.org/blacklight?url=stackoverflow.com).
+
+-   Reduced clutter
+
+StackOverflow has a cluttered UI that might distract you from the content you're trying to find. AnonymousOverflow simplifies the interface to make it easier to read and navigate.
 
 ## How it works
 
@@ -63,13 +93,7 @@ Thanks to [Manav from ente.io](https://ente.io/about) for the handy tool.
 
 ## How to deploy
 
-AnonymousOverflow uses Docker for deployment.
-
-Install Docker for your platform and copy the `docker-compose.example.yml` file to `docker-compose.yml`.
-
-Then, tweak settings if needed.
-
-Run `docker compose up -d` to build and start the container.
+Read the [wiki page](https://github.com/httpjamesm/AnonymousOverflow/wiki/Deployment).
 
 ## Attribution
 

config/version.go

@@ -1,3 +1,3 @@
 package config
 
-var Version = "1.3"
+var Version = "1.8"

docker-compose.example.yml

@@ -8,6 +8,7 @@ services:
       network: 'host'
     environment:
       - APP_URL=https://domain.com
+      - JWT_SIGNING_SECRET=secret
     ports:
       - '80:8080'
     restart: 'always'

env/checks.go

@@ -3,10 +3,14 @@ package env
 import (
 	"fmt"
 	"os"
+
+	"github.com/joho/godotenv"
 )
 
 func RunChecks() {
+	godotenv.Load(".env")
 	checkEnv("APP_URL")
+	checkEnv("JWT_SIGNING_SECRET")
 }
 
 func checkEnv(key string) {

go.mod

@@ -17,6 +17,8 @@ require (
 	github.com/go-playground/universal-translator v0.18.0 // indirect
 	github.com/go-playground/validator/v10 v10.11.1 // indirect
 	github.com/goccy/go-json v0.10.0 // indirect
+	github.com/golang-jwt/jwt/v4 v4.4.3 // indirect
+	github.com/joho/godotenv v1.4.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/leodido/go-urn v1.2.1 // indirect
 	github.com/mattn/go-isatty v0.0.16 // indirect

go.sum

@@ -27,10 +27,14 @@ github.com/go-resty/resty/v2 v2.7.0 h1:me+K9p3uhSmXtrBZ4k9jcEAfJmuC8IivWHwaLZwPr
 github.com/go-resty/resty/v2 v2.7.0/go.mod h1:9PWDzw47qPphMRFfhsyk0NnSgvluHcljSMVIq3w7q0I=
 github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA=
 github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/golang-jwt/jwt/v4 v4.4.3 h1:Hxl6lhQFj4AnOX6MLrsCb/+7tCj7DxP7VA+2rDIq5AU=
+github.com/golang-jwt/jwt/v4 v4.4.3/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
 github.com/google/go-cmp v0.5.5 h1:Khx7svrCpmxxtHBq5j2mp/xVjsi8hQMfNLvJFAlrGgU=
 github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/joho/godotenv v1.4.0 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
+github.com/joho/godotenv v1.4.0/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=

main.go

@@ -32,13 +32,15 @@ func main() {
 	r := gin.Default()
 
 	r.LoadHTMLGlob("templates/*")
-	r.Static("/static", "./public")
 
 	r.Use(gin.Recovery())
+	r.Use(middleware.XssPreventionHeaders())
 	r.Use(middleware.NoCacheMiddleware())
 	r.Use(middleware.OptionsMiddleware())
 	r.Use(middleware.Ratelimit())
 
+	r.GET("/static/*filepath", routes.StaticContent)
+
 	r.GET("/robots.txt", func(c *gin.Context) {
 		c.String(200, "User-agent: *\nDisallow: /")
 	})
@@ -46,10 +48,28 @@ func main() {
 	r.GET("/options/:name", routes.ChangeOptions)
 
 	r.GET("/", routes.GetHome)
-
 	r.POST("/", routes.PostHome)
 
+	r.GET("/questions/:id", func(c *gin.Context) {
+		// redirect user to the question with the title
+		c.Redirect(302, fmt.Sprintf("/questions/%s/placeholder", c.Param("id")))
+	})
 	r.GET("/questions/:id/:title", routes.ViewQuestion)
+	r.GET("/questions/:id/:title/:answerId", func(c *gin.Context) {
+		// redirect user to the answer with the title
+		c.Redirect(302, fmt.Sprintf("/questions/%s/%s#%s", c.Param("id"), c.Param("title"), c.Param("answerId")))
+	})
+	r.GET("/exchange/:sub/questions/:id/:title", routes.ViewQuestion)
+	r.GET("/exchange/:sub/questions/:id", func(c *gin.Context) {
+		// redirect user to the question with the title
+		c.Redirect(302, fmt.Sprintf("/exchange/%s/questions/%s/placeholder", c.Param("sub"), c.Param("id")))
+	})
+	r.GET("/exchange/:sub/questions/:id/:title/:answerId", func(c *gin.Context) {
+		// redirect user to the answer with the title
+		c.Redirect(302, fmt.Sprintf("/exchange/%s/questions/%s/%s#%s", c.Param("sub"), c.Param("id"), c.Param("title"), c.Param("answerId")))
+	})
+
+	r.GET("/proxy", routes.GetImage)
 
 	r.Run(fmt.Sprintf("%s:%s", host, port))
 }

public/comments.css

@@ -0,0 +1,35 @@
+.comments {
+    margin-top: 1rem;
+}
+
+.comments-parent {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.comment-parent {
+    cursor: text;
+}
+
+.comment-top {
+    display: flex;
+}
+
+.comment-score {
+    border-right: 1px solid white;
+    padding-right: .5rem;
+}
+
+.comment-body {
+    font-size: 0.95rem;
+    padding-left: .5rem;
+}
+
+.comment-author {
+    color: var(--muted-text-color);
+    font-size: 0.8rem;
+    padding-left: 1.5rem;
+    margin-top: .25rem;
+}

public/home.css

@@ -25,13 +25,13 @@ body {
 
 .view-form {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
     align-items: center;
 }
 
 .view-input {
     width: 100%;
-    padding: .5rem;
+    padding: 0.5rem;
     border: 2px solid transparent;
     border-radius: 3px;
 
@@ -48,7 +48,7 @@ body {
 }
 
 .view-button {
-    padding: .5rem;
+    padding: 0.5rem;
     border: 2px solid transparent;
     border-radius: 3px;
 
@@ -65,29 +65,39 @@ body {
     background-color: var(--input-bg-hover);
 }
 
-.error {
-    padding: .5rem;
-    background-color: rgb(255, 129, 129);
+.success {
+    background-color: #8cffc0;
     color: black;
+}
+
+.error {
+    background-color: rgb(255, 129, 129);
+}
+
+.error,
+.success {
+    color: black;
+    padding: 0.5rem;
     border-radius: 5px;
     margin-bottom: 1rem;
 }
 
-.error p {
+.error p,
+.success p {
     margin: 0;
 }
 
 .options {
     margin-top: 1rem;
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
 }
 
 .title {
     display: flex;
     width: 100%;
     align-items: center;
-    gap: .5rem;
+    gap: 0.5rem;
 }
 
 .logo {
@@ -100,4 +110,4 @@ body {
         padding: 1rem;
         box-sizing: border-box;
     }
-}
+}

public/icons/link.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+</svg>

public/icons/sort.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+</svg>

public/question.css

@@ -29,6 +29,20 @@ body {
     justify-content: space-between;
 }
 
+.card-tags {
+    display: flex;
+    gap: .5rem;
+}
+
+.card-tags .tag {
+    background-color: var(--meta-bg);
+    color: var(--tag-text-color);
+    padding: 0.5rem;
+    border-radius: 5px;
+    font-size: 0.8rem;
+    text-decoration: none;
+}
+
 code {
     background-color: var(--code-bg);
     padding: 0.15rem;
@@ -45,26 +59,34 @@ pre {
     line-height: 1.35;
 }
 
+pre code {
+    background: none;
+}
+
 .timestamp {
     color: var(--muted-text-color);
     font-size: 0.8rem;
 }
 
-.post-divider, .answer-divider {
+.post-divider {
     margin-top: 3rem;
     margin-bottom: 3rem;
 }
 
-.answer-divider {
-    border: 0;
-    height: 1px;
-    background-color: var(--divider-color);
-}
-
 img {
     max-width: 100%;
 }
 
+.answer {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--muted-text-color);
+}
+
+.answer:last-child {
+    border-bottom: 0;
+}
+
 .answer-meta {
     border-radius: 5px;
     padding: 1rem;
@@ -72,6 +94,14 @@ img {
     margin-bottom: 1rem;
     background-color: var(--meta-bg);
     color: var(--text-color);
+    
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.answer-meta p {
+    margin: 0;
 }
 
 .answer-meta.accepted {
@@ -102,26 +132,6 @@ img {
     height: 2rem;
 }
 
-.comments-parent {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.comment-parent {
-    cursor: text;
-}
-
-.comment-body {
-    font-size: 0.95rem;
-}
-
-.comment-author {
-    color: var(--muted-text-color);
-    font-size: 0.8rem;
-}
-
 .s-notice {
     background-color: var(--meta-bg);
     padding: 1rem;
@@ -130,6 +140,42 @@ img {
     margin-bottom: 1rem;
 }
 
+.answers-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.answers-header .sorting form {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.answers-header select {
+    border: 0;
+    border-radius: 5px;
+    padding: 0.5rem;
+    background-color: var(--meta-bg);
+    color: var(--text-color);
+    height: 2rem;
+}
+
+.answers-header button {
+    width: 2rem;
+    border: 0;
+    height: 2rem;
+    border-radius: 5px;
+    background-color: var(--meta-bg);
+    color: var(--text-color);
+    font-size: 1.5rem;
+    cursor: pointer;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 @media only screen and (max-width: 800px) {
     body {
         padding-left: 1rem;

src/middleware/ratelimit.go

@@ -1,6 +1,8 @@
 package middleware
 
 import (
+	"anonymousoverflow/config"
+	"strings"
 	"sync"
 	"time"
 
@@ -11,6 +13,12 @@ var ipMap = sync.Map{}
 
 func Ratelimit() gin.HandlerFunc {
 	return func(c *gin.Context) {
+
+		if strings.HasPrefix(c.Request.URL.Path, "/static") {
+			c.Next()
+			return
+		}
+
 		ip := c.ClientIP()
 
 		// log request count as the value, ip as key
@@ -31,14 +39,26 @@ func Ratelimit() gin.HandlerFunc {
 
 		// if they exceed 30 requests in 1 minute, return a 429
 		if val.(int) > 30 {
-			c.String(429, "429 Too Many Requests")
+			c.HTML(429, "home.html", gin.H{
+				"errorMessage": "You have exceeded the request limit. Please try again in a minute.",
+				"theme":        c.MustGet("theme").(string),
+				"version":      config.Version,
+			})
 			c.Abort()
 			return
 		}
 
-		// delete the ip from the map after 1 minute
+		// subtract 1 from the value after 1 minute if the value exists and is greater than 0
 		time.AfterFunc(time.Minute, func() {
-			ipMap.Delete(ip)
+			val, ok := ipMap.Load(ip)
+			if ok && val.(int) > 0 {
+				ipMap.Store(ip, val.(int)-1)
+			}
+
+			// if the value is 0, delete the entry from the map
+			if val.(int) == 0 {
+				ipMap.Delete(ip)
+			}
 		})
 	}
 }

src/middleware/xssHeaders.go

@@ -0,0 +1,12 @@
+package middleware
+
+import "github.com/gin-gonic/gin"
+
+func XssPreventionHeaders() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Header("X-Content-Type-Options", "nosniff")
+		c.Header("X-Frame-Options", "DENY")
+		c.Header("X-XSS-Protection", "1; mode=block")
+		c.Next()
+	}
+}

src/routes/home.go

@@ -3,6 +3,7 @@ package routes
 import (
 	"anonymousoverflow/config"
 	"fmt"
+	"regexp"
 	"strings"
 
 	"github.com/gin-gonic/gin"
@@ -19,6 +20,8 @@ type urlConversionRequest struct {
 	URL string `form:"url" binding:"required"`
 }
 
+var stackExchangeRegex = regexp.MustCompile(`https://(.+).stackexchange.com/questions/`)
+
 func PostHome(c *gin.Context) {
 	body := urlConversionRequest{}
 
@@ -33,15 +36,24 @@ func PostHome(c *gin.Context) {
 	soLink := body.URL
 
 	// validate URL
-	if !strings.HasPrefix(soLink, "https://stackoverflow.com/questions/") {
+	isStackOverflow := strings.HasPrefix(soLink, "https://stackoverflow.com/questions/")
+	isStackExchange := stackExchangeRegex.MatchString(soLink)
+	if !isStackExchange && !isStackOverflow {
 		c.HTML(400, "home.html", gin.H{
-			"errorMessage": "Invalid stack overflow URL",
+			"errorMessage": "Invalid stack overflow/exchange URL",
 			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}
 
-	// redirect to the proxied thread
-	c.Redirect(302, fmt.Sprintf("/questions/%s", strings.TrimPrefix(soLink, "https://stackoverflow.com/questions/")))
+	// if stack overflow, trim https://stackoverflow.com
+	if isStackOverflow {
+		c.Redirect(302, strings.TrimPrefix(soLink, "https://stackoverflow.com"))
+		return
+	}
 
+	// if stack exchange, extract the subdomain
+	sub := stackExchangeRegex.FindStringSubmatch(soLink)[1]
+
+	c.Redirect(302, fmt.Sprintf("/exchange/%s/%s", sub, strings.TrimPrefix(soLink, fmt.Sprintf("https://%s.stackexchange.com", sub))))
 }

src/routes/image.go

@@ -0,0 +1,66 @@
+package routes
+
+import (
+	"anonymousoverflow/src/types"
+	"fmt"
+	"os"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/go-resty/resty/v2"
+	"github.com/golang-jwt/jwt/v4"
+)
+
+func GetImage(c *gin.Context) {
+
+	authorization := c.Query("auth")
+	if authorization == "" {
+		c.String(400, "Missing auth token")
+		return
+	}
+
+	// validate the auth token
+	token, err := jwt.ParseWithClaims(authorization, &types.ImageProxyClaims{}, func(token *jwt.Token) (interface{}, error) {
+
+		// validate the signing method
+		if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
+			return nil, fmt.Errorf("unexpected signing method: %v", token.Header["alg"])
+		}
+
+		return []byte(os.Getenv("JWT_SIGNING_SECRET")), nil
+	})
+	if err != nil {
+		c.String(400, err.Error())
+		return
+	}
+
+	claims, ok := token.Claims.(*types.ImageProxyClaims)
+	if !ok || !token.Valid {
+		c.String(400, "Invalid token")
+		return
+	}
+
+	if claims.Action != "imageProxy" {
+		c.String(400, "Invalid action")
+		return
+	}
+
+	if claims.Exp < time.Now().Unix() {
+		c.String(400, "Token expired")
+		return
+	}
+
+	// download the image
+	client := resty.New()
+	resp, err := client.R().Get(claims.ImageURL)
+	if err != nil {
+		c.AbortWithStatus(500)
+		return
+	}
+
+	// set the content type
+	c.Header("Content-Type", resp.Header().Get("Content-Type"))
+
+	// write the image to the response
+	c.Writer.Write(resp.Body())
+}

src/routes/options.go

@@ -1,6 +1,7 @@
 package routes
 
 import (
+	"anonymousoverflow/config"
 	"fmt"
 	"os"
 	"strings"
@@ -18,7 +19,12 @@ func ChangeOptions(c *gin.Context) {
 			text = "enabled"
 		}
 		c.SetCookie("disable_images", fmt.Sprintf("%t", !c.MustGet("disable_images").(bool)), 60*60*24*365*10, "/", "", false, true)
-		c.String(200, "Images are now %s", text)
+		c.HTML(200, "home.html", gin.H{
+			"successMessage": "Images are now " + text,
+			"theme":          c.MustGet("theme").(string),
+			"version":        config.Version,
+		})
+
 	case "theme":
 		text := "dark"
 		if c.MustGet("theme").(string) == "dark" {
@@ -36,9 +42,8 @@ func ChangeOptions(c *gin.Context) {
 		}
 
 		c.Redirect(302, redirectUrl)
+
 	default:
 		c.String(400, "400 Bad Request")
 	}
-
-	c.Redirect(302, "/")
 }

src/routes/question.go

@@ -1,13 +1,18 @@
 package routes
 
 import (
+	"anonymousoverflow/config"
 	"anonymousoverflow/src/utils"
 	"fmt"
+	"html"
 	"html/template"
 	"os"
 	"regexp"
+	"strconv"
 	"strings"
 
+	"anonymousoverflow/src/types"
+
 	"github.com/PuerkitoBio/goquery"
 	"github.com/gin-gonic/gin"
 	"github.com/go-resty/resty/v2"
@@ -16,17 +21,66 @@ import (
 var codeBlockRegex = regexp.MustCompile(`(?s)<pre><code>(.+?)<\/code><\/pre>`)
 var questionCodeBlockRegex = regexp.MustCompile(`(?s)<pre class=".+"><code( class=".+")?>(.+?)</code></pre>`)
 
+var soSortValues = map[string]string{
+	"votes":    "scoredesc",
+	"trending": "trending",
+	"newest":   "modifieddesc",
+	"oldest":   "createdasc",
+}
+
 func ViewQuestion(c *gin.Context) {
 	client := resty.New()
 
 	questionId := c.Param("id")
+	if _, err := strconv.Atoi(questionId); err != nil {
+		c.HTML(400, "home.html", gin.H{
+			"errorMessage": "Invalid question ID",
+			"theme":        c.MustGet("theme").(string),
+			"version":      config.Version,
+		})
+		return
+	}
+
 	questionTitle := c.Param("title")
 
-	soLink := fmt.Sprintf("https://stackoverflow.com/questions/%s/%s", questionId, questionTitle)
+	sortValue := c.Query("sort_by")
+	if sortValue == "" {
+		sortValue = "votes"
+	}
+
+	soSortValue, ok := soSortValues[sortValue]
+	if !ok {
+		soSortValue = soSortValues["votes"]
+	}
+
+	sub := c.Param("sub")
+
+	domain := "stackoverflow.com"
+
+	if sub != "" {
+		domain = fmt.Sprintf("%s.stackexchange.com", sub)
+	}
+
+	soLink := fmt.Sprintf("https://%s/questions/%s/%s?answertab=%s", domain, questionId, questionTitle, soSortValue)
 
 	resp, err := client.R().Get(soLink)
 	if err != nil {
-		panic(err)
+		c.HTML(500, "home.html", gin.H{
+			"errorMessage": "Unable to fetch question data",
+			"theme":        c.MustGet("theme").(string),
+			"version":      config.Version,
+		})
+		return
+	}
+	defer resp.RawResponse.Body.Close()
+
+	if resp.StatusCode() != 200 {
+		c.HTML(500, "home.html", gin.H{
+			"errorMessage": "Received a non-OK status code",
+			"theme":        c.MustGet("theme").(string),
+			"version":      config.Version,
+		})
+		return
 	}
 
 	respBody := resp.String()
@@ -35,23 +89,56 @@ func ViewQuestion(c *gin.Context) {
 
 	doc, err := goquery.NewDocumentFromReader(respBodyReader)
 	if err != nil {
-		panic(err)
+		c.HTML(500, "home.html", gin.H{
+			"errorMessage": "Unable to parse question data",
+			"theme":        c.MustGet("theme").(string),
+			"version":      config.Version,
+		})
+		return
 	}
 
+	newFilteredQuestion := types.FilteredQuestion{}
+
 	questionTextParent := doc.Find("h1.fs-headline1")
 
 	questionText := questionTextParent.Children().First().Text()
 
+	newFilteredQuestion.Title = questionText
+
 	questionPostLayout := doc.Find("div.post-layout").First()
 
+	questionTags := utils.GetPostTags(questionPostLayout)
+	newFilteredQuestion.Tags = questionTags
+
 	questionBodyParent := doc.Find("div.s-prose")
 
 	questionBodyParentHTML, err := questionBodyParent.Html()
 	if err != nil {
-		panic(err)
+		c.HTML(500, "home.html", gin.H{
+			"errorMessage": "Unable to parse question body",
+			"theme":        c.MustGet("theme").(string),
+			"version":      config.Version,
+		})
+		return
 	}
 
-	questionBodyParentHTML = utils.FindAndReturnComments(questionBodyParentHTML, questionPostLayout)
+	newFilteredQuestion.Body = template.HTML(utils.ReplaceImgTags(questionBodyParentHTML))
+
+	questionBodyText := questionBodyParent.Text()
+
+	// remove all whitespace to create the shortened body desc
+	shortenedBody := strings.TrimSpace(questionBodyText)
+
+	// remove all newlines
+	shortenedBody = strings.ReplaceAll(shortenedBody, "\n", " ")
+
+	// get the first 50 chars
+	shortenedBody = shortenedBody[:50]
+
+	newFilteredQuestion.ShortenedBody = shortenedBody
+
+	comments := utils.FindAndReturnComments(questionBodyParentHTML, domain, questionPostLayout)
+	newFilteredQuestion.Comments = comments
 
 	// parse any code blocks and highlight them
 	answerCodeBlocks := questionCodeBlockRegex.FindAllString(questionBodyParentHTML, -1)
@@ -86,77 +173,85 @@ func ViewQuestion(c *gin.Context) {
 		}
 	})
 
+	newFilteredQuestion.Timestamp = questionTimestamp
+
 	userDetails := questionMetadata.Find("div.user-details")
 
 	questionAuthor := ""
-	questionAuthorURL := ""
+	questionAuthorURL := fmt.Sprintf("https://%s", domain)
 
-	userDetails.Find("a").Each(func(i int, s *goquery.Selection) {
-		// get the second
-		if i == 0 {
-			if s.Text() != "" {
-				// if it's not been edited, it means it's the first
-				questionAuthor = s.Text()
-				questionAuthorURL, _ = s.Attr("href")
-				return
-			}
-		}
-
-		// otherwise it's the second element
-		if i == 1 {
-			questionAuthor = s.Text()
-			questionAuthorURL, _ = s.Attr("href")
+	// check if the question has been edited
+	isQuestionEdited := false
+	questionMetadata.Find("a.js-gps-track").Each(func(i int, s *goquery.Selection) {
+		if strings.Contains(s.Text(), "edited") {
+			isQuestionEdited = true
 			return
 		}
 	})
 
-	answers := []template.HTML{}
+	userDetails.Find("a").Each(func(i int, s *goquery.Selection) {
+		// if question has been edited, the author is the second element.
+
+		if isQuestionEdited {
+			if i == 1 {
+				questionAuthor = s.Text()
+				questionAuthorURL += s.AttrOr("href", "")
+				return
+			}
+		} else {
+			// otherwise it's the first element
+			if i == 0 {
+				questionAuthor = s.Text()
+				questionAuthorURL += s.AttrOr("href", "")
+				return
+			}
+		}
+	})
+
+	newFilteredQuestion.AuthorName = questionAuthor
+	newFilteredQuestion.AuthorURL = questionAuthorURL
+
+	answers := []types.FilteredAnswer{}
 
 	doc.Find("div.answer").Each(func(i int, s *goquery.Selection) {
+
+		newFilteredAnswer := types.FilteredAnswer{}
+
 		postLayout := s.Find("div.post-layout")
 		voteCell := postLayout.Find("div.votecell")
 		answerCell := postLayout.Find("div.answercell")
 		answerBody := answerCell.Find("div.s-prose")
 		answerBodyHTML, _ := answerBody.Html()
 
-		voteCount := voteCell.Find("div.js-vote-count").Text()
+		voteCount := html.EscapeString(voteCell.Find("div.js-vote-count").Text())
 
-		if s.HasClass("accepted-answer") {
-			// add <div class="answer-meta accepted">Accepted Answer</div> to the top of the answer
-			answerBodyHTML = fmt.Sprintf(`<div class="answer-meta accepted">Accepted Answer - %s Upvotes</div>`, voteCount) + answerBodyHTML
-		} else {
-			// add <div class="answer-meta">%s Upvotes</div> to the top of the answer
-			answerBodyHTML = fmt.Sprintf(`<div class="answer-meta">%s Upvotes</div>`, voteCount) + answerBodyHTML
-		}
+		newFilteredAnswer.Upvotes = voteCount
+		newFilteredAnswer.IsAccepted = s.HasClass("accepted-answer")
 
 		answerFooter := s.Find("div.mt24")
 
-		answerAuthorURL := ""
+		answerAuthorURL := fmt.Sprintf("https://%s", domain)
 		answerAuthorName := ""
 		answerTimestamp := ""
 
 		answerFooter.Find("div.post-signature").Each(func(i int, s *goquery.Selection) {
 			answerAuthorDetails := s.Find("div.user-details")
 
-			if answerAuthorDetails.Length() == 0 {
-				return
+			if answerAuthorDetails.Length() > 0 {
+				questionAuthor := answerAuthorDetails.Find("a").First()
+				answerAuthorName = html.EscapeString(questionAuthor.Text())
+				answerAuthorURL += html.EscapeString(questionAuthor.AttrOr("href", ""))
 			}
 
-			if answerAuthorDetails.Length() > 1 {
-				if i == 0 {
-					return
-				}
-			}
-
-			answerAuthor := answerAuthorDetails.Find("a").First()
-
-			answerAuthorURL = answerAuthor.AttrOr("href", "")
-			answerAuthorName = answerAuthor.Text()
-			answerTimestamp = s.Find("span.relativetime").Text()
+			answerTimestamp = html.EscapeString(s.Find("span.relativetime").Text())
 		})
 
-		// append <div class="answer-author">Answered %s by %s</div> to the bottom of the answer
-		answerBodyHTML += fmt.Sprintf(`<div class="answer-author-parent"><div class="answer-author">Answered %s by <a href="https://stackoverflow.com/%s" target="_blank" rel="noopener noreferrer">%s</a></div></div>`, answerTimestamp, answerAuthorURL, answerAuthorName)
+		answerId, _ := s.Attr("data-answerid")
+		newFilteredAnswer.ID = answerId
+
+		newFilteredAnswer.AuthorName = answerAuthorName
+		newFilteredAnswer.AuthorURL = answerAuthorURL
+		newFilteredAnswer.Timestamp = answerTimestamp
 
 		// parse any code blocks and highlight them
 		answerCodeBlocks := codeBlockRegex.FindAllString(answerBodyHTML, -1)
@@ -170,9 +265,12 @@ func ViewQuestion(c *gin.Context) {
 			answerBodyHTML = strings.Replace(answerBodyHTML, codeBlock, highlightedCodeBlock, 1)
 		}
 
-		answerBodyHTML = utils.FindAndReturnComments(answerBodyHTML, postLayout)
+		comments = utils.FindAndReturnComments(answerBodyHTML, domain, postLayout)
 
-		answers = append(answers, template.HTML(answerBodyHTML))
+		newFilteredAnswer.Comments = comments
+		newFilteredAnswer.Body = template.HTML(utils.ReplaceImgTags(answerBodyHTML))
+
+		answers = append(answers, newFilteredAnswer)
 	})
 
 	imagePolicy := "'self' https:"
@@ -182,16 +280,13 @@ func ViewQuestion(c *gin.Context) {
 	}
 
 	c.HTML(200, "question.html", gin.H{
-		"title":         questionText,
-		"body":          template.HTML(questionBodyParentHTML),
-		"timestamp":     questionTimestamp,
-		"author":        questionAuthor,
-		"authorURL":     questionAuthorURL,
-		"answers":       answers,
-		"imagePolicy":   imagePolicy,
-		"shortenedBody": questionBodyParent.Text()[0:50],
-		"theme":         c.MustGet("theme").(string),
-		"currentUrl":    fmt.Sprintf("%s/questions/%s/%s", os.Getenv("APP_URL"), questionId, questionTitle),
+		"question":    newFilteredQuestion,
+		"answers":     answers,
+		"imagePolicy": imagePolicy,
+		"theme":       c.MustGet("theme").(string),
+		"currentUrl":  fmt.Sprintf("%s/questions/%s/%s", os.Getenv("APP_URL"), questionId, questionTitle),
+		"sortValue":   sortValue,
+		"domain":      domain,
 	})
 
 }

src/routes/static.go

@@ -0,0 +1,14 @@
+package routes
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
+func StaticContent(c *gin.Context) {
+	cleanFilePath := strings.ReplaceAll(c.Param("filepath"), "..", "")
+
+	c.File(fmt.Sprintf("./public/%s", cleanFilePath))
+}

src/types/answer.go

@@ -0,0 +1,19 @@
+package types
+
+import "html/template"
+
+type FilteredAnswer struct {
+	ID string
+
+	Upvotes    string
+	IsAccepted bool
+
+	AuthorName string
+	AuthorURL  string
+
+	Timestamp string
+
+	Body template.HTML
+
+	Comments []FilteredComment
+}

src/types/comment.go

@@ -0,0 +1,11 @@
+package types
+
+import "html/template"
+
+type FilteredComment struct {
+	Text       template.HTML
+	Timestamp  string
+	AuthorName string
+	AuthorURL  string
+	Upvotes    string
+}

src/types/imageProxy.go

@@ -0,0 +1,14 @@
+package types
+
+import "github.com/golang-jwt/jwt/v4"
+
+type ImageProxyClaims struct {
+	Action string `json:"action"`
+
+	ImageURL string `json:"image_url"`
+
+	Iss int64 `json:"iss"`
+	Exp int64 `json:"exp"`
+
+	jwt.RegisteredClaims
+}

src/types/question.go

@@ -0,0 +1,14 @@
+package types
+
+import "html/template"
+
+type FilteredQuestion struct {
+	Title         string
+	Body          template.HTML
+	Timestamp     string
+	AuthorName    string
+	AuthorURL     string
+	ShortenedBody string
+	Comments      []FilteredComment
+	Tags          []string
+}

src/utils/comments.go

@@ -1,16 +1,14 @@
 package utils
 
 import (
+	"anonymousoverflow/src/types"
 	"fmt"
-	"strings"
+	"html/template"
 
 	"github.com/PuerkitoBio/goquery"
 )
 
-func FindAndReturnComments(inHtml string, postLayout *goquery.Selection) (outHtml string) {
-	outHtml = inHtml
-
-	comments := []string{}
+func FindAndReturnComments(inHtml, domain string, postLayout *goquery.Selection) (comments []types.FilteredComment) {
 
 	commentsComponent := postLayout.Find("div.js-post-comments-component")
 
@@ -20,6 +18,14 @@ func FindAndReturnComments(inHtml string, postLayout *goquery.Selection) (outHtm
 	allComments := commentsList2.Find("li.comment")
 
 	allComments.Each(func(i int, s *goquery.Selection) {
+		commentScoreParent := s.Find("div.comment-score")
+
+		// find the first span within commentScoreParent
+		commentScore := commentScoreParent.Find("span").First().Text()
+		if commentScore == "" {
+			commentScore = "0"
+		}
+
 		commentText := s.Find("div.comment-text")
 
 		commentBody := commentText.Find("div.comment-body")
@@ -29,7 +35,7 @@ func FindAndReturnComments(inHtml string, postLayout *goquery.Selection) (outHtm
 			return
 		}
 
-		commentAuthorURL := ""
+		commentAuthorURL := fmt.Sprintf("https://%s", domain)
 
 		commentAuthor := commentBody.Find("span.comment-user")
 		if commentAuthor.Length() == 0 {
@@ -38,21 +44,23 @@ func FindAndReturnComments(inHtml string, postLayout *goquery.Selection) (outHtm
 				return
 			}
 
-			commentAuthorURL = commentAuthor.AttrOr("href", "")
+			commentAuthorURL += commentAuthor.AttrOr("href", "")
 		}
 
 		commentTimestamp := commentBody.Find("span.relativetime-clean").Text()
 
-		comment := fmt.Sprintf(`<div class="comment-parent"><div class="comment"><div class="comment-body">%s</div><div class="comment-author">Commented %s by <a href="https://stackoverflow.com%s" target="_blank" rel="noopener noreferrer">%s</a>.</div></div></div>`, commentCopy, commentTimestamp, commentAuthorURL, commentAuthor.Text())
+		newFilteredComment := types.FilteredComment{
+			Text:       template.HTML(commentCopy),
+			Timestamp:  commentTimestamp,
+			AuthorName: commentAuthor.Text(),
+			AuthorURL:  commentAuthorURL,
+			Upvotes:    commentScore,
+		}
 
-		comments = append(comments, comment)
+		comments = append(comments, newFilteredComment)
 
 	})
 
-	if len(comments) > 0 {
-		outHtml = inHtml + fmt.Sprintf(`<details class="comments"><summary>Show <b>%d comments</b></summary><div class="comments-parent">%s</div></details>`, len(comments), strings.Join(comments, ""))
-	}
-
 	return
 
 }

src/utils/images.go

@@ -0,0 +1,52 @@
+package utils
+
+import (
+	"anonymousoverflow/src/types"
+	"fmt"
+	"os"
+	"regexp"
+	"strings"
+	"time"
+
+	"github.com/golang-jwt/jwt/v4"
+)
+
+var imgTagRegex = regexp.MustCompile(`<img[^>]*\s+src\s*=\s*"(.*?)"[^>]*>`)
+
+func ReplaceImgTags(inHtml string) string {
+	// find all img tags
+	imgTags := imgTagRegex.FindAllString(inHtml, -1)
+
+	for _, imgTag := range imgTags {
+		// parse the src="" attribute
+		srcRegex := regexp.MustCompile(`src\s*=\s*"(.*?)"`)
+		src := srcRegex.FindStringSubmatch(imgTag)[1]
+
+		authToken, _ := generateImageProxyAuth(src)
+
+		// replace the img tag with a proxied url
+		inHtml = strings.Replace(inHtml, imgTag, fmt.Sprintf(`<img src="%s/proxy?auth=%s">`, os.Getenv("APP_URL"), authToken), 1)
+	}
+
+	return inHtml
+}
+
+func generateImageProxyAuth(url string) (string, error) {
+	// generate a jwt with types.ImageProxyClaims
+	claims := types.ImageProxyClaims{
+		Action:   "imageProxy",
+		ImageURL: url,
+		Iss:      time.Now().Unix(),
+		Exp:      time.Now().Add(time.Minute).Unix(),
+	}
+
+	token := jwt.NewWithClaims(jwt.SigningMethodHS512, claims)
+
+	// sign the token
+	ss, err := token.SignedString([]byte(os.Getenv("JWT_SIGNING_SECRET")))
+	if err != nil {
+		return "", err
+	}
+
+	return ss, nil
+}

src/utils/syntax.go

@@ -7,13 +7,11 @@ import (
 	"regexp"
 	"strings"
 
-	"github.com/alecthomas/chroma/formatters"
+	html_formatter "github.com/alecthomas/chroma/formatters/html"
 	"github.com/alecthomas/chroma/lexers"
 	"github.com/alecthomas/chroma/styles"
 )
 
-var plainFormattedCodeRegex = regexp.MustCompile(`(?s)<pre tabindex="0" class="chroma"><code>(.+?)</code></pre>`)
-
 func HighlightSyntaxViaContent(content string) (htmlOut string) {
 	content = html.UnescapeString(content)
 
@@ -32,10 +30,7 @@ func HighlightSyntaxViaContent(content string) (htmlOut string) {
 		style = styles.Fallback
 	}
 
-	formatter := formatters.Get("html")
-	if formatter == nil {
-		formatter = formatters.Fallback
-	}
+	formatter := html_formatter.New(html_formatter.PreventSurroundingPre(true), html_formatter.WithClasses(true))
 
 	iterator, err := lexer.Tokenise(nil, content)
 	if err != nil {
@@ -52,14 +47,7 @@ func HighlightSyntaxViaContent(content string) (htmlOut string) {
 		return
 	}
 
-	// parse only the <pre><code>...</code></pre> part
 	htmlOut = b.String()
-	htmlOut = plainFormattedCodeRegex.FindString(htmlOut)
-
-	htmlOut = StripBlockTags(htmlOut)
-
-	// remove <pre tabindex="0" class="chroma">
-	htmlOut = strings.Replace(htmlOut, "<pre tabindex=\"0\" class=\"chroma\">", "", -1)
 
 	return
 }

src/utils/tags.go

@@ -0,0 +1,13 @@
+package utils
+
+import (
+	"github.com/PuerkitoBio/goquery"
+)
+
+func GetPostTags(postLayout *goquery.Selection) []string {
+	var tags []string
+	postLayout.Find("a.post-tag").Each(func(i int, s *goquery.Selection) {
+		tags = append(tags, s.Text())
+	})
+	return tags
+}

templates/comments.html

@@ -0,0 +1,32 @@
+<details class="comments">
+    <summary>
+        Show
+        <b
+            >{{ (len .Comments) }} comment{{ if gt (len .Comments) 1 }}s{{
+            end }}</b
+        >
+    </summary>
+    <div class="comments-parent">
+        {{ range $comment := .Comments }}
+        <div class="comment-parent">
+            <div class="comment">
+                <div class="comment-top">
+                    <div class="comment-score" title="Comment Upvotes">
+                        {{ $comment.Upvotes }}
+                    </div>
+                    <div class="comment-body">{{ $comment.Text }}</div>
+                </div>
+                <div class="comment-author">
+                    Commented {{ $comment.Timestamp }} by
+                    <a
+                        href="{{ $comment.AuthorURL }}"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >{{ $comment.AuthorName }}</a
+                    >.
+                </div>
+            </div>
+        </div>
+        {{end}}
+    </div>
+</details>

templates/home.html

@@ -2,20 +2,17 @@
 <html data-theme="{{ .theme }}">
     <head>
         <title>AnonymousOverflow - Private frontend for StackOverflow</title>
-        <link rel="stylesheet" href="/static/globals.css" />
         <link rel="stylesheet" href="/static/home.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta
             http-equiv="Content-Security-Policy"
             content="default-src 'none'; style-src 'self'; script-src 'none'; img-src 'self';"
         />
         <link rel="icon" href="/static/codecircles.png" />
-        <meta name="theme-color" content="#8CFFC1" />
-        <meta name="og:image" content="/static/codecircles.png" />
         <meta
             name="description"
             content="View StackOverflow threads in privacy and without the clutter."
         />
+        {{ template "sharedHead.html" }}
     </head>
     <body>
         <div class="container">
@@ -34,12 +31,16 @@
                 browsing habits and other browser fingerprint data to
                 StackOverflow.
             </p>
-            {{ if .errorMessage }}
+            {{ if .successMessage }}
+            <div class="success">
+                <p><b>Success</b>: {{ .successMessage }}</p>
+            </div>
+            {{ else}} {{ if .errorMessage }}
             <div class="error">
                 <p><b>Error</b>: {{ .errorMessage }}</p>
             </div>
-            {{ end }}
-            <form method="POST">
+            {{end}} {{ end }}
+            <form method="POST" action="/">
                 <div class="view-form">
                     <input
                         class="view-input"
@@ -56,12 +57,7 @@
                         <img src="/static/icons/image.svg" alt="Toggle theme" />
                     </a>
                 </div>
-                <div class="icon">
-                    <a href="/options/theme?redirect_url={{ .currentUrl }}">
-                        <img src="/static/icons/{{ if eq .theme "dark" }}sun{{
-                        else }}moon{{ end }}.svg" alt="Toggle theme" />
-                    </a>
-                </div>
+                {{ template "themeSwitcher.html" .}}
             </div>
             <p class="footer">
                 Brought to you by

templates/question.html

@@ -1,19 +1,16 @@
 <!DOCTYPE html>
 <html data-theme="{{ .theme }}">
     <head>
-        <title>{{ .title }}</title>
+        <title>{{ .question.Title }}</title>
         <link rel="stylesheet" href="/static/question.css" />
-        <link rel="stylesheet" href="/static/globals.css" />
         <link rel="stylesheet" href="/static/syntax.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/static/comments.css" />
         <meta
             http-equiv="Content-Security-Policy"
             content="default-src 'none'; style-src 'self'; script-src 'none'; img-src {{ .imagePolicy }};"
         />
-        <link rel="icon" href="/static/codecircles.png" />
-        <meta name="theme-color" content="#8CFFC1" />
-        <meta name="og:image" content="/static/codecircles.png" />
-        <meta name="description" content="{{ .shortenedBody }}..." />
+        <meta name="description" content="{{ .question.ShortenedBody }}..." />
+        {{ template "sharedHead.html" }}
     </head>
     <body>
         <div class="parent">
@@ -25,33 +22,81 @@
                         alt="4 circles with alternating colors between green and white"
                     />
                 </a>
-                <div class="icon">
-                    <a href="/options/theme?redirect_url={{ .currentUrl }}">
-                        <img src="/static/icons/{{ if eq .theme "dark" }}sun{{
-                        else }}moon{{ end }}.svg" alt="Toggle theme" />
-                    </a>
-                </div>
+                {{ template "themeSwitcher.html" . }}
             </div>
             <div class="card">
                 <div class="card-header">
-                    <h1>{{ .title }}</h1>
+                    <h1>{{ .question.Title }}</h1>
                     <p class="timestamp">
-                        Asked {{ .timestamp }} by
+                        Asked {{ .question.Timestamp }} by
                         <a
-                            href="https://stackoverflow.com{{ .authorURL }}"
+                            href="{{ .question.AuthorURL }}"
                             target="_blank"
                             rel="noopener noreferrer"
-                            >{{ .author }}</a
+                            >{{ .question.AuthorName }}</a
                         >.
                     </p>
                 </div>
-                <div class="card-body">{{ .body }}</div>
+                <div class="card-body">{{ .question.Body }}</div>
+                <div class="card-tags">
+                    {{ range .question.Tags }}
+                        <div class="tag">{{ . }}</div>
+                    {{ end }}
+                </div>
+                {{ if .question.Comments }} {{ template "comments.html"
+                .question }} {{end}}
             </div>
             <hr class="post-divider" />
-            <h2>Answers</h2>
+            <div class="answers-header">
+                <h2>Answers</h2>
+                <div class="sorting">
+                    <form>
+                        <select name="sort_by">
+                            <option disabled value="">Sort answers by...</option>
+                            <option value="votes"{{ if eq .sortValue "votes" }} selected{{ end }}>Votes</option>
+                            <option value="trending"{{ if eq .sortValue "trending" }} selected{{ end }}>Trending</option>
+                            <option value="newest"{{ if eq .sortValue "newest" }} selected{{ end }}>Date modified (newest first)</option>
+                            <option value="oldest"{{ if eq .sortValue "oldest" }} selected{{ end }}>Date created (oldest first)</option>
+                        </select>
+                        <button type="submit">
+                            <img
+                                src="/static/icons/sort.svg"
+                                alt="Sieve icon"
+                            />
+                        </button>
+                    </form>
+                </div>
+            </div>
             {{ range $answer := .answers }}
-            <div class="answer">{{ $answer }}</div>
-            <hr class="answer-divider" />
+            <div class="answer" id="{{ $answer.ID }}">
+                <div
+                    class="answer-meta{{ if $answer.IsAccepted }} accepted{{end}}"
+                >
+                <p>
+                    {{ if $answer.IsAccepted }} Accepted - {{ end }}
+                    {{$answer.Upvotes}} Votes
+                </p>
+                <a href="#{{ $answer.ID }}" class="answer-link">
+                    <div class="icon">
+                        <img src="/static/icons/link.svg" alt="Paperclip icon" />
+                    </div>
+                </a>
+            </div>
+                {{ $answer.Body }}
+                <div class="answer-author-parent">
+                    <div class="answer-author">
+                        Answered {{ $answer.Timestamp }} by
+                        <a
+                            href="{{ $answer.AuthorURL }}"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            >{{ $answer.AuthorName }}</a
+                        >
+                    </div>
+                </div>
+                {{ if $answer.Comments }} {{ template "comments.html" $answer }}
+                {{end}}
+            </div>
             {{ end }}
         </div>
     </body>

templates/sharedHead.html

@@ -0,0 +1,4 @@
+<meta name="theme-color" content="#8CFFC1" />
+<meta name="og:image" content="/static/codecircles.png" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" href="/static/globals.css" />

templates/themeSwitcher.html

@@ -0,0 +1,6 @@
+<div class="icon">
+    <a href="/options/theme?redirect_url={{ .currentUrl }}">
+        <img src="/static/icons/{{ if eq .theme "dark" }}sun{{
+        else }}moon{{ end }}.svg" alt="Toggle theme" />
+    </a>
+</div>