feat(enhanced-mark): added new package (#143)

LittleSound · web-flow · commit 3659d869ce45 · 2024-04-02T11:27:39.000+08:00
* feat(enhanced-mark): added new package
* fix(og-image): should not use title as file name
* style: universal available
diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ To find out the integration name, there is a list of integrations below.
 - [Blinking highlight targeted heading (for VitePress)](./packages/vitepress-plugin-highlight-targeted-heading/README.md)
 - [Page properties (for VitePress)](./packages/vitepress-plugin-page-properties/README.md)
 - [Previewing image (social media card) generation](./packages/vitepress-plugin-og-image/README.md)
+- [Enhanced `<mark>` element](./packages/vitepress-plugin-enhanced-mark/README.md)
 
 ## How to develop
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -55,6 +55,7 @@ ni @nolebase/<integration-name> -D
 - [闪烁高亮当前的目标标题（VitePress 插件）](./packages/vitepress-plugin-highlight-targeted-heading/README.md)
 - [页面属性（VitePress 插件](./packages/vitepress-plugin-page-properties/README.md)
 - [预览图片（社交媒体卡片）生成](./packages/vitepress-plugin-og-image/README.md)
+- [`<mark>` 元素增强](./packages/vitepress-plugin-enhanced-mark/README.md)
 
 ## 如何开发
 
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -59,6 +59,7 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
           { text: 'Changelog & File history', link: '/pages/en/integrations/vitepress-plugin-git-changelog/' },
           { text: 'Page properties', link: '/pages/en/integrations/vitepress-plugin-page-properties/' },
           { text: 'Previewing image (social media card) generation', link: '/pages/en/integrations/vitepress-plugin-og-image/' },
+          { text: 'Enhanced &lt;mark&gt; elements', link: '/pages/en/integrations/vitepress-plugin-enhanced-mark/' },
         ],
       },
     ],
@@ -140,6 +141,7 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
           { text: '变更日志 及 文件历史', link: '/pages/zh-CN/integrations/vitepress-plugin-git-changelog/' },
           { text: '页面属性', link: '/pages/zh-CN/integrations/vitepress-plugin-page-properties/' },
           { text: '预览图片（社交媒体卡片）生成', link: '/pages/zh-CN/integrations/vitepress-plugin-og-image/' },
+          { text: '&lt;mark&gt; 元素增强', link: '/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/' },
         ],
       },
     ],
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,7 @@
     "@nolebase/markdown-it-element-transform": "workspace:^",
     "@nolebase/ui": "workspace:^",
     "@nolebase/unconfig-vitepress": "workspace:^",
+    "@nolebase/vitepress-plugin-enhanced-mark": "workspace:^",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-git-changelog": "workspace:^",
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "workspace:^",
diff --git a/docs/pages/en/index.md b/docs/pages/en/index.md
@@ -85,6 +85,12 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
     </template>
   </IntegrationCard>
 
+  <IntegrationCard type="vitepress" title="Enhanced <mark> elements" package="vitepress-plugin-enhanced-mark">
+    <template v-slot:badge>
+      <Badge type="warning" text="Beta" />
+    </template>
+  </IntegrationCard>
+
   <IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss">
     <template v-slot:badge>
       <Badge type="warning" text="Beta" />
diff --git a/docs/pages/en/integrations/index.md b/docs/pages/en/integrations/index.md
@@ -70,6 +70,14 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
 
 <br />
 
+<IntegrationCard type="vitepress" title="Enhanced <mark> elements" package="vitepress-plugin-enhanced-mark">
+  <template v-slot:badge>
+    <Badge type="warning" text="Beta" />
+  </template>
+</IntegrationCard>
+
+<br />
+
 <IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss">
   <template v-slot:badge>
     <Badge type="warning" text="Beta" />
diff --git a/docs/pages/en/integrations/vitepress-plugin-enhanced-mark/index.md b/docs/pages/en/integrations/vitepress-plugin-enhanced-mark/index.md
@@ -0,0 +1,7 @@
+# Enhanced `<mark>` <mark>elements</mark> <Badge type="warning" text="Beta" />
+
+::: warning 🚧 Constructing
+Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
+:::
+
+This is a paragraph that contains <mark>highlighted text with a animated yellow background</mark>.
diff --git a/docs/pages/zh-CN/index.md b/docs/pages/zh-CN/index.md
@@ -85,6 +85,12 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
     </template>
   </IntegrationCard>
 
