handle page title

4 years ago · f3d1a98f95
parent 7bdde43f11
commit f3d1a98f95
2 changed files with 12 additions and 14 deletions
--- a/lib/app/composables/head.js
+++ b/lib/app/composables/head.js
@ -2,20 +2,15 @@ import { watchEffect } from 'vue'
 import { siteDataRef } from './siteData'

 /**
- * @param {import('./pageData').PageDataRef} pageData
+ * @param {import('./pageData').PageDataRef} pageDataRef
 */
-export function useUpdateHead(pageData) {
+export function useUpdateHead(pageDataRef) {
  const descriptionTag = createHeadElement(['meta', {
    name: 'description',
    content: siteDataRef.value.description
  }])
  document.head.appendChild(descriptionTag)

-  const updateTitleAndDescription = () => {
-    document.title = siteDataRef.value.title
-    descriptionTag.setAttribute('content', siteDataRef.value.description)
-  }
-
  /**
   * @type {HTMLElement[]}
   */
@ -42,14 +37,15 @@ export function useUpdateHead(pageData) {
  }

  watchEffect(() => {
-    updateTitleAndDescription()
-    updateHeadTags(siteHeadTags, siteDataRef.value.head)
-  })
-
-  watchEffect(() => {
+    const pageData = pageDataRef.value
+    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.value && pageData.value.frontmatter.head
+      pageData && pageData.frontmatter.head
    )
  })
 }
--- a/src/build/render.ts
+++ b/src/build/render.ts
@ -28,7 +28,9 @@ export async function renderPage(
  const html = `
 <html lang="en-US">
  <head>
-    <title>${config.site.title}</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