remove package typed.js

2026-05-13 23:16:47 +00:00 · 2024-04-10 11:15:39 +08:00
parent 295d29787e
commit 1193618bba
4 changed files with 112 additions and 82 deletions
--- a/package.json
+++ b/package.json
@@ -43,8 +43,7 @@
        "react-hotkeys-hook": "^4.5.0",
        "react-notion-x": "6.16.0",
        "react-share": "^4.4.1",
-        "react-tweet-embed": "~2.0.0",
-        "typed.js": "^2.0.12"
+        "react-tweet-embed": "~2.0.0"
    },
    "devDependencies": {
        "@waline/client": "^2.5.1",
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -1,11 +1,11 @@
 // import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import Typed from 'typed.js'
-import CONFIG from '../config'
-import NavButtonGroup from './NavButtonGroup'
-import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import NavButtonGroup from './NavButtonGroup'

 let wrapperTop = 0

@@ -20,21 +20,29 @@ const Hero = props => {
  const scrollToWrapper = () => {
    window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
  }
+
  const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
  useEffect(() => {
    updateHeaderHeight()

    if (!typed && window && document.getElementById('typed')) {
-      changeType(
-        new Typed('#typed', {
-          strings: GREETING_WORDS,
-          typeSpeed: 200,
-          backSpeed: 100,
-          backDelay: 400,
-          showCursor: true,
-          smartBackspace: true
-        })
-      )
+      loadExternalResource(
+        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'js'
+      ).then(() => {
+        if (window.Typed) {
+          changeType(
+            new window.Typed('#typed', {
+              strings: GREETING_WORDS,
+              typeSpeed: 200,
+              backSpeed: 100,
+              backDelay: 400,
+              showCursor: true,
+              smartBackspace: true
+            })
+          )
+        }
+      })
    }

    window.addEventListener('resize', updateHeaderHeight)
@@ -51,33 +59,43 @@ const Hero = props => {
  }

  return (
-        <header
-            id="header" style={{ zIndex: 1 }}
-            className="w-full h-screen relative bg-black"
-        >
+    <header
+      id='header'
+      style={{ zIndex: 1 }}
+      className='w-full h-screen relative bg-black'>
+      <div className='text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full '>
+        {/* 站点标题 */}
+        <div className='font-black text-4xl md:text-5xl shadow-text'>
+          {siteConfig('TITLE')}
+        </div>
+        {/* 站点欢迎语 */}
+        <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
+          <span id='typed' />
+        </div>

-            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                {/* 站点标题 */}
-                <div className='font-black text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
-                {/* 站点欢迎语 */}
-                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
-                    <span id='typed' />
-                </div>
+        {/* 首页导航大按钮 */}
+        {siteConfig('HEXO_HOME_NAV_BUTTONS', null, CONFIG) && (
+          <NavButtonGroup {...props} />
+        )}

-                {/* 首页导航大按钮 */}
-                {siteConfig('HEXO_HOME_NAV_BUTTONS', null, CONFIG) && <NavButtonGroup {...props} />}
+        {/* 滚动按钮 */}
+        <div
+          onClick={scrollToWrapper}
+          className='z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white'>
+          <div className='opacity-70 animate-bounce text-xs'>
+            {siteConfig('HEXO_SHOW_START_READING', null, CONFIG) &&
+              locale.COMMON.START_READING}
+          </div>
+          <i className='opacity-70 animate-bounce fas fa-angle-down' />
+        </div>
+      </div>

-                {/* 滚动按钮 */}
-                <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
-                    <div className="opacity-70 animate-bounce text-xs">{siteConfig('HEXO_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</div>
-                    <i className='opacity-70 animate-bounce fas fa-angle-down' />
-                </div>
-            </div>
-
-            <LazyImage id='header-cover' src={siteInfo?.pageCover}
-                className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
-
-        </header>
+      <LazyImage
+        id='header-cover'
+        src={siteInfo?.pageCover}
+        className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
+      />
+    </header>
  )
 }

--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -1,10 +1,10 @@
 // import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import Typed from 'typed.js'
-import CONFIG from '../config'
-import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'

 let wrapperTop = 0

@@ -21,16 +21,23 @@ const Hero = props => {
  useEffect(() => {
    updateHeaderHeight()
    if (!typed && window && document.getElementById('typed')) {
-      changeType(
-        new Typed('#typed', {
-          strings: GREETING_WORDS,
-          typeSpeed: 200,
-          backSpeed: 100,
-          backDelay: 400,
-          showCursor: true,
-          smartBackspace: true
-        })
-      )
+      loadExternalResource(
+        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'js'
+      ).then(() => {
+        if (window.Typed) {
+          changeType(
+            new window.Typed('#typed', {
+              strings: GREETING_WORDS,
+              typeSpeed: 200,
+              backSpeed: 100,
+              backDelay: 400,
+              showCursor: true,
+              smartBackspace: true
+            })
+          )
+        }
+      })
    }

    window.addEventListener('resize', updateHeaderHeight)
@@ -47,29 +54,40 @@ const Hero = props => {
  }

  return (
-        <header
-            id="header" style={{ zIndex: 1 }}
-            className=" w-full h-screen relative bg-black"
-        >
+    <header
+      id='header'
+      style={{ zIndex: 1 }}
+      className=' w-full h-screen relative bg-black'>
+      <div className='text-white absolute flex flex-col h-full items-center justify-center w-full '>
+        {/* 站点标题 */}
+        <div className='text-4xl md:text-5xl shadow-text'>
+          {siteConfig('TITLE')}
+        </div>
+        {/* 站点欢迎语 */}
+        <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+          <span id='typed' />
+        </div>
+        {/* 滚动按钮 */}
+        <div
+          onClick={() => {
+            window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+          }}
+          className='mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40'>
+          <i className='animate-bounce fas fa-angle-double-down' />{' '}
+          <span>
+            {siteConfig('MATERY_SHOW_START_READING', null, CONFIG) &&
+              locale.COMMON.START_READING}
+          </span>
+        </div>
+      </div>

-            <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
-                {/* 站点标题 */}
-                <div className='text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
-                {/* 站点欢迎语 */}
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
-                    <span id='typed' />
-                </div>
-                {/* 滚动按钮 */}
-                <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-                    className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
-                    <i className='animate-bounce fas fa-angle-double-down' /> <span>{siteConfig('MATERY_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</span>
-                </div>
-            </div>
-
-            <LazyImage priority={true} id='header-cover'src={siteInfo?.pageCover}
-                className={`header-cover object-center w-full h-screen object-cover ${siteConfig('MATERY_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
-
-        </header>
+      <LazyImage
+        priority={true}
+        id='header-cover'
+        src={siteInfo?.pageCover}
+        className={`header-cover object-center w-full h-screen object-cover ${siteConfig('MATERY_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
+      />
+    </header>
  )
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -4048,11 +4048,6 @@ typed-array-length@^1.0.4:
    for-each "^0.3.3"
    is-typed-array "^1.1.9"

-typed.js@^2.0.12:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.1.0.tgz#b97a06111a5f57d6a59acfdd36d4f9b891ee13b4"
-  integrity sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==
-
 unbox-primitive@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"