fix viewing images in fileview (closes #117)

pages/fileview.go

@@ -5,12 +5,15 @@ import (
 	"bytes"
 	"codeberg.org/gothub/gothub/utils"
 	"context"
+	"encoding/base64"
 	htmlfmt "github.com/alecthomas/chroma/v2/formatters/html"
 	"github.com/alecthomas/chroma/v2/lexers"
 	"github.com/alecthomas/chroma/v2/styles"
 	"github.com/carlmjohnson/requests"
 	"github.com/gofiber/fiber/v2"
 	"html/template"
+	"net/http"
+	"path/filepath"
 )
 
 // FileView is the file view page
@@ -27,6 +30,35 @@ func FileView(c *fiber.Ctx) error {
 		})
 	}
 
+	ext := filepath.Ext(c.Params("+"))
+	// Make an issue for other formats thanks
+	if ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".svg" || ext == ".gif" || ext == ".webp" {
+		data := []byte(file)
+		dst := make([]byte, base64.StdEncoding.EncodedLen(len(data)))
+		base64.StdEncoding.Encode(dst, data)
+		dstStr := string(dst)
+		// Detect content-type since base64 encoding needs content-type
+		mimeType := http.DetectContentType(data)
+		if ext == ".svg" {
+			mimeType = "image/svg+xml"
+		}
+		css := `img {
+					object-fit: cover;
+					width: 100%;
+					height: 250px;
+				}`
+		html := "<img src='data:" + mimeType + ";base64," + dstStr + "' alt=" + c.Params("+") + ">"
+		return c.Render("file", fiber.Map{
+			"title":      c.Params("+") + " | " + c.Params("user") + "/" + c.Params("repo"),
+			"branch":     utils.Branch,
+			"file":       html,
+			"css":        css,
+			"fullname":   c.Params("user") + "/" + c.Params("repo"),
+			"name":       c.Params("+"),
+			"fileBranch": c.Params("branch"),
+			"type":       "img",
+		})
+	}
 	lexer := lexers.Match(c.Params("+"))
 	if lexer == nil {
 		lexer = lexers.Fallback
@@ -64,5 +96,6 @@ func FileView(c *fiber.Ctx) error {
 		"fullname":   c.Params("user") + "/" + c.Params("repo"),
 		"name":       c.Params("+"),
 		"fileBranch": c.Params("branch"),
+		"type":       "code",
 	})
 }

serve/serve.go

@@ -103,9 +103,9 @@ func Serve(port string) {
 		c.Set("X-Content-Type-Options", "nosniff")
 		c.Set("Referrer-Policy", "no-referrer")
 		if proxying == "true" {
-			c.Set("Content-Security-Policy", "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data; font-src 'self'; script-src 'self'; frame-ancestors 'self'; form-action 'self'; base-uri 'self'; connect-src 'self';")
+			c.Set("Content-Security-Policy", "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; script-src 'self'; frame-ancestors 'self'; form-action 'self'; base-uri 'self'; connect-src 'self';")
 		} else {
-			c.Set("Content-Security-Policy", "default-src 'self' https://camo.githubusercontent.com https://avatars.githubusercontent.com https://github.com https://raw.githubusercontent.com https://gist.github.com; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data https://camo.githubusercontent.com https://avatars.githubusercontent.com https://gist.github.com; font-src 'self'; connect-src 'self' https://camo.githubusercontent.com https://avatars.githubusercontent.com https://github.com https://raw.githubusercontent.com https://gist.github.com; frame-ancestors 'self'; form-action 'self'; base-uri 'self'")
+			c.Set("Content-Security-Policy", "default-src 'self' https://camo.githubusercontent.com https://avatars.githubusercontent.com https://github.com https://raw.githubusercontent.com https://gist.github.com; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://camo.githubusercontent.com https://avatars.githubusercontent.com https://gist.github.com; font-src 'self'; connect-src 'self' https://camo.githubusercontent.com https://avatars.githubusercontent.com https://github.com https://raw.githubusercontent.com https://gist.github.com; frame-ancestors 'self'; form-action 'self'; base-uri 'self'")
 		}
 		c.Set("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload")
 

views/file.html

@@ -9,6 +9,11 @@
       white-space: pre-wrap;
       word-wrap: break-word;
     }
+    div.user-readme img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
   </style>
   <div class="download-parent">
     <a href="/{{.fullname}}/tree/{{.fileBranch}}" class="button"
@@ -25,7 +30,7 @@
         >Raw</a
       >
     </div>
-    {{ .file}}
+    {{ if eq .type "img" }} {{ unescape .file }} {{else}} {{ .file }} {{end}}
   </div>
   {{end}}
 </main>