feat(crowdsourcing): add crowdsourcing details

Author: SkyBird233

src/pages/aoscc/AosccDetail.vue

@@ -6,19 +6,17 @@ import { ref, defineAsyncComponent, watch } from 'vue';
 const route = useRoute();
 const error = ref();
 const articleComponent = ref();
+const articles = import.meta.glob('./articles/*.zh.md');
 
-function loadArticle() {
-  const slugWithoutHash = route.params.slug.split('#')[0];
-  articleComponent.value = defineAsyncComponent(() =>
-    import(`./articles/${slugWithoutHash}.zh.md`).catch((err) => {
-      console.error('Article not found:', err);
-      error.value = err;
-    })
-  );
+function loadArticle(slug) {
+  const path = `./articles/${slug.split('#')[0]}.zh.md`;
+  const loader = articles[path];
+  if (!loader) error.value = true;
+  articleComponent.value = defineAsyncComponent(loader);
 }
 
-loadArticle();
-watch(() => route.params.slug.split('#')[0], loadArticle);
+loadArticle(route.params.slug);
+watch(() => route.params.slug.split('#')[0], loadArticle(route.params.slug));
 </script>
 
 <template>

src/pages/crowdsourcing/CrowdsourcingDetail.vue

@@ -1,7 +1,33 @@
 <script setup>
+import CategorySecond from '../../components/CategorySecond.vue';
+import PageNotFound from '../../components/PageNotFound.vue';
+import { useRoute } from 'vue-router';
+import { ref, defineAsyncComponent, watch } from 'vue';
 
+const route = useRoute();
+const error = ref(false);
+const articleComponent = ref();
+const articles = import.meta.glob('./articles/*.zh.md');
+
+function loadArticle(slug) {
+  const path = `./articles/${slug.split('#')[0]}.zh.md`;
+  const loader = articles[path];
+  if (!loader) error.value = true;
+  articleComponent.value = defineAsyncComponent(loader);
+}
+
+loadArticle(route.params.slug);
+watch(() => route.params.slug.split('#')[0], loadArticle(route.params.slug));
 </script>
 
 <template>
-  <category-second title="111" />
+  <div class="pl-[1px]">
+    <template v-if="error">
+      <page-not-found />
+    </template>
+    <template v-else>
+      <category-second v-if="!error" title="AOSCC" />
+      <component class="vuepress-markdown-body" :is="articleComponent" />
+    </template>
+  </div>
 </template>

src/pages/crowdsourcing/CrowdsourcingIndex.vue

@@ -1,5 +1,22 @@
 <script setup>
 import CategorySecond from '/src/components/CategorySecond.vue';
+import AppLink from '../../components/AppLink.vue';
+
+const csArticleFrontmatters = import.meta.glob(
+  ['./articles/*.zh.md', '!./articles/template*'],
+  // Tricky solution for importing only the titles statically.
+  // The `query` parameter creates a unique import identifier for Vite
+  //   which prevents conflicts with dynamic imports of the same files
+  //   in AosccDetail.
+  // The query's name doesn't matter, but it must end with `.md`
+  //   for the plugin to pick it up.
+  { eager: true, import: 'title', query: 'title.md' }
+);
+
+const catalog = Object.entries(csArticleFrontmatters).map(([path, title]) => {
+  const slug = path.split('/').pop().replace('.zh.md', '');
+  return { slug, title };
+});
 </script>
 
 <template>
@@ -13,13 +30,6 @@ import CategorySecond from '/src/components/CategorySecond.vue';
         AOSCC
         年度聚会等场合）时经常需要资金及物质支持。因此，我们接受针对特定项目及购买计划的金钱、物品（如电脑机箱、电源及硬盘等）及服务（如网站服务器资源等）捐赠。</p
       ><br />
-      <p
-        >您可以前往 Wiki 站点查阅<a
-          class="text-link"
-          href="https://wiki.aosc.io/community/crowdsourcing/"
-          >众筹项目记录</a
-        >。</p
-      >
     </div>
 
     <category-second title="补充条例" />
@@ -45,6 +55,17 @@ import CategorySecond from '/src/components/CategorySecond.vue';
         <li>如众筹项目被取消，将全额退还捐款予捐赠者。</li>
       </ul>
     </div>
+
+    <category-second title="众筹项目记录" />
+    <div class="p-6">
+      <ul class="list-disc py-6 pl-16">
+        <li v-for="item in catalog" :key="item.slug">
+          <app-link :to="`/crowdsourcing/${item.slug}`">{{
+            item.title
+          }}</app-link>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 

src/router.js

@@ -38,6 +38,7 @@ import AoscWslRequirements from './pages/aosc-os/wsl/requirements/AoscWslRequire
 import AoscAsahiRelnote from './pages/aosc-os/asahi/relnote/AoscAsahiRelnote.vue';
 import AosccIndex from './pages/aoscc/AosccIndex.vue';
 import AosccDetail from './pages/aoscc/AosccDetail.vue';
+import CrowdsourcingDetail from './pages/crowdsourcing/CrowdsourcingDetail.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -271,6 +272,14 @@ const router = createRouter({
         title: '社区众筹'
       }
     },
+    {
+      path: '/crowdsourcing/:slug',
+      name: 'crowdsourcingDetail',
+      component: CrowdsourcingDetail,
+      meta: {
+        title: '社区众筹'
+      }
+    },
     {
       path: '/news',
       name: 'news',