+  <IntegrationCard type="vitepress" title="<mark> 元素增强" package="vitepress-plugin-enhanced-mark">
+    <template v-slot:badge>
+      <Badge type="warning" text="Beta 测试" />
+    </template>
+  </IntegrationCard>
+
   <IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss">
     <template v-slot:badge>
       <Badge type="warning" text="Beta 测试" />
diff --git a/docs/pages/zh-CN/integrations/index.md b/docs/pages/zh-CN/integrations/index.md
@@ -70,6 +70,14 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
 
 <br />
 
+<IntegrationCard type="vitepress" title="<mark> 元素增强" package="vitepress-plugin-enhanced-mark">
+  <template v-slot:badge>
+    <Badge type="warning" text="Beta 测试" />
+  </template>
+</IntegrationCard>
+
+<br />
+
 <IntegrationCard type="obsidian" title="UnoCSS" package="obsidian-plugin-unocss">
   <template v-slot:badge>
     <Badge type="warning" text="Beta 测试" />
diff --git a/docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/index.md b/docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/index.md
@@ -0,0 +1,7 @@
+# `<mark>` <mark>元素增强</mark> <Badge type="warning" text="Beta 测试" />
+
+::: warning 🚧 施工中
+很高兴见到你！但很抱歉，这个页面还在施工中，如果没有找到你感兴趣的信息，你可以先在侧边栏的导航中寻找你感兴趣的内容来开始阅读
+:::
+
+这是一个包含 <mark>带有动画黄色背景的高亮文本</mark> 的段落。
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -40,6 +40,7 @@ export default defineConfig({
       '@nolebase/ui': resolve(__dirname, '../packages/ui/src/'),
       '@nolebase/unconfig-vitepress': resolve(__dirname, '../packages/unconfig-vitepress/src/'),
       '@nolebase/vitepress-plugin-git-changelog': resolve(__dirname, '../packages/vitepress-plugin-git-changelog/src/'),
+      '@nolebase/vitepress-plugin-enhanced-mark/dist': resolve(__dirname, '../packages/vitepress-plugin-enhanced-mark/src/'),
     },
   },
   plugins: [
diff --git a/packages/unconfig-vitepress/package.json b/packages/unconfig-vitepress/package.json
@@ -58,6 +58,7 @@
     "vitepress": ">=1.0.0-rc.44"
   },
   "dependencies": {
+    "@nolebase/vitepress-plugin-enhanced-mark": "workspace:^",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-git-changelog": "workspace:^",
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "workspace:^",
diff --git a/packages/unconfig-vitepress/src/plugins/nolebase/index.ts b/packages/unconfig-vitepress/src/plugins/nolebase/index.ts
@@ -58,6 +58,9 @@ export interface NolebasePluginPresetOptions<PagePropertiesObject extends object
     enable?: boolean
     options?: NolebasePagePropertiesOptions<PagePropertiesObject>
   }
+  animatedMark?: {
+    enable?: boolean
+  }
 }
 
 const defaultOptions: NolebasePluginPresetOptions = {
@@ -178,6 +181,9 @@ const defaultOptions: NolebasePluginPresetOptions = {
       },
     },
   },
+  animatedMark: {
+    enable: true,
+  },
 }
 
 function applyOptionsWithDefaults<PagePropertiesObject extends object = any>(options: NolebasePluginPresetOptions<any>): NolebasePluginPresetOptions<PagePropertiesObject> {
@@ -239,6 +245,9 @@ export function NolebasePluginPreset<PagePropertiesObject extends object = any>(
 
         await import('@nolebase/vitepress-plugin-page-properties/client/style.css')
       }
+
+      if (opts.animatedMark?.enable)
+        await import('@nolebase/vitepress-plugin-enhanced-mark/dist/client/style.css')
     },
   }
 }
