feat(feat): Make changing favicon easier & make site title always vis…

…ible * Extract the sqaure logo as a separate file * Make favicon & logo changable by replacing favicon.png * Make site title always visible on large screens Fix craigary#122, craigary#200, craigary#233, craigary#273
zhu3pang · Mar 27, 2023 · 873d61c · 873d61c
2 parents 8d4408b + dc064c7
commit 873d61c
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 69 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -1,7 +1,9 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import BLOG from '@/blog.config'
 import { useLocale } from '@/lib/locale'
+import useTheme from '@/lib/theme'
 
 const NavBar = () => {
   const locale = useLocale()
@@ -30,7 +32,21 @@ const NavBar = () => {
   )
 }
 
-const Header = ({ navBarTitle, fullWidth }) => {
+export default function Header ({ navBarTitle, fullWidth }) {
+  const { dark } = useTheme()
+
+  // Favicon
+
+  const resolveFavicon = fallback => !fallback && dark ? '/favicon.dark.png' : '/favicon.png'
+  const [favicon, _setFavicon] = useState(resolveFavicon())
+  const setFavicon = fallback => _setFavicon(resolveFavicon(fallback))
+
+  useEffect(
+    () => setFavicon(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dark]
+  )
+
   const useSticky = !BLOG.autoCollapsedNavBar
   const navRef = useRef(/** @type {HTMLDivElement} */ undefined)
   const sentinelRef = useRef(/** @type {HTMLDivElement} */ undefined)
@@ -57,7 +73,10 @@ const Header = ({ navBarTitle, fullWidth }) => {
   function handleClickHeader (/** @type {MouseEvent} */ ev) {
     if (![navRef.current, titleRef.current].includes(ev.target)) return
 
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
   }
 
   return (
@@ -82,59 +101,40 @@ const Header = ({ navBarTitle, fullWidth }) => {
         </svg>
         <div className="flex items-center">
           <Link href="/" aria-label={BLOG.title}>
-            <div className="h-6">
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  width="24"
-                  height="24"
-                  className="fill-current text-black dark:text-white"
-                />
-                <rect width="24" height="24" fill="url(#paint0_radial)" />
-                <defs>
-                  <radialGradient
-                    id="paint0_radial"
-                    cx="0"
-                    cy="0"
-                    r="1"
-                    gradientUnits="userSpaceOnUse"
-                    gradientTransform="rotate(45) scale(39.598)"
-                  >
-                    <stop stopColor="#CFCFCF" stopOpacity="0.6" />
-                    <stop offset="1" stopColor="#E9E9E9" stopOpacity="0" />
-                  </radialGradient>
-                </defs>
-              </svg>
-            </div>
+            <Image
+              src={favicon}
+              width={24}
+              height={24}
+              alt={BLOG.title}
+              onError={() => setFavicon(true)}
+            />
           </Link>
-          {navBarTitle ? (
-            <p
-              ref={titleRef}
-              className="ml-2 font-medium text-day dark:text-night header-name"
-              onClick={handleClickHeader}
-            >
-              {navBarTitle}
-            </p>
-          ) : (
-            <p
-              ref={titleRef}
-              className="ml-2 font-medium text-day dark:text-night header-name"
-              onClick={handleClickHeader}
-            >
-              {BLOG.title},{' '}
-              <span className="font-normal">{BLOG.description}</span>
-            </p>
-          )}
+          <HeaderName
+            ref={titleRef}
+            siteTitle={BLOG.title}
+            siteDescription={BLOG.description}
+            postTitle={navBarTitle}
+            onClick={handleClickHeader}
+          />
         </div>
         <NavBar />
       </div>
     </>
   )
 }
 
-export default Header
+const HeaderName = forwardRef(function HeaderName ({ siteTitle, siteDescription, postTitle, onClick }, ref) {
+  return (
+    <p
+      ref={ref}
+      className="header-name ml-2 font-medium text-gray-600 dark:text-gray-300 grid-rows-1 grid-cols-1"
+      onClick={onClick}
+    >
+      {postTitle && <span className="post-title row-start-1 col-start-1">{postTitle}</span>}
+      <span className="row-start-1 col-start-1">
+        <span className="site-title">{siteTitle}</span>
+        <span className="site-description font-normal">, {siteDescription}</span>
+      </span>
+    </p>
+  )
+})
diff --git a/pages/_document.js b/pages/_document.js
@@ -88,9 +88,7 @@ class MyDocument extends Document {
               </noscript>
             </>
           )}
-          <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon.png"></link>
+          <link rel="icon" href="/favicon.png" />
           <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed"></link>
           {BLOG.appearance === 'auto'
             ? (

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon.dark.png b/public/favicon.dark.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/styles/globals.css b/styles/globals.css
@@ -91,7 +91,6 @@ body::-webkit-scrollbar-thumb {
 
 .header-name {
   display: none;
-  opacity: 0;
   overflow: hidden;
 }
 
@@ -127,13 +126,30 @@ nav {
     @apply max-w-full border-b border-opacity-50 border-gray-200 dark:border-gray-600 dark:border-opacity-50;
   }
   .header-name {
-    display: block;
+    display: grid;
+  }
+  .site-title,
+  .post-title {
+    @apply transition duration-500;
+  }
+  .site-description {
     opacity: 0;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
+    transition: opacity 0.5s cubic-bezier(0.4, 0, 0, 1);
+  }
+  .sticky-nav-full .site-description {
+    @apply opacity-0 transition duration-500;
+  }
+  .post-title {
+    @apply opacity-0;
+  }
+  .post-title ~ span .site-description {
+    @apply hidden;
+  }
+  .sticky-nav-full .post-title {
+    @apply opacity-100;
   }
-  .sticky-nav-full .header-name {
-    opacity: 1;
-    @apply dark:text-gray-300 text-gray-600;
+  .sticky-nav-full .post-title ~ span .site-title {
+    @apply opacity-0;
   }
 }