vitepress-plugin-announcement 0.1.3 → 0.1.5

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
   /**
    * 公告标题
    */

package/dist/components/Announcement.vue

@@ -86,6 +86,23 @@ function handleClose() {
   }
 }
 
+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
@@ -93,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') {
@@ -148,6 +165,9 @@ const showReopen = computed(() => {
 
 <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">
@@ -156,7 +176,7 @@ const showReopen = computed(() => {
         <span class="title">{{ popoverProps?.title }}</span>
       </div>
       <AnnouncementIcon class="close-icon" size="20px" :icon="popoverProps?.closeIcon" @click="handleClose">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z" /></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="20" height="20"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z" /></svg>
       </AnnouncementIcon>
     </div>
     <div v-if="bodyContent.length" class="body content">

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;
     /**
      * 公告标题
      */
@@ -65,11 +75,17 @@ interface AnnouncementOptions {
 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;
     /**
      * 公告标题
      */
@@ -65,11 +75,17 @@ interface AnnouncementOptions {
 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.3",
+  "version": "0.1.5",
   "description": "vitepress plugin, Announcement, 公告窗口",
   "author": "sugar",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "typescript": "^5.5.4",
     "vite": "^5",
     "vitepress": "^1.4.1",
-    "vue": "^3.4.26"
+    "vue": "^3.5.12"
   },
   "scripts": {
     "dev": "pnpm run /^dev:.*/",