Screenshot uses integrity and cache busting.

Respaced links. Fix refresh and view link when window resized.
Defacto2 · Sep 9, 2024 · 81e5c79 · 81e5c79
1 parent 78d7d42
commit 81e5c79
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/docs/todo.md b/docs/todo.md
@@ -4,8 +4,6 @@
 
 * Repack zips that contain programs with bad filenames, for example: http://localhost:1323/f/ab252e4
 * _Thumbnail assets_ links need better separation.
-* `<div class="modal-body"><picture><source srcset="/public/image/original/0191c3fc-a387-7715-ab41-441ea337f316.webp" type="image/webp" /></picture></div>`
-* * Does not work, need to use `img` tag.
 * 404 errors :/ /editor/thumbnail/top/ ~ /editor/preview/crop11/ etc.
 * Local file timestamp for file uploads is not being set.
 * Redirect `/link/list` to wayback.defacto2.net.

diff --git a/handler/app/internal/simple/simple.go b/handler/app/internal/simple/simple.go
@@ -475,45 +475,50 @@ func Screenshot(unid, desc, previewDir string) template.HTML {
 	sizeJ := helper.Size(filepath.Join(previewDir, unid+jpg))
 	sizeA := helper.Size(filepath.Join(previewDir, unid+avif))
 
+	hashW, _ := helper.IntegrityFile(filepath.Join(previewDir, unid+webp))
+	hashP, _ := helper.IntegrityFile(filepath.Join(previewDir, unid+png))
+	hashJ, _ := helper.IntegrityFile(filepath.Join(previewDir, unid+jpg))
+	hashA, _ := helper.IntegrityFile(filepath.Join(previewDir, unid+avif))
+
 	usePicture := (sizeA > 0 || sizeW > 0) && (sizeJ > 0 || sizeP > 0)
 	if usePicture {
 		elm := template.HTML("<picture>")
 		switch {
 		case sizeA > 0:
-			elm += template.HTML(fmt.Sprintf("<source srcset=\"%s\" type=\"image/avif\" />", srcA))
+			elm += template.HTML(fmt.Sprintf("<source srcset=\"%s?%s\" type=\"image/avif\" integrity=\"%s\" />", srcA, hashA, hashA))
 		case sizeW > 0:
-			elm += template.HTML(fmt.Sprintf("<source srcset=\"%s\" type=\"image/webp\" />", srcW))
+			elm += template.HTML(fmt.Sprintf("<source srcset=\"%s?%s\" type=\"image/webp\" integrity=\"%s\" />", srcW, hashW, hashW))
 		}
 		// the <picture> element is used to provide multiple sources for an image.
 		// if no <img> element is provided, the <picture> element won't be rendered by the browser.
 		useSmallerJpg := sizeJ > 0 && sizeJ < sizeP
 		switch {
 		case useSmallerJpg:
-			elm += img(srcJ, alt, class, "")
+			elm += img(srcJ, alt, class, hashJ)
 		case sizeP > 0:
-			elm += img(srcP, alt, class, "")
+			elm += img(srcP, alt, class, hashP)
 		default:
-			elm += img(srcJ, alt, class, "")
+			elm += img(srcJ, alt, class, hashJ)
 		}
 		return elm + "</picture>"
 	}
 	switch {
 	case sizeA > 0:
-		return img(srcA, alt, class, "")
+		return img(srcA, alt, class, hashA)
 	case sizeW > 0:
-		return img(srcW, alt, class, "")
+		return img(srcW, alt, class, hashW)
 	case sizeJ > 0:
-		return img(srcJ, alt, class, "")
+		return img(srcJ, alt, class, hashJ)
 	case sizeP > 0:
-		return img(srcP, alt, class, "")
+		return img(srcP, alt, class, hashP)
 	}
 	return ""
 }
 
 // img returns a HTML image tag.
