feat(aoscc): restyle articles to render h2 as category-second and add AOSCC 2025 pages

SkyBird233 · MingcongBai · commit 053684914136 · 2025-07-15T09:11:24.000+08:00
diff --git a/src/components/CategorySecond.vue b/src/components/CategorySecond.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 <template>
   <div
-    class="theme-bg-color-secondary-static m-p flex h-[2rem] items-center justify-between px-[10px] py-[5px] leading-none text-white select-none">
+    class="theme-bg-color-secondary-static m-p category-second">
     <span>
       {{ props.title }}
     </span>
diff --git a/src/css/index.scss b/src/css/index.scss
@@ -1,4 +1,5 @@
-$line-space: 22px;
+$line-space: 8px;
+$space-lg: $line-space * 3;
 $bg-color: rgba(224, 224, 224, 0.1);
 $th-bg-color: rgba(224, 224, 224, 0.3);
 $blue: #37b2ff;
@@ -13,12 +14,6 @@ $bg-secondary: #3f6075;
     'DejaVu Sans Mono', -apple-system, monospace;
 }
 
-@media (min-width: 1280px) {
-  .vuepress-markdown-body {
-    padding: 2rem 10% !important;
-  }
-}
-
 .theme-bg-color-secondary-static {
   background-color: var(--secondary);
 }
@@ -55,9 +50,43 @@ $bg-secondary: #3f6075;
   color: var(--primary);
 }
 
