feat: add anime tracking page (#134)

This PR introduces the **Anime List** feature #133 , integrating AniList API to fetch and display my personal anime tracking data under `/about/anime`. It also includes a new API endpoint (`GET /api/anime`) to handle data retrieval. The header menu now highlights the current page dynamically, improving navigation clarity. Additionally, I refactored the scroll progress bar into its own component (`ScrollPositionBar.tsx`) for better maintainability. Fixed an issue where the scroll bar was hidden behind headers. The overall UI/UX could use some refinement, especially for submenu interactions and hover effects on different devices. Also, styling details need to be revisited to better align with the rest of the site.

Author: ZL-Asica

README.md

@@ -27,6 +27,7 @@
   - **Link Preloading**: Improves navigation speed and user experience.
 - **SEO Optimized**: Automatically generates sitemap.xml, robots.txt, manifest.json, Open Graph, Twitter Cards, and more.
 - **Multi-Language Support**: Built-in support for English, Chinese, Japanese, etc., automatically configured via `config.yml`.
+- **Anime List Feature**: Fetching and displaying anime information from AniList API.
 - **Adaptive Light/Dark Themes**: Provides a seamless dark mode experience based on system preferences.
 - **RSS Feed**: Automatically generated RSS feed for your blog.
 - **Accessibility (A11Y) Enhanced**:

README_JA.md

@@ -27,6 +27,7 @@
   - **リンク事前読み込み**: スムーズなナビゲーションを実現。
 - **SEO 最適化**: sitemap.xml、robots.txt、manifest.json、Open Graph、Twitter Cards などを自動生成。
 - **多言語サポート**: 英語、中国語、日本語などに対応。`config.yml` の設定に基づいて自動切替。
+- **アニメリスト機能**: AniList API からアニメ情報を取得・表示。
 - **ライト/ダークテーマ対応**: システム設定に基づき、自動的にダークモードを適用。
 - **RSS フィード**: ブログ用の RSS フィードを自動生成。
 - **アクセシビリティ（A11Y）対応**:

README_ZH.md

@@ -27,6 +27,7 @@
   - **链接预加载**：提升用户体验。
 - **SEO 优化**：自动生成 sitemap.xml、robots.txt、manifest.json、Open Graph、Twitter Card 等。
 - **多语言支持**：内置中文、英文、日语等，根据 `config.yml` 中的语言配置自动切换。
+- **动漫列表功能**：从 AniList API 获取并展示动漫信息。
 - **自适应亮暗色主题**：支持深色模式，用户体验更优。
 - **RSS 订阅**：自动生成博客 RSS 订阅。
 - **无障碍（A11Y）优化**：提供语义化的 HTML 和符合 ARIA 标准的组件。

config.yml

@@ -46,6 +46,13 @@ travellings: false
 # If you want to have a start year of your blog, set the year here.
 startYear: 2017 # Leave empty if you do not want to display a start year.
 
+# ######################
+# PAGES SETTINGS
+# ######################
+# Add your AniList username if you want to display your AniList profile.
+# Leave the field empty if you do not want to display your AniList profile.
+anilist_username: zlasica # Your AniList username. https://anilist.co/user/username
+
 # ######################
 # SOCIAL MEDIA SETTINGS
 # ######################

package.json

@@ -45,7 +45,8 @@
     "remark-math": "^6.0.0",
     "slugify": "^1.6.6",
     "twikoo": "^1.6.41",
-    "yaml": "^2.7.0"
+    "yaml": "^2.7.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.3.0",

pnpm-lock.yaml

@@ -0,0 +1,41 @@
+const AnimeListSkeleton = () => {
+  return (
+    <div className="container mx-auto animate-fadeInDown p-6 pb-2 mt-5">
+      {/* Header */}
+      <div className="h-10 w-48 bg-gray-700 rounded-md animate-pulse mb-2"></div>
+      <div className="h-6 w-72 bg-gray-700 rounded-md animate-pulse mb-4"></div>
+
+      {/* Sections */}
+      {['Watching', 'Completed', 'Paused', 'Dropped', 'Planning'].map(section => (
+        <div key={section} className="mt-10">
+          {/* Section Title */}
+          <div className="h-8 w-64 bg-gray-700 rounded-md animate-pulse mb-4"></div>
+
+          {/* Anime Grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-6 mt-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="relative bg-gray-800 rounded-lg overflow-hidden shadow-md animate-pulse">
+                {/* Cover Image Placeholder */}
+                <div className="w-full aspect-[9/16] bg-gray-700"></div>
+
+                {/* Title & Progress Placeholder */}
+                <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/90 to-transparent p-2">
+                  <div className="h-6 w-32 bg-gray-700 rounded-md animate-pulse mb-1"></div>
+                  <div className="h-4 w-20 bg-gray-700 rounded-md animate-pulse"></div>
+                </div>
+
+                {/* Rating Placeholder */}
+                <div className="absolute bottom-2 right-2 flex items-center bg-black/60 px-2 py-1 rounded-lg">
+                  <div className="h-4 w-4 bg-gray-700 rounded-full animate-pulse"></div>
+                  <div className="h-4 w-8 bg-gray-700 rounded-md animate-pulse ml-1"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AnimeListSkeleton

src/app/about/anime/loading.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from 'next'
+import process from 'node:process'
+import AnimeList from '@/components/anime/AnimeList'
+import { AnimeResponseSchema } from '@/schemas/anime'
+
+import { getConfig } from '@/services/config'
+import Head from 'next/head'
+import { notFound } from 'next/navigation'
+
+export async function generateMetadata(): Promise<Metadata> {
+  const config = getConfig()
+  const animeTranslation = config.translation.anime
+
+  return {
+    title: `${animeTranslation.title} - ${config.title}`,
+    description: `${config.title}${animeTranslation.description} - ${config.description}`,
+    alternates: { canonical: `${config.siteUrl}/about/anime` },
+    openGraph: {
+      siteName: config.title,
+      title: `${animeTranslation.title} - ${config.title}`,
+      description: `${config.title}${animeTranslation.description} - ${config.description}`,
+      url: '/about/anime',
+      images: config.avatar,
+      type: 'website',
+      locale: config.lang,
+    },
+    twitter: {
+      card: 'summary',
+      title: `${animeTranslation.title} - ${config.title}`,
+      description: `${config.title}${animeTranslation.description} - ${config.description}`,
+      images: config.avatar,
+    },
+  }
+}
+
+export default async function AnimePage() {
+  const config = getConfig()
+  const anilist_username = config.anilist_username
+
+  if (anilist_username === undefined || anilist_username === null) {
+    return notFound()
+  }
+
+  const API_BASE_URL = process.env.NODE_ENV === 'production'
+    ? config.siteUrl
+    : 'http://localhost:3000'
+
+  const response = await fetch(`${API_BASE_URL}/api/anime?userName=${anilist_username}`, {
+    cache: 'force-cache',
+    next: { tags: ['anime'], revalidate: 120 }, // Cache for 2 minutes
+  })
+
+  if (!response.ok) {
+    console.error(`Failed to fetch anime data: ${response.statusText}`)
+    return notFound()
+  }
+
+  const data = await response.json() as unknown
+
+  const parsedAnimeData = AnimeResponseSchema.safeParse(data)
+
+  if (parsedAnimeData.success === false) {
+    console.error(`Zod validation failed: ${JSON.stringify(parsedAnimeData.error.format())}`)
+    return notFound()
+  }
+
+  const animeData = parsedAnimeData.data
+
+  const animeTranslation = config.translation.anime
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    'name': config.author.name,
+    'description': `${config.title}${animeTranslation.description} - ${config.description}`,
+    'url': `${config.siteUrl}/about/anime`,
+    'image': config.avatar,
+    'sameAs': config.author.link,
+  }
+
+  return (
+    <>
+      <Head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </Head>
+      <AnimeList
+        animeData={animeData}
+        userName={anilist_username}
+        author={config.author.name}
+        lang={config.lang}
+        translation={config.translation}
+      />
+    </>
+  )
+}

src/app/about/anime/page.tsx

@@ -0,0 +1,66 @@
+import { AnimeRequestSchema, AnimeResponseSchema } from '@/schemas/anime'
+import { NextResponse } from 'next/server'
+import { z } from 'zod'
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const userName = searchParams.get('userName')
+
+    const parsedParams = AnimeRequestSchema.parse({ userName })
+
+    const query = `
+      query ($userName: String) {
+        MediaListCollection(userName: $userName, type: ANIME) {
+          lists {
+            name
+            entries {
+              media {
+                id
+                title {
+                  romaji
+                  english
+                  native
+                }
+                coverImage {
+                  extraLarge
+                  large
+                  medium
+                }
+                status
+                episodes
+                format
+                averageScore
+              }
+              score
+              progress
+              status
+              notes
+            }
+          }
+        }
+      }
+    `
+
+    const response = await fetch('https://graphql.anilist.co', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify({ query, variables: { userName: parsedParams.userName } }),
+    })
+
+    const data = await response.json() as unknown
+
+    const parsedResponse = AnimeResponseSchema.parse(data)
+
+    return NextResponse.json(parsedResponse)
+  }
+  catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: error.errors }, { status: 400 })
+    }
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+  }
+}

src/app/api/anime/route.ts

@@ -90,6 +90,7 @@
     --foreground: #171717;
     --skyblue: #5bcefa;
     --sakuraPink: #f6a8b8;
+    --sakuraPinkDark: #d9778b;
     --lightGray: #f9fafb;
     --gray: #1f2937;
   }
@@ -99,6 +100,7 @@
     --foreground: #d4d4d4;
     --skyblue: #4aa7e0;
     --sakuraPink: #d890a2;
+    --sakuraPinkDark: #d9778b;
     --lightGray: #1f2937;
     --gray: #d1d5db;
   }