GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-28 07:14:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support custom og images via frontmatter

Browse Source
This commit is contained in:
Ben Schlegel 2023-09-23 14:56:33 +02:00
parent 997044d6d1
commit 3c038677d6
No known key found for this signature in database
GPG Key ID: 8BDB8891C1575E22
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
quartz/components/Head.tsx
View File

@ -129,7 +129,12 @@ export default (() => {
const slug = fileData.filePath
const filePath = slug?.replaceAll("/", "-")
const title = fileData.frontmatter?.title ?? "Untitled"
const description = fileData.description?.trim() ?? "No description provided"
// Get file description (priority: frontmatter > fileData > default)
let description = fileData.description?.trim() ?? "No description provided"
if (fileData.frontmatter?.socialDescription) {
description = fileData.frontmatter.socialDescription
}
if (cfg.generateSocialImages) {
// Generate folders for social images (if they dont exist yet)
@ -158,7 +163,13 @@ export default (() => {
// Use default og image if filePath doesnt exist (for autogenerated paths with no .md file)
const useDefaultOgImage = filePath === undefined || !cfg.generateSocialImages
const ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath
// Path to og/social image (priority: frontmatter > generated image (if enabled) > default image)
let ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath
const frontmatterImgUrl = fileData.frontmatter?.socialImageUrl
if (frontmatterImgUrl) {
ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}`
}
return (
<head>
@ -174,7 +185,7 @@ export default (() => {
<meta name="twitter:description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:image:type" content={`image/${extension}`} />
<meta property="og:image:alt" content={fileData.description} />
<meta property="og:image:alt" content={description} />
<meta property="og:image:width" content={"" + ogWidth} />
<meta property="og:image:height" content={"" + ogHeight} />
<meta property="og:image:url" content={ogImagePath} />