feat: Реализована генерация мета тегов Open Graph

modx-pro · Jul 12, 2023 · a7864a8 · a7864a8
1 parent 1e1680a
commit a7864a8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
@@ -4,8 +4,6 @@ import { generateSidebar } from '../theme/plugins/sidebar'
 import { components } from '../theme/plugins/component'
 import 'dotenv/config'
 
-export const META_URL = 'https://docs.modx.pro/'
-export const META_TITLE = 'Docs MODX.PRO'
 export const META_DESCRIPTION = 'A simple and easy-to-use Open-Source project by and for the community, where you can find and explore the documentation of all popular MODX extras, and developers can easily describe their'
 
 export const searchLocale: Record<string, Partial<Omit<DefaultTheme.LocalSearchOptions, 'locales'>>> = {
@@ -38,13 +36,6 @@ export const config: LocaleConfig<DocsTheme.Config> = {
  label: 'English',
  lang: 'en',
  description: META_DESCRIPTION,
- head: [
- ['meta', { property: 'og:url', content: META_URL }],
- ['meta', { property: 'og:description', content: META_DESCRIPTION }],
- ['meta', { property: 'twitter:url', content: META_URL }],
- ['meta', { property: 'twitter:title', content: META_TITLE }],
- ['meta', { property: 'twitter:description', content: META_DESCRIPTION }],
- ],
 
  themeConfig: {
  nav: getNav(),

diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
@@ -1,5 +1,6 @@
 import type { DocsTheme } from '../theme/types'
-import { createContentLoader, defineConfigWithTheme } from 'vitepress'
+import type { DocsPageData } from '../theme/plugins/component'
+import { type HeadConfig, createContentLoader, defineConfigWithTheme } from 'vitepress'
 import { config as en, searchLocale as searchLocaleEn } from './en'
 import { config as root, searchLocale as searchLocaleRu } from './ru'
 import languages from '../theme/syntaxes'
@@ -11,7 +12,10 @@ import { resolve } from 'node:path'
 import { slugify } from 'transliteration'
 import { fileURLToPath, URL } from 'node:url'
 import { modhost, modstore, modxpro, telegram } from '../../icons'
+import { coreMembers } from '../../authors'
+import { normalize } from 'vitepress/dist/client/shared'
 
+const SITE_HOST = 'https://docs.modx.pro/'
 const SITE_TITLE = 'docs.modx.pro'
 const SITE_TITLE_SEPARATOR = ' / '
 
@@ -106,7 +110,7 @@ export default defineConfigWithTheme<DocsTheme.Config>({
  },
 
  buildEnd: async ({ outDir }) => {
- const sitemap = new SitemapStream({ hostname: 'https://docs.modx.pro/' })
+ const sitemap = new SitemapStream({ hostname: SITE_HOST })
  const pages = await createContentLoader('**/*.md').load()
  const writeStream = createWriteStream(resolve(outDir, 'sitemap.xml'))
 
@@ -121,6 +125,36 @@ export default defineConfigWithTheme<DocsTheme.Config>({
  return prepareData(pageData, siteConfig)
  },
 
+ transformHead({ pageData }: { pageData: DocsPageData }) {
+ const title = pageData.title + SITE_TITLE_SEPARATOR + SITE_TITLE
+ const image = pageData?.component?.logo || SITE_HOST + 'icon-512.png'
+ const author = pageData?.component?.author?.modxpro
+ || pageData?.component?.author?.github
+ || coreMembers.at(0)?.links?.find(item => item.link.startsWith('https://modx.pro/'))?.link
+
+ const output: HeadConfig[] = [
+ ['meta', { property: 'og:title', content: title }],
+ ['meta', { property: 'og:description', content: pageData.description }],
+ ['meta', { property: 'og:type', content: 'article' }],
+ ['meta', { property: 'og:url', content: SITE_HOST + normalize(pageData.relativePath) }],
+ ['meta', { property: 'og:image', content: image }],
+
+ ['meta', { property: 'og:site_name', content: SITE_TITLE }],
+
+ ['meta', { name: 'twitter:title', content: title }],
+ ['meta', { name: 'twitter:description', content: pageData.description }],
+ ['meta', { name: 'twitter:card', content: 'summary' }],
+ ]
+
+ if (author) {
+ output.push(
+ ['meta', { property: 'article:author', content: author }],
+ )
+ }
+
+ return output
+ },
+
  vite: {
  resolve: {
  alias: [

diff --git a/docs/.vitepress/config/ru.ts b/docs/.vitepress/config/ru.ts
@@ -4,8 +4,6 @@ import { generateSidebar, generateFaqSidebar } from '../theme/plugins/sidebar'
 import { components } from '../theme/plugins/component'
 import 'dotenv/config'
 
-export const META_URL = 'https://docs.modx.pro/'
-export const META_TITLE = 'Docs MODX.PRO'
 export const META_DESCRIPTION = 'Простой и удобный Open-Source проект от сообщества и для сообщества, где вы можете найти и изучить документацию всех популярных компонентов MODX, а разработчики – легко описать свои'
 
 export const searchLocale: Record<string, Partial<Omit<DefaultTheme.LocalSearchOptions, 'locales'>>> = {
@@ -38,13 +36,6 @@ export const config: LocaleConfig<DocsTheme.Config> = {
  label: 'Русский',
  lang: 'ru',
  description: META_DESCRIPTION,
- head: [
- ['meta', { property: 'og:url', content: META_URL }],
- ['meta', { property: 'og:description', content: META_DESCRIPTION }],
- ['meta', { property: 'twitter:url', content: META_URL }],
- ['meta', { property: 'twitter:title', content: META_TITLE }],
- ['meta', { property: 'twitter:description', content: META_DESCRIPTION }],
- ],
 
  themeConfig: {
  nav: getNav(),