keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-22 00:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(fonts): allow PageTitle to have its own font subset (#1848)

Browse Source 
* fix(explorer): vertically center the Explorer toggle under mobile view

* Added a separate title font configuration

* Added googleSubFontHref function

* Applied --titleFont to PageTitle

* Made googleFontHref return array of URLs

* Dealing with empty and undefined title

* Minor update

* Dealing with empty and undefined title

* Refined font inclusion logic

* Adopted the googleFontHref + googleFontSubsetHref method

* Adaptively include font subset for PageTitle

* Restored default config

* Minor changes on configuration docs

* Formatted source code
This commit is contained in:
Felix Nie
2025-03-19 12:43:32 +08:00
committed by GitHub
parent 9818e1ad57
commit 25979ab216
5 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
quartz/util/theme.ts
View File

@ -25,6 +25,7 @@ export type FontSpecification =
export interface Theme {
typography: {
title?: FontSpecification
header: FontSpecification
body: FontSpecification
code: FontSpecification
@ -48,7 +49,10 @@ export function getFontSpecificationName(spec: FontSpecification): string {
return spec.name
}
function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpecification) {
function formatFontSpecification(
type: "title" | "header" | "body" | "code",
spec: FontSpecification,
) {
if (typeof spec === "string") {
spec = { name: spec }
}
@ -82,12 +86,19 @@ function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpe
}
export function googleFontHref(theme: Theme) {
const { code, header, body } = theme.typography
const { header, body, code } = theme.typography
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`
return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`
}
export function googleFontSubsetHref(theme: Theme, text: string) {
const title = theme.typography.title || theme.typography.header
const titleFont = formatFontSpecification("title", title)
return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`
}
export interface GoogleFontFile {
@ -135,6 +146,7 @@ ${stylesheet.join("\n\n")}
--highlight: ${theme.colors.lightMode.highlight};
--textHighlight: ${theme.colors.lightMode.textHighlight};
--titleFont: "${getFontSpecificationName(theme.typography.title || theme.typography.header)}", ${DEFAULT_SANS_SERIF};
--headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
--codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};