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

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
4 years ago · 338e8453d8
parent c67c5d0a77
commit 338e8453d8
3 changed files with 38 additions and 7 deletions
--- 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))
+}
--- 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))
+}
--- 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 = (