diff --git a/packages/logos-docusaurus-theme/src/client/components/OGImageRenderer/index.tsx b/packages/logos-docusaurus-theme/src/client/components/OGImageRenderer/index.tsx index 67270b8..25a12be 100644 --- a/packages/logos-docusaurus-theme/src/client/components/OGImageRenderer/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/OGImageRenderer/index.tsx @@ -22,6 +22,7 @@ import sharp, { ResizeOptions } from 'sharp' type RendererOptions = { generateImage?: boolean imageTitle?: string + imageSubtitle?: string } function parseRendererOptions(type: 'docs', doc: DocsPageData): RendererOptions @@ -43,8 +44,8 @@ function parseRendererOptions( ? _.get(doc, 'data.metadata.frontMatter') : _.get(doc, 'metadata.frontMatter') - const optNames = ['generateImage', 'imageTitle'] - const optKeys = ['og:generate_image', 'og:image_title'] + const optNames = ['generateImage', 'imageTitle', 'imageSubtitle'] + const optKeys = ['og:generate_image', 'og:image_title', 'og:image_subtitle'] const options: Record = {} const parsed: RendererOptions = {} @@ -69,6 +70,7 @@ function parseRendererOptions( if (options.generateImage) parsed.generateImage = boolean(options.generateImage) if (options.imageTitle) parsed.imageTitle = options.imageTitle + if (options.imageSubtitle) parsed.imageSubtitle = options.imageSubtitle return parsed } @@ -228,7 +230,10 @@ const Layout: React.FC<{ const docsImageRenderer = imageRendererFactory( 'docusaurus-plugin-content-docs', async (doc, { outDir, siteConfig }) => { - const { generateImage, imageTitle } = parseRendererOptions('docs', doc) + const { generateImage, imageTitle, imageSubtitle } = parseRendererOptions( + 'docs', + doc, + ) if (generateImage === false) return const logo = await getLogo(siteConfig, outDir) @@ -237,14 +242,18 @@ const docsImageRenderer = imageRendererFactory( return [ - {doc.plugin.id === 'default' ? 'Docs' : doc.plugin.id} - , - doc.version.badge && doc.version.label && ( - {doc.version.label} - ), - ]} + footer={ + imageSubtitle + ? [{imageSubtitle}] + : [ + + {doc.plugin.id === 'default' ? 'Docs' : doc.plugin.id} + , + doc.version.badge && doc.version.label && ( + {doc.version.label} + ), + ] + } logo={ logo && } @@ -267,7 +276,10 @@ const blogImageRenderer = imageRendererFactory( 'docusaurus-plugin-content-blog', async (page, { outDir, siteConfig }) => { const { pageType, data } = page - const { generateImage, imageTitle } = parseRendererOptions('blog', page) + const { generateImage, imageTitle, imageSubtitle } = parseRendererOptions( + 'blog', + page, + ) if (generateImage === false) return const logo = await getLogo(siteConfig, outDir) @@ -289,13 +301,17 @@ const blogImageRenderer = imageRendererFactory( ? page.data.label : '') } - footer={[ - page.plugin.blogTitle, - pageType === 'post' && - `by ${page.data.metadata.authors - .map((author) => author.name) - .join(', ')}`, - ]} + footer={ + imageSubtitle + ? [{imageSubtitle}] + : [ + page.plugin.blogTitle, + pageType === 'post' && + `by ${page.data.metadata.authors + .map((author) => author.name) + .join(', ')}`, + ] + } logo={ logo && } @@ -318,7 +334,10 @@ const pagesImageRenderer = imageRendererFactory( 'docusaurus-plugin-content-pages', async (page, { outDir, siteConfig }) => { const { metadata, plugin } = page - const { generateImage, imageTitle } = parseRendererOptions('page', page) + const { generateImage, imageTitle, imageSubtitle } = parseRendererOptions( + 'page', + page, + ) if (generateImage === false) return const url = new URL(siteConfig.url) @@ -332,7 +351,7 @@ const pagesImageRenderer = imageRendererFactory( imageTitle ?? ((metadata as MDXPageMetadata).frontMatter?.title || metadata.title) } - footer={url.host} + footer={imageSubtitle ?? url.host} logo={ logo && }