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

Update Head.tsx

Browse Source
This commit is contained in:
enneaa 2025-03-13 04:17:11 +08:00 committed by GitHub
parent b00093c0cf
commit 99dc304092
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
quartz/components/Head.tsx
View File

@ -1,8 +1,8 @@
import { i18n } from "../i18n" import { i18n } from "../i18n"
import { FullSlug, joinSegments, pathToRoot } from "../util/path" import { FullSlug, joinSegments, pathToRoot } from "../util/path"
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources" import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
import { getFontSpecificationName, googleFontHref } from "../util/theme"  import { getFontSpecificationName, googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"  import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import satori, { SatoriOptions } from "satori" import satori, { SatoriOptions } from "satori"
import { loadEmoji, getIconCode } from "../util/emoji" import { loadEmoji, getIconCode } from "../util/emoji"
import fs from "fs" import fs from "fs"
@ -15,7 +15,7 @@ import { unescapeHTML } from "../util/escape"
* @param opts options for generating image * @param opts options for generating image
*/ */
async function generateSocialImage( async function generateSocialImage(
{ cfg, description, fileName, fontsPromise, title, fileData }: ImageOptions,  { cfg, description, fileName, fontsPromise, title, fileData }: ImageOptions,
userOpts: SocialImageOptions, userOpts: SocialImageOptions,
imageDir: string, imageDir: string,
) { ) {
@ -25,11 +25,11 @@ async function generateSocialImage(
// JSX that will be used to generate satori svg // JSX that will be used to generate satori svg
const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData) const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
const svg = await satori(imageComponent, {  const svg = await satori(imageComponent, {
width, width,
height, height,
fonts, fonts,
loadAdditionalAsset: async (languageCode: string, segment: string) => {  loadAdditionalAsset: async (languageCode: string, segment: string) => {
if (languageCode === "emoji") { if (languageCode === "emoji") {
return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}` return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
} }
@ -66,7 +66,7 @@ export default (() => {
externalResources, externalResources,
ctx, ctx,
}: QuartzComponentProps) => { }: QuartzComponentProps) => {
// Initialize options if not set  // Initialize options if not set
if (!fullOptions) { if (!fullOptions) {
if (typeof cfg.generateSocialImages !== "boolean") { if (typeof cfg.generateSocialImages !== "boolean") {
fullOptions = { ...defaultOptions, ...cfg.generateSocialImages } fullOptions = { ...defaultOptions, ...cfg.generateSocialImages }
@ -91,7 +91,7 @@ export default (() => {
fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
const titleSuffix = cfg.pageTitleSuffix ?? "" const titleSuffix = cfg.pageTitleSuffix ?? ""
const title = const title =
(fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix  (fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix
let description = "" let description = ""
if (fdDescription) { if (fdDescription) {
description = unescapeHTML(fdDescription) description = unescapeHTML(fdDescription)
@ -132,22 +132,22 @@ export default (() => {
const { css, js, additionalHead } = externalResources const { css, js, additionalHead } = externalResources
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`) const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
const path = url.pathname as FullSlug  const path = url.pathname as FullSlug
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!) const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
const iconPath = joinSegments(baseDir, "static/icon.png")   const iconPath = joinSegments(baseDir, "static/icon.png")
const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png` const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
// "static/social-images/slug-filename.md.webp" // "static/social-images/slug-filename.md.webp"
const ogImageGeneratedPath = `https://${cfg.baseUrl}/${fileDir.replace(  const ogImageGeneratedPath = `https://${cfg.baseUrl}/${fileDir.replace(
`${ctx.argv.output}/`, `${ctx.argv.output}/`,
"", "",
)}/${fileName}.${extension}` )}/${fileName}.${extension}`
// Use default og image if filePath doesnt exist (for autogenerated paths with no .md file) // Use default og image if filePath doesnt exist (for autogenerated paths with no .md file)
const useDefaultOgImage = fileName === undefined || !cfg.generateSocialImages  const useDefaultOgImage = fileName === undefined || !cfg.generateSocialImages
// Path to og/social image (priority: frontmatter > generated image (if enabled) > default image)  // Path to og/social image (priority: frontmatter > generated image (if enabled) > default image)
let ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath let ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath
// TODO: could be improved to support external images in the future // TODO: could be improved to support external images in the future
@ -155,31 +155,37 @@ export default (() => {
const frontmatterImgUrl = fileData.frontmatter?.socialImage const frontmatterImgUrl = fileData.frontmatter?.socialImage
// Override with default og image if config option is set // Override with default og image if config option is set
if (fileData.slug === "index") {  if (fileData.slug === "index") {
ogImagePath = ogImageDefaultPath ogImagePath = ogImageDefaultPath
} }
// Override with frontmatter url if existing // Override with frontmatter url if existing
if (frontmatterImgUrl) {  if (frontmatterImgUrl) {
ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}`  ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}`
} }
// Url of current page // Url of current page
const socialUrl = const socialUrl =
fileData.slug === "404" ? url.toString() : joinSegments(url.toString(), fileData.slug!)  fileData.slug === "404" ? url.toString() : joinSegments(url.toString(), fileData.slug!)
return ( return (
<head> <head>
<title>{title}</title>  <title>{title}</title>
<meta charSet="utf-8" />   <meta charSet="utf-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css" /> {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />    <>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href={googleFontHref(cfg.theme)} />
</>
)}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OG/Twitter meta tags */} {/* OG/Twitter meta tags */}
<meta name="og:site_name" content={cfg.pageTitle}></meta> <meta name="og:site_name" content={cfg.pageTitle}></meta>
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />  <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />