The Trans Directory
feat(fonts): allow PageTitle to have its own font subset (#1848)
* 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
+39
-10
+5
-4
docs/configuration.md
+5
-4
docs/configuration.md
···
41
41
- `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
42
42
- `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
43
43
- `theme`: configure how the site looks.
44
-
- `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
44
+
- `cdnCaching`: if `true` (default), use Google CDN to cache the fonts. This will generally be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
45
45
- `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
46
-
- `header`: Font to use for headers
47
-
- `code`: Font for inline and block quotes.
48
-
- `body`: Font for everything
46
+
- `title`: font for the title of the site (optional, same as `header` by default)
47
+
- `header`: font to use for headers
48
+
- `code`: font for inline and block quotes
49
+
- `body`: font for everything
49
50
- `colors`: controls the theming of the site.
50
51
- `light`: page background
51
52
- `lightgray`: borders
+4
-1
quartz/components/Head.tsx
+4
-1
quartz/components/Head.tsx
···
1
1
import { i18n } from "../i18n"
2
2
import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
3
3
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
4
-
import { googleFontHref } from "../util/theme"
4
+
import { googleFontHref, googleFontSubsetHref } from "../util/theme"
5
5
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
6
6
import { unescapeHTML } from "../util/escape"
7
7
import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
···
45
45
<link rel="preconnect" href="https://fonts.googleapis.com" />
46
46
<link rel="preconnect" href="https://fonts.gstatic.com" />
47
47
<link rel="stylesheet" href={googleFontHref(cfg.theme)} />
48
+
{cfg.theme.typography.title && (
49
+
<link rel="stylesheet" href={googleFontSubsetHref(cfg.theme, cfg.pageTitle)} />
50
+
)}
48
51
</>
49
52
)}
50
53
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
+1
quartz/components/PageTitle.tsx
+1
quartz/components/PageTitle.tsx
+14
-2
quartz/plugins/emitters/componentResources.ts
+14
-2
quartz/plugins/emitters/componentResources.ts
···
9
9
import popoverStyle from "../../components/styles/popover.scss"
10
10
import { BuildCtx } from "../../util/ctx"
11
11
import { QuartzComponent } from "../../components/types"
12
-
import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
12
+
import {
13
+
googleFontHref,
14
+
googleFontSubsetHref,
15
+
joinStyles,
16
+
processGoogleFonts,
17
+
} from "../../util/theme"
13
18
import { Features, transform } from "lightningcss"
14
19
import { transform as transpile } from "esbuild"
15
20
import { write } from "./helpers"
···
211
216
// let the user do it themselves in css
212
217
} else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
213
218
// when cdnCaching is true, we link to google fonts in Head.tsx
214
-
const response = await fetch(googleFontHref(ctx.cfg.configuration.theme))
219
+
const theme = ctx.cfg.configuration.theme
220
+
const response = await fetch(googleFontHref(theme))
215
221
googleFontsStyleSheet = await response.text()
222
+
223
+
if (theme.typography.title) {
224
+
const title = ctx.cfg.configuration.pageTitle
225
+
const response = await fetch(googleFontSubsetHref(theme, title))
226
+
googleFontsStyleSheet += `\n${await response.text()}`
227
+
}
216
228
217
229
if (!cfg.baseUrl) {
218
230
throw new Error(
+15
-3
quartz/util/theme.ts
+15
-3
quartz/util/theme.ts
···
25
25
26
26
export interface Theme {
27
27
typography: {
28
+
title?: FontSpecification
28
29
header: FontSpecification
29
30
body: FontSpecification
30
31
code: FontSpecification
···
48
49
return spec.name
49
50
}
50
51
51
-
function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpecification) {
52
+
function formatFontSpecification(
53
+
type: "title" | "header" | "body" | "code",
54
+
spec: FontSpecification,
55
+
) {
52
56
if (typeof spec === "string") {
53
57
spec = { name: spec }
54
58
}
···
82
86
}
83
87
84
88
export function googleFontHref(theme: Theme) {
85
-
const { code, header, body } = theme.typography
89
+
const { header, body, code } = theme.typography
86
90
const headerFont = formatFontSpecification("header", header)
87
91
const bodyFont = formatFontSpecification("body", body)
88
92
const codeFont = formatFontSpecification("code", code)
89
93
90
-
return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
94
+
return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`
95
+
}
96
+
97
+
export function googleFontSubsetHref(theme: Theme, text: string) {
98
+
const title = theme.typography.title || theme.typography.header
99
+
const titleFont = formatFontSpecification("title", title)
100
+
101
+
return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`
91
102
}
92
103
93
104
export interface GoogleFontFile {
···
135
146
--highlight: ${theme.colors.lightMode.highlight};
136
147
--textHighlight: ${theme.colors.lightMode.textHighlight};
137
148
149
+
--titleFont: "${getFontSpecificationName(theme.typography.title || theme.typography.header)}", ${DEFAULT_SANS_SERIF};
138
150
--headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
139
151
--bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
140
152
--codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};