vitepress-plugin-announcement 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 sugar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,175 @@
+# vitepress-plugin-announcement
+
+[English](https://github.com/ATQQ/sugar-blog/blob/master/packages/vitepress-plugin-announcement/README-en.md) | 简体中文
+
+## 使用
+安装依赖 `pnpm/npm/yarn`
+```sh
+pnpm add vitepress-plugin-announcement
+```
+
+引入插件在 `.vitepress/config.ts` 配置文件中
+
+```ts
+import { defineConfig } from 'vitepress'
+import { AnnouncementPlugin } from 'vitepress-plugin-announcement'
+
+export default defineConfig({
+  vite: {
+    // ↓↓↓↓↓
+    plugins: [
+      AnnouncementPlugin({
+        title: '公告',
+        body: [
+          { type: 'text', content: '下方插入了二维码' },
+          {
+            type: 'image',
+            src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210~fmt.webp'
+          },
+          {
+            type: 'button',
+            content: '作者博客',
+            link: 'https://sugarat.top'
+          },
+        ],
+        footer: [
+          {
+            type: 'text',
+            content: '底部内容'
+          },
+        ],
+      })
+    ]
+    // ↑↑↑↑↑
+  }
+})
+```
+
+## 更多用法
+### 关闭后不再弹出
+*tip：下次配置修改后再展示*
+```js
+AnnouncementPlugin({
+  duration: -1
+})
+```
+
+### 不展示再次打开按钮
+```js
+AnnouncementPlugin({
+  reopen: false
+})
+```
+
+### 引导闪烁
+
+```js
+AnnouncementPlugin({
+  twinkle: true
+})
+```
+
+## 完整配置
+```ts
+import type { Ref } from 'vue'
+import type { Route } from 'vitepress'
+
+export interface AnnouncementOptions {
+  /**
+   * 公告标题
+   */
+  title: string
+  /**
+   * 公告主要内容
+   */
+  body?: Announcement.Value[]
+  /**
+   * 公告底部内容
+   */
+  footer?: Announcement.Value[]
+
+  /**
+   * 是否只在浏览器环境渲染组件
+   * @default false
+   * @doc https://vitepress.dev/guide/ssr-compat#clientonly
+   */
+  clientOnly?: boolean
+
+  /**
+   * 展示时机控制
+   *
+   * -1 只展示1次；>= 0 每次都展示，一定时间后自动消失，0 不自动消失
+   *
+   * 配置发生改变时，会重新触发此规则
+   * @default 0
+   */
+  duration?: number
+
+  /**
+   * 移动端自动最小化
+   * @default false
+   */
+  mobileMinify?: boolean
+
+  /**
+   * 支持重新打开（右上角 icon 悬浮）
+   * @default true
+   */
+  reopen?: boolean
+
+  /**
+   * 是否打开闪烁提示，通常需要和 reopen 搭配使用
+   * @default false
+   */
+  twinkle?: boolean
+
+  /**
+   * 设置展示图标，svg
+   */
+  icon?: string
+
+  /**
+   * 设置关闭图标，svg
+   */
+  closeIcon?: string
+
+  /**
+   * 自定义展示策略
+   * @param to 切换到的目标路由
+   */
+  onRouteChanged?: (to: Route, show: Ref<boolean>) => void
+}
+
+export declare namespace Announcement {
+  export interface Title {
+    type: 'title'
+    content: string
+    style?: string
+  }
+
+  export interface Text {
+    type: 'text'
+    content: string
+    style?: string
+  }
+
+  export interface Image {
+    type: 'image'
+    src: string
+    style?: string
+  }
+
+  export interface Button {
+    type: 'button'
+    link: string
+    content: string
+    style?: string
+    props?: any
+  }
+
+  export type Value = Title | Text | Image | Button
+}
+```
+
+## Thanks
+样式参考了 [reco-1.x 主题](https://github.com/vuepress-reco/vuepress-theme-reco-1.x) 中的 [@vuepress-reco/vuepress-plugin-bulletin-popover](https://github.com/vuepress-reco/vuepress-theme-reco-1.x/tree/master/packages/%40vuepress-reco/vuepress-plugin-bulletin-popover) 插件

package/dist/components/Announcement.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import { computed, h, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vitepress'
+import type { Announcement, AnnouncementOptions } from 'vitepress-plugin-announcement'
+
+// @ts-expect-error
+import announcementOptions from 'virtual:announcement-options'
+import AnnouncementButton from './AnnouncementButton.vue'
+import AnnouncementIcon from './AnnouncementIcon.vue'
+import { inBrowser, parseStringStyle, useDebounceFn, useWindowSize } from './util'
+
+const popoverProps: AnnouncementOptions = announcementOptions
+
+const show = ref((popoverProps?.duration ?? 0) >= 0)
+
+const bodyContent = computed(() => {
+  return popoverProps?.body || []
+})
+
+const footerContent = computed(() => {
+  return popoverProps?.footer || []
+})
+const storageKey = 'vitepress-plugin-announcement'
+const closeFlag = `${storageKey}-close`
+
+// 移动端最小化
+const { width } = useWindowSize()
+const router = useRouter()
+const route = useRoute()
+onMounted(() => {
+  if (!popoverProps?.title) {
+    return
+  }
+
+  if (!inBrowser) {
+    return
+  }
+
+  // 取旧值
+  const oldValue = localStorage.getItem(storageKey)
+  const newValue = JSON.stringify(popoverProps)
+  localStorage.setItem(storageKey, newValue)
+
+  // 移动端最小化
+  if (width.value < 768 && popoverProps?.mobileMinify) {
+    show.value = false
+    return
+  }
+
+  // >= 0 每次都展示，区别是否自动消失
+  if (Number(popoverProps?.duration ?? '') >= 0) {
+    show.value = true
+    if (popoverProps?.duration) {
+      setTimeout(() => {
+        show.value = false
+      }, popoverProps?.duration)
+    }
+    return
+  }
+
+  if (oldValue !== newValue && popoverProps?.duration === -1) {
+    // 当做新值处理
+    show.value = true
+    localStorage.removeItem(closeFlag)
+    return
+  }
+
+  // 新旧相等，判断是否点击过close，没点击关闭依然展示
+  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+    show.value = true
+  }
+})
+
+const onAfterRouteChanged = useDebounceFn(() => {
+  popoverProps?.onRouteChanged?.(route, show)
+}, 10)
+
+watch(route, onAfterRouteChanged, { immediate: true })
+
+function handleClose() {
+  show.value = false
+  if (popoverProps?.duration === -1) {
+    localStorage.setItem(closeFlag, `${+new Date()}`)
+  }
+}
+
+function PopoverValue(props: { key: number; item: Announcement.Value },
+  { slots }: any) {
+  const { key, item } = props
+  if (item.type === 'title') {
+    return h(
+      'h4',
+      {
+        style: parseStringStyle(item.style || '')
+      },
+      item.content
+    )
+  }
+  if (item.type === 'text') {
+    return h(
+      'p',
+      {
+        style: parseStringStyle(item.style || '')
+      },
+      item.content
+    )
+  }
+  if (item.type === 'image') {
+    return h('img', {
+      src: item.src,
+      style: parseStringStyle(item.style || '')
+    })
+  }
+  if (item.type === 'button') {
+    return h(
+      AnnouncementButton,
+      {
+        type: 'primary',
+        onClick: () => {
+          if (/^\s*http(s)?:\/\//.test(item.link)) {
+            window.open(item.link)
+          }
+          else {
+            router.go(item.link)
+          }
+        },
+        style: parseStringStyle(item.style || ''),
+        ...item.props
+      },
+      slots
+    )
+  }
+  return h(
+    'div',
+    {
+      key
+    },
+    ''
+  )
+}
+
+const showReopen = computed(() => {
+  return !show.value && (popoverProps?.reopen ?? true) && !!popoverProps.title
+})
+</script>
+
+<template>
+  <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
+    <div class="header">
+      <div class="title-wrapper">
+        <AnnouncementIcon size="20px" :icon="popoverProps.icon">
+          <svg t="1716085184855" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
+        </AnnouncementIcon>
+        <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>
+      </AnnouncementIcon>
+    </div>
+    <div v-if="bodyContent.length" class="body content">
+      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+      <hr v-if="footerContent.length">
+    </div>
+    <div class="footer content">
+      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+    </div>
+  </div>
+  <div
+    v-show="showReopen" class="theme-blog-popover-close"
+    :class="{ twinkle: popoverProps?.twinkle }"
+    @click="show = true"
+  >
+    <AnnouncementIcon :icon="popoverProps?.icon">
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
+    </AnnouncementIcon>
+  </div>
+</template>
+
+<style lang="css" scoped>
+@import url(./style.css);
+</style>

package/dist/components/AnnouncementButton.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  type: 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'text' | 'default'
+  onClick?: () => void
+  style?: Record<string, any>
+}>()
+
+const type = computed(() => props.type ?? 'primary')
+</script>
+
+<template>
+  <button class="announcement-button" :class="`announcement-button-${type}`" @click="props.onClick">
+    <span>
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style lang="css" scoped>
+.announcement-button+.announcement-button{
+    margin-left: 12px;
+}
+.announcement-button{
+    --bgc: #409eff;
+    --bc:var(--bgc);
+    --c: #fff;
+}
+.announcement-button {
+    align-items: center;
+    -webkit-appearance: none;
+    background-color: var(--bgc);
+    border: 1px solid #dcdfe6;
+    border-color: var(--bc);
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: var(--c);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: 500;
+    height: 32px;
+    justify-content: center;
+    line-height: 1;
+    outline: none;
+    padding: 8px 15px;
+    text-align: center;
+    transition: .1s;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.announcement-button-primary {
+    --bgc: var(--vp-c-brand-2);
+}
+.announcement-button-success {
+    --bgc: #67c23a;
+}
+.announcement-button-danger {
+    --bgc: #f56c6c;
+}
+.announcement-button-warning {
+    --bgc: #e6a23c;
+}
+.announcement-button-info {
+    --bgc: #909399;
+}
+.announcement-button-text {
+    --bgc: transparent;
+    --bc: transparent;
+    --c: var(--vp-c-brand-2);
+    padding-left: 0;
+    padding-right: 0;
+}
+.announcement-button-default {
+    --bgc: #fff;
+    --bc: #dcdfe6;
+    --c: #606266;
+}
+</style>

package/dist/components/AnnouncementIcon.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  size?: string
+  icon?: string
+}>()
+
+const size = computed(() => props.size && (typeof props.size === 'number' ? `${props.size}px` : props.size))
+</script>
+
+<template>
+  <i v-if="props.icon" class="announcement-icon" :style="{ fontSize: size }" v-html="props.icon" />
+  <i v-else class="announcement-icon" :style="{ fontSize: size }">
+    <slot />
+  </i>
+</template>
+
+<style lang="css" scoped>
+.announcement-icon {
+    --color: inherit;
+    align-items: center;
+    display: inline-flex;
+    height: 1em;
+    justify-content: center;
+    line-height: 1em;
+    position: relative;
+    width: 1em;
+    fill: currentColor;
+    color: var(--color);
+    font-size: inherit;
+}
+</style>

package/dist/components/directives.d.ts

@@ -0,0 +1,3 @@
+export declare const vOuterHtml: {
+    mounted: (el: HTMLElement, binding: any) => void;
+};

package/dist/components/directives.js

@@ -0,0 +1,5 @@
+export const vOuterHtml = {
+    mounted: (el, binding) => {
+        el.outerHTML = binding.value;
+    }
+};

package/dist/components/style.css

@@ -0,0 +1,103 @@
+.theme-blog-popover {
+    width: 258px;
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    z-index: 22;
+    box-sizing: border-box;
+    border: 1px solid var(--vp-c-brand-3);
+    border-radius: 6px;
+    background-color: rgba(var(--bg-gradient-home));
+    box-shadow: var(--box-shadow);
+}
+
+.header {
+    background-color: var(--vp-c-brand-3);
+    color: #fff;
+    padding: 6px 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.header .close-icon {
+    cursor: pointer;
+}
+
+.title-wrapper {
+    display: flex;
+    align-items: center;
+}
+.title-wrapper .title {
+    font-size: 14px;
+    padding-left: 6px;
+}
+
+.body {
+    box-sizing: border-box;
+    padding: 10px 10px 0;
+}
+.body hr {
+    border: none;
+    border-bottom: 1px solid #eaecef;
+}
+
+.footer {
+    box-sizing: border-box;
+    padding: 10px;
+}
+
+.body.content,
+.footer.content {
+    text-align: center;
+}
+.body.content h4,
+.footer.content h4 {
+    text-align: center;
+    font-size: 12px;
+}
+.body.content p,
+.footer.content p {
+    text-align: center;
+    padding: 10px 0;
+    font-size: 14px;
+}
+.body.content img,
+.footer.content img {
+    width: 100%;
+    height: 100px;
+    object-fit: contain;
+    margin: 0 auto;
+}
+
+.theme-blog-popover-close {
+    cursor: pointer;
+    opacity: 0.5;
+    position: fixed;
+    z-index: 22;
+    top: 80px;
+    right: 10px;
+    position: fixed;
+    background-color: var(--vp-c-brand-3);
+    padding: 8px;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+.theme-blog-popover-close.twinkle {
+    animation: twinkle 1s ease-in-out infinite;
+}
+
+@keyframes twinkle {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}

package/dist/components/util.d.ts

@@ -0,0 +1,7 @@
+export declare function parseStringStyle(cssText: string): Record<string, string | number>;
+export declare function useDebounceFn<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: any[]) => void;
+export declare const inBrowser: boolean;
+export declare function useWindowSize(): {
+    width: import("vue").Ref<number, number>;
+    height: import("vue").Ref<number, number>;
+};

package/dist/components/util.js

@@ -0,0 +1,46 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+const listDelimiterRE = /;(?![^(]*\))/g;
+const propertyDelimiterRE = /:([^]+)/;
+const styleCommentRE = /\/\*[^]*?\*\//g;
+export function parseStringStyle(cssText) {
+    const ret = {};
+    cssText.replace(styleCommentRE, '').split(listDelimiterRE).forEach((item) => {
+        if (item) {
+            const tmp = item.split(propertyDelimiterRE);
+            tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
+        }
+    });
+    return ret;
+}
+export function useDebounceFn(fn, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn(...args);
+        }, delay);
+    };
+}
+export const inBrowser = typeof document !== 'undefined';
+export function useWindowSize() {
+    const width = ref(Number.POSITIVE_INFINITY);
+    const height = ref(Number.POSITIVE_INFINITY);
+    const updateSize = useDebounceFn(() => {
+        if (inBrowser) {
+            width.value = window.innerWidth;
+            height.value = window.innerHeight;
+        }
+    }, 100);
+    onMounted(() => {
+        if (inBrowser) {
+            window.addEventListener('resize', updateSize, { passive: true });
+        }
+    });
+    onUnmounted(() => {
+        if (inBrowser) {
+            window.removeEventListener('resize', updateSize);
+        }
+    });
+    updateSize();
+    return { width, height };
+}