+// h2 == category-second in md context
+.category-second,
+.vuepress-markdown-body h2 {
+  font-size: 1em !important;
+  font-weight: normal !important;
+  background-color: var(--secondary);
+  display: flex !important;
+  height: 2rem !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  line-height: normal !important;
+  color: #fff !important;
+  user-select: none !important;
+}
+
 .vuepress-markdown-body {
   background: none;
   background-color: #fafafa !important;
+  margin-bottom: $space-lg;
+
+  > * {
+    margin-bottom: $line-space;
+  }
+
+  // Left and right margin for every direct child except 'category-second'
+  > *:not(h2) {
+    margin-inline: $space-lg !important;
+  }
+
+  // Override the default article paddings
+  &:not(.custom) {
+    padding: 0 !important;
+  }
 
   h1 {
     background-color: $bg-secondary;
@@ -71,11 +100,18 @@ $bg-secondary: #3f6075;
 
   h2 {
     border-bottom-width: 0;
+    // Vuepress' CSS has already removed the top margin for the first child
+    // so the top margin here works as expected
+    margin-top: $space-lg !important;
+    margin-bottom: $space-lg !important;
+  }
+
+  h3 {
+    font-size: 1.2rem !important;
   }
 
   p {
-    line-height: inherit;
-    margin-bottom: $line-space;
+    line-height: inherit !important;
   }
 
   img {
@@ -139,6 +175,7 @@ $bg-secondary: #3f6075;
     transition: 300ms;
     display: inline-block;
     vertical-align: bottom;
+    color: var(--color-link) !important;
 
     &::before {
       content: 'READ MORE +';
@@ -178,9 +215,10 @@ $bg-secondary: #3f6075;
   ol,
   ul {
     padding-left: 28px;
+    line-height: inherit !important;
 
     li {
-      line-height: 2em;
+      // line-height: 2em;
       margin-bottom: 0;
       list-style: inherit;
 
diff --git a/src/pages/aoscc/AosccDetail.vue b/src/pages/aoscc/AosccDetail.vue
@@ -1,5 +1,4 @@
 <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';
@@ -28,8 +27,6 @@ watch(() => route.params.slug.split('#')[0], loadArticle);
       <page-not-found />
     </template>
     <template v-else>
-      <div class=""></div>
-      <category-second v-if="!error" title="AOSCC" />
       <component class="vuepress-markdown-body" :is="articleComponent" />
     </template>
   </div>
diff --git a/src/pages/aoscc/AosccIndex.vue b/src/pages/aoscc/AosccIndex.vue
@@ -1,10 +1,22 @@
 <script setup lang="ts">
+import { defineAsyncComponent, ref } from 'vue';
 import AosccLinkButton from './components/AosccLinkButton.vue';
+
+const error = ref();
+const articleComponent = ref();
+
+articleComponent.value = defineAsyncComponent(() =>
+  //@ts-ignore
+  import('./articles/2025-info.zh.md').catch((err) => {
+    console.error('Article not found:', err);
+    error.value = err;
+  })
+);
 </script>
 
 <template>
   <div>
-    <category-second title="AOSCC" />
+    <category-second title="AOSCC：社区年度聚会" id="aoscc" />
     <div class="aoscc-banner-bg relative h-[280px] px-10 py-6 text-white">
       <div class="absolute bottom-0 mb-10 ml-1">
         <AosccLinkButton to="https://aoscc.aosc.io" class="mr-4"
@@ -13,7 +25,21 @@ import AosccLinkButton from './components/AosccLinkButton.vue';
         <AosccLinkButton to="/aoscc/2025">实用信息</AosccLinkButton>
       </div>
     </div>
-    <category-second title="AOSCC：社区年度聚会" id="aoscc" />
+    <div class="vuepress-markdown-body">
+      <h2>AOSCC 简介</h2>
+      <p>
+        AOSCC
+        是我社每年一度的线下聚会，公开邀请社区好友参与。活动期间，社区邀请社区贡献者、高校社团成员和行业代表等分享、交流工作，并组织抽奖、代号投票等趣味活动。近年来，AOSCC
+        均由中国高校社团协办，每年吸引超过 100 来自与会者参与。
+      </p>
+    </div>
+    <template v-if="error">
+      <page-not-found />
+    </template>
+    <template v-else>
+      <category-second v-if="!error" title="AOSCC 2025" class="mb-6" />
+      <component class="vuepress-markdown-body" :is="articleComponent" />
+    </template>
   </div>
 </template>
 
diff --git a/src/pages/aoscc/articles/2025-guide.zh.md b/src/pages/aoscc/articles/2025-guide.zh.md
@@ -0,0 +1,17 @@
+## 协议住宿
+
+经 SJTUG 志愿者实地洽谈，位于沪闵路 213 号的 **「汉庭江川路地铁站新店」** 提供协议住宿，酒店房量有限，如需下榻协议酒店，请**尽早**完成会议注册、预订与支付，协议住宿详情如下。
+
+- **价格**：标准间或大床房每晚 280 元
+- **拼房**：可以单独入住、按性别随机分配拼房、或指定同住人拼房
+- **早餐**：酒店 07:00-10:00 开设自助早餐，价格 20/位，可洽前台购买
+- **签到**：我们将于 25 日在酒店大堂设置签到处，提前抵达的与会者可先行签到和领取物资
+- **未成年人**：未成年人入住需现场电话联系监护人，取得知情同意方可入住，原则上不安排未成年人随机拼房入住
+
+酒店距离校园有一定距离，建议骑行单车或搭乘公交前往校园。
+
+协议酒店附近另有一家「汉庭江川路地铁站**二店**」，请注意区分。
+
+## 交通信息
+
+稍后补充。
diff --git a/src/pages/aoscc/articles/2025-info.zh.md b/src/pages/aoscc/articles/2025-info.zh.md
@@ -55,10 +55,6 @@ AOSCC 2025 年度线下聚会将于 7 月 26-27 日在上海交通大学举行
 5. 会场设有多个垃圾桶，请注意卫生，不要乱丢垃圾
 6. 请听从志愿者的现场管理，会务志愿者可在必要的情况要求特定与会者离开会场及校园
 
-## 会议日程
-
-AOSCC 2025 为期两日，我们已收到近 20 份讲者选题，具体日程将于六月底公布。
-
 ### 自由活动/消磨时间
 
 在聚会前后、休息时间及不感兴趣的议程中，如下项目可供您消磨时间：
@@ -68,24 +64,6 @@ AOSCC 2025 为期两日，我们已收到近 20 份讲者选题，具体日程
 - 在上交大校园内、上海市区游览观光
 - 爱干啥干啥去（雾）
 
-## 协议住宿
-
-经 SJTUG 志愿者实地洽谈，位于沪闵路 213 号的 **「汉庭江川路地铁站新店」** 提供协议住宿，酒店房量有限，如需下榻协议酒店，请**尽早**完成会议注册、预订与支付，协议住宿详情如下。
-
-- **价格**：标准间或大床房每晚 280 元
-- **拼房**：可以单独入住、按性别随机分配拼房、或指定同住人拼房
-- **早餐**：酒店 07:00-10:00 开设自助早餐，价格 20/位，可洽前台购买
-- **签到**：我们将于 25 日在酒店大堂设置签到处，提前抵达的与会者可先行签到和领取物资
-- **未成年人**：未成年人入住需现场电话联系监护人，取得知情同意方可入住，原则上不安排未成年人随机拼房入住
-
-酒店距离校园有一定距离，建议骑行单车或搭乘公交前往校园。
-
-协议酒店附近另有一家「汉庭江川路地铁站**二店**」，请注意区分。
-
-## 交通信息
-
-稍后补充。
-
 ## 联系方式
 
 与会者注册、协议酒店预订等会务问题，请联系会务组：
diff --git a/src/pages/aoscc/articles/2025-schedule.zh.md b/src/pages/aoscc/articles/2025-schedule.zh.md
@@ -0,0 +1,3 @@
+## 会议日程
+
+AOSCC 2025 为期两日，我们已收到近 20 份讲者选题，具体日程将于六月底公布。
diff --git a/src/pages/home/components/LeftBar.vue b/src/pages/home/components/LeftBar.vue
@@ -22,12 +22,21 @@ const linkArr = reactive([
     ],
     show: true
   },
+  {
+    title: 'AOSCC 2025',
+    children: [
+      { title: '会议信息', link: '/aoscc' },
+      { title: '会议日程', link: '/aoscc/2025-schedule' },
+      { title: '交通和住宿', link: '/aoscc/2025-guide' },
+      { title: '往届 AOSCC', link: '/events#aoscc' }
+    ],
+    show: true
+  },
   {
     title: '资讯与支持',
     children: [
       { title: '新闻资讯', link: '/news' },
       { title: '社区活动', link: '/events' },
-      { title: 'AOSCC', link: '/aoscc' },
       { title: '活动相册', link: '/gallery' },
       { title: '联系方式', link: '/contact' },
       { title: '参考文档 (Wiki)', link: 'https://wiki.aosc.io/zh/' }
@@ -53,7 +62,10 @@ const linkArr = reactive([
       { title: '社区论坛', link: 'https://bbs.aosc.io/' },
       { title: '代码仓库', link: 'https://github.com/AOSC-Dev' },
       { title: '贡献者邮箱', link: 'https://mail20.mymailcheap.com/' },
-      { title: '构建服务器', link: 'https://wiki.aosc.io/developer/infrastructure/buildbots/' },
+      {
+        title: '构建服务器',
+        link: 'https://wiki.aosc.io/developer/infrastructure/buildbots/'
+      },
       { title: '自动化设施', link: 'https://buildit.aosc.io/' },
       { title: '软件包查询站', link: 'https://packages.aosc.io/' }
     ],
diff --git a/src/pages/news/NewsDetail.vue b/src/pages/news/NewsDetail.vue
@@ -32,7 +32,7 @@ const newsDate = ref('');
     <category-second
       :title="yamlDoc['title']"
       :right-text="newsDate"
-      class="sticky top-0 z-1" />
+      class="sticky top-0 z-1 mb-6" />
     <v-md-preview :text="mdRes" @copy-code-success="handleCopyCodeSuccess" />
   </div>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## 会议日程`
	`2`	`+`
	`3`	`+AOSCC 2025 为期两日，我们已收到近 20 份讲者选题，具体日程将于六月底公布。`