The Trans Directory
feat: font specification flexibility
+61
-6
+4
-2
quartz/components/Head.tsx
+4
-2
quartz/components/Head.tsx
···
1
1
import { i18n } from "../i18n"
2
2
import { FullSlug, joinSegments, pathToRoot } from "../util/path"
3
3
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
4
-
import { googleFontHref } from "../util/theme"
4
+
import { getFontSpecificationName, googleFontHref } from "../util/theme"
5
5
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
6
6
import satori, { SatoriOptions } from "satori"
7
7
import { loadEmoji, getIconCode } from "../util/emoji"
···
77
77
78
78
// Memoize google fonts
79
79
if (!fontsPromise && cfg.generateSocialImages) {
80
-
fontsPromise = getSatoriFont(cfg.theme.typography.header, cfg.theme.typography.body)
80
+
const headerFont = getFontSpecificationName(cfg.theme.typography.header)
81
+
const bodyFont = getFontSpecificationName(cfg.theme.typography.body)
82
+
fontsPromise = getSatoriFont(headerFont, bodyFont)
81
83
}
82
84
83
85
const slug = fileData.filePath
+57
-4
quartz/util/theme.ts
+57
-4
quartz/util/theme.ts
···
15
15
darkMode: ColorScheme
16
16
}
17
17
18
+
type FontSpecification =
19
+
| string
20
+
| {
21
+
name: string
22
+
weights?: number[]
23
+
includeItalic?: boolean
24
+
}
25
+
18
26
export interface Theme {
19
27
typography: {
20
-
header: string
21
-
body: string
22
-
code: string
28
+
header: FontSpecification
29
+
body: FontSpecification
30
+
code: FontSpecification
23
31
}
24
32
cdnCaching: boolean
25
33
colors: Colors
···
32
40
'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
33
41
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
34
42
43
+
export function getFontSpecificationName(spec: FontSpecification): string {
44
+
if (typeof spec === "string") {
45
+
return spec
46
+
}
47
+
48
+
return spec.name
49
+
}
50
+
51
+
function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpecification) {
52
+
if (typeof spec === "string") {
53
+
spec = { name: spec }
54
+
}
55
+
56
+
const defaultIncludeWeights = type === "header" ? [400, 700] : [400, 600]
57
+
const defaultIncludeItalic = type === "body"
58
+
const weights = spec.weights ?? defaultIncludeWeights
59
+
const italic = spec.includeItalic ?? defaultIncludeItalic
60
+
61
+
const features: string[] = []
62
+
if (italic) {
63
+
features.push("ital")
64
+
}
65
+
66
+
if (weights.length > 1) {
67
+
const weightSpec = italic
68
+
? weights
69
+
.flatMap((w) => [`0,${w}`, `1,${w}`])
70
+
.sort()
71
+
.join(";")
72
+
: weights.join(";")
73
+
74
+
features.push(`wght@${weightSpec}`)
75
+
}
76
+
77
+
if (features.length > 0) {
78
+
return `${spec.name}:${features.join(",")}`
79
+
}
80
+
81
+
return spec.name
82
+
}
83
+
35
84
export function googleFontHref(theme: Theme) {
36
85
const { code, header, body } = theme.typography
37
-
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`
86
+
const headerFont = formatFontSpecification("header", header)
87
+
const bodyFont = formatFontSpecification("body", body)
88
+
const codeFont = formatFontSpecification("code", code)
89
+
90
+
return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
38
91
}
39
92
40
93
export function joinStyles(theme: Theme, ...stylesheet: string[]) {