chore: update favicon images and logo formats, remove unused assets

Author: danieldanielecki

.firebase/hosting.b3V0.cache

@@ -30,6 +30,7 @@ public/sitemap.xml
 
 # misc
 .DS_Store
+.firebase
 
 # debug
 *.log

.gitignore

@@ -1,12 +1,22 @@
+'use client'
+
 import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
-import Logo from '@/data/logo.svg'
 import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import SearchButton from './SearchButton'
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
 
 const Header = () => {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // After mounting, we have access to the theme
+  useEffect(() => setMounted(true), [])
+
   let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
   if (siteMetadata.stickyNav) {
     headerClass += ' sticky top-0 z-50'
@@ -17,15 +27,27 @@ const Header = () => {
       <Link href="/" aria-label={siteMetadata.headerTitle}>
         <div className="flex items-center justify-between">
           <div className="mr-3">
-            <Logo />
+            {mounted && (
+              <Image
+                src={
+                  resolvedTheme === 'dark'
+                    ? '/static/images/logoWhite.svg'
+                    : '/static/images/logoBlack.svg'
+                }
+                alt="Logo"
+                width={300}
+                height={50}
+                priority
+              />
+            )}
           </div>
-          {typeof siteMetadata.headerTitle === 'string' ? (
+          {/* {typeof siteMetadata.headerTitle === 'string' ? (
             <div className="hidden h-6 text-2xl font-semibold sm:block">
               {siteMetadata.headerTitle}
             </div>
           ) : (
             siteMetadata.headerTitle
-          )}
+          )} */}
         </div>
       </Link>
       <div className="flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6">