Merge pull request #130 from JohnsonMao/develop

Develop

.eslintrc

@@ -15,5 +15,5 @@
     "prettier"
   ],
   "plugins": ["tailwindcss"],
-  "ignorePatterns": ["jest.config.js"]
+  "ignorePatterns": ["**.config.js"]
 }

.github/workflows/ci.yaml

@@ -0,0 +1,74 @@
+name: CI Workflow
+
+concurrency: 
+  group: ${{ github.workflow }}-${{ github.head_ref }}
+  cancel-in-progress: true
+
+on:
+  pull_request:
+    branches-ignore:
+      - 'main'
+    paths:
+      - 'src/**'
+  workflow_dispatch:
+
+jobs:
+  init:
+    name: Initial common steps
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎️ Checkout
+        uses: actions/checkout@v3
+
+      - name: ⚙️ Setup PNPM
+        uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 8
+
+      - name: 📝 Cache dependencies
+        id: cache-deps
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: deps-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: 🔧 Install dependencies
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+  test:
+    name: Test Coverage
+    runs-on: ubuntu-latest
+    environment: Test
+    timeout-minutes: 10
+    needs: init
+
+    steps:
+      - name: 🛎️ Checkout
+        uses: actions/checkout@v3
+
+      - name: ⚙️ Setup PNPM
+        uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 8
+
+      - name: 📝 Cache dependencies
+        id: cache-deps
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: deps-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: 🔧 Install dependencies
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: 🧪 Test Coverage
+        run: pnpm test:coverage
+
+      - name: 📈 Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true

.github/workflows/cleanup-cache-after-merge.yaml

@@ -0,0 +1,54 @@
+name: Cleanup Branch Resource
+
+permissions:
+  actions: write
+  contents: read
+
+on:
+  pull_request:
+    types:
+      - closed
+  workflow_dispatch:
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎️ Checkout
+        uses: actions/checkout@v3
+
+      - name: 🗑️ Cleanup cache
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          REPO=${{ github.repository }}
+          BRANCH=refs/pull/${{ github.event.pull_request.number }}/merge
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+          echo "Cache keys for PR: $cacheKeysForPR"
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+            echo "- ${cacheKey}"
+            gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ github.token }}
+
+      - name: ⚰️ Delete artifacts
+        run: |
+          PR_NUMBER=${{ github.event.pull_request.number }}
+          artifacts=$(gh api /repos/${{ github.repository }}/actions/artifacts --paginate)
+
+          for artifact in $(echo "$artifacts" | jq -r ".artifacts[] | select(.name | startswith(\"PR-$PR_NUMBER-\")) | .id"); do
+            echo "filtered artifact: $artifact"
+            gh api -X DELETE /repos/${{ github.repository }}/actions/artifacts/$artifact
+          done
+        env:
+          GH_TOKEN: ${{ github.token }}

README.md

@@ -6,6 +6,7 @@ Welcome to My Blog, a simple blog built with Next.js 13 and Markdown for content
 
 - Next.js 13
 - React 18
+- React Spring
 - TypeScript
 - Tailwind CSS
 - I18n
@@ -24,10 +25,10 @@ Welcome to My Blog, a simple blog built with Next.js 13 and Markdown for content
 ## Project Structure
 
 - `data/`: Contains data-related files.
+  - `i18n/`: Internationalization and localization files.
   - `posts/`: Markdown files for blog posts.
   - `giscus.ts`: Configuration for the Giscus comment system.
   - `metadata.ts`: Metadata and configuration for the blog.
-- `i18n/`: Internationalization and localization files.
 - `public/static/`: Public static images and other assets.
 - `src/`:  The main source code directory.
   - `app/`: Next.js pages and routing.
@@ -37,6 +38,7 @@ Welcome to My Blog, a simple blog built with Next.js 13 and Markdown for content
   - `plugins/`: Additional plugins or extensions.
   - `utils/`: Utility functions and helper modules.
   - `middleware.ts`: Next.js middleware.
+- `tests/`:  Test folder contains the application's test files.
 - `types/`:  TypeScript type definitions.
 
 <!-- ## License -->

data/i18n/index.ts

@@ -0,0 +1,14 @@
+export const defaultLocale = 'zh';
+export const locales = [defaultLocale, 'en'] as const;
+export type Locale = (typeof locales)[number];
+export type Dictionary = typeof import('./locales/zh.json');
+
+const dictionaries: Record<Locale, () => Promise<Dictionary>> = {
+  zh: () => import('./locales/zh.json'),
+  en: () => import('./locales/en.json'),
+};
+
+export const getDictionary = (locale: Locale) => dictionaries[locale]();
+
+export const isLocale = (language: string): language is Locale =>
+  locales.findIndex((locale) => locale === language) > -1;

