feat(inline-link-preview): migrated to unbuild, wrapped with standalone markdown-it plugin, added fancy documentations (#155)

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

Author: nekomeowww

.github/workflows/ci.yaml

@@ -51,6 +51,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build packages
+        run: pnpm run packages:build
+
       - name: Test
         run: pnpm run test:run
 

docs/.vitepress/config.ts

@@ -6,7 +6,7 @@ import MarkdownItFootnote from 'markdown-it-footnote'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
-import { ElementTransform } from '@nolebase/markdown-it-element-transform'
+import { InlineLinkPreviewElementTransform } from '@nolebase/vitepress-plugin-inline-link-preview/markdown-it'
 import { buildEndGenerateOpenGraphImages } from '@nolebase/vitepress-plugin-og-image'
 import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
 
@@ -310,6 +310,15 @@ export default defineConfig({
     codeTransformers: [
       transformerTwoslash({
         errorRendering: 'hover',
+        twoslashOptions: {
+          compilerOptions: {
+            target: 99,
+            moduleResolution: 100,
+            esModuleInterop: true,
+            isolatedModules: true,
+            verbatimModuleSyntax: true,
+          },
+        },
       }),
     ],
     preConfig(md) {
@@ -322,29 +331,7 @@ export default defineConfig({
     },
     config(md) {
       md.use(MarkdownItFootnote)
-      md.use(ElementTransform, (() => {
-        let transformNextLinkCloseToken = false
-
-        return {
-          transform(token) {
-            switch (token.type) {
-              case 'link_open':
-                if (token.attrGet('class') !== 'header-anchor') {
-                  token.tag = 'VPNolebaseInlineLinkPreview'
-                  transformNextLinkCloseToken = true
-                }
-                break
-              case 'link_close':
-                if (transformNextLinkCloseToken) {
-                  token.tag = 'VPNolebaseInlineLinkPreview'
-                  transformNextLinkCloseToken = false
-                }
-
-                break
-            }
-          },
-        }
-      })())
+      md.use(InlineLinkPreviewElementTransform)
     },
   },
   async buildEnd(siteConfig) {

docs/.vitepress/theme/components/HomeContent.vue

@@ -14,14 +14,14 @@
 
 @media (min-width: 640px) {
   .container {
-    padding: 0 48px;
+    padding: 0 24px;
   }
 }
 
 @media (min-width: 960px) {
   .container {
     width: 100%;
-    padding: 0 64px;
+    padding: 0 48px;
   }
 }
 </style>

docs/.vitepress/theme/components/IntegrationCard.vue

@@ -30,26 +30,28 @@ const data = useData()
     class="text-$vp-c-text-1!"
   >
     <span v-if="props.type === IntegrationType.markdownIt || props.type === IntegrationType.vitepress" flex="~ col 1" gap-2>
-      <span>
+      <span text="<sm:sm">
         <template v-if="$slots.title">
           <slot name="title" />
         </template>
         <template v-else>
           {{ props.title }}
         </template>
-        <slot name="badge" /></span>
-      <span text="sm zinc-400 dark:zinc-600">@nolebase/{{ props.package }}</span>
+        <slot name="badge" />
+      </span>
+      <span text="sm <sm:xs zinc-400 dark:zinc-600">@nolebase/{{ props.package }}</span>
     </span>
     <span v-if="props.type === IntegrationType.obsidian" flex="~ col 1" gap-2>
-      <span>
+      <span text="<sm:sm">
         <template v-if="$slots.title">
           <slot name="title" />
         </template>
         <template v-else>
           {{ props.title }}
         </template>
-        <slot name="badge" /></span>
-      <span text="sm zinc-400 dark:zinc-600">{{ props.package }}</span>
+        <slot name="badge" />
+      </span>
+      <span text="sm <sm:xs zinc-400 dark:zinc-600">{{ props.package }}</span>
     </span>
     <template v-if="props.type === IntegrationType.markdownIt">
       <span class="i-octicon:markdown-16" h-15 w-15 text-5xl />

docs/.vitepress/theme/styles/main.css

@@ -32,3 +32,17 @@ html, body {
 .footnotes > .footnotes-list > .footnote-item > p {
   line-height: 18px;
 }
+
+@media (max-width: 640px) {
+  .VPBadge {
+    font-size: 8px;
+    padding: 0px 6px;
+  }
+}
+
+@media (max-width: 960px) {
+  .VPBadge {
+    font-size: 10px;
+    padding: 0px 8px;
+  }
+}

docs/package.json

@@ -20,6 +20,7 @@
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-git-changelog": "workspace:^",
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "workspace:^",
+    "@nolebase/vitepress-plugin-inline-link-preview": "workspace:^",
     "@nolebase/vitepress-plugin-og-image": "workspace:^",
     "@nolebase/vitepress-plugin-page-properties": "workspace:^",
     "@nolebase/vitepress-plugin-thumbnail-hash": "workspace:^",

docs/pages/en/index.md

@@ -63,7 +63,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
 
   <IntegrationCard type="vitepress" title="Inline Link Previewing" package="vitepress-plugin-inline-link-preview">
     <template v-slot:badge>
-      <Badge type="warning" text="Beta" />
+      <Badge type="tip" text="v1.28.0" />
     </template>
   </IntegrationCard>
 

docs/pages/en/integrations/index.md

@@ -40,7 +40,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
 
 <IntegrationCard type="vitepress" title="Inline Link Previewing" package="vitepress-plugin-inline-link-preview">
   <template v-slot:badge>
-    <Badge type="warning" text="Beta" />
+    <Badge type="tip" text="v1.28.0" />
   </template>
 </IntegrationCard>
 

docs/pages/en/integrations/markdown-it-element-transform/index.md

@@ -4,7 +4,7 @@ This is a low-level plugin that is intended to be used by advanced users who wan
 
 ::: warning Before you start
 
-This plugin primarily is a helper utility markdown-it plugin for [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/) to help to transform all the `<a>` elements to `<NolebaseInlineLinkPreview>` components.
+This plugin primarily is a helper utility markdown-it plugin for [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/) to help to transform all the `<a>` elements to `<VPNolebaseInlineLinkPreview>` components.
 
 When using this plugin directly, you may encounter errors like `Invalid tag`, or `Element missing end tag` errors when integrating with VitePress or Vue markdown plugins after transforming [tokens](https://markdown-it.github.io/markdown-it/#Token) and elements,
 or other markdown-it plugins that are not compatible with the transformed elements. Please use it when you understand how the [Token API](https://markdown-it.github.io/markdown-it/#Token) of `markdown-it` works.
@@ -52,15 +52,7 @@ Check out install instructions in the [`vite-plugin-inspect` docs](https://githu
 
 :::
 
-### Use with [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/)
-
-Use this plugin with [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/) to replace all the `<a>` elements to `<NolebaseInlineLinkPreview>` components to enable the abilities to preview the links.
-
-::: danger Implementation may change in the future for [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/)
-
-Such usage is a temporary workaround due to the fact that we haven't had time to refactor [Inline Links Previewing](/pages/en/integrations/vitepress-plugin-inline-link-preview/) plugin to listen the mouse hovering event of all the `<a>` elements as singleton instance across all pages for both better accessibility and compatibilities (since it replaces all the `<a>` elements and may break the markdown processing pipelines for advanced users).
-
-:::
+### Change the tag of the elements
 
 This is the living example code where we use it as references:
 
@@ -79,11 +71,13 @@ markdownIt.use(ElementTransform, (() => {
     transform(token) {
       switch (token.type) {
         case 'link_open':
+          // You can have some conditions here to skip the transformation
+          //
           // Skip the transformation if the token is a header anchor
-          // because the header anchor doesn't need to be previewed
+          // since usually the header anchor is not quite the same as the normal link
           if (token.attrGet('class') !== 'header-anchor') {
             // Modify the tag of the token
-            token.tag = 'NolebaseInlineLinkPreview'
+            token.tag = 'YourLinkComponentName'
             // Set the flag to transform the next link_close token
             transformNextLinkCloseToken = true
           }
@@ -92,7 +86,7 @@ markdownIt.use(ElementTransform, (() => {
           // Transform the token if the flag is set
           if (transformNextLinkCloseToken) {
             // Modify the tag of the token
-            token.tag = 'NolebaseInlineLinkPreview'
+            token.tag = 'YourLinkComponentName'
             // Reset the flag
             transformNextLinkCloseToken = false
           }

docs/pages/en/integrations/vitepress-plugin-enhanced-readabilities/index.md

@@ -241,7 +241,7 @@ import {
 If you are working on a VitePress and wanted to install it into Vue instance, you can do it like this:
 
 ```typescript twoslash
-import { Theme as ThemeConfig } from 'vitepress'
+import type { Theme as ThemeConfig } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
@@ -264,7 +264,7 @@ export default Theme
 Of course you can also provide the relevant configuration directly when installing the plugin:
 
 ```typescript twoslash
-import { Theme as ThemeConfig } from 'vitepress'
+import type { Theme as ThemeConfig } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
@@ -318,7 +318,7 @@ import {
 
 ## Configuration
 
-The Reading Enhancements plugin currently provides configuration options related to **Internationalization** and **Help Tooltip**.
+The Enhanced Readabilities plugin currently provides configuration options related to **Internationalization** and **Help Tooltip**.
 
 ### Configure in VitePress
 
@@ -329,7 +329,7 @@ Therefore we offer a way with [Vue's dependency injection](https://vuejs.org/api
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
 ```typescript twoslash
-import { Theme as ThemeConfig } from 'vitepress'
+import type { Theme as ThemeConfig } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
@@ -493,16 +493,16 @@ The Enhanced Readabilities plugin does not use [vue-i18n](https://vue-i18n.intli
 
 The Enhanced Readabilities plugin supports internationalization by default, with English and Simplified Chinese as supported languages by default.
 
-You can override the plugin's localized text through configuration, and before you start, you need to understand how VitePress is internationalized: [Internationalization of VitePress](https://vitepress.dev/guide/i18n). The Reading Enhancement plugin reads the VitePress language field by default, so you'll need to be careful to keep the internationalized language code the same as the VitePress language code when configuring it.
+You can override the plugin's localized text through configuration, and before you start, you need to understand how VitePress is internationalized: [Internationalization of VitePress](https://vitepress.dev/guide/i18n). The Enhanced Readabilities plugin reads the VitePress language field by default, so you'll need to be careful to keep the internationalized language code the same as the VitePress language code when configuring it.
 
 ### Configure in VitePress
 
-In the [Configuration](#configuration) section, we've learned how to provide configuration options for the Reading Enhancement plugin in VitePress, and we can configure internationalization by adding the `locales` field to the configuration options:
+In the [Configuration](#configuration) section, we've learned how to provide configuration options for the Enhanced Readabilities plugin in VitePress, and we can configure internationalization by adding the `locales` field to the configuration options:
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
 ```typescript twoslash
-import { Theme as ThemeConfig } from 'vitepress'
+import type { Theme as ThemeConfig } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'