fix: returning to static, relative path favicons

For some weird reason, when I used the absolute path, I was getting mixed content errors in the browser console in dev and prod, as if the favicon was being served from http on an https site. The absolute path appeared to use https, so I couldn't tell what the issue was. Instead of spinning my wheels on it, I'm just reverting back to the relative path favicons which were working fine.
bryanbraun · Oct 11, 2023 · 6598f17 · 6598f17
1 parent 489cb9a
commit 6598f17
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 16 deletions.
diff --git a/src/components/WhiteboardWrapper.jsx b/src/components/WhiteboardWrapper.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import EditButton from "./EditButton";
 import Whiteboard from "./whiteboard";
 
-export default function WhiteboardWrapper({ baseUrl }) {
+export default function WhiteboardWrapper() {
   const [isEditing, setIsEditing] = useState(false);
 
   const toggleEditing = () => {
@@ -14,7 +14,7 @@ export default function WhiteboardWrapper({ baseUrl }) {
     const NUMBER_OF_FAVICONS = 5;
     const num = Math.floor(Math.random() * NUMBER_OF_FAVICONS);
     const faviconEl = document.getElementById('favicon');
-    faviconEl.href = `${baseUrl}/favicon-${num}.svg`;
+    faviconEl.href = `favicon-${num}.svg`;
   }, []);
 
   // I know this is janky but if I alter the title as a side effect from here,

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,13 +5,11 @@ interface Props {
   title: string;
   description: string;
   baseUrl: string;
-  favicon: string;
   ogImage: string;
   squareImage: string;
 }
 
-const { title, description, baseUrl, favicon, ogImage, squareImage } =
-  Astro.props;
+const { title, description, baseUrl, ogImage, squareImage } = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -33,12 +31,7 @@ const { title, description, baseUrl, favicon, ogImage, squareImage } =
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={`${baseUrl}/${squareImage}`} />
 
-    <link
-      id="favicon"
-      rel="icon"
-      type="image/svg+xml"
-      href={`${baseUrl}/${favicon}`}
-    />
+    <link id="favicon" rel="icon" type="image/svg+xml" href="favicon-0.svg" />
 
     <meta
       name="viewport"

diff --git a/src/pages/feed.json.js b/src/pages/feed.json.js
@@ -8,7 +8,7 @@ export async function get() {
     title: metadata.title,
     description: metadata.description,
     feed_url: `${metadata.baseUrl}/feed.json`,
-    favicon: `${metadata.baseUrl}/${metadata.favicon}`,
+    favicon: `${metadata.baseUrl}/favicon-0.svg`,
     icon: `${metadata.baseUrl}/${metadata.squareImage}`,
     language: "en-US",
     authors: [{

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,14 +10,13 @@ import metadata from "../site-metadata.json";
   title={metadata.title}
   description={metadata.description}
   baseUrl={metadata.baseUrl}
-  favicon={metadata.favicon}
   ogImage={metadata.ogImage}
   squareImage={metadata.squareImage}
 >
   <header class="h-whiteboard bg-whiteboard">
     <PageTitle title={metadata.title} />
     <!-- WhiteboardWrapper cannot be server-rendered because it has sub-components that are not server-renderable. -->
-    <WhiteboardWrapper client:only="react" baseUrl={metadata.baseUrl} />
+    <WhiteboardWrapper client:only="react" />
   </header>
 
   <main class="border border-transparent">

diff --git a/src/site-metadata.json b/src/site-metadata.json
@@ -3,6 +3,5 @@
   "description": "A collection of high-quality, free, online creativity tools.",
   "baseUrl": "https://bryanbraun.com/lets-get-creative",
   "ogImage": "banner-og.png",
-  "squareImage": "banner-square.png",
-  "favicon": "favicon-0.svg"
+  "squareImage": "banner-square.png"
 }