diff --git a/packages/vitepress-plugin-enhanced-mark/README.md b/packages/vitepress-plugin-enhanced-mark/README.md
@@ -0,0 +1,27 @@
+# `@nolebase/vitepress-plugin-enhanced-mark`
+
+A VitePress plugin that empowers `<mark>` elements. Adds CSS animations to the mark elements.
+
+## Install
+
+### Npm
+
+```shell
+npm i @nolebase/vitepress-plugin-enhanced-mark -D
+```
+
+### Yarn
+
+```shell
+yarn add @nolebase/vitepress-plugin-enhanced-mark -D
+```
+
+### Pnpm
+
+```shell
+pnpm add @nolebase/vitepress-plugin-enhanced-mark -D
+```
+
+## Documentation
+
+Please refer to [Enhanced `<mark>` element](https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-enhanced-mark/) for more information.
diff --git a/packages/vitepress-plugin-enhanced-mark/build.config.ts b/packages/vitepress-plugin-enhanced-mark/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    { builder: 'mkdist', input: './src/client', outDir: './dist/client', pattern: ['**/*.css'], loaders: ['postcss'] },
+  ],
+})
diff --git a/packages/vitepress-plugin-enhanced-mark/package.json b/packages/vitepress-plugin-enhanced-mark/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@nolebase/vitepress-plugin-enhanced-mark",
+  "type": "module",
+  "version": "1.27.2",
+  "description": "A VitePress plugin that empowers mark elements.",
+  "author": {
+    "name": "Nólëbase",
+    "email": "nolebase@ayaka.moe",
+    "url": "https://github.com/nolebase"
+  },
+  "license": "MIT",
+  "homepage": "https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-enhanced-mark/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nolebase/integrations.git",
+    "directory": "packages/vitepress-plugin-enhanced-mark"
+  },
+  "keywords": [
+    "vitepress",
+    "nolebase",
+    "markdown",
+    "css",
+    "animation",
+    "vitepress-plugin",
+    "nolebase-integration"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "./client/style.css": "./dist/client/style.css"
+  },
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "unbuild --stub",
+    "stub": "unbuild --stub",
+    "build": "unbuild",
+    "package:publish": "pnpm build && pnpm publish --access public --no-git-checks"
+  },
+  "peerDependencies": {
+    "vitepress": ">=1.0.0-rc.44"
+  }
+}
diff --git a/packages/vitepress-plugin-enhanced-mark/src/client/style.css b/packages/vitepress-plugin-enhanced-mark/src/client/style.css
@@ -0,0 +1,40 @@
+/*
+  Thanks to the following resources:
+  css - How can I animate my text to highlight from left to right? - Stack Overflow
+  https://stackoverflow.com/questions/70364899/how-can-i-animate-my-text-to-highlight-from-left-to-right
+*/
+mark {
+  --vp-nolebase-mark-bg-shift: 0.4lh;
+  --vp-nolebase-mark-bg-color: #ffce0050;
+
+  /* Override default styles of <mark>  */
+  color: inherit;
+  background-color: transparent;
+
+  /* Configure animations */
+  animation-name: mark-highlight-animation;
+  animation-duration: 1.5s;
+  animation-delay: 0.5s;
+  animation-fill-mode: forwards;
+
+  /* Expand the background image width 2x larger than the default background width */
+  background-size: 200%;
+  /* Init position of background image, otherwise it will cause a flicker */
+  background-position: 100% var(--vp-nolebase-mark-bg-shift);
+  /* By default, background image will repeat, we don't want that */
+  background-repeat: no-repeat;
+  /* Use background image with linear gradient to create the highlight effect */
+  background-image: linear-gradient(to right, var(--vp-nolebase-mark-bg-color) 50%, transparent 50%);
+}
+
+@keyframes mark-highlight-animation {
+  from {
+    color: inherit;
+    background-position: 100% var(--vp-nolebase-mark-bg-shift);
+  }
+
+  to {
+    color: var(--vp-c-text-1);
+    background-position: 0% var(--vp-nolebase-mark-bg-shift);
+  }
+}
diff --git a/packages/vitepress-plugin-og-image/src/index.ts b/packages/vitepress-plugin-og-image/src/index.ts
@@ -1,4 +1,4 @@
-import { dirname, join, relative, resolve, sep } from 'node:path'
+import { basename, dirname, join, relative, resolve, sep } from 'node:path'
 import { sep as posixSep } from 'node:path/posix'
 import { fileURLToPath } from 'node:url'
 import type { Buffer } from 'node:buffer'
@@ -46,6 +46,10 @@ async function tryToLocateFontFile(siteConfig: SiteConfig): Promise<string | und
 
 /**
  * Render SVG and rewrite HTML
+ *
+ * Will always save the rendered Open Graph image as PNG under the same directory as the HTML file with
+ * the name `og-${fileName of rendered HTML}.png`.
+ *
  * @param {SiteConfig} siteConfig - Site configuration
  * @param {string} siteTitle - Site title
  * @param {string} siteDescription - Site description
@@ -66,8 +70,10 @@ async function renderSVGAndRewriteHTML(
   ogImageTemplateSvgPath: string,
   domain: string,
 ): Promise<TaskResult> {
-  const ogImageFilePathBaseName = `og-${page.title}.png`
+  const fileName = basename(file, '.html')
+  const ogImageFilePathBaseName = `og-${fileName}.png`
   const ogImageFilePathFullName = `${dirname(file)}/${ogImageFilePathBaseName}`
+
   const templatedOgImageSvg = templateSVG(
     siteTitle,
     siteDescription,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
