feat(solis): Add Info component for displaying date and tags in artic…

…les (#89)

packages/Solis/components/DocInfo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="info" v-if="isPostsPath">
+    <div class="post-title">
+      <span v-if="frontmatter.top" class="top-label">
+        <i class="fa-solid fa-fire-flame-simple"></i>
+      </span>
+      {{ frontmatter.title }}
+    </div>
+
+    <div class="post-info">
+      <i class="fa-solid fa-calendar-week" style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"></i>
+      {{ formattedDate }} &nbsp;&nbsp;
+      <span v-for="(tag, index) in frontmatter.tags" :key="tag">
+        <i v-if="index === 0" class="fa-solid fa-tags" style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"></i>
+        <a :href="withBase(`/pages/tags.html?tag=${tag}`)">
+          {{ tag }}<span v-if="index < frontmatter.tags.length - 1">,</span>
+        </a>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { withBase, useRoute, useData } from 'vitepress'
+import { computed } from 'vue'
+
+// 获取 frontmatter
+const { frontmatter } = useData()
+const route = useRoute()
+const isPostsPath = computed(() => route.path.startsWith('/posts/'))
+
+// 转换日期的函数
+function convertDate(date: string = new Date().toString()): string {
+  return new Date(date).toISOString().split('T')[0]
+}
+
+// 计算 formattedDate
+const formattedDate = computed(() => {
+  // 使用 frontmatter.date 如果存在，否则使用今天的日期
+  return convertDate(frontmatter.value.date)
+})
+</script>
+
+<style lang="scss" scoped>
+.post-title {
+  font-size: 1.5rem;
+  padding: 0 0 14px;
+  font-weight: 900;
+}
+.info {
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 0 0 14px;
+}
+</style>

packages/Solis/components/Page.vue

@@ -17,7 +17,7 @@
 
     <div class="post-info">
       <i class="fa-solid fa-calendar-week" style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"></i>
-      {{ article.frontMatter.date }}
+      {{ article.frontMatter.date }} &nbsp;&nbsp;
       <span>
         <span v-for="(tag, index) in article.frontMatter.tags" :key="tag">
           <i v-if="index === 0" class="fa-solid fa-tags" style="margin-right: 0.25rem; color: var(--vp-c-brand-1)"></i>

packages/Solis/types/theme.ts

@@ -3,5 +3,6 @@ export { default as Category } from '../components/Category.vue'
 export { default as Tags } from '../components/Tags.vue'
 export { default as Page } from '../components/Page.vue'
 export { default as Twikoo } from '../components/Twikoo.vue'
+export { default as Info } from '../components/DocInfo.vue'
 
 import '../style/styles.scss'

packages/blog/.vitepress/theme/index.ts

@@ -1,13 +1,14 @@
 import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
 
-import { Archives, Category, Tags, Page, Twikoo } from '@theojs/solis'
+import { Archives, Category, Tags, Page, Twikoo, Info } from '@theojs/solis'
 import { Twikoo_Data } from '../data'
 
 export default {
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'doc-after': () => h(Twikoo, { Twikoo_Data })
+      'doc-after': () => h(Twikoo, { Twikoo_Data }),
+      'doc-before': () => h(Info)
     })
   },
   enhanceApp: ({ app }) => {

packages/docs/solis/configure-vitepress.md

@@ -31,15 +31,20 @@ export default defineConfig({
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 
-import { Archives, Category, Tags, Page } from '@theojs/solis' // [!code ++]
+import { Archives, Category, Tags, Page, Twikoo, Info } from '@theojs/solis' // [!code ++]
 
 export default {
- ...
+  Layout() {// [!code ++]
+    return h(DefaultTheme.Layout, null, {// [!code ++]
+      'doc-before': () => h(Info)// [!code ++]
+    })// [!code ++]
+  },// [!code ++]
   enhanceApp: ({ app }) => {// [!code ++]
     app.component('Tags', Tags)// [!code ++]
     app.component('Category', Category)// [!code ++]
     app.component('Archives', Archives)// [!code ++]
     app.component('Page', Page)// [!code ++]
   }// [!code ++]
 }
+  ...
 ```