appview: support safari icons (favicon, bookmark)

Safari < 26.0 doesn't support svg favicon and even after 26.0, it
defaults to #000 color, resulting to black favicon on white background.
It is better to have actual ico image hosted on `/favicon.ico`

To prevent chrome and other browsers choosing ico image for favicon over
svg, we are restricting the `favicon.ico` size to `48x48`.

180x180 `apple-touch-icon.png` is also needed to support Safari bookmark
icons. Commonly known as "Favorites". Because Safari bookmark icons is
pretty large, we are using logo-dolly (dolly with eyes) here.

reference:
<https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7>

Fix: <https://tangled.org/tangled.org/core/issues/306>

Signed-off-by: Seongmin Lee <[e-mail]>

appview/middleware/middleware.go

···
 }
 
 func (mw Middleware) ResolveIdent() middlewareFunc {
-	excluded := []string{"favicon.ico"}
+	excluded := []string{"favicon.ico", "favicon.svg"}
 
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {

appview/pages/assets/favicon.svg

···
+<svg
+   version="1.1"
+   id="svg1"
+   width="25"
+   height="25"
+   color="#ffffff"
+   viewBox="0 0 25 25"
+   sodipodi:docname="tangled_dolly_face_only_black_on_trans.svg"
+   inkscape:export-filename="tangled_dolly_silhouette_black_on_trans.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d5d5d5"
+     inkscape:zoom="64"
+     inkscape:cx="4.96875"
+     inkscape:cy="13.429688"
+     inkscape:window-width="3840"
+     inkscape:window-height="2160"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1"
+     borderlayer="true">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="25"
+       height="25"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1"
+     transform="translate(-0.42924038,-0.87777209)">
+    <path
+       class="dolly"
+       fill="currentColor"
+       style="stroke-width:0.111183"
+       d="m 16.775491,24.987061 c -0.78517,-0.0064 -1.384202,-0.234614 -2.033994,-0.631295 -0.931792,-0.490188 -1.643475,-1.31368 -2.152014,-2.221647 C 11.781409,23.136647 10.701392,23.744942 9.4922931,24.0886 8.9774725,24.238111 8.0757679,24.389777 6.5811304,23.84827 4.4270703,23.124679 2.8580086,20.883331 3.0363279,18.599583 3.0037061,17.652919 3.3488675,16.723769 3.8381157,15.925061 2.5329485,15.224503 1.4686756,14.048584 1.0611184,12.606459 0.81344502,11.816973 0.82385989,10.966486 0.91519098,10.154906 1.2422711,8.2387903 2.6795811,6.5725716 4.5299585,5.9732484 5.2685364,4.290122 6.8802592,3.0349975 8.706276,2.7794663 c 1.2124148,-0.1688264 2.46744,0.084987 3.52811,0.7011837 1.545426,-1.7139736 4.237779,-2.2205077 6.293579,-1.1676231 1.568222,0.7488935 2.689625,2.3113526 2.961888,4.0151464 1.492195,0.5977882 2.749007,1.8168898 3.242225,3.3644951 0.329805,0.9581836 0.340709,2.0135956 0.127128,2.9974286 -0.381606,1.535184 -1.465322,2.842146 -2.868035,3.556463 0.0034,0.273204 0.901506,2.243045 0.751284,3.729647 -0.03281,1.858525 -1.211631,3.619894 -2.846433,4.475452 -0.953967,0.556812 -2.084452,0.546309 -3.120531,0.535398 z m -4.470079,-5.349839 c 1.322246,-0.147248 2.189053,-1.300106 2.862307,-2.338363 0.318287,-0.472954 0.561404,-1.002348 0.803,-1.505815 0.313265,0.287151 0.578698,0.828085 1.074141,0.956909 0.521892,0.162542 1.133743,0.03052 1.45325,-0.443554 0.611414,-1.140449 0.31004,-2.516537 -0.04602,-3.698347 C 18.232844,11.92927 17.945151,11.232927 17.397785,10.751793 17.514522,9.9283111 17.026575,9.0919791 16.332883,8.6609491 15.741721,9.1323278 14.842258,9.1294949 14.271975,8.6252369 13.178927,9.7400102 12.177239,9.7029996 11.209704,8.8195135 10.992255,8.6209543 10.577326,10.031484 9.1211947,9.2324497 8.2846288,9.9333947 7.6359672,10.607693 7.0611981,11.578553 6.5026891,12.62523 5.9177873,13.554793 5.867393,14.69141 c -0.024234,0.66432 0.4948601,1.360337 1.1982269,1.306329 0.702996,0.06277 1.1815208,-0.629091 1.7138087,-0.916491 0.079382,0.927141 0.1688108,1.923227 0.4821259,2.828358 0.3596254,1.171275 1.6262605,1.915695 2.8251855,1.745211 0.08481,-0.0066 0.218672,-0.01769 0.218672,-0.0176 z"
+       id="path7"
+       sodipodi:nodetypes="sccccccccccccccccccsscccccccccscccccccsc" />
+  </g>
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by/4.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by/4.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>

appview/pages/pages.go

···
 	return tpl.ExecuteTemplate(w, "layouts/base", params)
 }
 
-func (p *Pages) Favicon(w io.Writer) error {
-	return p.executePlain("fragments/dolly/silhouette", w, nil)
-}
-
 type LoginParams struct {
 	ReturnUrl string
 	ErrorCode string
···
 	return Cache(http.StripPrefix("/static/", http.FileServer(http.FS(sub))))
 }
 
+func (p *Pages) StaticRedirect(target string) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		http.Redirect(w, r, target, http.StatusMovedPermanently)
+	}
+}
+
 func Cache(h http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		path := strings.Split(r.URL.Path, "?")[0]
 
 		if strings.HasSuffix(path, ".css") {
-			// on day for css files
+			// one day for css files
 			w.Header().Set("Cache-Control", "public, max-age=86400")
 		} else {
+			// one year for others
 			w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
 		}
 		h.ServeHTTP(w, r)

appview/pages/templates/layouts/base.html

···
             <meta name="description" content="Social coding, but for real this time!"/>
             <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
 
+            <!-- favicon/web manifest -->
+            <link rel="icon" href="/favicon.ico" sizes="48x48"/>
+            <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"/>
+            <link rel="apple-touch-icon" href="/static/apple-touch-icon.png"/>
+
             <script defer src="/static/htmx.min.js"></script>
             <script defer src="/static/htmx-ext-ws.min.js"></script>
             <script defer src="/static/actor-typeahead.js" type="module"></script>

appview/state/router.go

···
 		s.pages,
 	)
 
