favicon as image, not inline text

gugray · Mar 23, 2024 · 90df364 · 90df364
1 parent 89cfeaf
commit 90df364
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 3 deletions.
diff --git a/src/admin-client/src/app.css b/src/admin-client/src/app.css
@@ -52,6 +52,10 @@ section {
 .spacer { display: inline-block; width: 24px; }
 #pnlImportErrors { white-space: pre-wrap; color: var(--clrError); }
 
+#cnvIcon {
+  width: 256px; height: 256px; background-color: black;
+}
+
 @font-face {
   font-display: swap;
   font-family: 'Open Sans';

diff --git a/src/admin-client/src/app.js b/src/admin-client/src/app.js
@@ -1,4 +1,5 @@
 import {feedUrls} from "./urls-debug.js";
+import {initGenIcon} from "./gen-icon.js";
 
 const elmTxtServerUrl = document.getElementById("txtServerUrl");
 const elmTxtApiKey = document.getElementById("txtApiKey");
@@ -31,6 +32,7 @@ const feedImportStats = {
 
 initParams();
 initFeedImport();
+initGenIcon();
 
 function initParams() {
   let stgs = null;

diff --git a/src/admin-client/src/gen-icon.js b/src/admin-client/src/gen-icon.js
@@ -0,0 +1,18 @@
+let elmCanvas, elmLink;
+
+export function initGenIcon() {
+
+  // Get elements
+  elmCanvas = document.getElementById("cnvIcon");
+  elmLink = document.getElementById("lnkSaveIcon");
+
+  // Draw parrot emoji
+  const ctx = elmCanvas.getContext("2d");
+  ctx.font = "192px Arial";
+  ctx.fillText("🦜", 36, 196);
+
+  // Get PNG image and add to link as data URL
+  const dataURL = elmCanvas.toDataURL("image/png");
+  elmLink.href = dataURL;
+  elmLink.download = "favicon-256.png";
+}
diff --git a/src/admin-client/src/index.html b/src/admin-client/src/index.html
@@ -45,5 +45,12 @@ <h2>Import feeds</h2>
   <div id="pnlImportErrors"></div>
 </section>
 
+<section>
+  <h2>Generate favicon</h2>
+  <canvas width="256" height="256" id="cnvIcon"></canvas>
+  <br>
+  <a href="#" id="lnkSaveIcon">Save icon</a>
+</section>
+
 </body>
 </html>
diff --git a/src/server/server/server.go b/src/server/server/server.go
@@ -14,6 +14,7 @@ import (
 )
 
 const assetsDir = "/assets"
+const faviconName = "/favicon.ico"
 const chunkSize = 65536
 const strCacheControlHdr = "Cache-Control"
 
@@ -105,12 +106,16 @@ func handleStatic(logger shared.ILogger,
 
 	w.Header().Set(strCacheControlHdr, "max-age=31536000, immutable")
 
-	if !strings.HasPrefix(r.URL.Path, assetsDir) {
+	// We serve everything from /assets folder, EXCEPT favicon.ico, which gets special treatment
+	if r.URL.Path != faviconName && !strings.HasPrefix(r.URL.Path, assetsDir) {
 		return404()
 		return
 	}
 
 	fn := filepath.Join(wwwPathPrefx, r.URL.Path)
+	if r.URL.Path == faviconName {
+		fn = filepath.Join(wwwPathPrefx, assetsDir, r.URL.Path)
+	}
 	file, err := os.Open(fn)
 	if err != nil {
 		return404()

diff --git a/src/server/www/assets/favicon-16x16.png b/src/server/www/assets/favicon-16x16.png
diff --git a/src/server/www/assets/favicon-32x32.png b/src/server/www/assets/favicon-32x32.png
diff --git a/src/server/www/assets/favicon.ico b/src/server/www/assets/favicon.ico
diff --git a/src/server/www/index.tmpl b/src/server/www/index.tmpl
@@ -6,8 +6,8 @@
   <title>RSS Parrot</title>
   <meta name="description" content="Home of RSS Parrot, a free Fediverse service that lets you turn Mastodon into an RSS or Atom feed reader." />
   <meta name="og:description" content="Home of RSS Parrot, a free Fediverse service that lets you turn Mastodon into an RSS or Atom feed reader." />
-  <link rel="icon"
-        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦜</text></svg>">
+{{/*  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png?ver={{ .Timestamp }}">*/}}
+{{/*  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png?ver={{ .Timestamp }}">*/}}
   <link rel="stylesheet" href="/assets/style.css?ver={{ .Timestamp }}">
   <script defer data-domain="rss-parrot.net" src="https://plausible.io/js/script.js"></script>
 </head>