vitepress-plugin-announcement 0.1.2 → 0.1.4

package/README.md

@@ -104,6 +104,7 @@ AnnouncementPlugin({
 ```
 
 ### 修改样式
+行内样式
 ```js
 AnnouncementPlugin({
   title: '公告',
@@ -119,12 +120,50 @@ AnnouncementPlugin({
 })
 ```
 
+内部样式表
+```js
+AnnouncementPlugin({
+  style: `.theme-blog-popover a {
+      color: var(--vp-c-brand-2);
+   }
+  `
+})
+```
+### markdown
+`content`,`title` 字段支持基础 markdown 语法
+* `#` 标题
+* `[链接](url)` 链接
+* `**strong**` 加粗
+* `*italic*` 斜体
+
+```js
+AnnouncementPlugin({
+  title: '公告',
+  body: [
+    {
+      type: 'text',
+      content: '**加粗的内容 *斜体[链接](url)***'
+    },
+  ]
+})
+```
+
 ## 完整配置
 ```ts
 import type { Ref } from 'vue'
 import type { Route } from 'vitepress'
 
 export interface AnnouncementOptions {
+  /**
+   * 自定义样式类名
+   * @example
+   * ```css
+   * .theme-blog-popover a {
+   *    color: var(--vp-c-brand-2);
+   * }
+   * ```
+   */
+  style?: string
   /**
    * 公告标题
    */
@@ -188,6 +227,11 @@ export interface AnnouncementOptions {
    * @param to 切换到的目标路由
    */
   onRouteChanged?: (to: Route, show: Ref<boolean>) => void
+
+  /**
+   * 国际化
+   */
+  locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>
 }
 
 export declare namespace Announcement {

package/dist/components/Announcement.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, h, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vitepress'
+import { computed, h, ref, watch } from 'vue'
+import { useData, useRoute, useRouter } from 'vitepress'
 import type { Announcement, AnnouncementOptions } from 'vitepress-plugin-announcement'
 
 // @ts-expect-error
@@ -9,26 +9,28 @@ import AnnouncementButton from './AnnouncementButton.vue'
 import AnnouncementIcon from './AnnouncementIcon.vue'
 import { inBrowser, parseStringStyle, useDebounceFn, useWindowSize } from './util'
 
-const popoverProps: AnnouncementOptions = announcementOptions
+const { localeIndex } = useData()
 
-const show = ref((popoverProps?.duration ?? 0) >= 0)
+const popoverProps = computed<AnnouncementOptions>(() => ({ ...announcementOptions, ...announcementOptions?.locales?.[localeIndex.value] }))
+
+const show = ref((popoverProps.value?.duration ?? 0) >= 0)
 
 const bodyContent = computed(() => {
-  return popoverProps?.body || []
+  return popoverProps.value?.body || []
 })
 
 const footerContent = computed(() => {
-  return popoverProps?.footer || []
+  return popoverProps.value?.footer || []
 })
-const storageKey = 'vitepress-plugin-announcement'
-const closeFlag = `${storageKey}-close`
+const storageKey = computed(() => `vitepress-plugin-announcement-${localeIndex.value}`)
+const closeFlag = computed(() => `${storageKey.value}-close`)
 
 // 移动端最小化
 const { width } = useWindowSize()
 const router = useRouter()
 const route = useRoute()
-onMounted(() => {
-  if (!popoverProps?.title) {
+watch(popoverProps, () => {
+  if (!popoverProps.value?.title) {
     return
   }
 
@@ -37,53 +39,70 @@ onMounted(() => {
   }
 
   // 取旧值
-  const oldValue = localStorage.getItem(storageKey)
-  const newValue = JSON.stringify(popoverProps)
-  localStorage.setItem(storageKey, newValue)
+  const oldValue = localStorage.getItem(storageKey.value)
+  const newValue = JSON.stringify(popoverProps.value)
+  localStorage.setItem(storageKey.value, newValue)
 
   // 移动端最小化
-  if (width.value < 768 && popoverProps?.mobileMinify) {
+  if (width.value < 768 && popoverProps.value?.mobileMinify) {
     show.value = false
     return
   }
 
   // >= 0 每次都展示，区别是否自动消失
-  if (Number(popoverProps?.duration ?? '') >= 0) {
+  if (Number(popoverProps.value?.duration ?? '') >= 0) {
     show.value = true
-    if (popoverProps?.duration) {
+    if (popoverProps.value?.duration) {
       setTimeout(() => {
         show.value = false
-      }, popoverProps?.duration)
+      }, popoverProps.value?.duration)
     }
     return
   }
 
-  if (oldValue !== newValue && popoverProps?.duration === -1) {
+  if (oldValue !== newValue && popoverProps.value?.duration === -1) {
     // 当做新值处理
     show.value = true
-    localStorage.removeItem(closeFlag)
+    localStorage.removeItem(closeFlag.value)
     return
   }
 
   // 新旧相等，判断是否点击过close，没点击关闭依然展示
-  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+  if (oldValue === newValue && popoverProps.value?.duration === -1 && !localStorage.getItem(closeFlag.value)) {
     show.value = true
   }
-})
+}, { immediate: true })
 
 const onAfterRouteChanged = useDebounceFn(() => {
-  popoverProps?.onRouteChanged?.(route, show)
+  popoverProps.value?.onRouteChanged?.(route, show)
 }, 10)
 
 watch(route, onAfterRouteChanged, { immediate: true })
 
 function handleClose() {
   show.value = false
-  if (popoverProps?.duration === -1) {
-    localStorage.setItem(closeFlag, `${+new Date()}`)
+  if (popoverProps.value?.duration === -1) {
+    localStorage.setItem(closeFlag.value, `${+new Date()}`)
   }
 }
 
+function parseMarkdownToHtml(markdown: string): string {
+  const rules = [
+    { regex: /###### (.*$)/gim, replacement: '<h6>$1</h6>' },
+    { regex: /##### (.*$)/gim, replacement: '<h5>$1</h5>' },
+    { regex: /#### (.*$)/gim, replacement: '<h4>$1</h4>' },
+    { regex: /### (.*$)/gim, replacement: '<h3>$1</h3>' },
+    { regex: /## (.*$)/gim, replacement: '<h2>$1</h2>' },
+    { regex: /# (.*$)/gim, replacement: '<h1>$1</h1>' },
+    { regex: /\*\*(.*)\*\*/gim, replacement: '<b>$1</b>' },
+    { regex: /\*(.*)\*/gim, replacement: '<i>$1</i>' },
+    { regex: /\[(.*?)\]\((.*?)\)/gim, replacement: '<a href="$2">$1</a>' },
+    { regex: /\n$/gim, replacement: '<br />' },
+  ]
+
+  return rules.reduce((acc, rule) => acc.replace(rule.regex, rule.replacement), markdown)
+}
+
 function PopoverValue(props: { key: number; item: Announcement.Value },
   { slots }: any) {
   const { key, item } = props
@@ -91,18 +110,18 @@ function PopoverValue(props: { key: number; item: Announcement.Value },
     return h(
       'h4',
       {
-        style: parseStringStyle(item.style || '')
+        style: parseStringStyle(item.style || ''),
+        innerHTML: parseMarkdownToHtml(item.content),
       },
-      item.content
     )
   }
   if (item.type === 'text') {
     return h(
       'p',
       {
-        style: parseStringStyle(item.style || '')
+        style: parseStringStyle(item.style || ''),
+        innerHTML: parseMarkdownToHtml(item.content),
       },
-      item.content
     )
   }
   if (item.type === 'image') {
@@ -140,12 +159,15 @@ function PopoverValue(props: { key: number; item: Announcement.Value },
 }
 
 const showReopen = computed(() => {
-  return !show.value && (popoverProps?.reopen ?? true) && !!popoverProps.title
+  return !show.value && (popoverProps.value?.reopen ?? true) && !!popoverProps.value.title
 })
 </script>
 
 <template>
   <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
+    <component is="style" v-if="popoverProps.style">
+      {{ popoverProps.style }}
+    </component>
     <div class="header">
       <div class="title-wrapper">
         <AnnouncementIcon size="20px" :icon="popoverProps.icon">

package/dist/index.d.mts

@@ -2,6 +2,16 @@ import { Ref } from 'vue';
 import { Route } from 'vitepress';
 
 interface AnnouncementOptions {
+    /**
+     * 自定义样式类名
+     * @example
+     * ```css
+     * .theme-blog-popover a {
+     *    color: var(--vp-c-brand-2);
+     * }
+     * ```
+     */
+    style?: string;
     /**
      * 公告标题
      */
@@ -57,15 +67,25 @@ interface AnnouncementOptions {
      * @param to 切换到的目标路由
      */
     onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+    /**
+     * 国际化
+     */
+    locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>;
 }
 declare namespace Announcement {
     interface Title {
         type: 'title';
+        /**
+         * 支持 markdown 和 html
+         */
         content: string;
         style?: string;
     }
     interface Text {
         type: 'text';
+        /**
+         * 支持 markdown 和 html
+         */
         content: string;
         style?: string;
     }

package/dist/index.d.ts

@@ -2,6 +2,16 @@ import { Ref } from 'vue';
 import { Route } from 'vitepress';
 
 interface AnnouncementOptions {
+    /**
+     * 自定义样式类名
+     * @example
+     * ```css
+     * .theme-blog-popover a {
+     *    color: var(--vp-c-brand-2);
+     * }
+     * ```
+     */
+    style?: string;
     /**
      * 公告标题
      */
@@ -57,15 +67,25 @@ interface AnnouncementOptions {
      * @param to 切换到的目标路由
      */
     onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+    /**
+     * 国际化
+     */
+    locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>;
 }
 declare namespace Announcement {
     interface Title {
         type: 'title';
+        /**
+         * 支持 markdown 和 html
+         */
         content: string;
         style?: string;
     }
     interface Text {
         type: 'text';
+        /**
+         * 支持 markdown 和 html
+         */
         content: string;
         style?: string;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-announcement",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "vitepress plugin, Announcement, 公告窗口",
   "author": "sugar",
   "license": "MIT",
@@ -43,8 +43,8 @@
     "tinyglobby": "^0.2.6",
     "typescript": "^5.5.4",
     "vite": "^5",
-    "vitepress": "^1.3.4",
-    "vue": "^3.4.26"
+    "vitepress": "^1.4.1",
+    "vue": "^3.5.12"
   },
   "scripts": {
     "dev": "pnpm run /^dev:.*/",