meta function

pull/588/head
Georges Gomes 4 years ago
parent 0c31bbac85
commit 507287fff2

@ -5,6 +5,18 @@ export default defineConfig({
title: 'VitePress', title: 'VitePress',
description: 'Vite & Vue powered static site generator.', description: 'Vite & Vue powered static site generator.',
lastUpdated: true, lastUpdated: true,
head: ()=>[
['meta', { name: 'author', content: 'divRIOTS' }],
[
'meta',
{
name: 'keywords',
content:
'designsystems, design-systems, react, vue, svelte, angular, webcomponent, webcomponents, web-component, web-components',
},
],
],
//cleanUrls: true,
themeConfig: { themeConfig: {
repo: 'vuejs/vitepress', repo: 'vuejs/vitepress',

@ -1,5 +1,6 @@
import { watchEffect, Ref } from 'vue' import { watchEffect, Ref } from 'vue'
import { HeadConfig, SiteData } from '../../shared' import { HeadConfig, SiteData } from '../../shared'
import { processHead } from '../../../shared/shared'
import { Route } from '../router' import { Route } from '../router'
export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) { export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
@ -68,7 +69,7 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
updateHeadTags([ updateHeadTags([
// site head can only change during dev // site head can only change during dev
...(import.meta.env.DEV ? siteData.head : []), ...(import.meta.env.DEV ? processHead(siteData.head, pageData) : []),
...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : []) ...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : [])
]) ])
}) })

@ -2,6 +2,7 @@ import path from 'path'
import fs from 'fs-extra' import fs from 'fs-extra'
import { SiteConfig, resolveSiteDataByRoute } from '../config' import { SiteConfig, resolveSiteDataByRoute } from '../config'
import { HeadConfig } from '../shared' import { HeadConfig } from '../shared'
import { processHead } from '../../shared/shared'
import { normalizePath, transformWithEsbuild } from 'vite' import { normalizePath, transformWithEsbuild } from 'vite'
import { RollupOutput, OutputChunk, OutputAsset } from 'rollup' import { RollupOutput, OutputChunk, OutputAsset } from 'rollup'
import { slash } from '../utils/slash' import { slash } from '../utils/slash'
@ -97,11 +98,7 @@ export async function renderPage(
? `${pageData.title} | ${siteData.title}` ? `${pageData.title} | ${siteData.title}`
: siteData.title : siteData.title
const head = addSocialTags( const head = processHead(siteData.head, pageData);
title,
...siteData.head,
...filterOutHeadDescription(pageData.frontmatter.head)
)
let inlinedScript = '' let inlinedScript = ''
if (config.mpa && result) { if (config.mpa && result) {
@ -133,7 +130,7 @@ export async function renderPage(
${stylesheetLink} ${stylesheetLink}
${preloadLinksString} ${preloadLinksString}
${prefetchLinkString} ${prefetchLinkString}
${await renderHead(head)} ${await renderHead([...head, ...pageData.head])}
</head> </head>
<body> <body>
<div id="app">${content}</div> <div id="app">${content}</div>
@ -207,29 +204,3 @@ function renderAttrs(attrs: Record<string, string>): string {
}) })
.join('') .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
}

@ -12,6 +12,7 @@ import {
import { Options as VuePluginOptions } from '@vitejs/plugin-vue' import { Options as VuePluginOptions } from '@vitejs/plugin-vue'
import { import {
SiteData, SiteData,
PageData,
HeadConfig, HeadConfig,
LocaleConfig, LocaleConfig,
createLangDictionary, createLangDictionary,
@ -33,7 +34,7 @@ export interface UserConfig<ThemeConfig = any> {
base?: string base?: string
title?: string title?: string
description?: string description?: string
head?: HeadConfig[] head?: HeadConfig[] | ((pageData: PageData) => HeadConfig[])
themeConfig?: ThemeConfig themeConfig?: ThemeConfig
locales?: Record<string, LocaleConfig> locales?: Record<string, LocaleConfig>
markdown?: MarkdownOptions markdown?: MarkdownOptions

@ -1,4 +1,4 @@
import { LocaleConfig, SiteData } from '../../types/shared' import { HeadConfig, LocaleConfig, SiteData, PageData } from '../../types/shared'
export type { export type {
SiteData, SiteData,
@ -95,3 +95,10 @@ function cleanRoute(siteData: SiteData, route: string): string {
return route.slice(baseWithoutSuffix.length) 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;
}

2
types/shared.d.ts vendored

@ -20,7 +20,7 @@ export interface SiteData<ThemeConfig = any> {
lang: string lang: string
title: string title: string
description: string description: string
head: HeadConfig[] head: HeadConfig[] | ( (pageData: PageData) => HeadConfig[])
themeConfig: ThemeConfig themeConfig: ThemeConfig
scrollOffset: number | string scrollOffset: number | string
locales: Record<string, LocaleConfig> locales: Record<string, LocaleConfig>

Loading…
Cancel
Save