feat: add the sponsors page (#61)

Co-authored-by: rick <LinuxSuRen@users.noreply.github.com>

.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

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元"
+}]

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

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>

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()) {

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']
   }
 }