From 97dfa4a2dd24ca6c040bc18ef49092d2cc9d6a17 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sun, 5 May 2024 23:31:53 +0800
Subject: [PATCH] feat(page-properties): added new custom dynamic page
 properties

Signed-off-by: Rizumu Ayaka <rizumu@ayaka.moe>
---
 .../src/plugins/nolebase/index.ts             | 18 +++++
 .../src/client/components/PageProperties.vue  | 19 +++++-
 .../components/PagePropertiesEditor.vue       | 19 +++++-
 .../src/client/composables/propertyType.ts    | 14 +++-
 .../src/client/types.ts                       | 30 ++++++---
 .../src/client/virtual.d.ts                   | 67 -------------------
 6 files changed, 86 insertions(+), 81 deletions(-)

diff --git a/packages/unconfig-vitepress/src/plugins/nolebase/index.ts b/packages/unconfig-vitepress/src/plugins/nolebase/index.ts
index 9709da6b..0e0184f1 100644
--- a/packages/unconfig-vitepress/src/plugins/nolebase/index.ts
+++ b/packages/unconfig-vitepress/src/plugins/nolebase/index.ts
@@ -141,6 +141,15 @@ const defaultOptions: NolebasePluginPresetOptions = {
               dateFnsLocaleName: 'enUS',
             },
           },
+          {
+            key: 'someCustomProperty',
+            type: 'dynamic',
+            title: 'Some custom property',
+            options: {
+              type: 'custom',
+              getter: () => 'Custom value',
+            },
+          },
         ],
         'zh-CN': [
           {
@@ -184,6 +193,15 @@ const defaultOptions: NolebasePluginPresetOptions = {
               dateFnsLocaleName: 'zhCN',
             },
           },
+          {
+            key: 'someCustomProperty',
+            type: 'dynamic',
+            title: '自定义属性',
+            options: {
+              type: 'custom',
+              getter: () => 'Custom value',
+            },
+          },
         ],
       },
     },
diff --git a/packages/vitepress-plugin-page-properties/src/client/components/PageProperties.vue b/packages/vitepress-plugin-page-properties/src/client/components/PageProperties.vue
index 6c7e1203..82c0baee 100644
--- a/packages/vitepress-plugin-page-properties/src/client/components/PageProperties.vue
+++ b/packages/vitepress-plugin-page-properties/src/client/components/PageProperties.vue
@@ -4,8 +4,10 @@ import { useData } from 'vitepress'
 import { NuTag } from '@nolebase/ui'
 
 import { InjectionKey } from '../constants'
