docs: update gen og image

Author: hunghg255

Diff for: docs/.vitepress/config.ts

@@ -2,11 +2,13 @@ import { defineConfig } from 'vitepress'
 import { defaultHoverInfoProcessor, transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { transformerRemoveNotationEscape } from '@shikijs/transformers'
 import { getLocaleConfig } from './locale'
+import { transformHead } from './transformHead'
 
 const docsLink = 'https://js-utils-es.vercel.app'
 
 export default defineConfig({
-  lastUpdated: true,
+  lang: 'en-US',
+  ignoreDeadLinks: true,
   locales: {
     root: getLocaleConfig('en'),
   },
@@ -39,6 +41,7 @@ export default defineConfig({
   sitemap: {
     hostname: docsLink,
   },
+  transformHead,
   markdown: {
     codeTransformers: [
       {
@@ -97,4 +100,4 @@ export default defineConfig({
       transformerRemoveNotationEscape(),
     ],
   },
-})
+});

Diff for: docs/.vitepress/locale.ts

@@ -15,13 +15,12 @@ export function getLocaleConfig(lang: string) {
   const head: HeadConfig[] = [
     ['meta', { property: 'og:title', content: title }],
     ['meta', { property: 'og:description', content: description }],
-    ['meta', { property: 'og:image', content: `${docsLink}/og.png` }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:url', content: docsLink }],
     ['meta', { property: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { property: 'twitter:image', content: `${docsLink}/og.png` }],
     ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
     ['meta', { name: 'theme-color', content: '#914796' }],
+    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
   ]
 
   const nav: DefaultTheme.NavItem[] = [
@@ -194,22 +193,22 @@ export function getLocaleConfig(lang: string) {
     },
   }
 
-  if (lang === 'zh-CN') {
-    Object.assign(themeConfig, {
-      outline: {
-        label: '页面导航',
-      },
-      lastUpdatedText: '最后更新于',
-      darkModeSwitchLabel: '外观',
-      sidebarMenuLabel: '目录',
-      returnToTopLabel: '返回顶部',
-      langMenuLabel: '选择语言',
-      docFooter: {
-        prev: '上一页',
-        next: '下一页',
-      },
-    } satisfies DefaultTheme.Config)
-  }
+  // if (lang === 'zh-CN') {
+  //   Object.assign(themeConfig, {
+  //     outline: {
+  //       label: '页面导航',
+  //     },
+  //     lastUpdatedText: '最后更新于',
+  //     darkModeSwitchLabel: '外观',
+  //     sidebarMenuLabel: '目录',
+  //     returnToTopLabel: '返回顶部',
+  //     langMenuLabel: '选择语言',
+  //     docFooter: {
+  //       prev: '上一页',
+  //       next: '下一页',
+  //     },
+  //   } satisfies DefaultTheme.Config)
+  // }
 
   const localeConfig: LocaleConfig<DefaultTheme.Config>[string] = {
     label: t('English'),

Diff for: docs/.vitepress/transformHead.ts

@@ -0,0 +1,74 @@
+import fs from 'node:fs/promises'
+import sharp from 'sharp'
+// import removeMD from 'remove-markdown'
+import type { HeadConfig, TransformContext } from 'vitepress'
+import funcUtils from '../../scripts/funcUtils.json';
+
+const ogSVGPromise = fs.readFile('../scripts/og-template.svg', 'utf-8')
+
+export async function transformHead({ pageData }: TransformContext) {
+  const head: HeadConfig[] = [];
+
+  if (pageData.relativePath === 'index.md') {
+    head.push(
+      ['meta', { property: 'og:image', content: 'https://js-utils-es.vercel.app/og.png' }],
+      ['meta', { property: 'twitter:image', content: 'https://js-utils-es.vercel.app/og.png' }],
+    )
+    return head
+  }
+
+  const fn = funcUtils.find(i => i.name === `${pageData.title}.ts`);
+  if (fn?.name) {
+    const ogName = fn.name.replace('.ts', '');
+    await generateSVG(fn, `../docs/.vitepress/dist/og-${ogName}.png`);
+    head.push(
+      ['meta', { property: 'og:image', content: `https://js-utils-es.vercel.app/og-${ogName}.png` }],
+      ['meta', { property: 'twitter:image', content: `https://js-utils-es.vercel.app/og-${ogName}.png` }],
+    )
+  }
+  else {
+    head.push(
+      ['meta', { property: 'og:image', content: 'https://js-utils-es.vercel.app/og.png' }],
+      ['meta', { property: 'twitter:image', content: 'https://js-utils-es.vercel.app/og.png' }],
+    )
+  }
+
+  return head;
+}
+
+async function generateSVG(fn: any, output: string) {
+  // let desc = removeMD(fn.description!)
+  //   .replace(/&/g, '&')
+  //   .replace(/</g, '&lt;')
+  //   .replace(/>/g, '&gt;')
+  // desc = desc[0].toUpperCase() + desc.slice(1)
+  // const lines = desc.replace(/(?![^\n]{1,45}$)([^\n]{1,45})\s/g, '$1\n')
+  //   .split('\n');
+
+  const ogName = fn.name.replace('.ts', '');
+
+  const data = {
+    name: ogName,
+    package: `js-utils-es/${fn.package}`,
+    line1: 'A state-of-the-art, high-performance JavaScript utility',
+    line2: '',
+    line3: '',
+  }
+  const ogSVg = await ogSVGPromise
+  const svg = ogSVg.replace(/\{\{([^}]+)\}\}/g, (_, name: keyof typeof data) => data[name])
+
+  // eslint-disable-next-line no-console
+  console.log(`Generating ${output}`);
+
+  try {
+    // eslint-disable-next-line node/prefer-global/buffer
+    await sharp(Buffer.from(svg))
+      .resize(1200 * 1.1, 630 * 1.1)
+      .png()
+      .toFile(output)
+  }
+  catch (e) {
+    console.error('Error generating', { filename: output, ...data, svg })
+    console.error(e)
+  }
+}

Diff for: docs/package.json

@@ -20,6 +20,7 @@
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.2.1",
     "@shikijs/vitepress-twoslash": "^1.10.3",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "sharp": "^0.33.4",
     "unocss": "^0.61.3",
     "vite": "^5.3.3",
     "vitepress": "^1.3.0",