templates: Add pathEscape template function and use it in browse.html

modules/caddyhttp/fileserver/browse.html

@@ -21,7 +21,7 @@
 	</svg>
 	{{- else if .HasExt ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" ".bmp" ".heif" ".heic" ".svg"}}
 		{{- if eq .Tpl.Layout "grid"}}
-		<img loading="lazy" src="{{.Name | replace "#" "%23" | replace "?" "%3f" | html}}">
+		<img loading="lazy" src="{{.Name | pathEscape}}">
 		{{- else}}
 		<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 			<path stroke="none" d="M0 0h24v24H0z" fill="none"/>

modules/caddyhttp/templates/templates.go

@@ -300,6 +300,18 @@ func init() {
 // find the documentation on time layouts [in Go's docs](https://pkg.go.dev/time#pkg-constants).
 // The default time layout is `RFC1123Z`, i.e. `Mon, 02 Jan 2006 15:04:05 -0700`.
 //
+// ##### `pathEscape`
+//
+// Passes a string through `url.PathEscape`, replacing characters that have
+// special meaning in URL path parameters (`?`, `&`, `%`).
+//
+// Useful e.g. to include filenames containing these characters in URL path
+// parameters, or use them as an `img` element's `src` attribute.
+//
+// ```
+// {{pathEscape "50%_valid_filename?.jpg"}}
+// ```
+//
 // ```
 // {{humanize "size" "2048000"}}
 // {{placeholder "http.response.header.Content-Length" | humanize "size"}}

modules/caddyhttp/templates/tplcontext.go

@@ -21,6 +21,7 @@ import (
 	"io/fs"
 	"net"
 	"net/http"
+	"net/url"
 	"os"
 	"path"
 	"reflect"
@@ -91,6 +92,7 @@ func (c *TemplateContext) NewTemplate(tplName string) *template.Template {
 		"httpError":        c.funcHTTPError,
 		"humanize":         c.funcHumanize,
 		"maybe":            c.funcMaybe,
+		"pathEscape":       url.PathEscape,
 	})
 	return c.tpl
 }