msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat: Render titles for social sharing and improve home page sharing (#263)

Browse Source
pull/312/head
Máximo Mussini 4 years ago committed by GitHub
parent b2924dce01
commit e651f977d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File

50
src/node/build/render.ts
Unescape View File

@ -38,7 +38,6 @@ export async function renderPage(
pageServerJsFileName pageServerJsFileName
)) ))
const pageData = JSON.parse(__pageData) const pageData = JSON.parse(__pageData)
const frontmatterHead = pageData.frontmatter.head
const preloadLinks = [ const preloadLinks = [
// resolve imports for index.js + page.md.js and inject script tags for // resolve imports for index.js + page.md.js and inject script tags for
@ -57,22 +56,30 @@ export async function renderPage(
? `<link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">` ? `<link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">`
: '' : ''
const title: string =
pageData.title && pageData.title !== 'Home'
? `${pageData.title} | ${siteData.title}`
: siteData.title
const head = addSocialTags(
title,
...siteData.head,
...filterOutHeadDescription(pageData.frontmatter.head)
)
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
<html lang="${siteData.lang}"> <html lang="${siteData.lang}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title> <title>${title}</title>
${pageData.title ? pageData.title + ` | ` : ``}${siteData.title}
</title>
<meta name="description" content="${ <meta name="description" content="${
pageData.description || siteData.description pageData.description || siteData.description
}"> }">
${stylesheetLink} ${stylesheetLink}
${preloadLinks} ${preloadLinks}
${renderHead(siteData.head)} ${renderHead(head)}
${renderHead(frontmatterHead && filterOutHeadDescription(frontmatterHead))}
</head> </head>
<body> <body>
<div id="app">${content}</div> <div id="app">${content}</div>
@ -112,9 +119,6 @@ function resolvePageImports(
} }
function renderHead(head: HeadConfig[]) { function renderHead(head: HeadConfig[]) {
if (!head || !head.length) {
return ''
}
return head return head
.map(([tag, attrs = {}, innerHTML = '']) => { .map(([tag, attrs = {}, innerHTML = '']) => {
const openTag = `<${tag}${renderAttrs(attrs)}>` const openTag = `<${tag}${renderAttrs(attrs)}>`
@ -136,13 +140,27 @@ function renderAttrs(attrs: Record<string, string>): string {
} }
function isMetaDescription(headConfig: HeadConfig) { function isMetaDescription(headConfig: HeadConfig) {
return ( const [type, attrs] = headConfig
headConfig[0] === 'meta' && return type === 'meta' && attrs?.name === 'description'
headConfig[1] && }
headConfig[1].name === 'description'
) function filterOutHeadDescription(head: HeadConfig[] | undefined) {
return head ? head.filter((h) => !isMetaDescription(h)) : []
}
function hasTag(head: HeadConfig[], tag: HeadConfig) {
const [tagType, tagAttrs] = tag
const [attr, value] = Object.entries(tagAttrs)[0] // First key
return head.some(([type, attrs]) => type === tagType && attrs[attr] === value)
} }
function filterOutHeadDescription(head: HeadConfig[]) { function addSocialTags(title: string, ...head: HeadConfig[]) {
return head.filter((h) => !isMetaDescription(h)) const tags: HeadConfig[] = [
['meta', { name: 'twitter:title', content: title }],
['meta', { property: 'og:title', content: title }]
]
tags.filter((tagAttrs) => {
if (!hasTag(head, tagAttrs)) head.push(tagAttrs)
})
return head
} }

Write Preview
Loading…
Cancel
Save