meta function

4 years ago · 507287fff2
parent 0c31bbac85
commit 507287fff2
6 changed files with 28 additions and 36 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -5,6 +5,18 @@ export default defineConfig({
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',
  lastUpdated: true,
+  head: ()=>[
+    ['meta', { name: 'author', content: '‹div›RIOTS' }],
+    [
+      'meta',
+      {
+        name: 'keywords',
+        content:
+          'designsystems, design-systems, react, vue, svelte, angular, webcomponent, webcomponents, web-component, web-components',
+      },
+    ],
+  ],
+  //cleanUrls: true,

  themeConfig: {
    repo: 'vuejs/vitepress',
--- a/src/client/app/composables/head.ts
+++ b/src/client/app/composables/head.ts
@ -1,5 +1,6 @@
 import { watchEffect, Ref } from 'vue'
 import { HeadConfig, SiteData } from '../../shared'
+import { processHead } from '../../../shared/shared'
 import { Route } from '../router'

 export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
@ -68,7 +69,7 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {

    updateHeadTags([
      // site head can only change during dev
-      ...(import.meta.env.DEV ? siteData.head : []),
+      ...(import.meta.env.DEV ? processHead(siteData.head, pageData) : []),
      ...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : [])
    ])
  })
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@ -2,6 +2,7 @@ import path from 'path'
 import fs from 'fs-extra'
 import { SiteConfig, resolveSiteDataByRoute } from '../config'
 import { HeadConfig } from '../shared'
+import { processHead } from '../../shared/shared'
 import { normalizePath, transformWithEsbuild } from 'vite'
 import { RollupOutput, OutputChunk, OutputAsset } from 'rollup'
 import { slash } from '../utils/slash'
@ -97,11 +98,7 @@ export async function renderPage(
      ? `${pageData.title} | ${siteData.title}`
      : siteData.title

-  const head = addSocialTags(
-    title,
-    ...siteData.head,
-    ...filterOutHeadDescription(pageData.frontmatter.head)
-  )
+  const head = processHead(siteData.head, pageData);

  let inlinedScript = ''
  if (config.mpa && result) {
@ -133,7 +130,7 @@ export async function renderPage(
    ${stylesheetLink}
    ${preloadLinksString}
    ${prefetchLinkString}
-    ${await renderHead(head)}
+    ${await renderHead([...head, ...pageData.head])}
  </head>
  <body>
    <div id="app">${content}</div>
@ -207,29 +204,3 @@ function renderAttrs(attrs: Record<string, string>): string {
    })
    .join('')
 }
-
-function isMetaDescription(headConfig: HeadConfig) {
-  const [type, attrs] = headConfig
-  return type === 'meta' && attrs?.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 addSocialTags(title: string, ...head: HeadConfig[]) {
-  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
-}
--- a/src/node/config.ts
+++ b/src/node/config.ts
@ -12,6 +12,7 @@ import {
 import { Options as VuePluginOptions } from '@vitejs/plugin-vue'
 import {
  SiteData,
+  PageData,
  HeadConfig,
  LocaleConfig,
  createLangDictionary,
@ -33,7 +34,7 @@ export interface UserConfig<ThemeConfig = any> {
  base?: string
  title?: string
  description?: string
-  head?: HeadConfig[]
+  head?: HeadConfig[] | ((pageData: PageData) => HeadConfig[])
  themeConfig?: ThemeConfig
  locales?: Record<string, LocaleConfig>
  markdown?: MarkdownOptions
--- a/src/shared/shared.ts
+++ b/src/shared/shared.ts
@ -1,4 +1,4 @@
-import { LocaleConfig, SiteData } from '../../types/shared'
+import { HeadConfig, LocaleConfig, SiteData, PageData } from '../../types/shared'

 export type {
  SiteData,
@ -95,3 +95,10 @@ function cleanRoute(siteData: SiteData, route: string): string {

  return route.slice(baseWithoutSuffix.length)
 }
+
+/**
+ * Process `head` configuration. 
+ */
+export function processHead(head: HeadConfig[] | ((pageData: PageData) => HeadConfig[]), pageData: PageData) : HeadConfig[] {
+  return !head ? [] : typeof head === 'function' ? head(pageData) : head;
+}
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@ -20,7 +20,7 @@ export interface SiteData<ThemeConfig = any> {
  lang: string
  title: string
  description: string
-  head: HeadConfig[]
+  head: HeadConfig[] | ( (pageData: PageData) => HeadConfig[])
  themeConfig: ThemeConfig
  scrollOffset: number | string
  locales: Record<string, LocaleConfig>