From a98b63c6eb99beaddb80df876a24029457e109ce Mon Sep 17 00:00:00 2001
From: Rick <1450685+LinuxSuRen@users.noreply.github.com>
Date: Mon, 11 Dec 2023 13:37:49 +0800
Subject: [PATCH] feat: add the sponsors page (#61)

Co-authored-by: rick <LinuxSuRen@users.noreply.github.com>
---
 .gitpod.yml                   |  9 +++++++++
 src/assets/sponsors.json      | 36 +++++++++++++++++++++++++++++++++++
 src/components/app-footer.vue |  4 +++-
 src/components/sponsors.vue   | 28 +++++++++++++++++++++++++++
 src/main.ts                   |  5 +++++
 src/typings/components.d.ts   |  1 +
 6 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 .gitpod.yml
 create mode 100644 src/assets/sponsors.json
 create mode 100644 src/components/sponsors.vue

diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..da7ef5e
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: pnpm install && pnpm run build
+    command: pnpm run dev
diff --git a/src/assets/sponsors.json b/src/assets/sponsors.json
new file mode 100644
index 0000000..f83fbd8
--- /dev/null
+++ b/src/assets/sponsors.json
@@ -0,0 +1,36 @@
+[{
+    "name": "黄英男",
+    "source": "小宇宙",
+    "date": "2023-12-9",
+    "item": "2元"
+}, {
+    "name": "Rick",
+    "source": "爱发电",
+    "date": "2022-02-14",
+    "item": "5元"
+}, {
+    "name": "wey-gu",
+    "source": "爱发电",
+    "date": "2022-02-14",
+    "item": "10元"
+}, {
+    "name": "siwei",
+    "source": "爱发电",
+    "date": "2022-02-14",
+    "item": "15元"
+}, {
+    "name": "siwei",
+    "source": "微信",
+    "date": "2023-10-25",
+    "item": "21元"
+}, {
+    "name": "Rick",
+    "source": "微信",
+    "date": "2023-10-25",
+    "item": "23元"
+}, {
+    "name": "majingh",
+    "source": "微信",
+    "date": "2023-10-25",
+    "item": "23元"
+}]
diff --git a/src/components/app-footer.vue b/src/components/app-footer.vue
index 6a157c0..e086f7b 100644
--- a/src/components/app-footer.vue
+++ b/src/components/app-footer.vue
@@ -24,7 +24,9 @@
       Made by
       <a href="https://github.com/sxzz" target="_blank">三咲智子</a> with ❤️
     </p>
-
+    <p>
+      <a href="/sponsors" target="_blank">Our Sponsors</a>
+    </p>
     <p>
       <a href="https://github.com/opensource-f2f" target="_blank">开源面对面</a>
       &copy; 2022
diff --git a/src/components/sponsors.vue b/src/components/sponsors.vue
new file mode 100644
index 0000000..e4ac062
--- /dev/null
+++ b/src/components/sponsors.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import sponsors from '../assets/sponsors.json'
+
+sponsors.sort((a, b) => {
+  return Date.parse(b.date) - Date.parse(a.date)
+})
+</script>
+
+<template>
+  <div style="align-self: center">
+    <div>Sponsor list</div>
+
+    <table style="width: 600px">
+      <tr>
+        <td>捐赠人</td>
+        <td>时间</td>
+        <td>捐赠物</td>
+        <td>渠道</td>
+      </tr>
+      <tr v-for="sponsor in sponsors" :key="sponsor.name">
+        <td>{{ sponsor.name }}</td>
+        <td>{{ sponsor.date }}</td>
+        <td>{{ sponsor.item }}</td>
+        <td>{{ sponsor.source }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
index b57d2b6..ecead8f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -29,6 +29,11 @@ const routes: RouteRecordRaw[] = [
     path: '/404',
     component: () => import('./components/not-found.vue'),
   },
+  {
+    name: 'Sponsors',
+    path: '/sponsors',
+    component: () => import('./components/sponsors.vue'),
+  },
 ]
 
 for (const { id } of getAllEpisode()) {
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 71eaf77..c3c0159 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -22,5 +22,6 @@ declare module '@vue/runtime-core' {
     PersonList: typeof import('./../components/person-list.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Sponsors: typeof import('./../components/sponsors.vue')['default']
   }
 }