feat: add AOSCC pages

Author: SkyBird233

assets/index.scss

@@ -53,6 +53,10 @@ $common-margin: 24px;
       margin-bottom: 0;
     }
   }
+  
+  table {
+    max-width: calc(100% - 2*$common-margin);
+  }
 }
 
 .category-second,

components/CommonContent.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const props = defineProps<{ category: string }>();
+
+const route = useRoute();
+const { locale } = useI18n();
+
+const { data: page } = await useAsyncData(
+  computed(() => `${locale.value}:${props.category}:${route.params.slug}`),
+  () => {
+    return queryCollection(locale.value)
+      .path(`/${props.category}/${route.params.slug}`)
+      .first();
+  }
+);
+useHead({ title: page.value?.title });
+</script>
+
+<template>
+  <article v-if="page">
+    <category-second
+      v-if="page?.body.value[0][0]!=='h2'"
+      :title="page?.title"
+      :right-text="page?.date.substring(0, 10)"
+      class="sticky top-0 z-1" />
+    <ContentRenderer :value="page" class="heti" />
+  </article>
+</template>

components/aoscc/AosccLinkButton.vue

@@ -0,0 +1,12 @@
+<script setup>
+import AppLink from '../app/AppLink.vue';
+const props = defineProps({ ...AppLink.props });
+</script>
+
+<template>
+  <AppLink
+    v-bind="props"
+    class="theme-bg-color-secondary-primary cursor-pointer overflow-hidden px-4 py-2 text-white hover:no-underline">
+    <slot />
+  </AppLink>
+</template>

components/app/AppLink.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { RouterLink } from 'vue-router';
+import { NuxtLink } from '#components';
 
 const props = defineProps({
-  ...RouterLink.props,
+  ...NuxtLink.props,
   class: {
     type: String,
     default: 'text-link'

components/content/Info.vue

@@ -0,0 +1,5 @@
+<template>
+  <blockquote class="border-l-4 border-(--secondary)">
+    <slot />
+  </blockquote>
+</template>

components/content/ProsePre.vue

@@ -32,7 +32,7 @@ const pre = useTemplateRef('prose-pre');
 <template>
   <pre ref="prose-pre" :class="`${$props.class} relative`"><slot /><CopyIcon
     class="absolute top-3 right-3" 
-    :content-target="pre?.textContent??undefined" /></pre>
+    :content-target="pre?.textContent??'undefined'" /></pre>
 </template>
 
 <style>

components/copy/CopyIcon.vue

@@ -9,6 +9,7 @@ const props = defineProps({
 
 <template>
   <Icon
+    v-if="contentTarget !== 'undefined'"
     class="cursor-pointer !bg-(--primary)"
     v-bind="props"
     name="ep-document-copy"

pages/aoscc/2025.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { locale } = useI18n();
+
+const { data, status } = await useAsyncData(
+  computed(() => `${locale.value}:aoscc-index`),
+  () => queryCollection(locale.value).path('/aoscc/2025-index').first()
+);
+</script>
+
+<template>
+  <div>
+    <category-second id="aoscc" title="AOSCC：社区年度聚会" />
+    <div class="aoscc-banner-bg relative h-[280px] px-10 py-6 text-white">
+      <div class="absolute bottom-0 mb-10 ml-1 flex gap-4">
+        <AosccLinkButton to="https://aoscc.aosc.io" target="_blank">
+          报名与签到
+        </AosccLinkButton>
+        <AosccLinkButton to="/aoscc/2025-schedule">会议日程</AosccLinkButton>
+        <AosccLinkButton to="/aoscc/2025-guide">交通和住宿</AosccLinkButton>
+      </div>
+    </div>
+    <div class="heti">
+      <h2>AOSCC 简介</h2>
+      <p>
+        AOSCC
+        是我社每年一度的线下聚会，公开邀请社区好友参与。活动期间，社区邀请社区贡献者、高校社团成员和行业代表等分享、交流工作，并组织抽奖、代号投票等趣味活动。近年来，AOSCC
+        均由中国高校社团协办，每年吸引超过 100 名与会者参与。
+      </p>
+    </div>
+    <ContentRenderer
+      v-if="status === 'success' && data"
+      :value="data"
+      class="heti" />
+  </div>
+</template>
+
+<style scoped>
+.aoscc-banner-bg {
+  background-image: url(/aoscc/aoscc-2025-portal-banner.png);
+  background-size: 1088px;
+}
+</style>

pages/aoscc/[slug].vue

@@ -0,0 +1,3 @@
+<template>
+  <common-content category="aoscc" />
+</template>

pages/news/[slug].vue

@@ -1,30 +1,3 @@
-<script lang="ts" setup>
-const route = useRoute();
-const { locale } = useI18n();
-
-const { data: page } = await useAsyncData(
-  computed(() => `${locale.value}:news:${route.params.slug}`),
-  () => {
-    return queryCollection(locale.value)
-      .path(`/news/${route.params.slug}`)
-      .first();
-  }
-);
-useHead({ title: page.value?.title });
-</script>
-
 <template>
-  <div>
-    <article>
-      <category-second
-        :title="page?.title"
-        :right-text="page?.date.substring(0, 10)"
-        class="sticky top-0 z-1" />
-      <div v-if="page">
-        <ContentRenderer :value="page" class="heti" />
-      </div>
-    </article>
-  </div>
+  <common-content category="news" />
 </template>
-
-<style lang="css" scoped></style>