data/i18n/locales/en.json

@@ -0,0 +1,22 @@
+{
+  "common": {
+    "home": "Home",
+    "posts": "Posts",
+    "about": "About",
+    "tags": "Tags",
+    "categories": "Categories",
+    "latestPosts": "Latest Posts",
+    "morePosts": "More Posts"
+  },
+  "homePage": {
+    "title": "Mao's Corner",
+    "description": "Welcome to Mao's Learning Corner, where I document my study notes. Looking forward to exploring the vast realms of knowledge together with you."
+  },
+  "postsPage": {
+    "title": "Mao's Corner",
+    "description": "Welcome to Mao's Learning Corner, where I document my study notes. Looking forward to exploring the vast realms of knowledge together with you."
+  },
+  "notFound": {
+    "message": "Sorry we couldn't find this page."
+  }
+}

data/i18n/locales/zh.json

@@ -0,0 +1,22 @@
+{
+  "common": {
+    "home": "首頁",
+    "posts": "文章",
+    "about": "關於",
+    "tags": "標籤",
+    "categories": "分類",
+    "latestPosts": "最新文章",
+    "morePosts": "更多文章"
+  },
+  "homePage": {
+    "title": "Mao's Corner",
+    "description": "歡迎來到阿毛的學習角落，這裡記錄著我的學習筆記，期待與你一同探索廣闊的知識領域。"
+  },
+  "postsPage": {
+    "title": "Mao's Corner",
+    "description": "歡迎來到阿毛的學習角落，這裡記錄著我的學習筆記，期待與你一同探索廣闊的知識領域。"
+  },
+  "notFound": {
+    "message": "抱歉！找不到此頁面。"
+  }
+}

data/metadata.ts

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import type { FeedOptions } from 'feed';
-import { Locale, defaultLocale, getDictionary, locales } from '~/i18n';
+import { Locale, defaultLocale, getDictionary, locales } from '~/data/i18n';
 
 export const avatarUrl = '/static/mao.jpg';
 export const name = 'Johnson Mao';
