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

Adopted the googleFontHref + googleFontSubsetHref method

Browse Source
This commit is contained in:
Felix Nie 2025-03-18 00:46:14 +08:00
parent 2d8505a538
commit e135ab434b
3 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
quartz/components/Head.tsx
View File

@ -1,7 +1,7 @@
import { i18n } from "../i18n" import { i18n } from "../i18n"
import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path" import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources" import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
import { googleFontHref } from "../util/theme" import { googleFontHref, googleFontSubsetHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { unescapeHTML } from "../util/escape" import { unescapeHTML } from "../util/escape"
import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage" import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
@ -44,9 +44,8 @@ export default (() => {
<> <>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" />
{(googleFontHref(cfg.theme, cfg.pageTitle) as string[]).map((href: string) => ( <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
<link rel="stylesheet" href={href} /> <link rel="stylesheet" href={googleFontSubsetHref(cfg.theme, cfg.pageTitle)} />
))}
</> </>
)} )}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />

17
quartz/plugins/emitters/componentResources.ts
View File

@ -9,7 +9,7 @@ import styles from "../../styles/custom.scss"
import popoverStyle from "../../components/styles/popover.scss" import popoverStyle from "../../components/styles/popover.scss"
import { BuildCtx } from "../../util/ctx" import { BuildCtx } from "../../util/ctx"
import { QuartzComponent } from "../../components/types" import { QuartzComponent } from "../../components/types"
import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme" import { googleFontHref, googleFontSubsetHref, joinStyles, processGoogleFonts } from "../../util/theme"
import { Features, transform } from "lightningcss" import { Features, transform } from "lightningcss"
import { transform as transpile } from "esbuild" import { transform as transpile } from "esbuild"
import { write } from "./helpers" import { write } from "./helpers"
@ -210,12 +210,17 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
if (cfg.theme.fontOrigin === "local") { if (cfg.theme.fontOrigin === "local") {
// let the user do it themselves in css // let the user do it themselves in css
} else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) { } else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
// When cdnCaching is true, we link to google fonts in Head.tsx // when cdnCaching is true, we link to google fonts in Head.tsx
const fontUrls = googleFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle) const theme = ctx.cfg.configuration.theme
const fontResponses = await Promise.all(fontUrls.map(url => fetch(url))) const title = ctx.cfg.configuration.pageTitle
const fontStyleSheets = await Promise.all(fontResponses.map(res => res.text()))
googleFontsStyleSheet = fontStyleSheets.join('\n') const fontResponse = await fetch(googleFontHref(theme))
googleFontsStyleSheet = await fontResponse.text()
const fontSubsetResponse = await fetch(googleFontSubsetHref(theme, title))
const googleFontSubsetStyleSheet = await fontSubsetResponse.text()
googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleFontSubsetStyleSheet}`
if (!cfg.baseUrl) { if (!cfg.baseUrl) {
throw new Error( throw new Error(

18
quartz/util/theme.ts
View File

@ -82,24 +82,20 @@ function formatFontSpecification(type: "title" | "header" | "body" | "code", spe
return spec.name return spec.name
} }
export function googleFontHref(theme: Theme, text: string): string[] { export function googleFontHref(theme: Theme) {
const { header, body, code } = theme.typography const { header, body, code } = theme.typography
const title = theme.typography.title || header
const titleFont = formatFontSpecification("title", title)
const headerFont = formatFontSpecification("header", header) const headerFont = formatFontSpecification("header", header)
const bodyFont = formatFontSpecification("body", body) const bodyFont = formatFontSpecification("body", body)
const codeFont = formatFontSpecification("code", code) const codeFont = formatFontSpecification("code", code)
let hrefs = [ return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`
`https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`, }
]
if (titleFont !== headerFont && titleFont !== bodyFont && titleFont !== codeFont) { export function googleFontSubsetHref(theme: Theme, text: string) {
hrefs.push(`https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`) const title = theme.typography.title || theme.typography.header
} const titleFont = formatFontSpecification("title", title)
return hrefs return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`
} }
export interface GoogleFontFile { export interface GoogleFontFile {