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

Made googleFontHref return array of URLs

Browse Source
This commit is contained in:
Felix Nie 2025-03-17 12:36:26 +08:00
parent e2ba7f01a8
commit a35f6e2399
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
quartz/components/Head.tsx
View File

@ -1,10 +1,11 @@
import { i18n } from "../i18n"
import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
import { googleFontHref, googleSubFontHref } from "../util/theme"
import { googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { unescapeHTML } from "../util/escape"
import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
import { JSX } from "preact/jsx-runtime"
export default (() => {
const Head: QuartzComponent = ({
cfg,
@ -44,8 +45,9 @@ export default (() => {
<>
<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="stylesheet" href={googleSubFontHref(cfg.theme, cfg.pageTitle)} />
{(googleFontHref(cfg.theme, cfg.pageTitle) as string[]).map((href: string) => (
<link rel="stylesheet" href={href} />
))}
</>
)}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />

14
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 { BuildCtx } from "../../util/ctx"
import { QuartzComponent } from "../../components/types"
import { googleFontHref, googleSubFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
import { Features, transform } from "lightningcss"
import { transform as transpile } from "esbuild"
import { write } from "./helpers"
@ -214,14 +214,12 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
if (cfg.theme.fontOrigin === "local") {
// let the user do it themselves in css
} else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
// when cdnCaching is true, we link to google fonts in Head.tsx
const googleFontsResponse = await fetch(googleFontHref(ctx.cfg.configuration.theme))
googleFontsStyleSheet = await googleFontsResponse.text()
// When cdnCaching is true, we link to google fonts in Head.tsx
const fontUrls = googleFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle)
const fontResponses = await Promise.all(fontUrls.map(url => fetch(url)))
const fontStyleSheets = await Promise.all(fontResponses.map(res => res.text()))
const googleSubFontsResponse = await fetch(googleSubFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle))
const googleSubFontsStyleSheet = await googleSubFontsResponse.text()
googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleSubFontsStyleSheet}`;
googleFontsStyleSheet = fontStyleSheets.join('\n')
if (!cfg.baseUrl) {
throw new Error(

22
quartz/util/theme.ts
View File

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