@@ -13,7 +13,7 @@ export async function createMetadata(
   locale: Locale = defaultLocale
 ): Promise<Metadata> {
   const {
-    metadata: { title, description },
+    homePage: { title, description },
   } = await getDictionary(locale);
 
   return {
@@ -50,7 +50,7 @@ export async function createMetadata(
 
 export async function createFeedOptions(locale: Locale): Promise<FeedOptions> {
   const {
-    metadata: { title, description },
+    homePage: { title, description },
   } = await getDictionary(locale);
 
   return {

data/posts/2021-07-28-hexschool-summer-camp-vue3-week1.md

@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第一周主要是介紹用最簡單方法帶初學者學習 Vue。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第一周主要是介紹用最簡單方法帶初學者學習 Vue。
 ---
 
 [![第一週作業展示，運用了 Vue 指令與 Ajax，點擊圖片可察看成果](https://i.imgur.com/E48VuxQ.jpg)](https://johnsonmao.github.io/summer-camp-vue3/week1/)

data/posts/2021-08-02-hexschool-summer-camp-vue3-week2.md

@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第二周介紹常用的語法學習 Vue。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第二周介紹常用的語法學習 Vue。
 ---
 
 [![第二週作業展示，運用了 Vue 進階指令與 localStrage，同時也自我挑戰運用了鍵盤監聽，只使用鍵盤就能操控計算機功能，點擊圖片可察看成果](https://i.imgur.com/Xd2g377.png)](https://johnsonmao.github.io/summer-camp-vue3/week2/)

data/posts/2021-08-09-hexschool-summer-camp-vue3-week3.md

@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第三周介紹如何使用語法進行資料的 CRUD 功能。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第三周介紹如何使用語法進行資料的 CRUD 功能。
 ---
 
 [![第三週作業展示，運用了 Vue computed 與完整的 CRUD 功能，點擊圖片可察看成果](https://i.imgur.com/s0FUJXG.png)](https://johnsonmao.github.io/summer-camp-vue3/week3/)

data/posts/2021-08-16-hexschool-summer-camp-vue3-week4.md

@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第四周介紹如何使用 Composition API 與 watch 功能，並了解 Vue 2 與 Vue 3 的差異。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第四周介紹如何使用 Composition API 與 watch 功能，並了解 Vue 2 與 Vue 3 的差異。
 ---
 
 #  Vue 3 Composition API    

data/posts/2021-09-06-mongodb.md

@@ -6,7 +6,7 @@ categories:
     - [程式語言, 資料庫, MongoDB]
 tags: 
     - MongoDB
-excerpt: 在製作自己的專案時，想讓專案更加完整，於是就開始想，既然前端畫面邏輯都自己開發了，現在網路上資源又那麼豐富，未來也有可能朝全端發展，何不自己架設後端 API，給自己串接，還能了解整個網頁的運作邏輯，於是開始自學了後端框架 Express 和資料庫 MongoDB，這裡將會記錄學習 MongoDB 的學習筆記。
+description: 在製作自己的專案時，想讓專案更加完整，於是就開始想，既然前端畫面邏輯都自己開發了，現在網路上資源又那麼豐富，未來也有可能朝全端發展，何不自己架設後端 API，給自己串接，還能了解整個網頁的運作邏輯，於是開始自學了後端框架 Express 和資料庫 MongoDB，這裡將會記錄學習 MongoDB 的學習筆記。
 ---
 
 ![資料庫概念圖](https://i.imgur.com/E7ajmZa.jpg)

data/posts/2021-09-10-IT-ironman-day1.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - VS Code
-excerpt: 大家好！我是毛毛，因為這波疫情影響下，讓我多了許多時間可以好好投資自己，想把自己目前所學的技能，轉化成能夠讓更多人更好吸收的知識，如果有發現內容有誤，也請您不吝指教，感謝。
+description: 大家好！我是毛毛，因為這波疫情影響下，讓我多了許多時間可以好好投資自己，想把自己目前所學的技能，轉化成能夠讓更多人更好吸收的知識，如果有發現內容有誤，也請您不吝指教，感謝。
 ---
 
 ![「工欲善其事，必先利其器！」—— 前言 與 介紹工具](https://i.imgur.com/YyhvZBl.png)

data/posts/2021-09-11-IT-ironman-day2.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！
+description: 上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！
 ---
 
 ![「歡迎來到網頁這個世界！」 —— 認識網頁架構](https://i.imgur.com/xadMCtM.png)

data/posts/2021-09-12-IT-ironman-day3.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 雖然會最基礎的 div 和 span 標籤就能夠開始切版了，甚至只靠 div 搭配 CSS 就能做出各種 tag 的效果，但為了良好的 SEO 與 閱讀性，也為了以後不會把別人和自己逼瘋 (?，還是會建議用更適合的標籤來完成網頁。
+description: 雖然會最基礎的 div 和 span 標籤就能夠開始切版了，甚至只靠 div 搭配 CSS 就能做出各種 tag 的效果，但為了良好的 SEO 與 閱讀性，也為了以後不會把別人和自己逼瘋 (?，還是會建議用更適合的標籤來完成網頁。
 ---
 
 ![「建構網頁的基石！」 —— 使用網頁標籤](https://i.imgur.com/3myJcyZ.png)

data/posts/2021-09-13-IT-ironman-day4.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 人是視覺動物，當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。
+description: 人是視覺動物，當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。
 ---
 
 ![「CSS 基礎中的基礎！」 —— CSS 盒模型 box-model & 距離單位](https://i.imgur.com/v6IIogk.png)

data/posts/2021-09-14-IT-ironman-day5.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時為了能夠更精雕細琢我們的網頁，於是我們要更加精準的設定樣式，但有的選擇器必須謹慎使用，不然後面要修改就麻煩了。
+description: 使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時為了能夠更精雕細琢我們的網頁，於是我們要更加精準的設定樣式，但有的選擇器必須謹慎使用，不然後面要修改就麻煩了。
 ---
 
 ![「我的樣式失靈啦！你有頭緒嗎？」 —— CSS 選擇器 與 權重](https://i.imgur.com/DGvbCcT.png)

data/posts/2021-09-15-IT-ironman-day6.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。所以我們可以把任何標籤變成任何你愛的樣子，當然不希望如此瞎搞！
+description: 如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。所以我們可以把任何標籤變成任何你愛的樣子，當然不希望如此瞎搞！
 ---
 
 ![「只要我想，我也能把 div 變 table！」 —— CSS display 屬性](https://i.imgur.com/ofgbXuv.png)

data/posts/2021-09-16-IT-ironman-day7.md

@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續跟進，~~IE 也要進入歷史了~~，只要用簡單的語法，就能安排元素在網頁上各自的位置，非常的方便好用又彈性！還不快學起來！
+description: 要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續跟進，~~IE 也要進入歷史了~~，只要用簡單的語法，就能安排元素在網頁上各自的位置，非常的方便好用又彈性！還不快學起來！
 ---
 
 ![「CSS 網頁切版必學，用過都說讚！」 —— CSS 彈性盒模型 Flexbox](https://i.imgur.com/hLMVxvv.png)