feat(plugin-external-link-icon): add locales option (#636)

Co-authored-by: meteorlxy <[email protected]>

Author: Mister-Hope

docs/reference/plugin/external-link-icon.md

@@ -12,6 +12,43 @@ This plugin has been integrated into the default theme.
 npm i -D @vuepress/plugin-external-link-icon@next
 ```
 
+## Options
+
+### locales
+
+- Type: `Record<string, { openInNewWindow: string }>`
+
+- Details:
+
+  The a11y text of the external link icon in different locales.
+
+  If this option is not specified, it will fallback to default text.
+
+- Example:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/plugin-external-link-icon',
+      {
+        locales: {
+          '/': {
+            openInNewWindow: 'open in new window',
+          },
+          '/zh/': {
+            openInNewWindow: '在新窗口打开',
+          },
+        },
+      },
+    ],
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
 ## Frontmatter
 
 ### externalLinkIcon

docs/zh/reference/plugin/external-link-icon.md

@@ -12,6 +12,43 @@
 npm i -D @vuepress/plugin-external-link-icon@next
 ```
 
+## 配置项
+
+### locales
+
+- 类型： `Record<string, { openInNewWindow: string }>`
+
+- 详情：
+
+  外部链接图标在不同 locales 下的 A11y 文字。
+
+  如果没有指定该配置项，它会降级使用默认文字。
+
+- 示例：
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/plugin-external-link-icon',
+      {
+        locales: {
+          '/': {
+            openInNewWindow: 'open in new window',
+          },
+          '/zh/': {
+            openInNewWindow: '在新窗口打开',
+          },
+        },
+      },
+    ],
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
 ## Frontmatter
 
 ### externalLinkIcon

packages/@vuepress/plugin-external-link-icon/src/client/clientAppEnhance.ts

@@ -1,6 +1,13 @@
 import { defineClientAppEnhance } from '@vuepress/client'
+import { h } from 'vue'
+import type { ExternalLinkIconLocales } from '../shared'
 import { ExternalLinkIcon } from './components/ExternalLinkIcon'
 
+declare const __EXTERNAL_LINK_ICON_LOCALES__: ExternalLinkIconLocales
+
+const locales = __EXTERNAL_LINK_ICON_LOCALES__
+
 export default defineClientAppEnhance(({ app }) => {
-  app.component('ExternalLinkIcon', ExternalLinkIcon)
+  // wrap the `<ExternalLinkIcon />` component with plugin options
+  app.component('ExternalLinkIcon', h(ExternalLinkIcon, { locales }))
 })

packages/@vuepress/plugin-external-link-icon/src/client/components/ExternalLinkIcon.ts

@@ -1,5 +1,7 @@
-import { h } from 'vue'
-import type { FunctionalComponent } from 'vue'
+import { useRouteLocale } from '@vuepress/client'
+import { computed, defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
+import type { ExternalLinkIconLocales } from '../../shared'
 
 import '../styles/vars.css'
 import '../styles/external-link-icon.css'
@@ -30,7 +32,35 @@ const svg = h(
   ]
 )
 
-export const ExternalLinkIcon: FunctionalComponent = (_, { slots }) =>
-  h('span', [svg, slots.default?.()])
+export const ExternalLinkIcon = defineComponent({
+  name: 'ExternalLinkIcon',
 
-ExternalLinkIcon.displayName = 'ExternalLinkIcon'
+  props: {
+    locales: {
+      type: Object as PropType<ExternalLinkIconLocales>,
+      required: false,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    const routeLocale = useRouteLocale()
+    const locale = computed(
+      () =>
+        props.locales[routeLocale.value] ?? {
+          openInNewWindow: 'open in new window',
+        }
+    )
+    return () =>
+      h('span', [
+        svg,
+        h(
+          'span',
+          {
+            class: 'external-link-icon-sr-only',
+          },
+          locale.value.openInNewWindow
+        ),
+      ])
+  },
+})

packages/@vuepress/plugin-external-link-icon/src/client/styles/external-link-icon.css

@@ -5,3 +5,16 @@
   vertical-align: middle;
   top: -1px;
 }
+
+.external-link-icon-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  user-select: none;
+}

packages/@vuepress/plugin-external-link-icon/src/node/externalLinkIconPlugin.ts

@@ -1,12 +1,24 @@
 import type { Plugin } from '@vuepress/core'
 import type { MarkdownEnv } from '@vuepress/markdown'
 import { path } from '@vuepress/utils'
+import type { ExternalLinkIconLocales } from '../shared'
 
-export type ExternalLinkIconPluginOptions = Record<never, never>
+/**
+ * Options for @vuepress/plugin-external-link-icon
+ */
+export type ExternalLinkIconPluginOptions = {
+  locales?: ExternalLinkIconLocales
+}
 
-export const externalLinkIconPlugin: Plugin<ExternalLinkIconPluginOptions> = {
+export const externalLinkIconPlugin: Plugin<ExternalLinkIconPluginOptions> = ({
+  locales = {},
+}) => ({
   name: '@vuepress/plugin-external-link-icon',
 
+  define: {
+    __EXTERNAL_LINK_ICON_LOCALES__: locales,
+  },
+
   clientAppEnhanceFiles: path.resolve(
     __dirname,
     '../client/clientAppEnhance.js'
@@ -44,4 +56,4 @@ export const externalLinkIconPlugin: Plugin<ExternalLinkIconPluginOptions> = {
       return result
     }
   },
-}
+})

packages/@vuepress/plugin-external-link-icon/src/shared/index.ts

@@ -0,0 +1 @@
+export * from './types'

packages/@vuepress/plugin-external-link-icon/src/shared/types.ts

@@ -0,0 +1,5 @@
+import type { LocaleConfig } from '@vuepress/shared'
+
+export type ExternalLinkIconLocales = LocaleConfig<{
+  openInNewWindow: string
+}>

packages/@vuepress/plugin-external-link-icon/tsconfig.cjs.json

@@ -5,5 +5,5 @@
     "rootDir": "./src",
     "outDir": "./lib"
   },
-  "include": ["./src/node"]
+  "include": ["./src/node", "./src/shared"]
 }

packages/@vuepress/plugin-external-link-icon/tsconfig.esm.json

@@ -5,5 +5,5 @@
     "rootDir": "./src",
     "outDir": "./lib"
   },
-  "include": ["./src/client"]
+  "include": ["./src/client", "./src/shared"]
 }