package/dist/index.d.mts

@@ -0,0 +1,89 @@
+import { Ref } from 'vue';
+import { Route } from 'vitepress';
+
+interface AnnouncementOptions {
+    /**
+     * 公告标题
+     */
+    title: string;
+    /**
+     * 公告主要内容
+     */
+    body?: Announcement.Value[];
+    /**
+     * 公告底部内容
+     */
+    footer?: Announcement.Value[];
+    /**
+     * 是否只在浏览器环境渲染组件
+     * @default false
+     * @doc https://vitepress.dev/guide/ssr-compat#clientonly
+     */
+    clientOnly?: boolean;
+    /**
+     * 展示时机控制
+     *
+     * -1 只展示1次；>= 0 每次都展示，一定时间后自动消失，0 不自动消失
+     *
+     * 配置发生改变时，会重新触发此规则
+     * @default 0
+     */
+    duration?: number;
+    /**
+     * 移动端自动最小化
+     * @default false
+     */
+    mobileMinify?: boolean;
+    /**
+     * 支持重新打开（右上角 icon 悬浮）
+     * @default true
+     */
+    reopen?: boolean;
+    /**
+     * 是否打开闪烁提示，通常需要和 reopen 搭配使用
+     * @default false
+     */
+    twinkle?: boolean;
+    /**
+     * 设置展示图标，svg
+     */
+    icon?: string;
+    /**
+     * 设置关闭图标，svg
+     */
+    closeIcon?: string;
+    /**
+     * 自定义展示策略
+     * @param to 切换到的目标路由
+     */
+    onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+}
+declare namespace Announcement {
+    interface Title {
+        type: 'title';
+        content: string;
+        style?: string;
+    }
+    interface Text {
+        type: 'text';
+        content: string;
+        style?: string;
+    }
+    interface Image {
+        type: 'image';
+        src: string;
+        style?: string;
+    }
+    interface Button {
+        type: 'button';
+        link: string;
+        content: string;
+        style?: string;
+        props?: any;
+    }
+    type Value = Title | Text | Image | Button;
+}
+
+declare function AnnouncementPlugin(options: AnnouncementOptions): any;
+
+export { Announcement, AnnouncementOptions, AnnouncementPlugin };

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+import { Ref } from 'vue';
+import { Route } from 'vitepress';
+
+interface AnnouncementOptions {
+    /**
+     * 公告标题
+     */
+    title: string;
+    /**
+     * 公告主要内容
+     */
+    body?: Announcement.Value[];
+    /**
+     * 公告底部内容
+     */
+    footer?: Announcement.Value[];
+    /**
+     * 是否只在浏览器环境渲染组件
+     * @default false
+     * @doc https://vitepress.dev/guide/ssr-compat#clientonly
+     */
+    clientOnly?: boolean;
+    /**
+     * 展示时机控制
+     *
+     * -1 只展示1次；>= 0 每次都展示，一定时间后自动消失，0 不自动消失
+     *
+     * 配置发生改变时，会重新触发此规则
+     * @default 0
+     */
+    duration?: number;
+    /**
+     * 移动端自动最小化
+     * @default false
+     */
+    mobileMinify?: boolean;
+    /**
+     * 支持重新打开（右上角 icon 悬浮）
+     * @default true
+     */
+    reopen?: boolean;
+    /**
+     * 是否打开闪烁提示，通常需要和 reopen 搭配使用
+     * @default false
+     */
+    twinkle?: boolean;
+    /**
+     * 设置展示图标，svg
+     */
+    icon?: string;
+    /**
+     * 设置关闭图标，svg
+     */
+    closeIcon?: string;
+    /**
+     * 自定义展示策略
+     * @param to 切换到的目标路由
+     */
+    onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+}
+declare namespace Announcement {
+    interface Title {
+        type: 'title';
+        content: string;
+        style?: string;
+    }
+    interface Text {
+        type: 'text';
+        content: string;
+        style?: string;
+    }
+    interface Image {
+        type: 'image';
+        src: string;
+        style?: string;
+    }
+    interface Button {
+        type: 'button';
+        link: string;
+        content: string;
+        style?: string;
+        props?: any;
+    }
+    type Value = Title | Text | Image | Button;
+}
+
+declare function AnnouncementPlugin(options: AnnouncementOptions): any;
+
+export { Announcement, AnnouncementOptions, AnnouncementPlugin };

