fix: add valaxy-addon-components

demo/yun/components/YunFooter.vue

@@ -10,5 +10,11 @@ useScriptTag('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
     <!-- 自定义页脚内容 -->
     <div>本站总访问量 <span id="busuanzi_value_site_pv" /> 次</div>
     <div>本站访客数 <span id="busuanzi_value_site_uv" /> 人次</div>
+
+    <VCLiveTime start-time="2022-01-01">
+      <template #live-time-before>
+        <span>本站已运行</span>
+      </template>
+    </VCLiveTime>
   </YunFooter>
 </template>

demo/yun/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "valaxy": "link:../../packages/valaxy",
     "valaxy-addon-algolia": "link:../../packages/valaxy-addon-algolia",
+    "valaxy-addon-components": "link:../../packages/valaxy-addon-components",
     "valaxy-theme-yun": "link:../../packages/valaxy-theme-yun"
   },
   "devDependencies": {

demo/yun/valaxy.config.ts

@@ -4,6 +4,7 @@ import type { ThemeConfig } from 'valaxy-theme-yun'
 import Inspect from 'vite-plugin-inspect'
 import { addonAlgolia } from 'valaxy-addon-algolia'
 import { addonWaline } from 'valaxy-addon-waline'
+import { addonComponents } from 'valaxy-addon-components'
 // import site from './site.config'
 
 const safelist = [
@@ -213,6 +214,7 @@ export default defineConfig<ThemeConfig>({
       apiKey: '805f2584a8866388aa1631ff0348ddae',
       indexName: 'valaxy',
     }),
+    addonComponents(),
     addonWaline({
       serverURL: 'https://waline.yunyoujun.cn',
       pageview: true,

docs/pages/guide/custom/components.md

@@ -102,3 +102,9 @@ const isPost = useLayout('post')
 ```
 
 原理即覆盖组件，您还可以自由覆盖主题的任意其他组件。
+
+### 其他
+
+[valaxy-addon-components](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components) 也是一个充分利用该机制的插件，你也可以参考它的实现方式，以 Valaxy 插件的形式自由发布你的自定义组件。
+
+> 由于发布的是原生的 Vue 组件，所以打包时它将会完全是**按需**的，无需您额外担忧。

package.json

@@ -56,6 +56,7 @@
     "typescript": "^4.9.4",
     "valaxy": "workspace:*",
     "valaxy-addon-algolia": "workspace:*",
+    "valaxy-addon-components": "workspace:*",
     "valaxy-addon-waline": "workspace:*",
     "valaxy-theme-press": "workspace:*",
     "valaxy-theme-yun": "workspace:*",

packages/valaxy-addon-components/README.md

@@ -0,0 +1,63 @@
+# valaxy-addon-waline
+
+[![NPM version](https://img.shields.io/npm/v/valaxy-addon-waline?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-waline)
+
+TODO: English Docs
+
+valaxy-addon-components 是可以提供通用 Vue 组件 的一个 Valaxy 插件。
+
+主题开发者可以通过将其作为依赖使用，以快速使用内置组件。
+
+## 组件列表
+
+> 命名空间以 VC 开头。
+
+- `VCLiveTime`: 生存时间
+
+## 如何使用
+
+### 安装依赖
+
+```bash
+npm i valaxy-addon-components
+```
+
+### 加载插件
+
+```ts
+import { defineValaxyConfig } from 'valaxy'
+import { addonComponents } from 'valaxy-addon-components'
+
+export default defineValaxyConfig({
+  addons: [
+    addonComponents(),
+  ],
+})
+```
+
+### 在任意地方使用并设置你的参数
+
+> 大部分人可能希望挂在主题页脚
+> 这里以主题 `valaxy-theme-yun` 为例：
+
+- `start-time`: 代表站点成立开始计时的时间
+
+```vue
+<!-- 新建 components/YunFooter.vue -->
+<script lang="ts" setup>
+import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
+</script>
+
+<template>
+  <YunFooter>
+    <VCLiveTime start-time="2022-01-01">
+      <template #live-time-before>
+        <span>本站已运行</span>
+      </template>
+      <template #live-time-after>
+        <span>后缀</span>
+      </template>
+    </VCLiveTime>
+  </YunFooter>
+</template>
+```

packages/valaxy-addon-components/components/VCLiveTime.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  startTime: string
+}>()
+
+const { t } = useI18n()
+
+const passDay = ref(0)
+const passHour = ref(0)
+const passMinute = ref(0)
+const passSecond = ref(0)
+
+/**
+ * get live time
+ */
+const siteLiveTime = () => {
+  const start = new Date(props.startTime)
+  const now = new Date()
+  const timeDiff = (now.getTime() - start.getTime())
+  const msPerMinute = 60 * 1000
+  const msPerHour = 60 * msPerMinute
+  const msPerDay = 24 * msPerHour
+  passDay.value = Math.floor(timeDiff / msPerDay)
+  passHour.value = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000)
+  passMinute.value = Math.floor((timeDiff % msPerHour) / 60 / 1000)
+  passSecond.value = Math.floor((timeDiff % msPerMinute) / 1000)
+}
+
+onMounted(() => {
+  setInterval(siteLiveTime, 1000)
+})
+</script>
+
+<template>
+  <div class="vc-site-live-time">
+    <slot name="live-time-before" />
+    <span mx-1>{{ t('time.day', passDay) }}</span>
+    <span mx-1>{{ t('time.hour', passHour) }}</span>
+    <span mx-1>{{ t('time.minute', passMinute) }}</span>
+    <span mx-1>{{ t('time.second', passSecond) }}</span>
+    <slot name="live-time-after" />
+  </div>
+</template>

packages/valaxy-addon-components/index.ts

@@ -0,0 +1 @@
+export * from './node'

packages/valaxy-addon-components/node/index.ts

@@ -0,0 +1,8 @@
+import { defineValaxyAddon } from 'valaxy'
+import pkg from '../package.json'
+
+export const addonComponents = defineValaxyAddon(options => ({
+  name: pkg.name,
+  enable: true,
+  options,
+}))

packages/valaxy-addon-components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "valaxy-addon-components",
+  "version": "0.0.1",
+  "description": "Common Components for Valaxy",
+  "repository": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components",
+  "keywords": [
+    "valaxy",
+    "addon",
+    "components"
+  ],
+  "main": "index.ts"
+}

packages/valaxy/client/locales/en.yml

@@ -103,7 +103,7 @@ wordcount:
   time_total: Total reading time
 
 time:
-  day: 1 Day | %d Days
-  hour: 1 Hour | %d Hours
-  minute: 1 Minute | %d Minutes
-  second: 1 Second | %d Seconds
+  day: 1 Day | {count} Days
+  hour: 1 Hour | {count} Hours
+  minute: 1 Minute | {count} Minutes
+  second: 1 Second | {count} Seconds

packages/valaxy/client/locales/zh-CN.yml

@@ -102,7 +102,7 @@ wordcount:
   time_total: 站点阅读时长
 
 time:
-  day: 1 天 | %d 天
-  hour: 1 小时 | %d 小时
-  minute: 1 分 | %d 分
-  second: 1 秒 | %d 秒
+  day: 1 天 | {count} 天
+  hour: 1 小时 | {count} 小时
+  minute: 1 分 | {count} 分
+  second: 1 秒 | {count} 秒

packages/valaxy/node/config/addon.ts

@@ -2,7 +2,9 @@ import type { DefaultThemeConfig, ValaxyAddon } from '../../types'
 import type { ResolvedValaxyOptions } from '../options'
 import type { ValaxyConfig } from '../types'
 
-export function defineValaxyAddon<AddonOptions = {}>(addonFunc: (addonOptions: AddonOptions, valaxyOptions?: ResolvedValaxyOptions) => ValaxyAddon) {
+export function defineValaxyAddon<AddonOptions = {}>(
+  addonFunc: (addonOptions?: AddonOptions, valaxyOptions?: ResolvedValaxyOptions) => ValaxyAddon,
+) {
   return addonFunc
 }
 export const defineAddon = defineValaxyAddon

packages/valaxy/node/markdown/highlight.ts

@@ -59,7 +59,7 @@ const errorLevelProcessor = defineProcessor({
 
 export async function highlight(
   theme: ThemeOptions = 'material-palenight',
-  defaultLang = '',
+  defaultLang = 'txt',
 ): Promise<(str: string, lang: string, attrs: string) => string> {
   const hasSingleTheme = typeof theme === 'string' || 'name' in theme
   const getThemeName = (themeValue: IThemeRegistration) =>
@@ -91,13 +91,15 @@ export async function highlight(
     if (lang) {
       const langLoaded = highlighter.getLoadedLanguages().includes(lang as any)
       if (!langLoaded) {
-        console.warn(
-          c.yellow(
-            `The language '${lang}' is not loaded, falling back to '${
-              defaultLang || 'txt'
-            }' for syntax highlighting.`,
-          ),
-        )
+        if (lang !== defaultLang) {
+          console.warn(
+            c.yellow(
+              `The language '${lang}' is not loaded, falling back to '${
+                defaultLang
+              }' for syntax highlighting.`,
+            ),
+          )
+        }
         lang = defaultLang
       }
     }

