feat: support blog (#84)

* stage: support blog

* tweaks

* refactor: mv blog posts to blog repo

.gitmodules

@@ -5,3 +5,6 @@
 [submodule "src/styles/detail"]
 	path = src/styles/detail
 	url = https://github.com/zotero-chinese/styles.git
+[submodule "src/blog/blog-repo"]
+	path = src/blog/blog-repo
+	url = https://github.com/zotero-chinese/blog.git

.vscode/settings.json

@@ -28,6 +28,11 @@
   // },
   "markdown.updateLinksOnFileMove.enabled": "always",
   "markdown.editor.pasteUrlAsFormattedLink.enabled": "smart",
+  "markdownlint.config": {
+    "MD025": {
+      "front_matter_title": ""
+    }
+  },
 
   /** 文件管理器相关  */
   // "explorer.sortOrder": "mixed",

src/.vitepress/config.ts

@@ -13,12 +13,13 @@ export default defineConfig({
   description: 'Zotero 非官方中文维护小组',
   lang: 'zh-CN',
 
-  srcExclude: ['wiki/index.md', '**/README.md'],
+  srcExclude: ['wiki/index.md', '**/README.md', '**/_template.md'],
   // outDir: 'dist',
 
   rewrites: {
     'wiki/:id+': ':id+',
     'styles/detail/src/:id+': 'styles/:id+',
+    'blog/blog-repo/posts/:id+': 'blog/posts/:id+',
   },
   cleanUrls: true,
 

src/.vitepress/config/navbar.config.ts

@@ -25,6 +25,7 @@ export const nav: DefaultTheme.NavItem[] = [
   {
     text: '社区',
     items: [
+      { text: '博客', link: '/blog/' },
       { text: '关于我们', link: '/about' },
       { text: '贡献者名单', link: '/contributors' },
       { text: '贡献指南', link: '/contributing/' },

src/.vitepress/config/sidebar.config.ts

@@ -7,6 +7,7 @@ export const sidebar: DefaultTheme.Sidebar = {
   // "/styles/detail/": (() => {
   //   return [];
   // })(),
+  '/blog/': [],
   '/': [
     { text: '关于我们', link: '/about' },
     { text: '贡献者名单', link: '/contributors' },

src/.vitepress/theme/components/blog.data.ts → src/.vitepress/data/blog.data.ts

@@ -12,13 +12,13 @@ interface Post {
 declare const data: Post[]
 export { data }
 
-export default createContentLoader('blog/*.md', {
+export default createContentLoader('blog/blog-repo/posts/!(_template|index).md', {
   // excerpt: true,
   transform(raw): Post[] {
     return raw
+      .filter(({ frontmatter }) => !frontmatter.draft)
       .map(({ url, frontmatter }) => ({
-        title: frontmatter.head.find(e => e[1].property === 'og:title')[1]
-          .content,
+        title: frontmatter.title,
         url,
         date: formatDate(frontmatter.date),
       }))

src/.vitepress/theme/components/BlogIndex.vue

@@ -1,30 +1,39 @@
 <script setup lang="ts">
-import { data as posts } from './blog.data'
+import { data as posts } from '@data/blog.data'
 
 function getDateTime(time: number) {
   return new Date(time).toISOString()
 }
 </script>
 
 <template>
-  <ul class="blog-list">
-    <li v-for="post of posts" :key="post.url" class="blog-entry">
-      <article>
-        <time :datetime="getDateTime(post.date.time)">
-          {{ post.date.string }}
-        </time>
-        <h2 class="title">
-          <a :href="post.url">{{ post.title }}</a>
-        </h2>
-      </article>
-    </li>
-  </ul>
+  <div class="blog-list-warpper vp-doc">
+    <ul v-if="posts.length !== 0" class="blog-list">
+      <li v-for="post of posts" :key="post.url" class="blog-entry">
+        <article>
+          <time :datetime="getDateTime(post.date.time)">
+            {{ post.date.string }}
+          </time>
+          <h2 class="title">
+            <a :href="post.url">{{ post.title }}</a>
+          </h2>
+        </article>
+      </li>
+    </ul>
+
+    <el-empty v-else description="暂无内容" />
+  </div>
 </template>
 
 <style scoped>
 .blog-list {
   list-style-type: none;
-  padding: 0;
+  padding: 0 20% 5em 20%;
+}
+@media only screen and (max-width: 800px) {
+  .blog-list {
+    padding: 0;
+  }
 }
 .blog-entry {
   margin-top: 3em;

src/.vitepress/theme/components/Market.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 
 // @ts-expect-error data 是 vitepress 的隐式导出
 import { data as _pluginUpdateTime } from '@data/update-time.data'
@@ -10,7 +10,8 @@ import MarketHero from './MarketHero.vue'
 import Loading from './Loading.vue'
 
 const { frontmatter } = useData()
-const updateTime = frontmatter.value.type === 'plugin' ? _pluginUpdateTime.lastUpdate : _updateTime
+const updateTime = computed(() => frontmatter.value.type === 'plugin' ? _pluginUpdateTime.lastUpdate : _updateTime)
+const description = computed(() => frontmatter.value.description ?? `更新时间：${updateTime.value}`)
 
 const PluginCards = defineAsyncComponent(() =>
   import('./PluginCards.vue'))
@@ -20,6 +21,8 @@ const StyleCards = defineAsyncComponent(() =>
   import('./StyleCards.vue'))
 const TranslatorCards = defineAsyncComponent(() =>
   import('./TranslatorCards.vue'))
+const BlogIndex = defineAsyncComponent(() =>
+  import('./BlogIndex.vue'))
 
 function getComponentByType(type: string) {
   switch (type) {
@@ -31,6 +34,8 @@ function getComponentByType(type: string) {
       return StyleCards
     case 'translator':
       return TranslatorCards
+    case 'blog':
+      return BlogIndex
     default:
       return null
   }
@@ -41,7 +46,7 @@ function getComponentByType(type: string) {
   <div class="VPPage Market">
     <MarketHero
       :title="frontmatter.title"
-      :description="`更新时间：${updateTime}`"
+      :description="description"
       :actions="frontmatter.actions"
     />
     <main class="MarketMain">

src/blog/index.md

@@ -0,0 +1,15 @@
+---
+layout: Market
+type: blog
+title: 社区博客
+description: 获取 Zotero 中文社区的最近动态
+sidebar: false
+editLink: false
+outline: false
+aside: false
+comments: false
+prev: false
+next: false
+---
+
+<!-- markdownlint-disable -->