chore: performance improve, fix minor aria and disaplay bugs (#90)

Chore:
- Remove `thumbnailAbout` and `thumbnailFriends` options from config,
enable `showThumbnail` option for frontmatter for each page to use.
- Change all icons to use `fa6` instead of others to reduce bundling
size.
- Remove not-exist prop `onLinkClick` from `useTOCLogic` hook.

Fix:
- Aria issue with TOC, use `menu` instead of `nav`. Use `ul` + `li`
instead of `div`.
- TOC link switch to barebone `<a>` tag instead of nextjs `Link`
components to avoid prefetch cost performance.
- Auto slug activate may exceed viewport and not centered even possible.

Deps:
- Upgrade nextjs to `15.1.0`
- Remove `engine` part since controlled by `packageManager` and
`node-version`

Author: ZL-Asica

config.yml

@@ -7,7 +7,7 @@ description: 'Suzu is a minimalist blog template with a serene sakura-inspired t
 keywords: 'Suzu, Next.js, markdown blog, Tailwind CSS, blog template, sakura, ZL Asica' # Comma-separated keywords for SEO purposes.
 author:
   name: 'ZL Asica' # Your name, displayed as the author of the blog.
-  link: 'https://www.zla.app' # Link to your personal website or blog.
+  link: 'https://www.zla.pub' # Link to your personal website or blog.
 # Language setting: Use ISO 639-1 code (e.g., 'en' for English, 'zh' for Chinese)
 lang: 'zh'
 # Your public root url, used for SEO and meta tags.
@@ -65,13 +65,6 @@ socialMedia:
   email: [email protected] # Your email address.
   rss: true # Display the RSS icon.
 
-#######################
-# PAGES (ABOUT, FRIENDS) SETTINGS
-#######################
-# Have thumbnails for the about and friends pages.
-thumbnailAbout: false
-thumbnailFriends: false
-
 #######################
 # COMMENTS SETTINGS
 # Only one of the following two options should be enabled.

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -16,7 +16,7 @@
   "funding": "https://github.com/sponsors/ZL-Asica",
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build",
+    "build": "NODE_NO_WARNINGS=1 next build",
     "start": "next start",
     "format": "prettier --write .",
     "lint": "next lint",
@@ -31,7 +31,7 @@
     "es-toolkit": "^1.29.0",
     "gray-matter": "^4.0.3",
     "katex": "^0.16.15",
-    "next": "15.0.4",
+    "next": "15.1.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-icons": "^5.4.0",
@@ -47,7 +47,7 @@
     "yaml": "^2.6.1"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.4",
+    "@next/eslint-plugin-next": "^15.1.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.10.1",
     "@types/react": "^19.0.1",
@@ -77,10 +77,6 @@
       "prettier --write"
     ]
   },
-  "engines": {
-    "node": ">=20",
-    "pnpm": ">=9"
-  },
   "browserslist": {
     "production": [
       ">0.5%",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ title: '' # (Optional) Default is About
 thumbnail: '' # (Optional) You can put your personal about thumbnail
 showComments: false # Set whether you want have comment for this page
 showLicense: false # Set whether you want to show license for this page
+showThumbnail: false # Whether you want to show 'in page' thumbnail.
 ---
 
 ## 自我介绍

posts/_pages/About.md

@@ -3,6 +3,7 @@ title: Some Customized Title # (Optional) Default is Friends
 thumbnail: '' # (Optional) You can put your personal about thumbnail
 showComments: true # Set whether you want have comment for this page
 showLicense: false # Set whether you want to show license for this page
+showThumbnail: false # Whether you want to show 'in page' thumbnail.
 ---
 
 ## 我的项目

posts/_pages/Friends.md

@@ -64,7 +64,6 @@ async function AboutPage() {
       <ArticlePage
         config={config}
         post={post}
-        showThumbnail={config.thumbnailAbout}
       />
     </>
   );

src/app/about/page.tsx

@@ -66,7 +66,6 @@ async function FriendsPage() {
       <ArticlePage
         config={config}
         post={post}
-        showThumbnail={config.thumbnailFriends}
       />
     </>
   );

src/app/friends/page.tsx

@@ -21,15 +21,14 @@ const DisqusComments = dynamic(() =>
 interface PostLayoutProperties {
   config: Config;
   post: FullPostData;
-  showThumbnail?: boolean;
 }
 
-const ArticlePage = ({ config, post, showThumbnail = true }: PostLayoutProperties) => {
+const ArticlePage = ({ config, post }: PostLayoutProperties) => {
   const translation = config.translation;
 
   return (
     <article className='container mx-auto animate-fadeInDown p-6 pb-2'>
-      {showThumbnail ? (
+      {post.frontmatter.showThumbnail ? (
         <Thumbnail
           title={post.frontmatter.title}
           src={post.frontmatter.thumbnail}
@@ -69,7 +68,7 @@ const ArticlePage = ({ config, post, showThumbnail = true }: PostLayoutPropertie
             items={post.toc}
             translation={translation}
             autoSlug={post.frontmatter.autoSlug}
-            showThumbnail={showThumbnail}
+            showThumbnail={post.frontmatter.showThumbnail}
           />
         )}
         <MarkdownContent