fukasawa-seo

components/Collapse.js

@@ -84,7 +84,7 @@ const Collapse = props => {
   }, [props.isOpen])
 
   return (
-        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={`${props.className} overflow-hidden duration-200 `}>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className} overflow-hidden duration-200 `}>
             {props.children}
         </div>
   )

lib/notion/mapImage.js

@@ -6,7 +6,7 @@ import BLOG from '@/blog.config'
  * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸
  * @param {*} image
  */
-const compressImage = (image, width = 400) => {
+const compressImage = (image, width = 300) => {
   if (!image) {
     return null
   }

package.json

@@ -54,7 +54,6 @@
     "react-notion-x": "6.16.0",
     "react-share": "^4.4.1",
     "react-tweet-embed": "~2.0.0",
-    "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",
     "use-ackee": "^3.0.0"
   },

pages/_app.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import 'animate.css'
+// import 'animate.css'
 import '@/styles/globals.css'
 import '@/styles/nprogress.css'
 import '@/styles/utility-patterns.css'
@@ -11,11 +11,8 @@ import '@/styles/notion.css' //  重写部分样式
 
 import { GlobalContextProvider } from '@/lib/global'
 
-import { isMobile } from '@/lib/utils'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
-
-import smoothscroll from 'smoothscroll-polyfill'
 import dynamic from 'next/dynamic'
 
 // 自定义样式css和js引入
@@ -27,9 +24,6 @@ const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
 const MyApp = ({ Component, pageProps }) => {
   useEffect(() => {
     AOS.init()
-    if (isMobile()) {
-      smoothscroll.polyfill()
-    }
   }, [])
 
   return (

themes/fukasawa/components/ArticleLock.js

@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
  * @param validPassword(bool) 回调函数，校验正确回调入参为true
  * @returns
  */
-export const ArticleLock = props => {
+const ArticleLock = props => {
   const { validPassword } = props
   const { locale } = useGlobal()
 
@@ -58,3 +58,5 @@ export const ArticleLock = props => {
     </div>
   </div>)
 }
+
+export default ArticleLock

themes/fukasawa/components/AsideLeft.js

@@ -59,7 +59,7 @@ function AsideLeft(props) {
             {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
         </div>}
 
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-10'}`}>
+        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-8'}`}>
 
             <Logo {...props} />
 

themes/fukasawa/components/BlogCard.js

@@ -28,7 +28,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img
                                 src={post?.pageCoverThumbnail}
-                                alt={post.title}
+                                alt={post?.title || BLOG.TITLE}
                                 className="object-cover w-full h-full hover:scale-125 transform duration-500"
                             ></img>
                         </Link>
@@ -44,13 +44,13 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                     </Link>
 
                     {(!showPreview || showSummary) && (
-                        <p className="my-2 tracking-wide line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
+                        <p className="my-2 tracking-wide line-clamp-3 text-gray-800 dark:text-gray-300 text-md font-light leading-6">
                             {post.summary}
                         </p>
                     )}
 
                     {/* 分类标签 */}
-                    <div className="mt-auto text-gray-400 justify-between flex">
+                    <div className="mt-auto justify-between flex">
                         {post.category && <Link
                             href={`/category/${post.category}`}
                             passHref

themes/fukasawa/components/GroupTag.js

@@ -12,7 +12,7 @@ function GroupTag ({ tags, currentTag }) {
   return (
     <div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
       {
-        tags.map(tag => {
+        tags?.slice(0, 20)?.map(tag => {
           const selected = tag.name === currentTag
           return <TagItemMini key={tag.name} tag={tag} selected={selected} />
         })

themes/fukasawa/components/MenuList.js

@@ -30,12 +30,12 @@ export const MenuList = (props) => {
   }
 
   return (<>
-        <nav id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
+        <menu id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
             {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
-        </nav>
+        </menu>
-        <nav id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
+        <menu id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
             {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={props.onHeightChange}/>)}
-        </nav>
+        </menu>
     </>
 
   )

themes/fukasawa/components/SearchInput.js

@@ -1,9 +1,11 @@
+import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
 
 const SearchInput = (props) => {
   const { keyword, cRef } = props
   const [onLoading, setLoadingState] = useState(false)
+  const { locale } = useGlobal()
   const router = useRouter()
   const searchInputRef = useRef()
   useImperativeHandle(cRef, () => {
@@ -54,6 +56,8 @@ const SearchInput = (props) => {
     <input
       ref={searchInputRef}
       type='text'
+      placeholder={locale.SEARCH.ARTICLES}
+      aria-label="Search"
       className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
       onKeyUp={handleKeyUp}
       defaultValue={keyword || ''}

themes/fukasawa/components/SiteInfo.js

@@ -12,16 +12,16 @@ function SiteInfo ({ title }) {
 
   return (
         <footer
-            className='relative leading-6 justify-start w-full text-gray-400 text-xs font-sans'
+            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs font-sans'
         >
-            <span> © {`${copyrightDate}`} <span> <a href={BLOG.LINK} className='text-gray-500 dark:text-gray-300 '> <i className='mx-1 animate-pulse fas fa-heart'/> {BLOG.AUTHOR}</a>. <br /></span>
+            <span> © {`${copyrightDate}`} <span> <a href={BLOG.LINK}> <i className='mx-1 animate-pulse fas fa-heart'/> {BLOG.AUTHOR}</a>. <br /></span>
 
             {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
 
             <span className='hidden busuanzi_container_site_pv'> <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
             <span className='pl-2 hidden busuanzi_container_site_uv'> <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
             <br />
-            <span className='text-xs font-serif'> Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a></span><br /></span>
+            <span className='text-xs font-serif'> Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline'>NotionNext {BLOG.VERSION}</a></span><br /></span>
             <h1>{title}</h1>
         </footer>
   )

themes/fukasawa/components/SocialButton.js

@@ -8,7 +8,7 @@ import React from 'react'
  */
 const SocialButton = () => {
   return <div className='w-52 flex-wrap flex'>
-    <div className='space-x-3 text-lg text-gray-400 dark:text-gray-400'>
+    <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
       {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
         <i className='fab fa-github transform hover:scale-125 duration-150'/>
       </a>}

themes/fukasawa/index.js

@@ -4,7 +4,6 @@ import CONFIG from './config'
 import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
-import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
@@ -12,13 +11,16 @@ import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import BlogArchiveItem from './components/BlogPostArchive'
 import ArticleDetail from './components/ArticleDetail'
-import { ArticleLock } from './components/ArticleLock'
+import ArticleLock from './components/ArticleLock'
 import TagItemMini from './components/TagItemMini'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
-import Mark from 'mark.js'
 import Link from 'next/link'
 import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+
+const Live2D = dynamic(() => import('@/components/Live2D'))
+const Mark = dynamic(() => import('mark.js'))
 
 // 主题全局状态
 const ThemeGlobalFukasawa = createContext()