feat: init watermark plugin (#111)

Co-authored-by: Mr.Hope <[email protected]>

docs/.vuepress/configs/navbar/en.ts

@@ -31,6 +31,7 @@ export const navbarEn: NavbarConfig = [
           '/plugins/photo-swipe',
           '/plugins/redirect',
           '/plugins/register-components',
+          '/plugins/watermark',
         ],
       },
       {

docs/.vuepress/configs/navbar/zh.ts

@@ -31,6 +31,7 @@ export const navbarZh: NavbarConfig = [
           '/zh/plugins/photo-swipe',
           '/zh/plugins/redirect',
           '/zh/plugins/register-components',
+          '/zh/plugins/watermark',
         ],
       },
       {

docs/.vuepress/configs/sidebar/en.ts

@@ -16,6 +16,7 @@ export const sidebarEn: SidebarConfig = {
         '/plugins/photo-swipe',
         '/plugins/redirect',
         '/plugins/register-components',
+        '/plugins/watermark',
       ],
     },
     {

docs/.vuepress/configs/sidebar/zh.ts

@@ -16,6 +16,7 @@ export const sidebarZh: SidebarConfig = {
         '/zh/plugins/photo-swipe',
         '/zh/plugins/redirect',
         '/zh/plugins/register-components',
+        '/zh/plugins/watermark',
       ],
     },
     {

docs/plugins/watermark.md

@@ -0,0 +1,133 @@
+# watermark
+
+<NpmBadge package="@vuepress/plugin-watermark" />
+
+Integrate [watermark-js-plus](https://github.com/zhensherlock/watermark-js-plus) into VuePress。
+
+This plugin can add watermark to the pages, you can choose between add watermark globally or on specific pages. You can also choose between add text watermark or image watermark.
+
+## Usage
+
+```sh
+npm i -D @vuepress/plugin-watermark@next
+```
+
+```ts
+import { watermarkPlugin } from '@vuepress/plugin-watermark'
+
+export default {
+  plugins: [
+    watermarkPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### enabled
+
+- Type: `boolean | ((page: Page) => boolean)`
+
+- Default: `false`
+
+- Details:
+
+  Specify which pages need to have watermarks added.
+
+  Pages with `true` value will have watermarks added.
+
+### watermarkOptions
+
+- Type: `WatermarkOptions`
+
+- Default: `undefined`
+
+- Details: Please refer to the [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/) configuration options.
+
+#### watermarkOptions.parent
+
+- Type: `string`
+
+- Default: `body`
+
+- Details: Parent element selector for adding watermark.
+
+  By default, it is inserted into the body, but you can specify inserting it into a specific element on the page.
+
+### delay
+
+- Type: `number`
+
+- Default: `500`
+
+- Details: Delay for adding watermarks. In milliseconds.
+
+  This delay will only take effect when adding watermarks to a specific element on the page.
+
+  A delay is required when the watermark parent is rerendered when switching pages.
+
+## Frontmatter
+
+### watermark
+
+- Type: `boolean | WatermarkOptions`
+
+- Details:
+
+  When the type is `boolean`, it indicates whether the watermark is enabled.
+
+  When the type is `WatermarkOptions`, it represents the current page's watermark configuration.
+
+  You can refer to [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/).
+
+```md
+---
+watermark:
+  width: 200
+  height: 200
+  content: Your content
+  opacity: 0.5
+---
+```
+
+## Client Config
+
+### defineWatermarkConfig(config)
+
+- Type: `(config: MaybeRefOrGetter<WatermarkOptions>) => void`
+
+Additional configuration passed to [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/en/config/).
+
+```ts
+import { defineWatermarkConfig } from '@vuepress/plugin-watermark/client'
+
+defineWatermarkConfig({
+  // Set up additional watermark configurations here.
+})
+```
+
+In most cases, the majority of options should be defined in Node,
+but there are some special situations. For example,
+it may be necessary to control different watermark opacities, font colors,
+etc., in **dark/light mode** , or to pass in callbacks such as `onSuccess`, `extraDrawFunc`, and so on.
+
+```ts
+import { computed } from 'vue'
+
+export default defineClientConfig({
+  setup() {
+    const isDark = useDarkMode()
+
+    const watermarkConfig = computed(() => ({
+      fontColor: isDark.value ? '#fff' : '#000',
+      onSuccess: () => {
+        console.log('success')
+      },
+    }))
+
+    defineWatermarkConfig(watermarkConfig)
+  },
+})
+```

docs/zh/plugins/watermark.md

@@ -0,0 +1,132 @@
+# watermark
+
+<NpmBadge package="@vuepress/plugin-watermark" />
+
+将 [watermark-js-plus](https://github.com/zhensherlock/watermark-js-plus) 到 VuePress 中。
+
+此插件可在在页面中添加水印，可以选择为 全局页面 或 部分页面添加水印，还可以选择添加 文字水印 或 图片水印。
+
+## 使用
+
+```sh
+npm i -D @vuepress/plugin-watermark@next
+```
+
+```ts
+import { watermarkPlugin } from '@vuepress/plugin-watermark'
+
+export default {
+  plugins: [
+    watermarkPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### enabled
+
+- 类型： `boolean | ((page: Page) => boolean)`
+
+- 默认值： `false`
+
+- 详情：
+
+  指定哪些页面需要添加水印。
+
+  拥有 `true` 值的页面将会被添加水印。
+
+### watermarkOptions
+
+- 类型： `WatermarkOptions`
+
+- 默认值： `undefined`
+
+- 详情： 配置项请参考 [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/)。
+
+#### watermarkOptions.parent
+
+- 类型： `string`
+
+- 默认值： `body`
+
+- 详情：添加水印的父元素选择器。
+
+  默认插入到 body 中，可以指定插入到页面的某个元素中。
+
+### delay
+
+- 类型： `number`
+
+- 默认值： `500`
+
+- 详情：添加水印的延时。以毫秒为单位。
+
+  该延迟仅会在添加水印到页面某个元素时生效。
+
+  如果水印的父元素在切换页面时被重新渲染，那么需要延迟一段时间才能重新添加水印。
+
+## Frontmatter
+
+### watermark
+
+- 类型: `boolean | WatermarkOptions`
+
+- 详情：
+
+  当类型为 `boolean` 时，表示是否启用水印。
+
+  当类型为 `WatermarkOptions` 时，表示当前页面水印配置。
+
+  可以参考 [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/) 。
+
+```md
+---
+watermark:
+  width: 200
+  height: 200
+  content: Your content
+  opacity: 0.5
+---
+```
+
+## 客户端配置
+
+### defineWatermarkConfig(config)
+
+- 类型： `(config: MaybeRefOrGetter<WatermarkOptions>) => void`
+
+传递给 [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/zh/config/) 的额外配置。
+
+```ts
+import { defineWatermarkConfig } from '@vuepress/plugin-watermark/client'
+
+defineWatermarkConfig({
+  // 在此设置额外的 watermark 配置
+})
+```
+
+通常来说，大部分选项应该在 Node 中定义，但存在一些特殊情况。
+比如需要在 **深色/浅色 模式** 下控制不同的 水印 透明度、字体颜色等，
+或者需要传入如 `onSuccess`、`extraDrawFunc` 等回调函数。
+
+```ts
+import { computed } from 'vue'
+
+export default defineClientConfig({
+  setup() {
+    const isDark = useDarkMode()
+
+    const watermarkConfig = computed(() => ({
+      fontColor: isDark.value ? '#fff' : '#000',
+      onSuccess: () => {
+        console.log('success')
+      },
+    }))
+
+    defineWatermarkConfig(watermarkConfig)
+  },
+})
+```

e2e/docs/.vuepress/config.ts

@@ -7,6 +7,7 @@ import { copyrightPlugin } from '@vuepress/plugin-copyright'
 import { feedPlugin } from '@vuepress/plugin-feed'
 import { pwaPlugin } from '@vuepress/plugin-pwa'
 import { redirectPlugin } from '@vuepress/plugin-redirect'
+import { watermarkPlugin } from '@vuepress/plugin-watermark'
 import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress/cli'
 import type { UserConfig } from 'vuepress/cli'
@@ -223,5 +224,14 @@ export default defineUserConfig({
         '/redirect/config/': '/redirect/final.html',
       },
     }),
+    watermarkPlugin({
+      enable: (page) => page.path.startsWith('/watermark/'),
+
+      watermarkOptions: {
+        content: 'VuePress Watermark',
+        width: 200,
+        height: 200,
+      },
+    }),
   ],
 }) as UserConfig

