feat(search): use useRouter from Next.js instead of history API (#157)

Author: ZL-Asica

.github/workflows/auto-release.yml

@@ -4,11 +4,11 @@ on:
   workflow_dispatch:
     inputs:
       tag:
-        description: "Tag name for release (leave empty to use latest pushed tag)"
+        description: Tag name for release (leave empty to use latest pushed tag)
         required: false
   push:
     tags:
-      - "v*.*.*" # Match only version-like tags (e.g., v1.0.0, v2.1.3)
+      - 'v*.*.*' # Match only version-like tags (e.g., v1.0.0, v2.1.3)
 
 permissions:
   contents: write # Required for GitHub release creation
@@ -67,11 +67,8 @@ jobs:
             📢 **SuzuBlog new version released!** 🚀
             新版本发布！请查看自动生成的 Release Notes 🔽
 
-            ## What's Changed
-            - Automatically generated Release Notes based on changes in this release.
-
             ## Full Changelog
-            [View Full Changelog](https://github.com/ZL-Asica/SuzuBlog/compare/${{ env.LAST_TAG }}...${{ env.TAG_NAME }})
+            [View Full Changelog](https://github.com/ZL-Asica/SuzuBlog/blob/main/CHANGELOG.md)
 
             ## Contributors
             🏆 Thank you to everyone who contributed to this release!

CHANGELOG.md

@@ -1,5 +1,30 @@
 # SuzuBlog Changelog
 
+## 1.7.1 (2025-04-12)
+
+### Patch Changes
+
+- Switch to useRouter for pagination and search
+
+  - feat(search): use useRouter from Next.js instead of history API
+
+    - Introduce `useUpdateURL` hook to manage URL updates.
+    - Replace `history.` with `useRouter` for better integration with Next.js.
+    - With `useRouter`, fix the scroll behavior when current page changes.
+    - Add sanitize query logic to prevent XSS attacks (before only from URL, now also from input).
+    - Extract `SearchInput` component from `PostPageClient` to `src/app/posts/page.tsx` for better organization and performance (categories and tags array also generated without re-rendering).
+
+  - chore: some updates on minor details
+
+    - Finally remove `tailwind.config.ts` from README (since from v4.0.0 it has been removed)
+    - Update manifest theme color.
+    - Fix thumbnail showing when parameter `showThumbnail` is set to `false`.
+    - Replace some a tags with NextLink.
+
+  - style(search): extract select in search out
+    - Color adjusted a little bit. Now the color is different in light and dark mode.
+    - Added a new component Select to be used in the search input.
+
 ## 1.7.0 (2025-04-11)
 
 ### Minor Changes

README.md

@@ -41,19 +41,22 @@ For setup, configuration, Markdown syntax, and deployment guides, follow the doc
 │   ├── components            # Reusable components
 │   ├── services              # Logic for content parsing, configuration, etc.
 │   └── types.d.ts            # Global type definitions
-├── tailwind.config.ts        # Tailwind CSS configuration
 ├── package.json              # Project dependencies and scripts
 └── pnpm-lock.yaml            # pnpm dependency lock file
 ```
 
 ## ❤️ About Suzu
 
-After years of frustration with the maintenance, security risks, and performance issues of other frameworks, I decided to create Suzu Blog using **Next.js**. It is simple, efficient, and highly customizable, designed for anyone looking to build a modern blog quickly.
+After years of frustration with the maintenance, security risks, and performance issues of other frameworks, I decided to create Suzu Blog using **Next.js**. It is simple, efficient, and highly customizable, designed for anyone looking to build a modern blog quickly. If you enjoy using it, please consider giving it a star! ⭐ I hope you find it as enjoyable as I do!
 
 ## 🔗 Community Support
 
 **Contribute**: Contributions are welcome! Please refer to the [Contribution Guide](./CONTRIBUTING.md).
 
+## 📜 License
+
+This project is licensed under the [AGPL-3.0 License][license-link]. See the [LICENSE](./LICENSE) file for details.
+
 <!-- Badges / Links -->
 
 [eslint-badge]: https://img.shields.io/badge/eslint-4B32C3?logo=eslint&logoColor=white

README_JA.md

@@ -41,19 +41,22 @@ Suzu Blog のセットアップ、設定、Markdown の書き方、デプロイ
 │   ├── components            # 再利用可能なコンポーネント
 │   ├── services              # コンテンツ解析、設定処理などのロジック
 │   └── types.d.ts            # グローバル型定義
-├── tailwind.config.ts        # Tailwind CSS 設定
 ├── package.json              # プロジェクト依存関係とスクリプト
 └── pnpm-lock.yaml            # pnpm 依存関係ロックファイル
 ```
 
 ## ❤️ Suzu について
 
-長年にわたり、さまざまなブログフレームワークを試してきましたが、**保守の手間・セキュリティリスク・パフォーマンス問題** に悩まされてきました。そこで、私は **Next.js** を用いて **シンプル・高効率・カスタマイズ性抜群** の Suzu Blog を開発しました。モダンなブログを素早く構築したいすべての人のためのテンプレートです。
+長年にわたり、さまざまなブログフレームワークを試してきましたが、**保守の手間・セキュリティリスク・パフォーマンス問題** に悩まされてきました。そこで、私は **Next.js** を用いて **シンプル・高効率・カスタマイズ性抜群** の Suzu Blog を開発しました。モダンなブログを素早く構築したいすべての人のためのテンプレートです。もしこのプロジェクトが気に入ったら、ぜひ ⭐ を付けてください！私と同じように楽しんでいただければ幸いです！
 
 ## 🔗 コミュニティサポート
 
 **貢献**: 貢献を歓迎します！詳しくは [Contribution Guide](./CONTRIBUTING.md) を参照してください。
 
+## 📜 ライセンス
+
+本プロジェクトは [AGPL-3.0 ライセンス][license-link] の下でライセンスされています。詳細については [LICENSE](./LICENSE) ファイルをご覧ください。
+
 <!-- Badges / Links -->
 
 [eslint-badge]: https://img.shields.io/badge/eslint-4B32C3?logo=eslint&logoColor=white

README_ZH.md

@@ -41,19 +41,22 @@ Suzu Blog 的安装、配置、Markdown 语法、部署等详细教程，请参
 │   ├── components            # 复用组件
 │   ├── services              # 服务逻辑（内容解析、配置加载等）
 │   └── types.d.ts            # 全局类型定义
-├── tailwind.config.ts        # Tailwind CSS 配置
 ├── package.json              # 项目依赖与脚本
 └── pnpm-lock.yaml            # pnpm 依赖锁定
 ```
 
 ## ❤️ 关于 Suzu
 
-在多年使用各种博客框架的过程中，我深受 **维护成本高、安全隐患多、性能不稳定** 等问题的困扰。最终，我决定基于 **Next.js** 打造 Suzu Blog —— 一个 **简洁、高效、可高度自定义** 的博客模板，帮助任何人快速搭建现代化博客。
+在多年使用各种博客框架的过程中，我深受 **维护成本高、安全隐患多、性能不稳定** 等问题的困扰。最终，我决定基于 **Next.js** 打造 Suzu Blog —— 一个 **简洁、高效、可高度自定义** 的博客模板，帮助任何人快速搭建现代化博客。如果你喜欢这个项目，请考虑给它一个 ⭐！我希望你能和我一样享受使用它的乐趣！
 
 ## 🔗 社区支持
 
 **贡献**：欢迎提出问题或贡献代码！请访问 [贡献指南](https://github.com/ZL-Asica/SuzuBlog/blob/main/CONTRIBUTING.md)。
 
+## 📜 许可证
+
+本项目遵循 [AGPL-3.0 许可证][license-link]。有关详细信息，请参阅 [LICENSE](./LICENSE) 文件。
+
 <!-- Badges / Links -->
 
 [eslint-badge]: https://img.shields.io/badge/eslint-4B32C3?logo=eslint&logoColor=white

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suzu-blog",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "private": true,
   "packageManager": "[email protected]",
   "author": {

src/app/[slug]/page.tsx

@@ -51,15 +51,15 @@ export async function generateMetadata({ params }: Properties): Promise<Metadata
       modifiedTime: postData?.frontmatter.date,
       title: postData?.frontmatter.title ?? config.title ?? 'Default Title',
       description: postData?.postAbstract ?? config.description ?? 'Default description',
-      images: postData?.frontmatter.thumbnail,
+      images: postData?.frontmatter.showThumbnail !== false ? postData?.frontmatter.thumbnail : undefined,
       url: `/${slug}`,
       locale: config.lang,
     },
     twitter: {
       card: 'summary',
       title: postData?.frontmatter.title ?? config.title ?? 'Default Title',
       description: postData?.postAbstract ?? config.description ?? 'Default description',
-      images: postData?.frontmatter.thumbnail,
+      images: postData?.frontmatter.showThumbnail !== false ? postData?.frontmatter.thumbnail : undefined,
     },
   }
 }
@@ -95,7 +95,7 @@ export default async function PostPage(props: { params: Promise<{ slug: string }
       '@type': 'WebPage',
       '@id': `${config.siteUrl}/${post.slug}`,
     },
-    'image': post?.frontmatter.thumbnail,
+    'image': post?.frontmatter.showThumbnail !== false ? post?.frontmatter.thumbnail : undefined,
     'publisher': {
       '@type': 'Organization',
       'name': config.title,

src/app/layout.tsx

@@ -1,13 +1,8 @@
 import type { Metadata } from 'next'
-import BackToTop from '@/components/common/BackToTop'
-import Footer from '@/components/common/Footer'
-import Header from '@/components/common/Header'
-import ScrollPositionBar from '@/components/common/ScrollPositionBar'
+import { BackToTop, Footer, Header, ScrollPositionBar } from '@/components/common'
 import { getConfig } from '@/services/config'
 import { Analytics } from '@vercel/analytics/react'
-
 import { SpeedInsights } from '@vercel/speed-insights/next'
-
 import { Inter, JetBrains_Mono, Noto_Sans_SC } from 'next/font/google'
 import Script from 'next/script'
 

src/app/manifest.ts

@@ -12,7 +12,7 @@ function manifest(): MetadataRoute.Manifest {
     start_url: '/',
     display: 'standalone',
     background_color: '#ffffff',
-    theme_color: '#f6a8b8',
+    theme_color: '#ff9fb2',
     lang: config.lang,
     orientation: 'any',
     icons: [

src/app/posts/page.tsx

@@ -1,9 +1,8 @@
 import type { Metadata } from 'next'
 import PostsPageClient from '@/components/posts/PostPageClient'
-
+import SearchInput from '@/components/posts/SearchInput'
 import { getConfig } from '@/services/config'
 import { getAllPosts } from '@/services/content'
-
 import Head from 'next/head'
 
 export function generateMetadata(): Metadata {
@@ -49,6 +48,9 @@ export default async function PostsPage() {
     },
   }
 
+  const categories = Array.from(new Set(posts.flatMap(post => post.frontmatter.categories || [])))
+  const tags = Array.from(new Set(posts.flatMap(post => post.frontmatter.tags || [])))
+
   return (
     <>
       <Head>
@@ -57,11 +59,15 @@ export default async function PostsPage() {
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
       </Head>
-      <PostsPageClient
-        posts={posts}
-        translation={translation}
-        postsPerPage={Math.min(15, config.postsPerPage ?? 5)}
-      />
+      <div className="container mt-5 mx-auto flex flex-col items-center p-4">
+        <SearchInput categories={categories} tags={tags} translation={translation} />
+
+        <PostsPageClient
+          posts={posts}
+          translation={translation}
+          postsPerPage={Math.min(15, config.postsPerPage ?? 5)}
+        />
+      </div>
     </>
   )
 }

src/components/article/CategoriesTagsList.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Folder, Tags } from 'lucide-react'
+import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 
 interface CategoriesTagsListProps {
@@ -50,15 +51,15 @@ const CategoriesTagsList = ({ type, translation, items = defaultItems }: Categor
       <span>
         {links.map(({ item, href }, index) => (
           <span key={item}>
-            <a
+            <Link
               href={href}
               target="_self"
               title={`${translation.navigate} ${typeTranslation} ${item}`}
               aria-label={`${translation.navigate} ${typeTranslation} ${item}`}
               className="text-hover-primary transition-all-300 font-medium hover:underline hover:decoration-dotted hover:underline-offset-4"
             >
               {item}
-            </a>
+            </Link>
             {/* Add comma, except for the last item */}
             {index < items.length - 1 && ', '}
           </span>

src/components/common/Footer.tsx

@@ -44,7 +44,7 @@ const Footer = ({ config }: FooterProps) => {
           by
           {' '}
           <Link
-            href="https://www.zla.pub"
+            href="https://zla.pub"
             target="_blank"
             aria-label="ZL Asica's blog (new tab)"
             rel="noopener noreferrer"

src/components/posts/PostList.tsx

@@ -55,27 +55,27 @@ const PostList = ({ posts, translation }: PostListProps) => {
                   <span className="text-sm font-medium">{post.frontmatter.date.split(' ')[0]}</span>
                 </div>
                 {/* Title in Frontmatter */}
-                <a
+                <Link
                   href={postLink}
                   target="_self"
                   aria-label={`${translation.post.readMore} ${postTitle}`}
                   className="text-hover-primary transition-colors-500"
                 >
                   <h2 className="mb-2 text-2xl font-bold">{postTitle}</h2>
-                </a>
+                </Link>
                 {/* Abstract */}
                 <p className="line-clamp-5 text-sm">{post.postAbstract}</p>
               </div>
 
               <div className="text-gray-450 mt-3 flex items-center justify-between text-sm">
-                <a
+                <Link
                   href={postLink}
                   target="_self"
                   aria-label={`${postTitle}`}
                   className="self-start text-hover-primary transition-all-500 hover:scale-110"
                 >
                   <Ellipsis size={32} strokeWidth={3} className="cursor-pointer" />
-                </a>
+                </Link>
 
                 {/* Category */}
                 <CategoriesTagsList

src/components/posts/PostPageClient.tsx

@@ -1,15 +1,11 @@
 'use client'
 
-import { useSearchedPosts } from '@/hooks'
-import { updateURL } from '@/services/utils'
-
+import { useSearchedPosts, useUpdateURL } from '@/hooks'
 import { backToTop } from '@zl-asica/react'
 import { useSearchParams } from 'next/navigation'
 import { useMemo } from 'react'
-
 import Pagination from './Pagination'
 import PostListLayout from './PostList'
-import SearchInput from './SearchInput'
 
 interface PostPageClientProps {
   posts: PostListData[]
@@ -22,50 +18,28 @@ const PostPageClient = ({
   translation,
   postsPerPage,
 }: PostPageClientProps) => {
-  const searchParameters = useSearchParams()
-  const queryParameters = searchParameters.get('query') ?? ''
-  const categoryParameter = searchParameters.get('category') ?? ''
-  const tagParameter = searchParameters.get('tag') ?? ''
+  const updateURL = useUpdateURL()
+  const searchParams = useSearchParams()
 
-  const searchQueries = {
-    query: queryParameters,
-    category: categoryParameter,
-    tag: tagParameter,
-  }
-  const filteredPosts = useSearchedPosts(posts, searchQueries)
+  const filteredPosts = useSearchedPosts(posts, searchParams)
 
   const currentPage = useMemo(() => {
-    const page = Number(searchParameters.get('page') ?? '1')
+    const page = Number(searchParams.get('page') ?? '1')
     return Number.isNaN(page) || page < 1 ? 1 : page
-  }, [searchParameters])
+  }, [searchParams])
 
-  const handlePageChange = (page: number) => {
+  const handleCurrentPageChange = (page: number) => {
     backToTop(10)()
-    updateURL({ page }, { replace: false })
+    updateURL({ page })
   }
 
-  const categories = useMemo(() => [
-    ...new Set(posts.flatMap(post => post.frontmatter.categories || [])),
-  ], [posts])
-  const tags = useMemo(() => [
-    ...new Set(posts.flatMap(post => post.frontmatter.tags || [])),
-  ], [posts])
-
   const currentPosts = filteredPosts.slice(
     (currentPage - 1) * postsPerPage,
     currentPage * postsPerPage,
   )
 
   return (
-    <div className="container mt-5 mx-auto flex flex-col items-center p-4">
-      {/* Centered Search Input */}
-      <SearchInput
-        categories={categories}
-        tags={tags}
-        translation={translation}
-        searchQueries={searchQueries}
-      />
-
+    <>
       {/* Post List */}
       {filteredPosts.length === 0 && (
         <h2 className="my-4 text-3xl font-bold">
@@ -80,9 +54,9 @@ const PostPageClient = ({
         postsPerPage={postsPerPage}
         totalPosts={filteredPosts.length}
         currentPage={currentPage}
-        setCurrentPage={handlePageChange}
+        setCurrentPage={handleCurrentPageChange}
       />
-    </div>
+    </>
   )
 }