Added googleSubFontHref function

This commit is contained in:
Felix Nie 2025-03-17 02:46:11 +08:00
parent c8ae52ee0f
commit 36e6361fa9
3 changed files with 17 additions and 4 deletions

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, googleSubFontHref } 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"
@ -45,6 +45,7 @@ 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)} /> <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
<link rel="stylesheet" href={googleSubFontHref(cfg.theme, cfg.pageTitle)} />
</> </>
)} )}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />

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, googleSubFontHref, 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"
@ -215,8 +215,13 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
// 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 response = await fetch(googleFontHref(ctx.cfg.configuration.theme)) const googleFontsResponse = await fetch(googleFontHref(ctx.cfg.configuration.theme))
googleFontsStyleSheet = await response.text() googleFontsStyleSheet = await googleFontsResponse.text()
const googleSubFontsResponse = await fetch(googleSubFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle))
const googleSubFontsStyleSheet = await googleSubFontsResponse.text()
googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleSubFontsStyleSheet}`;
if (!cfg.baseUrl) { if (!cfg.baseUrl) {
throw new Error( throw new Error(

View File

@ -91,6 +91,13 @@ export function googleFontHref(theme: Theme) {
return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap` return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
} }
export function googleSubFontHref(theme: Theme, text: string): string {
const { title } = theme.typography;
const titleFont = formatFontSpecification("title", title);
return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`;
}
export interface GoogleFontFile { export interface GoogleFontFile {
url: string url: string
filename: string filename: string