e2e/docs/watermark/README.md

@@ -0,0 +1,5 @@
+---
+watermark: true
+---
+
+# Default Watermark

e2e/docs/watermark/disabled.md

@@ -0,0 +1,5 @@
+---
+watermark: false
+---
+
+# disabled watermark

e2e/package.json

@@ -23,6 +23,7 @@
     "@vuepress/plugin-feed": "workspace:*",
     "@vuepress/plugin-pwa": "workspace:*",
     "@vuepress/plugin-redirect": "workspace:*",
+    "@vuepress/plugin-watermark": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",

e2e/tests/plugin-watermark/watermark.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('plugin-watermark', () => {
+  test('enabled watermark', async ({ page }) => {
+    await page.goto('watermark/')
+
+    expect(
+      await page.locator('//html/body/div[2]').getAttribute('style'),
+    ).toContain('z-index: 2147483647 !important;')
+
+    expect(
+      await page.locator('//html/body/div[2]/div').getAttribute('style'),
+    ).toContain('background-image: url("data:image/png;base64,')
+  })
+
+  test('disabled watermark', async ({ page }) => {
+    await page.goto('watermark/disabled.html')
+
+    await expect(page.locator('//html/body/div[2]')).not.toBeVisible()
+  })
+})

plugins/plugin-watermark/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.