feat: Style refine. Add progress indicator and BackToTop button. (#57)

This PR refines accessibility, styling, and functionality across several
components, implementing Tailwind CSS, adding a Back to Top button, and
optimizing layout responsiveness. It also includes social media
enhancements in the footer, an animated progress indicator, and improved
dark mode support.

### Key Changes

1. **Accessibility Enhancements** (`Header.tsx`, `SearchInput.tsx`):
- Fixed `aria-hidden` for mobile menu to ensure screen reader
compatibility.
- Added `aria-label` to search-related select components to improve
accessibility.

2. **Styling Refactor and Optimization** (`Footer.tsx`, `Header.tsx`,
`PostListLayout.tsx`):
   - Close mobile menu bar when clicked outside. #38
- Moved CSS from standalone files to styled-components and Tailwind
classes for improved maintainability.
   - Added overlay effect when mobile menu is open.
   - Improved dark mode styles and consistency for `PostListLayout`.
- Removed unused CSS files: `footer.css`, `header.css`, and
`postListLayout.css`.

4. **Footer Social Media Expansion** (`Footer.tsx`, `config.yml`):
- Added a broader selection of social media options, improving icon
alignment and accessibility.
   - Moved CSS styles into Tailwind classes.

5. **UI Enhancements**:
- **Progress Indicator** (`Header.tsx`): Added a scroll progress
indicator at the top, providing users with a quick visual of their
position on the page.
   - **Back to Top Button** (`BackToTop.tsx`): #16
     - Displays when users scroll down and fades in/out smoothly.
- Includes bounce animation when users reach the bottom of the page.
- Button uses Tailwind for styling and hover scaling for improved
interactivity.

6. **Post List Layout Improvements** (`PostListLayout.tsx`):
- Combined and optimized styles into Tailwind classes, reducing CSS
dependency.
- Added “Read More” button for each post, with smooth scaling on hover.
- Addressed responsive display issues, ensuring consistent layout on
various screen sizes.

7. **Minor Fixes**:
   - Update `README` to show the newest file structure.
   - Fix `pr-size` wrokflow.

### Summary

These changes enhance user experience by improving accessibility,
responsiveness, and visual clarity across the application, while
streamlining and unifying styling practices.

.github/workflows/label-pr-size.yml

@@ -13,21 +13,26 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - name: 🛎️ Checkout repository
+        uses: actions/checkout@v4
+
       - name: Determine PR size and add label
         id: size-label
-        uses: 'pascalgn/[email protected].4'
+        uses: pascalgn/[email protected].5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          IGNORED: |
+            pnpm-lock.yaml
+            package-lock.json
+            .yarn/*
+            yarn.lock
+            .pnp.*
+            dist/**
+            build/**
+            .cache/**
+
         with:
-          sizes: >
-            {
-              "0": XS,
-              "20": S,
-              "50": M,
-              "200": L,
-              "800": XL,
-              "2000": XXL,
-            }
+          sizes: '{"0": "XS", "20": "S", "50": "M", "200": "L", "800": "XL", "2000": "XXL"}'
 
       - name: Set label colors
         uses: actions/github-script@v7
@@ -43,7 +48,7 @@ jobs:
               XXL: 'e99695', // Light coral
             };
 
-            const sizeLabel = core.getInput('size-label-output') || '${{ steps.size-label.outputs.sizeLabel }}';
+            const sizeLabel = ${{ steps.size-label.outputs.sizeLabel }};
             const color = labelsToColor[sizeLabel];
 
             if (sizeLabel) {
@@ -66,7 +71,7 @@ jobs:
             }
 
       - name: Comment on large PRs
-        if: ${{ contains(steps.size-label.outputs.sizeLabel, 'XL') || contains(steps.size-label.outputs.sizeLabel, 'XXL') }}
+        if: ${{ contains(steps.size-label.outputs.sizeLabel, 'XL') }}
         uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -19,16 +19,15 @@
 .
 ├── config.yml                # 全局配置文件（站点信息、作者信息等）
 ├── posts                     # Markdown 格式的文章目录
-├── public                    # 静态资源目录（favicon, robots.txt, 等）
+├── public                    # 静态资源目录（favicon，图片 等）
 ├── src                       # 项目源代码
 │   ├── app                     # Next.js 应用目录（按页面组织）
 │   ├── components              # 复用组件目录
 │   │   ├── common              # 通用组件
 │   │   └── posts               # 文章页面组件
 │   ├── services                # 服务目录，包含数据获取和解析逻辑
 │   │   ├── config              # 配置加载
-│   │   ├── content             # 内容处理和文章获取
-│   │   ├── parsing             # 内容解析和标签处理
+│   │   ├── content             # 内容处理和 Markdown 解析
 │   │   └── utils               # 实用工具
 │   ├── styles                  # 全局和组件样式
 │   └── types.d.ts              # 全局类型定义

config.yml

@@ -10,13 +10,13 @@ author:
   link: 'https://www.zla.app' # 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. (Do not include a ending slash)
+# Your public root url, used for SEO and meta tags.
+# !Do not include a ending slash
 siteUrl: 'https://suzu.zla.app'
 
 # Path to your avatar image. Can be a relative path from /public or a full URL (e.g., https://).
 avatar: '/images/avatar.jpg'
-# Used as the background image for your blog,
-# and also as the default thumbnail for posts without thumbnails.
+# Used as the default thumbnail for posts without thumbnails.
 background: '/images/background.jpg'
 # Slogan displayed on your homepage, under your avatar.
 slogan: "As long as the code or the developer is able to run, it's all good."
@@ -28,19 +28,21 @@ slogan: "As long as the code or the developer is able to run, it's all good."
 #######################
 # SOCIAL MEDIA SETTINGS
 #######################
-# Add your social media links here.
+# Add your social media usernames.
 # Leave the field empty if you do not want to display a specific platform.
+# The order of the social media icons is determined by the order below.
 socialMedia:
-  github: 'https://www.github.com/ZL-Asica' # Your GitHub profile URL.
-  linkedin: 'https://www.linkedin.com/in/elara-liu' # Your LinkedIn profile URL.
-  x: '' # Twitter profile URL.
-  instagram: 'https://www.instagram.com/zl_asica' # Instagram profile URL.
-  youtube: 'https://www.youtube.com/@ZL-Asica' # YouTube channel URL.
-  telegram: 'https://t.me/ZL_Asica' # Telegram profile or channel URL.
-  bilibili: 'https://space.bilibili.com/29018759' # Bilibili profile URL.
-  zhihu: 'https://www.zhihu.com/people/zl-asica' # Zhihu profile URL.
-  email: '[email protected]' # Your email address (do NOT include the mailto: prefix).
-  rss: '' # RSS feed URL (can be relative url).
+  github_username: ZL-Asica # Your GitHub username. https://github.com/username
+  linkedin_username: elara-liu # Your LinkedIn username. https://www.linkedin.com/in/username
+  instagram_id: zl_asica # Your Instagram username.
+  orcid_id: 0009-0008-7221-2324 # Your ORCID iD.
+  telegram_username: zl_asica # Your Telegram username. https://t.me/username
+  x_username: # Your X (Twitter) username.
+  youtube_id: ZL-Asica # Your YouTube channel ID. https://www.youtube.com/@username
+  zhihu_username: zl_asica # Your Zhihu username. https://www.zhihu.com/people/username
+  bilibili_id: 29018759 # Your Bilibili ID. https://space.bilibili.com/username
+  email: [email protected] # Your email address.
+  rss: # Your RSS feed URL.
 
 #######################
 # PAGES (ABOUT, FRIENDS) SETTINGS

src/app/globals.css

@@ -21,8 +21,8 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: var(--font-roboto), var(--font-noto-sans-sc), 'PingFang SC',
-    'Microsoft YaHei', Arial, Helvetica, sans-serif;
+  font-family: var(--font-noto-sans-sc), 'PingFang SC', 'Microsoft YaHei', Arial,
+    Helvetica, sans-serif;
 }
 
 /* Utility classes for text balancing */
@@ -34,10 +34,11 @@ body {
 
 form,
 input,
-select {
-  font-family: inherit;
-  color: inherit;
-  background: inherit;
+select,
+header,
+nav {
+  color: var(--foreground);
+  background: var(--background);
 }
 
 /****************************************************

src/app/layout.tsx

@@ -9,6 +9,8 @@ import { getConfig } from '@/services/config';
 import ThemeProvider from '@/components/common/ThemeProvider';
 import Header from '@/components/common/Header';
 import Footer from '@/components/common/Footer';
+import BackToTop from '@/components/common/BackToTop';
+
 import './globals.css';
 
 const config: Config = getConfig();
@@ -54,6 +56,7 @@ function RootLayout({
         <ThemeProvider />
         <Header siteTitle={config.title} />
         <main>{children}</main>
+        <BackToTop />
         <Footer />
       </body>
     </html>

src/components/common/BackToTop.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { FaArrowUp } from 'react-icons/fa';
+
+function BackToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Handle visibility
+      if (window.scrollY > 100) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+
+      // Handle bottom
+      if (
+        window.innerHeight + window.scrollY >=
+        document.documentElement.scrollHeight
+      ) {
+        setIsAtBottom(true);
+        // Add 3 seconds delay to remove the animation
+        console.log('At bottom');
+        setTimeout(() => setIsAtBottom(false), 3000);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      } fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-sakuraPink text-white shadow-lg transition-all duration-200 hover:scale-125 ${
+        isAtBottom ? 'animate-bounce' : ''
+      } `}
+      aria-label='Back to Top'
+      hidden={!isVisible}
+      disabled={!isVisible}
+      aria-hidden={!isVisible}
+      style={{ transition: 'opacity 0.3s, transform 0.3s ease-in-out' }}
+    >
+      <FaArrowUp size={20} />
+    </button>
+  );
+}
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
+export default BackToTop;