From 88adb255dba62791019858af7544848365f47307 Mon Sep 17 00:00:00 2001
From: Northword <44738481+northword@users.noreply.github.com>
Date: Sun, 4 Aug 2024 19:31:21 +0800
Subject: [PATCH] feat: support blog (#84)

* stage: support blog

* tweaks

* refactor: mv blog posts to blog repo
---
 .gitmodules                                   |  3 ++
 .vscode/settings.json                         |  5 +++
 src/.vitepress/config.ts                      |  3 +-
 src/.vitepress/config/navbar.config.ts        |  1 +
 src/.vitepress/config/sidebar.config.ts       |  1 +
 .../{theme/components => data}/blog.data.ts   |  6 +--
 src/.vitepress/theme/components/BlogIndex.vue | 37 ++++++++++++-------
 src/.vitepress/theme/components/Market.vue    | 11 ++++--
 src/blog/blog-repo                            |  1 +
 src/blog/index.md                             | 15 ++++++++
 10 files changed, 62 insertions(+), 21 deletions(-)
 rename src/.vitepress/{theme/components => data}/blog.data.ts (79%)
 create mode 160000 src/blog/blog-repo
 create mode 100644 src/blog/index.md

diff --git a/.gitmodules b/.gitmodules
index 9357c12..6a2350a 100644
--- a/.gitmodules
+++ b/.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
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 208fa90..5d4839b 100644
--- a/.vscode/settings.json
+++ b/.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",
diff --git a/src/.vitepress/config.ts b/src/.vitepress/config.ts
index 0dd18fb..b98dc37 100644
--- a/src/.vitepress/config.ts
+++ b/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,
 
diff --git a/src/.vitepress/config/navbar.config.ts b/src/.vitepress/config/navbar.config.ts
index 014d93e..5196e2d 100644
--- a/src/.vitepress/config/navbar.config.ts
+++ b/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/' },
diff --git a/src/.vitepress/config/sidebar.config.ts b/src/.vitepress/config/sidebar.config.ts
index a31dbb8..7d95834 100644
--- a/src/.vitepress/config/sidebar.config.ts
+++ b/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' },
diff --git a/src/.vitepress/theme/components/blog.data.ts b/src/.vitepress/data/blog.data.ts
similarity index 79%
rename from src/.vitepress/theme/components/blog.data.ts
rename to src/.vitepress/data/blog.data.ts
index 8435e8e..20d34c3 100644
--- a/src/.vitepress/theme/components/blog.data.ts
+++ b/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),
       }))
diff --git a/src/.vitepress/theme/components/BlogIndex.vue b/src/.vitepress/theme/components/BlogIndex.vue
index 2a6891a..103d419 100644
--- a/src/.vitepress/theme/components/BlogIndex.vue
+++ b/src/.vitepress/theme/components/BlogIndex.vue
@@ -1,5 +1,5 @@
 <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()
@@ -7,24 +7,33 @@ function getDateTime(time: number) {
 </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;
diff --git a/src/.vitepress/theme/components/Market.vue b/src/.vitepress/theme/components/Market.vue
index a0cf3fa..64942b7 100644
--- a/src/.vitepress/theme/components/Market.vue
+++ b/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">
diff --git a/src/blog/blog-repo b/src/blog/blog-repo
new file mode 160000
index 0000000..dafe3e3
--- /dev/null
+++ b/src/blog/blog-repo
@@ -0,0 +1 @@
+Subproject commit dafe3e30a1c3bd1d9bce4b7dab838ad7022f6111
diff --git a/src/blog/index.md b/src/blog/index.md
new file mode 100644
index 0000000..7d09e57
--- /dev/null
+++ b/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 -->