-	router.Get("/favicon.svg", s.Favicon)
-	router.Get("/favicon.ico", s.Favicon)
+	router.Get("/favicon.ico", s.pages.StaticRedirect("/static/favicon.ico"))
+	router.Get("/favicon.svg", s.pages.StaticRedirect("/static/favicon.svg"))
 	router.Get("/pwa-manifest.json", s.PWAManifest)
 	router.Get("/robots.txt", s.RobotsTxt)
 

appview/state/state.go

···
 	return s.db.Close()
 }
 
-func (s *State) Favicon(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "image/svg+xml")
-	w.Header().Set("Cache-Control", "public, max-age=31536000") // one year
-	w.Header().Set("ETag", `"favicon-svg-v1"`)
-
-	if match := r.Header.Get("If-None-Match"); match == `"favicon-svg-v1"` {
-		w.WriteHeader(http.StatusNotModified)
-		return
-	}
-
-	s.pages.Favicon(w)
-}
-
 func (s *State) RobotsTxt(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/plain")
 	w.Header().Set("Cache-Control", "public, max-age=86400") // one day

nix/pkgs/appview-static-files.nix

···
   cp -f ${inter-fonts-src}/InterVariable*.ttf fonts/
   cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono*.woff2 fonts/
   cp -f ${actor-typeahead-src}/actor-typeahead.js .
+  cp -f ${src}/appview/pages/assets/* .
   # tailwindcss -c $src/tailwind.config.js -i $src/input.css -o tw.css won't work
   # for whatever reason (produces broken css), so we are doing this instead
   cd ${src} && ${tailwindcss}/bin/tailwindcss -i input.css -o $out/tw.css