vitepress-plugin-announcement 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +39 -0
  2. package/dist/components/Announcement.vue +24 -4
  3. package/dist/index.d.mts +16 -0
  4. package/dist/index.d.ts +16 -0
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -104,6 +104,7 @@ AnnouncementPlugin({
104
104
  ```
105
105
 
106
106
  ### 修改样式
107
+ 行内样式
107
108
  ```js
108
109
  AnnouncementPlugin({
109
110
  title: '公告',
@@ -119,12 +120,50 @@ AnnouncementPlugin({
119
120
  })
120
121
  ```
121
122
 
123
+ 内部样式表
124
+ ```js
125
+ AnnouncementPlugin({
126
+ style: `.theme-blog-popover a {
127
+ color: var(--vp-c-brand-2);
128
+ }
129
+ `
130
+ })
131
+ ```
132
+ ### markdown
133
+ `content`,`title` 字段支持基础 markdown 语法
134
+ * `#` 标题
135
+ * `[链接](url)` 链接
136
+ * `**strong**` 加粗
137
+ * `*italic*` 斜体
138
+
139
+ ```js
140
+ AnnouncementPlugin({
141
+ title: '公告',
142
+ body: [
143
+ {
144
+ type: 'text',
145
+ content: '**加粗的内容 *斜体[链接](url)***'
146
+ },
147
+ ]
148
+ })
149
+ ```
150
+
122
151
  ## 完整配置
123
152
  ```ts
124
153
  import type { Ref } from 'vue'
125
154
  import type { Route } from 'vitepress'
126
155
 
127
156
  export interface AnnouncementOptions {
157
+ /**
158
+ * 自定义样式类名
159
+ * @example
160
+ * ```css
161
+ * .theme-blog-popover a {
162
+ * color: var(--vp-c-brand-2);
163
+ * }
164
+ * ```
165
+ */
166
+ style?: string
128
167
  /**
129
168
  * 公告标题
130
169
  */
package/dist/components/Announcement.vue CHANGED
@@ -86,6 +86,23 @@ function handleClose() {
86
86
  }
87
87
  }
88
88
 
89
+ function parseMarkdownToHtml(markdown: string): string {
90
+ const rules = [
91
+ { regex: /###### (.*$)/gim, replacement: '<h6>$1</h6>' },
92
+ { regex: /##### (.*$)/gim, replacement: '<h5>$1</h5>' },
93
+ { regex: /#### (.*$)/gim, replacement: '<h4>$1</h4>' },
94
+ { regex: /### (.*$)/gim, replacement: '<h3>$1</h3>' },
95
+ { regex: /## (.*$)/gim, replacement: '<h2>$1</h2>' },
96
+ { regex: /# (.*$)/gim, replacement: '<h1>$1</h1>' },
97
+ { regex: /\*\*(.*)\*\*/gim, replacement: '<b>$1</b>' },
98
+ { regex: /\*(.*)\*/gim, replacement: '<i>$1</i>' },
99
+ { regex: /\[(.*?)\]\((.*?)\)/gim, replacement: '<a href="$2">$1</a>' },
100
+ { regex: /\n$/gim, replacement: '<br />' },
101
+ ]
102
+
103
+ return rules.reduce((acc, rule) => acc.replace(rule.regex, rule.replacement), markdown)
104
+ }
105
+
89
106
  function PopoverValue(props: { key: number; item: Announcement.Value },
90
107
  { slots }: any) {
91
108
  const { key, item } = props
@@ -93,18 +110,18 @@ function PopoverValue(props: { key: number; item: Announcement.Value },
93
110
  return h(
94
111
  'h4',
95
112
  {
96
- style: parseStringStyle(item.style || '')
113
+ style: parseStringStyle(item.style || ''),
114
+ innerHTML: parseMarkdownToHtml(item.content),
97
115
  },
98
- item.content
99
116
  )
100
117
  }
101
118
  if (item.type === 'text') {
102
119
  return h(
103
120
  'p',
104
121
  {
105
- style: parseStringStyle(item.style || '')
122
+ style: parseStringStyle(item.style || ''),
123
+ innerHTML: parseMarkdownToHtml(item.content),
106
124
  },
107
- item.content
108
125
  )
109
126
  }
110
127
  if (item.type === 'image') {
@@ -148,6 +165,9 @@ const showReopen = computed(() => {
148
165
 
149
166
  <template>
150
167
  <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
168
+ <component is="style" v-if="popoverProps.style">
169
+ {{ popoverProps.style }}
170
+ </component>
151
171
  <div class="header">
152
172
  <div class="title-wrapper">
153
173
  <AnnouncementIcon size="20px" :icon="popoverProps.icon">
package/dist/index.d.mts CHANGED
@@ -2,6 +2,16 @@ import { Ref } from 'vue';
2
2
  import { Route } from 'vitepress';
3
3
 
4
4
  interface AnnouncementOptions {
5
+ /**
6
+ * 自定义样式类名
7
+ * @example
8
+ * ```css
9
+ * .theme-blog-popover a {
10
+ * color: var(--vp-c-brand-2);
11
+ * }
12
+ * ```
13
+ */
14
+ style?: string;
5
15
  /**
6
16
  * 公告标题
7
17
  */
@@ -65,11 +75,17 @@ interface AnnouncementOptions {
65
75
  declare namespace Announcement {
66
76
  interface Title {
67
77
  type: 'title';
78
+ /**
79
+ * 支持 markdown 和 html
80
+ */
68
81
  content: string;
69
82
  style?: string;
70
83
  }
71
84
  interface Text {
72
85
  type: 'text';
86
+ /**
87
+ * 支持 markdown 和 html
88
+ */
73
89
  content: string;
74
90
  style?: string;
75
91
  }
package/dist/index.d.ts CHANGED
@@ -2,6 +2,16 @@ import { Ref } from 'vue';
2
2
  import { Route } from 'vitepress';
3
3
 
4
4
  interface AnnouncementOptions {
5
+ /**
6
+ * 自定义样式类名
7
+ * @example
8
+ * ```css
9
+ * .theme-blog-popover a {
10
+ * color: var(--vp-c-brand-2);
11
+ * }
12
+ * ```
13
+ */
14
+ style?: string;
5
15
  /**
6
16
  * 公告标题
7
17
  */
@@ -65,11 +75,17 @@ interface AnnouncementOptions {
65
75
  declare namespace Announcement {
66
76
  interface Title {
67
77
  type: 'title';
78
+ /**
79
+ * 支持 markdown 和 html
80
+ */
68
81
  content: string;
69
82
  style?: string;
70
83
  }
71
84
  interface Text {
72
85
  type: 'text';
86
+ /**
87
+ * 支持 markdown 和 html
88
+ */
73
89
  content: string;
74
90
  style?: string;
75
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vitepress-plugin-announcement",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "vitepress plugin, Announcement, 公告窗口",
5
5
  "author": "sugar",
6
6
  "license": "MIT",
@@ -44,7 +44,7 @@
44
44
  "typescript": "^5.5.4",
45
45
  "vite": "^5",
46
46
  "vitepress": "^1.4.1",
47
- "vue": "^3.4.26"
47
+ "vue": "^3.5.12"
48
48
  },
49
49
  "scripts": {
50
50
  "dev": "pnpm run /^dev:.*/",