feat: rendering meta tags for preview images (twitter/og)

docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   lang: 'en-US',
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
+  banner: './images/vite.png',
 
   head: [
     [

docs/index.md

@@ -1,5 +1,6 @@
 ---
 sidebarDepth: 2
+image: ./images/vue.png
 ---
 
 # What is VitePress?

src/node/build/render.ts

@@ -99,6 +99,7 @@ export async function renderPage(
 
   const head = addSocialTags(
     title,
+    pageData.frontmatter.image || siteData.socialImage,
     ...siteData.head,
     ...filterOutHeadDescription(pageData.frontmatter.head)
   )
@@ -220,11 +221,16 @@ function hasTag(head: HeadConfig[], tag: HeadConfig) {
   return head.some(([type, attrs]) => type === tagType && attrs[attr] === value)
 }
 
-function addSocialTags(title: string, ...head: HeadConfig[]) {
+function addSocialTags(title: string, image: string, ...head: HeadConfig[]) {
   const tags: HeadConfig[] = [
     ['meta', { name: 'twitter:title', content: title }],
     ['meta', { property: 'og:title', content: title }]
   ]
+  if (image){
+    tags.push(['meta', {name: 'twitter:image', content: image}])
+    tags.push(['meta', {property: 'og:image', content: image}])
+  }
+
   tags.filter((tagAttrs) => {
     if (!hasTag(head, tagAttrs)) head.push(tagAttrs)
   })

src/node/config.ts

@@ -33,6 +33,7 @@ export interface UserConfig<ThemeConfig = any> {
   base?: string
   title?: string
   description?: string
+  socialImage?: string
   head?: HeadConfig[]
   themeConfig?: ThemeConfig
   locales?: Record<string, LocaleConfig>
@@ -239,6 +240,7 @@ export async function resolveSiteData(
     lang: userConfig.lang || 'en-US',
     title: userConfig.title || 'VitePress',
     description: userConfig.description || 'A VitePress site',
+    socialImage: userConfig.socialImage || '',
     base: userConfig.base ? userConfig.base.replace(/([^/])$/, '$1/') : '/',
     head: userConfig.head || [],
     themeConfig: userConfig.themeConfig || {},

types/shared.d.ts

@@ -20,6 +20,7 @@ export interface SiteData<ThemeConfig = any> {
   lang: string
   title: string
   description: string
+  socialImage: string
   head: HeadConfig[]
   themeConfig: ThemeConfig
   locales: Record<string, LocaleConfig>