fix: frontmatter description duplication (#194) (#170)

Co-authored-by: Kia King Ishii <[email protected]>
vuejs · Feb 9, 2021 · 338e845 · 338e845
1 parent c67c5d0
commit 338e845
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/src/client/app/composables/head.ts b/src/client/app/composables/head.ts
@@ -28,6 +28,8 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
     const pageData = route.data
     const siteData = siteDataByRouteRef.value
     const pageTitle = pageData && pageData.title
+    const pageDescription = pageData && pageData.description
+    const frontmatterHead = pageData && pageData.frontmatter.head
     document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title
     updateHeadTags([
       ['meta', { charset: 'utf-8' }],
@@ -42,11 +44,11 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
         'meta',
         {
           name: 'description',
-          content: siteData.description
+          content: pageDescription || siteData.description
         }
       ],
       ...siteData.head,
-      ...((pageData && pageData.frontmatter.head) || [])
+      ...((frontmatterHead && filterOutHeadDescription(frontmatterHead)) || [])
     ])
   })
 }
@@ -61,3 +63,15 @@ function createHeadElement([tag, attrs, innerHTML]: HeadConfig) {
   }
   return el
 }
+
+function isMetaDescription(headConfig: HeadConfig) {
+  return (
+    headConfig[0] === 'meta' &&
+    headConfig[1] &&
+    headConfig[1].name === 'description'
+  )
+}
+
+function filterOutHeadDescription(head: HeadConfig[]) {
+  return head.filter((h) => !isMetaDescription(h))
+}
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
@@ -38,6 +38,7 @@ export async function renderPage(
     pageServerJsFileName
   ))
   const pageData = JSON.parse(__pageData)
+  const frontmatterHead = pageData.frontmatter.head
 
   const preloadLinks = [
     // resolve imports for index.js + page.md.js and inject script tags for
@@ -61,11 +62,13 @@ export async function renderPage(
     <title>
       ${pageData.title ? pageData.title + ` | ` : ``}${siteData.title}
     </title>
-    <meta name="description" content="${siteData.description}">
+    <meta name="description" content="${
+      pageData.description || siteData.description
+    }">
     <link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">
     ${preloadLinks}
     ${renderHead(siteData.head)}
-    ${renderHead(pageData.frontmatter.head)}
+    ${renderHead(frontmatterHead && filterOutHeadDescription(frontmatterHead))}
   </head>
   <body>
     <div id="app">${content}</div>
@@ -127,3 +130,15 @@ function renderAttrs(attrs: Record<string, string>): string {
     })
     .join('')
 }
+
+function isMetaDescription(headConfig: HeadConfig) {
+  return (
+    headConfig[0] === 'meta' &&
+    headConfig[1] &&
+    headConfig[1].name === 'description'
+  )
+}
+
+function filterOutHeadDescription(head: HeadConfig[]) {
+  return head.filter((h) => !isMetaDescription(h))
+}
diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts
@@ -112,11 +112,13 @@ const inferTitle = (frontmatter: any, content: string) => {
 }
 
 const inferDescription = (frontmatter: Record<string, any>) => {
-  if (!frontmatter.head) {
-    return ''
+  const { description, head } = frontmatter
+
+  if (description !== undefined) {
+    return description
   }
 
-  return getHeadMetaContent(frontmatter.head, 'description') || ''
+  return (head && getHeadMetaContent(head, 'description')) || ''
 }
 
 const getHeadMetaContent = (