package/dist/index.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AnnouncementPlugin: () => AnnouncementPlugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_node_path = __toESM(require("path"));
+var import_node_url = require("url");
+var import_javascript_stringify = require("javascript-stringify");
+var import_meta = {};
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)) : __dirname;
+}
+var componentName = "Announcement";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:announcement-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+function AnnouncementPlugin(options) {
+  const componentOptions = {
+    clientOnly: false,
+    duration: 0,
+    mobileMinify: false,
+    reopen: true,
+    twinkle: false,
+    ...options
+  };
+  const pluginOps = {
+    name: "vitepress-plugin-announcement",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        const slotPosition = '<slot name="layout-top" />';
+        let transformResult = code.replace(slotPosition, `${slotPosition}<Announcement/>`);
+        if (componentOptions.clientOnly) {
+          transformResult = transformResult.replace("<Announcement/>", "<ClientOnly><Announcement/></ClientOnly>");
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import Announcement from './Announcement.vue'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${(0, import_javascript_stringify.stringify)(options)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnnouncementPlugin
+});

package/dist/index.mjs

@@ -0,0 +1,65 @@
+// src/index.ts
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { stringify } from "javascript-stringify";
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? path.dirname(fileURLToPath(import.meta.url)) : __dirname;
+}
+var componentName = "Announcement";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:announcement-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+function AnnouncementPlugin(options) {
+  const componentOptions = {
+    clientOnly: false,
+    duration: 0,
+    mobileMinify: false,
+    reopen: true,
+    twinkle: false,
+    ...options
+  };
+  const pluginOps = {
+    name: "vitepress-plugin-announcement",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        const slotPosition = '<slot name="layout-top" />';
+        let transformResult = code.replace(slotPosition, `${slotPosition}<Announcement/>`);
+        if (componentOptions.clientOnly) {
+          transformResult = transformResult.replace("<Announcement/>", "<ClientOnly><Announcement/></ClientOnly>");
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import Announcement from './Announcement.vue'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${stringify(options)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+export {
+  AnnouncementPlugin
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "vitepress-plugin-announcement",
+  "version": "0.1.0",
+  "description": "vitepress plugin, Announcement, 公告窗口",
+  "author": "sugar",
+  "license": "MIT",
+  "homepage": "https://github.com/ATQQ/sugar-blog/tree/master/packages/vitepress-plugin-announcement",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ATQQ/sugar-blog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ATQQ/sugar-blog/issues"
+  },
+  "keywords": [
+    "vitepress",
+    "plugin",
+    "announcement",
+    "公告窗口",
+    "公告"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1"
+  },
+  "dependencies": {
+    "javascript-stringify": "^2.1.0"
+  },
+  "devDependencies": {
+    "chokidar": "^3.6.0",
+    "fs-extra": "^11.1.1",
+    "tinyglobby": "^0.2.6",
+    "typescript": "^5.5.4",
+    "vite": "^5",
+    "vitepress": "^1.3.4",
+    "vue": "^3.4.26"
+  },
+  "scripts": {
+    "dev": "pnpm run /^dev:.*/",
+    "dev:plugin": "npx tsup src/index.ts --dts --watch --format esm,cjs --external vitepress",
+    "dev:component": "tsc --sourcemap -w --preserveWatchOutput -p src/components",
+    "dev:watch": "node scripts/watchAndCopy.mjs",
+    "build": "pnpm run /^build:.*/",
+    "build:plugin": "npx tsup src/index.ts --dts --format esm,cjs --external vitepress --silent",
+    "build:component": "tsc -p src/components && node scripts/copyComponents.mjs"
+  }
+}