should update head in production as well

4 years ago · 04fe864ad8
parent f3d1a98f95
commit 04fe864ad8
5 changed files with 30 additions and 31 deletions
--- a/bin/vitepress.js
+++ b/bin/vitepress.js
@ -1,5 +1,4 @@
 #!/usr/bin/env node
-const path = require('path')
 const chalk = require('chalk')
 const argv = require('minimist')(process.argv.slice(2))

@ -18,11 +17,11 @@ if (!command || command === 'dev') {
      console.log(`listening at http://localhost:${port}`)
    })
  }).catch(err => {
-    console.error(`failed to start server. error: `, err)
+    console.error(chalk.red(`failed to start server. error:\n`), err)
  })
 } else if (command === 'build') {
  require('../dist').build(argv).catch(err => {
-    console.error(`build error: `, err)
+    console.error(chalk.red(`build error:\n`), err)
  })
 } else {
  console.log(chalk.red(`unknown command "${command}".`))
--- a/lib/app/composables/head.js
+++ b/lib/app/composables/head.js
@ -5,33 +5,29 @@ import { siteDataRef } from './siteData'
 * @param {import('./pageData').PageDataRef} pageDataRef
 */
 export function useUpdateHead(pageDataRef) {
-  const descriptionTag = createHeadElement(['meta', {
-    name: 'description',
-    content: siteDataRef.value.description
-  }])
-  document.head.appendChild(descriptionTag)
-
  /**
   * @type {HTMLElement[]}
   */
-  const siteHeadTags = []
-  /**
-   * @type {HTMLElement[]}
-   */
-  const pageHeadTags = []
+  const metaTags = Array.from(document.querySelectorAll('meta'))

+  let isFirstUpdate = true
  /**
-   * @param {HTMLElement[]} tags
   * @param {import('src').HeadConfig[]} newTags
   */
-  const updateHeadTags = (tags, newTags) => {
-    tags.forEach((el) => document.head.removeChild(el))
-    tags.length = 0
+  const updateHeadTags = (newTags) => {
+    if (!__DEV__ && isFirstUpdate) {
+      // in production, the initial meta tags are already pre-rendered so we
+      // skip the first update.
+      isFirstUpdate = false
+      return
+    }
+    metaTags.forEach((el) => document.head.removeChild(el))
+    metaTags.length = 0
    if (newTags && newTags.length) {
      newTags.forEach((headConfig) => {
        const el = createHeadElement(headConfig)
        document.head.appendChild(el)
-        tags.push(el)
+        metaTags.push(el)
      })
    }
  }
@ -41,12 +37,14 @@ export function useUpdateHead(pageDataRef) {
    const siteData = siteDataRef.value
    const pageTitle = pageData && pageData.title
    document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title
-    descriptionTag.setAttribute('content', siteData.description)
-    updateHeadTags(siteHeadTags, siteData.head)
-    updateHeadTags(
-      pageHeadTags,
-      pageData && pageData.frontmatter.head
-    )
+    updateHeadTags([
+      ['meta', {
+        name: 'description',
+        content: siteData.description
+      }],
+      ...siteData.head,
+      ...(pageData && pageData.frontmatter.head || [])
+    ])
  })
 }

--- a/lib/app/index.js
+++ b/lib/app/index.js
@ -16,11 +16,12 @@ export function createApp() {
  // distinct per-request.
  const pageDataRef = ref()

-  if (__DEV__ && inBrowser) {
-    // dynamically update head tags during dev since it's an SPA
-    // this is not needed in production.
+  if (inBrowser) {
+    // dynamically update head tags
    useUpdateHead(pageDataRef)
+  }

+  if (__DEV__ && inBrowser) {
    // hot reload pageData
    hot.on('vitepress:pageData', (data) => {
      if (
--- a/src/build/build.ts
+++ b/src/build/build.ts
@ -20,6 +20,6 @@ export async function build(buildOptions: BuildOptions = {}) {
    }
  } finally {
    await fs.rmdir(siteConfig.tempDir, { recursive: true })
-    console.log('done.')
  }
+  console.log('done.')
 }
--- a/src/build/render.ts
+++ b/src/build/render.ts
@ -24,17 +24,18 @@ export async function renderPage(
    '_assets',
    pageJsPath
  ))
+  const pageData = JSON.parse(__pageData)

  const html = `
 <html lang="en-US">
  <head>
-    <title>${__pageData.title ? __pageData.title + ` | ` : ``}${
+    <title>${pageData.title ? pageData.title + ` | ` : ``}${
    config.site.title
  }</title>
    <meta name="description" content="${config.site.description}">
    <link rel="stylesheet" href="${assetPath}/style.css">${renderHead(
    config.site.head
-  )}${renderHead(__pageData.frontmatter.head)}
+  )}${renderHead(pageData.frontmatter.head)}
  </head>
  <body>
    <div id="app">${content}</div>