[PR] Auto sidebar, close #17 (#18)

* [+] Init auto sidebar * [F] Fix url, remove unused code * [F] Use home layout instead of global component
one-among-us · Nov 19, 2024 · 23927c1 · 23927c1
1 parent c453674
commit 23927c1
Show file tree

Hide file tree

Showing 41 changed files with 409 additions and 91 deletions.
diff --git a/content/.vitepress/config.ts b/content/.vitepress/config.ts
@@ -1,12 +1,33 @@
 import { footnote } from '@mdit/plugin-footnote';
 import VueJsx from '@vitejs/plugin-vue-jsx';
+import { fileURLToPath } from 'node:url';
 import Unocss from 'unocss/vite';
 import { defineConfig } from 'vitepress';
+import { generateSidebar, VitePressSidebarOptions } from 'vitepress-sidebar';
 import imgPlugin from './plugins/imgPlugin';
-import getPostList from './theme/utils/getPostList';
+
+const rootLocale = 'en';
+const commonSidebarConfigs: Partial<VitePressSidebarOptions> = {
+  useTitleFromFrontmatter: true,
+  useFolderTitleFromIndexFile: true,
+  useFolderLinkFromIndexFile: true,
+  useTitleFromFileHeading: true,
+  collapsed: true,
+};
+
+const supportedLocales = [rootLocale, 'zh-Hans', 'ja'] as const;
+
+const sidebarConfigs = supportedLocales.map((lang) => {
+  return {
+    ...commonSidebarConfigs,
+    ...(rootLocale === lang ? {} : { basePath: `/${lang}/` }), // If using `rewrites` option
+    documentRootPath: `content/${lang}`,
+    resolvePath: rootLocale === lang ? '/' : `/${lang}/`,
+  };
+});
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig({
+const vitePressConfig = defineConfig({
   title: 'One Among Us',
   description:
     'A community for East-Asian and East-Asian Canadian transgender and gender diverse people. An Ontario registered not-for-profit corporation.',
@@ -15,6 +36,7 @@ export default defineConfig({
     root: {
       label: 'English',
       lang: 'en',
+      themeConfig: {},
     },
     'zh-Hans': {
       label: '简体中文',
@@ -26,9 +48,6 @@ export default defineConfig({
           { text: '通知公告', link: '/zh-Hans/posts' },
           { text: '联系·支持', link: '/zh-Hans/contact' },
         ],
-        sidebar: {
-          '/zh-Hans/posts': getPostList('zh-Hans'),
-        },
         footer: {
           message:
             '若无特殊说明，本站内容以 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享 署名 4.0</a> 协议授权',
@@ -45,9 +64,6 @@ export default defineConfig({
           // { text: 'アーカイブ', link: '/ja/posts' },
           { text: '連絡先', link: '/ja/contact' },
         ],
-        sidebar: {
-          '/ja/posts': getPostList('ja'),
-        },
         footer: {
           message:
             '注があるものを除いて、このサイトの内容物は <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">クリエイティブ・コモンズ 表示 4.0</a> ライセンスの下に提供されています。',
@@ -67,9 +83,7 @@ export default defineConfig({
     ],
     logo: '/assets/favicon-new.png',
 
-    sidebar: {
-      '/posts': getPostList(),
-    },
+    sidebar: generateSidebar(sidebarConfigs),
 
     footer: {
       message:
@@ -110,17 +124,25 @@ export default defineConfig({
     ],
   },
   rewrites: {
-    'posts/index.md': 'posts.md',
-    'people/index.md': 'people.md',
-    'zh-Hans/posts/index.md': 'zh-Hans/posts.md',
-    'ja/posts/index.md': 'ja/posts.md',
-    'ja/links/index.md': 'ja/links.md',
-    'zh-Hans/events/index.md': 'zh-Hans/events.md',
+    'en/:rest*': ':rest*',
   },
+
   vite: {
     plugins: [VueJsx(), Unocss()],
     server: { host: '0.0.0.0' },
     css: { preprocessorOptions: { sass: { api: 'modern' } } },
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('../', import.meta.url)),
+        },
+        {
+          find: /^.*\/VPHome\.vue$/,
+          replacement: fileURLToPath(new URL('./theme/OurHome.vue', import.meta.url)),
+        },
+      ],
+    },
   },
   markdown: {
     config: (md) => {
@@ -129,3 +151,7 @@ export default defineConfig({
     },
   },
 });
+
+// http://localhost:5173/content/zh-Hans/posts/statement-linux-foundation
+// http://localhost:5173/zh-Hans/posts/statement-linux-foundation
+export default vitePressConfig;
diff --git a/content/.vitepress/theme/index.tsx b/content/.vitepress/theme/index.tsx
@@ -1,13 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import 'uno.css';
-import Theme from 'vitepress/theme';
-import OurHome from './OurHome.vue';
+import DefaultTheme from 'vitepress/theme';
 import './style.css';
 // import './scss/main.scss';
 
-export default {
-  ...Theme,
-  enhanceApp({ app, router, siteData }) {
-    app.component('ourhome', OurHome);
-  },
-};
+export default DefaultTheme;
diff --git a/content/.vitepress/theme/utils/getPostList.data.ts b/content/.vitepress/theme/utils/getPostList.data.ts
@@ -1,3 +1,8 @@
+import PostData from '@/.vitepress/types/PostData';
 import { createContentLoader } from 'vitepress';
 
-export default createContentLoader('posts/**/*.md');
+export default createContentLoader('en/posts/**/*.md', {
+  transform: (data) => data.map((item) => ({ ...item, url: item.url.replace('en/', '') })),
+});
+
+export declare const data: PostData[];
diff --git a/content/.vitepress/theme/utils/getPostList.ja.data.ts b/content/.vitepress/theme/utils/getPostList.ja.data.ts
@@ -1,3 +1,6 @@
+import PostData from '@/.vitepress/types/PostData';
 import { createContentLoader } from 'vitepress';
 
 export default createContentLoader('ja/posts/**/*.md');
+
+export declare const data: PostData[];
diff --git a/content/.vitepress/theme/utils/getPostList.ts b/content/.vitepress/theme/utils/getPostList.ts
diff --git a/content/.vitepress/theme/utils/getPostList.zh-Hans.data.ts b/content/.vitepress/theme/utils/getPostList.zh-Hans.data.ts
@@ -1,3 +1,6 @@
+import PostData from '@/.vitepress/types/PostData';
 import { createContentLoader } from 'vitepress';
 
 export default createContentLoader('zh-Hans/posts/**/*.md');
+
+export declare const data: PostData[];
diff --git a/content/about.md → content/en/about.md b/content/about.md → content/en/about.md
@@ -90,13 +90,13 @@ Please keep up with our further updates.
 
 ### The Flag: Double-Flowered Cherry Blossom
 
-![The Flag of One Among Us](/posts/flag.oau.png 'The Flag of One Among Us')
+![The Flag of One Among Us](./posts/flag.oau.png 'The Flag of One Among Us')
 
 ### The Anthem: Star Tour Song
 
 **『星めぐりの歌』**　宮沢賢治 作詞/作曲
 
-![Star Tour Song, from *The Complete Work of Miyazawa Kenji*, Chikuma Shobō](/posts/hoshi-meguri-no-uta.png 'Star Tour Song, from The Complete Work of Miyazawa Kenji, Chikuma Shobo')
+![Star Tour Song, from *The Complete Work of Miyazawa Kenji*, Chikuma Shobō](./posts/hoshi-meguri-no-uta.png 'Star Tour Song, from The Complete Work of Miyazawa Kenji, Chikuma Shobo')
 
 Can you see the red eyed Scorpion?
 

diff --git a/content/community-resource.md → content/en/community-resource.md b/content/community-resource.md → content/en/community-resource.md
diff --git a/content/contact.md → content/en/contact.md b/content/contact.md → content/en/contact.md
diff --git a/content/index.md → content/en/index.md b/content/index.md → content/en/index.md
@@ -1,6 +1,6 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
-layout: ourhome
+layout: home
 hero:
   name: 'One Among Us'
   text: ''
@@ -70,8 +70,8 @@ We are a registered not-for-profit organization in Ontario, Canada.
 ## Events Calendar
 
 <script setup lang="ts">
-import Calendar from './Calendar.vue'
-import Carousel from './Carousel.vue'
+import Calendar from '@/Calendar.vue'
+import Carousel from '@/Carousel.vue'
 </script>
 
 <Calendar url="https://oau.app/calendar/ical/c_def3dc162ddaf3b15b3ee419551a2b65068b2493c0ecbbdce7daa867f2bc0aeb%40group.calendar.google.com/public/basic.ics"></Calendar>

diff --git a/content/land-ack.md → content/en/land-ack.md b/content/land-ack.md → content/en/land-ack.md
diff --git a/content/login.md → content/en/login.md b/content/login.md → content/en/login.md
diff --git a/content/people/index.md → content/en/people/index.md b/content/people/index.md → content/en/people/index.md
diff --git a/content/people/index.vue → content/en/people/index.vue b/content/people/index.vue → content/en/people/index.vue
diff --git a/content/posts/2023-member-gathering.md → content/en/posts/2023-member-gathering.md b/content/posts/2023-member-gathering.md → content/en/posts/2023-member-gathering.md
diff --git a/content/posts/another-mh-art.jpg → content/en/posts/another-mh-art.jpg b/content/posts/another-mh-art.jpg → content/en/posts/another-mh-art.jpg
diff --git a/content/posts/board_election_202304.md → content/en/posts/board_election_202304.md b/content/posts/board_election_202304.md → content/en/posts/board_election_202304.md
diff --git a/content/posts/board_election_202312.md → content/en/posts/board_election_202312.md b/content/posts/board_election_202312.md → content/en/posts/board_election_202312.md
diff --git a/content/posts/flag.oau.png → content/en/posts/flag.oau.png b/content/posts/flag.oau.png → content/en/posts/flag.oau.png
diff --git a/content/posts/flag_anthem.md → content/en/posts/flag_anthem.md b/content/posts/flag_anthem.md → content/en/posts/flag_anthem.md
diff --git a/content/posts/hoshi-meguri-no-uta.png → content/en/posts/hoshi-meguri-no-uta.png b/content/posts/hoshi-meguri-no-uta.png → content/en/posts/hoshi-meguri-no-uta.png
diff --git a/content/posts/index.md → content/en/posts/index.md b/content/posts/index.md → content/en/posts/index.md
@@ -1,5 +1,6 @@
 ---
 layout: page
+title: Archives
 ---
 
 <Page />

diff --git a/content/posts/index.vue → content/en/posts/index.vue b/content/posts/index.vue → content/en/posts/index.vue
@@ -17,12 +17,10 @@
   </main>
 </template>
 <script setup lang="ts">
-// @ts-expect-error load data from .data files
-import { data as posts } from '../.vitepress/theme/utils/getPostList.data';
-import type PostData from '../.vitepress/types/PostData';
+import { data as posts } from '@/.vitepress/theme/utils/getPostList.data';
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
 
-const organizedPosts = (posts as PostData[])
+const organizedPosts = posts
   .filter(({ frontmatter }) => frontmatter.title)
   .sort((a, b) => {
     const aDate = new Date(a.frontmatter.date);

diff --git a/content/posts/mandate.md → content/en/posts/mandate.md b/content/posts/mandate.md → content/en/posts/mandate.md
diff --git a/content/posts/mh.png → content/en/posts/mh.png b/content/posts/mh.png → content/en/posts/mh.png
diff --git a/content/posts/mh_promotion.md → content/en/posts/mh_promotion.md b/content/posts/mh_promotion.md → content/en/posts/mh_promotion.md
diff --git a/content/posts/statement-linux-foundation.md → ...nt/en/posts/statement-linux-foundation.md b/content/posts/statement-linux-foundation.md → ...nt/en/posts/statement-linux-foundation.md
diff --git a/content/posts/statement_xiyu.md → content/en/posts/statement_xiyu.md b/content/posts/statement_xiyu.md → content/en/posts/statement_xiyu.md
diff --git a/content/posts/transuniguide.md → content/en/posts/transuniguide.md b/content/posts/transuniguide.md → content/en/posts/transuniguide.md
diff --git a/content/ja/index.md b/content/ja/index.md
@@ -1,6 +1,6 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
-layout: ourhome
+layout: home
 
 hero:
   name: One Among Us

diff --git a/content/ja/posts/flag_anthem.md b/content/ja/posts/flag_anthem.md
@@ -7,13 +7,13 @@ date: 2023-06-05T10:00:00-04:00
 
 ## 社旗：八重桜
 
-![One Among Us 社旗](../../posts/flag.oau.png 'One Among Us 社旗')
+![One Among Us 社旗](@/en/posts/flag.oau.png 'One Among Us 社旗')
 
 ## 社歌：星めぐりの歌
 
 **星めぐりの歌**　宮沢賢治 作詞/作曲
 
-![「星めぐりの歌」『宮沢賢治全集』筑摩書房](../../posts/hoshi-meguri-no-uta.png '「星めぐりの歌」『宮沢賢治全集』筑摩書房')
+![「星めぐりの歌」『宮沢賢治全集』筑摩書房](@/en/posts/hoshi-meguri-no-uta.png '「星めぐりの歌」『宮沢賢治全集』筑摩書房')
 
 あかいめだまの　さそり
 

diff --git a/content/ja/posts/index.vue b/content/ja/posts/index.vue
@@ -17,12 +17,10 @@
   </main>
 </template>
 <script setup lang="ts">
-// @ts-expect-error load data from .data files
-import { data as posts } from '../../.vitepress/theme/utils/getPostList.ja.data';
-import type PostData from '../../.vitepress/types/PostData';
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
+import { data as posts } from '../../.vitepress/theme/utils/getPostList.ja.data';
 
-const organizedPosts = (posts as PostData[])
+const organizedPosts = posts
   .filter(({ frontmatter }) => frontmatter.title)
   .sort((a, b) => {
     const aDate = new Date(a.frontmatter.date);

diff --git a/content/zh-Hans/about.md b/content/zh-Hans/about.md
@@ -1,4 +1,6 @@
-# 关于我们
+---
+title: 关于我们
+---
 
 你好呀！我们是 One Among Us，是一个希望为东亚（现在主要是中国）以及在海外（主要是加拿大）的跨性别/性别多元朋友们提供同辈互助和社群支持，增强两地跨儿之间的联系与互助的组织。
 
@@ -86,13 +88,13 @@ One Among Us 最初的起点以及最重要的业务是纪念逝去的跨性别
 
 ### 会旗：重瓣樱
 
-![One Among Us 会旗](/posts/flag.oau.png 'One Among Us 会旗')
+![One Among Us 会旗](@/en/posts/flag.oau.png 'One Among Us 会旗')
 
 ### 会歌：《巡星之歌》
 
 **『星めぐりの歌』**　宮沢賢治 作詞/作曲
 
-![《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》](/posts/hoshi-meguri-no-uta.png '《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》')
+![《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》](@/en/posts/hoshi-meguri-no-uta.png '《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》')
 
 #### 日语歌词
 

diff --git a/content/zh-Hans/events/index.md b/content/zh-Hans/events/index.md
@@ -1,5 +1,5 @@
 ---
-title: Events
+title: 活动日历
 layout: page
 events:
   OAU 02 Local 跨性别纪念日故事分享-守夜-同伴支持小组:
@@ -204,7 +204,7 @@ events:
             <div class="community">
               <div v-for="c in item.community" :key="c" class="cclick" loading='lazy'> {{ c }}
               </div>
-              <div class="clink" v-if="item.link && item.link.type"> 
+              <div class="clink" v-if="item.link && item.link.type">
                 <a v-if="item.link && item.link.type" class="link-type" :href="`${item.link.url}`">
                   {{ item.link.type }}
                 </a>
@@ -277,7 +277,6 @@ $grid__cols: 12
 img
     border-radius: 12px
 
-
 .date, .actual-date
     display: flex
     gap: 0.5em
@@ -342,14 +341,12 @@ img
     white-space: nowrap
 
 .clink
-    border: 1px solid 
+    border: 1px solid
     border-radius: 12px
     padding: 2px 8px 0 8px
     color: var(--vp-c-red-1)
     background-color: var(--vp-c-red-soft)
 
-
-
 // Phone
 @media(max-width: 600px)
     .event

diff --git a/content/zh-Hans/index.md b/content/zh-Hans/index.md
@@ -1,6 +1,6 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
-layout: ourhome
+layout: home
 
 hero:
   name: One Among Us

diff --git a/content/zh-Hans/posts/flag_anthem.md b/content/zh-Hans/posts/flag_anthem.md
@@ -7,13 +7,13 @@ date: 2023-06-05T10:00:00-04:00
 
 ## 会旗：重瓣樱
 
-![One Among Us 会旗](../../posts/flag.oau.png 'One Among Us 会旗')
+![One Among Us 会旗](@/en/posts/flag.oau.png 'One Among Us 会旗')
 
 ## 会歌：《巡星之歌》
 
 **『星めぐりの歌』**　宮沢賢治 作詞/作曲
 
-![《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》](../../posts/hoshi-meguri-no-uta.png '《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》')
+![《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》](@/en/posts/hoshi-meguri-no-uta.png '《巡星之歌》原稿，选自筑摩书房《宫泽贤治全集》')
 
 ### 日语歌词
 

diff --git a/content/zh-Hans/posts/index.md b/content/zh-Hans/posts/index.md
@@ -1,5 +1,6 @@
 ---
 layout: page
+title: 通知公告
 ---
 
 <Page />

diff --git a/content/zh-Hans/posts/index.vue b/content/zh-Hans/posts/index.vue
@@ -17,12 +17,10 @@
   </main>
 </template>
 <script setup lang="ts">
-// @ts-expect-error load data from .data files
 import { data as posts } from '../../.vitepress/theme/utils/getPostList.zh-Hans.data';
-import type PostData from '../../.vitepress/types/PostData';
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
 
-const organizedPosts = (posts as PostData[])
+const organizedPosts = posts
   .filter(({ frontmatter }) => frontmatter.title)
   .sort((a, b) => {
     const aDate = new Date(a.frontmatter.date);