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

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 { 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, googleSubFontHref } from "../util/theme" import { googleFontHref } 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"
import { JSX } from "preact/jsx-runtime"
export default (() => { export default (() => {
const Head: QuartzComponent = ({ const Head: QuartzComponent = ({
cfg, cfg,
@ -44,8 +45,9 @@ 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" />
<link rel="stylesheet" href={googleFontHref(cfg.theme)} /> {(googleFontHref(cfg.theme, cfg.pageTitle) as string[]).map((href: string) => (
<link rel="stylesheet" href={googleSubFontHref(cfg.theme, cfg.pageTitle)} /> <link rel="stylesheet" href={href} />
))}
</> </>
)} )}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" /> <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 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, googleSubFontHref, joinStyles, processGoogleFonts } from "../../util/theme" import { googleFontHref, 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"
@ -214,14 +214,12 @@ 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 googleFontsResponse = await fetch(googleFontHref(ctx.cfg.configuration.theme)) const fontUrls = googleFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle)
googleFontsStyleSheet = await googleFontsResponse.text() 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)) googleFontsStyleSheet = fontStyleSheets.join('\n')
const googleSubFontsStyleSheet = await googleSubFontsResponse.text()
googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleSubFontsStyleSheet}`;
if (!cfg.baseUrl) { if (!cfg.baseUrl) {
throw new Error( throw new Error(

22
quartz/util/theme.ts
View File

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