pnpm-lock.yaml

@@ -21,6 +21,7 @@ importers:
       typescript: ^4.9.4
       valaxy: workspace:*
       valaxy-addon-algolia: workspace:*
+      valaxy-addon-components: workspace:*
       valaxy-addon-waline: workspace:*
       valaxy-theme-press: workspace:*
       valaxy-theme-yun: workspace:*
@@ -45,6 +46,7 @@ importers:
       typescript: 4.9.4
       valaxy: link:packages/valaxy
       valaxy-addon-algolia: link:packages/valaxy-addon-algolia
+      valaxy-addon-components: link:packages/valaxy-addon-components
       valaxy-addon-waline: link:packages/valaxy-addon-waline
       valaxy-theme-press: link:packages/valaxy-theme-press
       valaxy-theme-yun: link:packages/valaxy-theme-yun
@@ -57,11 +59,13 @@ importers:
       nodemon: ^2.0.20
       valaxy: link:../../packages/valaxy
       valaxy-addon-algolia: link:../../packages/valaxy-addon-algolia
+      valaxy-addon-components: link:../../packages/valaxy-addon-components
       valaxy-theme-yun: link:../../packages/valaxy-theme-yun
       vite-plugin-inspect: ^0.7.14
     dependencies:
       valaxy: link:../../packages/valaxy
       valaxy-addon-algolia: link:../../packages/valaxy-addon-algolia
+      valaxy-addon-components: link:../../packages/valaxy-addon-components
       valaxy-theme-yun: link:../../packages/valaxy-theme-yun
     devDependencies:
       nodemon: 2.0.20
@@ -238,6 +242,9 @@ importers:
       '@docsearch/css': 3.3.2
       '@docsearch/js': 3.3.2
 
+  packages/valaxy-addon-components:
+    specifiers: {}
+
   packages/valaxy-addon-waline:
     specifiers:
       '@waline/client': ^2.14.7