+import type { Property } from '../types'
 import {
   isDatetimeProperty,
+  isDynamicCustomProperty,
   isDynamicReadingTimeProperty,
   isDynamicWordsCountProperty,
   isLinkProperty,
@@ -22,7 +24,8 @@ import ProgressBar from './ProgressBar.vue'
 import Datetime from './Datetime.vue'
 
 const options = inject(InjectionKey, {})
-const { lang, frontmatter } = useData()
+const vitePressData = useData()
+const { lang, frontmatter } = vitePressData
 const { t } = useI18n()
 const rawPath = useRawPath()
 const pagePropertiesData = usePageProperties()
@@ -148,6 +151,9 @@ const readingTime = computed(() => {
             <template v-else-if="isDynamicReadingTimeProperty(property.value, property.pageProperty)">
               <div i-icon-park-outline:timer mr-1 />
             </template>
+            <template v-else-if="isDynamicCustomProperty(property.value, property.pageProperty)">
+              <div i-icon-park-outline:block-nine mr-1 />
+            </template>
             <template v-else-if="typeof property.value === 'object'">
               <div i-icon-park-outline:triangle-round-rectangle mr-1 />
             </template>
@@ -245,6 +251,17 @@ const readingTime = computed(() => {
               <span>{{ formatDurationFromValue(readingTime, property.pageProperty.options.dateFnsLocaleName || lang) }}</span>
             </div>
           </template>
+          <template v-else-if="isDynamicCustomProperty(property.value, property.pageProperty)">
+            <div
+              class="vp-nolebase-page-property"
+              data-page-property="value"
+              data-page-property-type="dynamic"
+              data-page-property-dynamic-type="custom"
+              w-full inline-flex items-center
+            >
+              <span>{{ property.pageProperty.options.getter(vitePressData) }}</span>
+            </div>
+          </template>
           <template v-else-if="typeof property.value === 'object'">
             <div
               class="vp-nolebase-page-property"
diff --git a/packages/vitepress-plugin-page-properties/src/client/components/PagePropertiesEditor.vue b/packages/vitepress-plugin-page-properties/src/client/components/PagePropertiesEditor.vue
index 602ebc54..d2a76b66 100644
--- a/packages/vitepress-plugin-page-properties/src/client/components/PagePropertiesEditor.vue
+++ b/packages/vitepress-plugin-page-properties/src/client/components/PagePropertiesEditor.vue
@@ -6,6 +6,7 @@ import { NuTag } from '@nolebase/ui'
 import { InjectionKey } from '../constants'
 import {
   isDatetimeProperty,
+  isDynamicCustomProperty,
   isDynamicReadingTimeProperty,
   isDynamicWordsCountProperty,
   isLinkProperty,
@@ -18,11 +19,13 @@ import { useI18n } from '../composables/i18n'
 import { usePageProperties } from '../composables/data'
 import { formatDurationFromValue } from '../utils'
 
+import type { Property } from '../types'
 import ProgressBar from './ProgressBar.vue'
 import Datetime from './Datetime.vue'
 
 const options = inject(InjectionKey, {})
-const { lang, frontmatter } = useData()
+const vitePressData = useData()
+const { lang, frontmatter } = vitePressData
 const { t } = useI18n()
 const rawPath = useRawPath()
 const pagePropertiesData = usePageProperties()
@@ -172,6 +175,9 @@ const readingTime = computed(() => {
             <template v-else-if="isDynamicReadingTimeProperty(property.value, property.pageProperty)">
               <div i-icon-park-outline:timer mr-1 />
             </template>
+            <template v-else-if="isDynamicCustomProperty(property.value, property.pageProperty)">
+              <div i-icon-park-outline:block-nine mr-1 />
+            </template>
             <template v-else-if="typeof property.value === 'object'">
               <div i-icon-park-outline:triangle-round-rectangle mr-1 />
             </template>
@@ -269,6 +275,17 @@ const readingTime = computed(() => {
               <span>{{ formatDurationFromValue(readingTime, property.pageProperty.options.dateFnsLocaleName || lang) }}</span>
             </div>
           </template>
+          <template v-else-if="isDynamicCustomProperty(property.value, property.pageProperty)">
+            <div
+              class="vp-nolebase-page-property"
+              data-page-property="value"
+              data-page-property-type="dynamic"
+              data-page-property-dynamic-type="custom"
+              w-full inline-flex items-center
+            >
+              <span>{{ property.pageProperty.options.getter(vitePressData) }}</span>
+            </div>
+          </template>
           <template v-else-if="typeof property.value === 'object'">
             <div
               class="vp-nolebase-page-property"
diff --git a/packages/vitepress-plugin-page-properties/src/client/composables/propertyType.ts b/packages/vitepress-plugin-page-properties/src/client/composables/propertyType.ts
index aae9ab50..50273574 100644
--- a/packages/vitepress-plugin-page-properties/src/client/composables/propertyType.ts
+++ b/packages/vitepress-plugin-page-properties/src/client/composables/propertyType.ts
@@ -1,6 +1,9 @@
 import type {
   DatetimeProperty,
+  DynamicCustomProperty,
   DynamicProperty,
+  DynamicReadingTimeProperty,
+  DynamicWordsCountProperty,
   LinkProperty,
   PlainProperty,
   ProgressProperty,
@@ -53,16 +56,23 @@ export function isLinkProperty(_?: any, property?: Property<PropertyKey> | null)
   return false
 }
 
-export function isDynamicWordsCountProperty(_?: any, property?: Property<PropertyKey> | null): property is DynamicProperty<PropertyKey> | null {
+export function isDynamicWordsCountProperty(_?: any, property?: Property<PropertyKey> | null): property is DynamicProperty<PropertyKey, DynamicWordsCountProperty> | null {
   if (property && property.type && property.type === 'dynamic' && property.options && property.options.type === 'wordsCount')
     return true
 
   return false
 }
 
-export function isDynamicReadingTimeProperty(_?: any, property?: Property<PropertyKey> | null): property is DynamicProperty<PropertyKey> | null {
+export function isDynamicReadingTimeProperty(_?: any, property?: Property<PropertyKey> | null): property is DynamicProperty<PropertyKey, DynamicReadingTimeProperty> | null {
   if (property && property.type && property.type === 'dynamic' && property.options && property.options.type === 'readingTime')
     return true
 
   return false
 }
+
+export function isDynamicCustomProperty(_?: any, property?: Property<PropertyKey> | null): property is DynamicProperty<PropertyKey, DynamicCustomProperty> | null {
+  if (property && property.type && property.type === 'dynamic' && property.options && property.options.type === 'custom')
+    return true
+
+  return false
+}
diff --git a/packages/vitepress-plugin-page-properties/src/client/types.ts b/packages/vitepress-plugin-page-properties/src/client/types.ts
index 11da60e7..b51c3359 100644
--- a/packages/vitepress-plugin-page-properties/src/client/types.ts
+++ b/packages/vitepress-plugin-page-properties/src/client/types.ts
@@ -1,3 +1,5 @@
+import type { VitePressData } from 'vitepress'
+
 export interface TagsProperty<K extends PropertyKey> {
   type: 'tags'
   key: K
@@ -36,15 +38,18 @@ export interface LinkProperty<K extends PropertyKey> {
   omitEmpty?: boolean
 }
 
-export interface DynamicProperty<K extends PropertyKey> {
+export interface DynamicProperty<K extends PropertyKey, OP extends DynamicPropertyOptions = DynamicPropertyOptions> {
   type: 'dynamic'
   key: K | string
   title: string
-  options:
-    DynamicWordsCountProperty |
-    DynamicReadingTimeProperty
+  options: OP
 }
 
+export type DynamicPropertyOptions =
+  | DynamicWordsCountProperty
+  | DynamicReadingTimeProperty
+  | DynamicCustomProperty
+
 export interface DynamicWordsCountProperty {
   type: 'wordsCount'
 }
@@ -54,13 +59,18 @@ export interface DynamicReadingTimeProperty {
   dateFnsLocaleName?: string
 }
 
+export interface DynamicCustomProperty {
+  type: 'custom'
+  getter: (data: VitePressData) => string | Promise<string>
+}
+
 export type Property<K extends PropertyKey> =
-  TagsProperty<K> |
-  PlainProperty<K> |
-  DatetimeProperty<K> |
-  ProgressProperty<K> |
-  LinkProperty<K> |
-  DynamicProperty<K>
+  | TagsProperty<K>
+  | PlainProperty<K>
+  | DatetimeProperty<K>
+  | ProgressProperty<K>
+  | LinkProperty<K>
+  | DynamicProperty<K>
 
 export type PropertyType = Property<PropertyKey>['type']
 export type DynamicPropertyType = DynamicProperty<PropertyKey>['options']['type']
diff --git a/packages/vitepress-plugin-page-properties/src/client/virtual.d.ts b/packages/vitepress-plugin-page-properties/src/client/virtual.d.ts
index 964b9191..3b6135eb 100644
--- a/packages/vitepress-plugin-page-properties/src/client/virtual.d.ts
+++ b/packages/vitepress-plugin-page-properties/src/client/virtual.d.ts
@@ -1,70 +1,3 @@
-interface TagsProperty<K extends PropertyKey> {
-  type: 'tags'
-  key: K
-  title: string
-  omitEmpty?: boolean
-}
-
-interface PlainProperty<K extends PropertyKey> {
-  type: 'plain'
-  key: K
-  title: string
-  omitEmpty?: boolean
-}
-
-interface DatetimeProperty<K extends PropertyKey> {
-  type: 'datetime'
-  key: K
-  title: string
-  formatAsFrom?: boolean
-  dateFnsLocaleName?: string
-  format?: string
-  omitEmpty?: boolean
-}
-
-interface ProgressProperty<K extends PropertyKey> {
-  type: 'progress'
-  key: K
-  title: string
-  omitEmpty?: boolean
-}
-
-interface LinkProperty<K extends PropertyKey> {
-  type: 'link'
-  key: K
-  title: string
-  omitEmpty?: boolean
-}
-
-interface DynamicProperty<K extends PropertyKey> {
-  type: 'dynamic'
-  key: K | string
-  title: string
-  options:
-    DynamicWordsCountProperty |
-    DynamicReadingTimeProperty
-}
-
-interface DynamicWordsCountProperty {
-  type: 'wordsCount'
-}
-
-interface DynamicReadingTimeProperty {
-  type: 'readingTime'
-  dateFnsLocaleName?: string
-}
-
-type Property<K extends PropertyKey> =
-  TagsProperty<K> |
-  PlainProperty<K> |
-  DatetimeProperty<K> |
-  ProgressProperty<K> |
-  LinkProperty<K> |
-  DynamicProperty<K>
-
-type PropertyType = Property<PropertyKey>['type']
-type DynamicPropertyType = DynamicProperty<PropertyKey>['options']['type']
-
 declare module 'virtual:nolebase-page-properties' {
   const pagePropertiesData: Record<string, {
     wordsCount: number