From 6d195fd40a48fe275dc910f7a115e5b2f3c1c056 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 06 Mar 2025 17:21:50 +0000
Subject: [PATCH] feat: font specification flexibility
---
quartz/util/theme.ts | 61 ++++++++++++++++++++++++++++--
1 files changed, 57 insertions(+), 4 deletions(-)
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 0c90306..06ddd8c 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -15,11 +15,19 @@
darkMode: ColorScheme
}
+type FontSpecification =
+ | string
+ | {
+ name: string
+ weights?: number[]
+ includeItalic?: boolean
+ }
+
export interface Theme {
typography: {
- header: string
- body: string
- code: string
+ header: FontSpecification
+ body: FontSpecification
+ code: FontSpecification
}
cdnCaching: boolean
colors: Colors
@@ -32,9 +40,54 @@
'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
+export function getFontSpecificationName(spec: FontSpecification): string {
+ if (typeof spec === "string") {
+ return spec
+ }
+
+ return spec.name
+}
+
+function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpecification) {
+ if (typeof spec === "string") {
+ spec = { name: spec }
+ }
+
+ const defaultIncludeWeights = type === "header" ? [400, 700] : [400, 600]
+ const defaultIncludeItalic = type === "body"
+ const weights = spec.weights ?? defaultIncludeWeights
+ const italic = spec.includeItalic ?? defaultIncludeItalic
+
+ const features: string[] = []
+ if (italic) {
+ features.push("ital")
+ }
+
+ if (weights.length > 1) {
+ const weightSpec = italic
+ ? weights
+ .flatMap((w) => [`0,${w}`, `1,${w}`])
+ .sort()
+ .join(";")
+ : weights.join(";")
+
+ features.push(`wght@${weightSpec}`)
+ }
+
+ if (features.length > 0) {
+ return `${spec.name}:${features.join(",")}`
+ }
+
+ return spec.name
+}
+
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 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`
}
export function joinStyles(theme: Theme, ...stylesheet: string[]) {
--
Gitblit v1.10.0