From 3673c8c561728b7dd48916693f89bf95cb23645a Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 23 Dec 2021 14:13:59 +0800
Subject: [PATCH] build:

---
 components/Header.js | 63 ++++++++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 2d908f70..a7127091 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
 
@@ -14,14 +13,16 @@ export default function Header () {
   const [typed, changeType] = useState()
   useEffect(() => {
     if (!typed && window && document.getElementById('typed')) {
-      changeType(new Typed('#typed', {
-        strings: BLOG.headerStrings,
-        typeSpeed: 200,
-        backSpeed: 100,
-        backDelay: 400,
-        showCursor: true,
-        smartBackspace: true
-      }))
+      changeType(
+        new Typed('#typed', {
+          strings: BLOG.headerStrings,
+          typeSpeed: 200,
+          backSpeed: 100,
+          backDelay: 400,
+          showCursor: true,
+          smartBackspace: true
+        })
+      )
     }
   })
   const { theme } = useGlobal()
@@ -34,11 +35,19 @@ export default function Header () {
     autoScroll = false
   }
   const scrollTrigger = useCallback(() => {
-    if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
+    if (
+      (window.scrollY > windowTop) &
+      (window.scrollY < window.innerHeight) &
+      !autoScroll
+    ) {
       autoScroll = true
       scrollTo(wrapperTop, autoScrollEnd)
     }
-    if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
+    if (
+      (window.scrollY < windowTop) &
+      (window.scrollY < window.innerHeight) &
+      !autoScroll
+    ) {
       autoScroll = true
       scrollTo(0, autoScrollEnd)
     }
@@ -77,15 +86,29 @@ export default function Header () {
     }
   })
 
-  return <header id='header' className='duration-500 w-full bg-cover bg-center md:-mt-14'
-    style={{ height: 'calc(100vh + 1px)', backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
-    <div className='absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white'>
-        <div id="typed" className='flex text-center font-serif'></div>
-    </div>
-    <div onClick={() => { scrollTo(wrapperTop, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'>
-      <FontAwesomeIcon icon={faArrowDown} />
-    </div>
-</header>
+  return (
+    <header
+      id="header"
+      className="duration-500 w-full bg-cover bg-center md:-mt-14"
+      style={{
+        height: 'calc(100vh + 1px)',
+        backgroundImage:
+          'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")'
+      }}
+    >
+      <div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
+        <div id="typed" className="flex text-center font-serif"></div>
+      </div>
+      <div
+        onClick={() => {
+          scrollTo(wrapperTop, autoScrollEnd)
+        }}
+        className="cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white"
+      >
+        <FontAwesomeIcon icon={faArrowDown} />
+      </div>
+    </header>
+  )
 }
 
 /**