smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 14:34:23 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: more advanced font specification

Browse Source
This commit is contained in:
Autumn 2024-10-10 14:18:04 -05:00
parent 0d1f15d37c
commit c933b93db2
No known key found for this signature in database
GPG Key ID: E1542373839B2670
1 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
quartz/util/theme.ts
View File

@ -15,11 +15,19 @@ interface Colors {
darkMode: ColorScheme
}
interface FontInfo {
/**
* e.g. "ital,wght@0,400;1,200"
*/
features: string,
}
export interface Theme {
fonts?: Record<string, FontInfo>,
typography: {
header: string
body: string
code: string
header: string | string[]
body: string | string[]
code: string | string[]
}
cdnCaching: boolean
colors: Colors
@ -32,9 +40,34 @@ const DEFAULT_SANS_SERIF =
'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
function makeFamilySection(theme: Theme, family: string | string[], defaultFeatures: string) {
const families = Array.isArray(family) ? family : [family]
return "family=" + families.map(f => {
const features = theme.fonts?.[f]?.features ?? defaultFeatures
if(features === "") {
return `${f}:wght@400` // matches unplugin-fonts; should be a sane default
} else {
return `${f}:${features}`
}
}).join("&family=")
}
export function googleFontHref(theme: Theme) {
const { code, header, body } = theme.typography
return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
const codeSection = makeFamilySection(theme, code, "")
const headerSection = makeFamilySection(theme, header, "wght@400;700")
const bodySection = makeFamilySection(theme, body, "ital,wght@0,400;0,600;1,400;1,600")
return `https://fonts.googleapis.com/css2?${codeSection}&${headerSection}&${bodySection}&display=swap`
}
function renderFonts(fonts: string | string[]) {
if(Array.isArray(fonts)) {
return fonts.map(s => `"${s}"`).join(", ")
} else {
return `"${fonts}"`
}
}
export function joinStyles(theme: Theme, ...stylesheet: string[]) {
@ -52,9 +85,9 @@ ${stylesheet.join("\n\n")}
--highlight: ${theme.colors.lightMode.highlight};
--textHighlight: ${theme.colors.lightMode.textHighlight};
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
--codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
--headerFont: ${renderFonts(theme.typography.header)}, ${DEFAULT_SANS_SERIF};
--bodyFont: ${renderFonts(theme.typography.body)}, ${DEFAULT_SANS_SERIF};
--codeFont: ${renderFonts(theme.typography.code)}, ${DEFAULT_MONO};
}
:root[saved-theme="dark"] {