-func img(src, alt, class, style string) template.HTML {
-	return template.HTML(fmt.Sprintf("<img src=\"%s\" loading=\"lazy\" alt=\"%s\" class=\"%s\" style=\"%s\" />",
-		src, alt, class, style))
+func img(src, alt, class, integrity string) template.HTML {
+	return template.HTML(fmt.Sprintf("<img src=\"%s?%s\" loading=\"lazy\" alt=\"%s\" class=\"%s\" integrity=\"%s\" />",
+		src, integrity, alt, class, integrity))
 }
 
 // StatHumanize returns the last modified date, size in bytes and size formatted
@@ -562,15 +567,21 @@ func Thumb(unid, desc, thumbDir string, bottom bool) template.HTML {
 	if w && p {
 		elm := "<picture class=\"" + class + "\">" +
 			fmt.Sprintf("<source srcset=\"%s\" type=\"image/webp\" />", webp) +
-			string(img(png, alt, class, style)) +
+			string(thumb(png, alt, class, style)) +
 			"</picture>"
 		return template.HTML(elm)
 	}
 	src := webp
 	if p {
 		src = png
 	}
-	return img(src, alt, class, style)
+	return thumb(src, alt, class, style)
+}
+
+// img returns a HTML image tag.
+func thumb(src, alt, class, style string) template.HTML {
+	return template.HTML(fmt.Sprintf("<img src=\"%s\" loading=\"lazy\" alt=\"%s\" class=\"%s\" style=\"%s\" />",
+		src, alt, class, style))
 }
 
 // ThumbSample returns a HTML image tag for the given unid.

diff --git a/view/app/artifactfile.tmpl b/view/app/artifactfile.tmpl
@@ -210,16 +210,16 @@
                           </tr>{{- end}}
                       </table>
                       <div>
-                        <a href="#file-editor" hx-patch="/editor/thumbnail/top/{{$unid}}">Top</a>
-                        <a href="#file-editor" hx-patch="/editor/thumbnail/middle/{{$unid}}">Middle</a>
+                        <a href="#file-editor" hx-patch="/editor/thumbnail/top/{{$unid}}">Top</a> &nbsp;
+                        <a href="#file-editor" hx-patch="/editor/thumbnail/middle/{{$unid}}">Middle</a> &nbsp;
                         <a href="#file-editor" hx-patch="/editor/thumbnail/bottom/{{$unid}}">Bottom</a> <small>crop</small>
                       </div>
                       <div>
-                        <a href="#file-editor" hx-patch="/editor/thumbnail/left/{{$unid}}">Left</a>
+                        <a href="#file-editor" hx-patch="/editor/thumbnail/left/{{$unid}}">Left</a> &nbsp;
                         <a href="#file-editor" hx-patch="/editor/thumbnail/right/{{$unid}}">Right</a> <small>crop</small>
                       </div>
                       <div>
-                        <a href="#file-editor" hx-patch="/editor/thumbnail/pixel/{{$unid}}">Pixel art</a>
+                        <a href="#file-editor" hx-patch="/editor/thumbnail/pixel/{{$unid}}">Pixel art</a> &nbsp;
                         <a href="#file-editor" hx-patch="/editor/thumbnail/photo/{{$unid}}">Photograph</a> <small>thumbnail</small>
                       </div>
                       <div><a href="#file-editor" hx-delete="/editor/thumbnail/{{$unid}}">Delete</a></div>

diff --git a/view/app/artifactfooter.tmpl b/view/app/artifactfooter.tmpl
@@ -12,7 +12,7 @@
             <a href="#" data-bs-toggle="modal" data-bs-target="#artifact-delete-forever-modal"  class="btn btn-warning">Delete forever</a>
         </div>
         <div class="col-lg-8 text-lg-end">
-            <a href="/f/{{$download}}" class="btn btn-link">Refresh &amp; view artifact</a>
+            <a href="/f/{{$download}}" class="btn btn-link d-none d-xl-inline">Refresh &amp; view artifact</a>
             <button name="artifact-editor-dataeditor" data-bs-toggle="modal" data-bs-target="#artifact-editor-modal" class="btn btn-outline-primary">Data editor</button>
             <button name="artifact-editor-fileeditor" data-bs-toggle="modal" data-bs-target="#asset-editor-modal" class="btn btn-outline-primary">File editor</button>
             <button name="artifact-editor-emueditor" data-bs-toggle="modal" data-bs-target="#emulate-editor-modal" class="btn btn-outline-primary">Emulate editor</button>