🎨 update favicon

workspaces/website/README.md

@@ -8,11 +8,4 @@
 [ ] convert resume to web-component/lit
 [ ] add linter
 [ ] make work with testing-library
-[ ] need favicon
-  * dual favicons on remotely.com (https://remotive.com/remotive_website_layout/static/refactoring/js/favicon.js?v=2)
-  * clown face and ??? (https://favicon.io/emoji-favicons/)
 [ ] add github graph: https://github.com/enpitsuLin/wc-github-graph/blob/master/src/github-graph.ts
-
-```js
-const onVisibilityChange=()=>{const faviconTag=document.querySelector('[rel="shortcut icon"]');if(document.hidden){const initialFavicon=faviconTag.href;document.initialFavicon=initialFavicon;faviconTag.href="/remotive_website_job/static/src/img/dogeicon.png";}else{if(document.initialFavicon!==""){faviconTag.href=document.initialFavicon;}}};document.addEventListener("visibilitychange",onVisibilityChange,true);document.initialFavicon=document.querySelector('[rel="shortcut icon"]').href;
-```

workspaces/website/src/components/BaseHead.astro

@@ -12,15 +12,15 @@ export interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/placeholder-scottnath.jpeg' } = Astro.props;
+const { title, description, image = '/scott-nath-profile-pic.jpeg' } = Astro.props;
 ---
 <script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js" type="text/partytown"></script>
 
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" href="/favicon-mind-blown.ico" id="favicon" />
 <meta name="generator" content={Astro.generator} />
 <link rel="preload" as="image" href="/scott-nath-profile-pic.jpeg" />
 
@@ -45,3 +45,21 @@ const { title, description, image = '/placeholder-scottnath.jpeg' } = Astro.prop
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<script>
+  // triggers a different favicon when the user switches tabs
+  const onVisibilityChange=()=>{
+    const faviconTag=document.querySelector('#favicon');
+    if(document.hidden){
+      const initialFavicon=faviconTag?.href;
+      document.initialFavicon=initialFavicon;
+      faviconTag.href="/favicon-clown.ico";
+    } else {
+      if(document.initialFavicon!==""){
+        faviconTag.href=document.initialFavicon;
+      }
+    }
+  };
+  document.addEventListener("visibilitychange",onVisibilityChange,true);
+  document.initialFavicon=document.querySelector('#favicon').href;
+</script>

workspaces/website/src/components/codewall/assets/README.md

@@ -5,4 +5,8 @@ Use https://green-wall.vercel.app/ to generate a codewall for public github
 For making any kind of component:
 https://github.com/Codennnn/Green-Wall
 
-Could be a /Codewall page on the site maybe
+Could be a /Codewall page on the site maybe
+
+shows a sneaky api call to get the data
+https://github.com/sallar/github-contributions-chart/blob/master/src/utils/api/fetch.js
+https://github-contribution-graph-example.vercel.app/