Skip to content

Commit 90d7ca2

Browse files
valentin0hvalentin0h
committed
clean up
1 parent bae415c commit 90d7ca2

File tree

4 files changed

+61
-104
lines changed

4 files changed

+61
-104
lines changed

‎packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

+18-80
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,7 @@ import {
2222
} from '@gitbook/colors';
2323
import { IconStyle, IconsProvider } from '@gitbook/icons';
2424

25-
import {
26-
type CustomizationFont,
27-
fontNotoColorEmoji,
28-
fonts,
29-
generateFontFacesCSS,
30-
getCustomFontSources,
31-
getFontData,
32-
ibmPlexMono,
33-
} from '@/fonts';
25+
import { fontNotoColorEmoji, getFontData } from '@/fonts';
3426
import { getSpaceLanguage } from '@/intl/server';
3527
import { getAssetURL } from '@/lib/assets';
3628
import { tcls } from '@/lib/tailwind';
@@ -77,8 +69,7 @@ export async function CustomizationRootLayout(props: {
7769
sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
7870
'links' in customization.styling && `links-${customization.styling.links}`,
7971
fontNotoColorEmoji.variable,
80-
!fontData.isCustom ? fontData.fontVariable : '', // Only use fontVariable for default fonts
81-
ibmPlexMono.variable
72+
fontData.cssClass
8273
)}
8374
>
8475
<head>
@@ -87,22 +78,23 @@ export async function CustomizationRootLayout(props: {
8778
) : null}
8879

8980
{/* Font preloading for custom fonts */}
90-
{fontData.isCustom &&
91-
fontData.fontSources.map(({ url, format }) => (
92-
<link
93-
key={url.href}
94-
rel="preload"
95-
href={url.href}
96-
as="font"
97-
type={format ? `font/${format}` : undefined}
98-
crossOrigin="anonymous"
99-
/>
100-
))}
81+
{fontData.preloadSources
82+
? fontData.preloadSources.map(({ url, format }) => (
83+
<link
84+
key={url}
85+
rel="preload"
86+
href={url}
87+
as="font"
88+
type={format ? `font/${format}` : undefined}
89+
crossOrigin="anonymous"
90+
/>
91+
))
92+
: null}
10193

10294
{/* Custom font CSS */}
103-
{fontData.isCustom && fontData.fontCSS && (
104-
<style id="custom-font-styles">{fontData.fontCSS}</style>
105-
)}
95+
{fontData.cssDefinitions ? (
96+
<style id="custom-font-styles">{fontData.cssDefinitions}</style>
97+
) : null}
10698

10799
<style
108100
nonce={
@@ -149,9 +141,6 @@ export async function CustomizationRootLayout(props: {
149141
</head>
150142
<body
151143
className={tcls(
152-
fontNotoColorEmoji.className,
153-
hasCustomFont ? 'font-sans' : fonts[customization.styling.font].className,
154-
`${ibmPlexMono.variable}`,
155144
'bg-tint-base',
156145
'theme-muted:bg-tint-subtle',
157146
'theme-bold-tint:bg-tint-subtle',
@@ -286,58 +275,7 @@ function getSemanticColors(
286275
},
287276
};
288277
}
289-
/**
290-
* Define the custom font faces and set the --font-content to the custom font name
291-
*/
292-
// function generateCustomFontFaces(customFont: CustomizationFontDefinition): string {
293-
// const { fontFamily, faces } = customFont;
294-
//
295-
// const regularFont = faces.find((face) => face.weight === 400);
296-
// const boldFont = faces.find((face) => face.weight === 700);
297-
//
298-
// if (!regularFont || !boldFont) {
299-
// throw new Error('Custom font must have a regular and a bold face');
300-
// }
301-
//
302-
// const regular = `
303-
// @font-face {
304-
// font-family: ${fontFamily};
305-
// font-style: normal;
306-
// font-weight: ${regularFont.weight};
307-
// font-display: swap;
308-
// src: url(${regularFont.url});
309-
// }
310-
// `;
311-
//
312-
// // const semiBold = `
313-
// // @font-face {
314-
// // font-family: ${fontFamily};
315-
// // font-style: normal;
316-
// // font-weight: 600;
317-
// // font-display: swap;
318-
// // src: url(${boldFont.url});
319-
// // }
320-
// // `
321-
// // : "";
322-
//
323-
// const bold = `
324-
// @font-face {
325-
// font-family: ${fontFamily};
326-
// font-style: normal;
327-
// font-weight: ${boldFont.weight};
328-
// font-display: swap;
329-
// src: url(${boldFont.url});
330-
// }
331-
// `;
332-
//
333-
// return `
334-
// ${regular}
335-
// ${bold}
336-
// :root {
337-
// --font-content: ${fontFamily};
338-
// }
339-
// `;
340-
// }
278+
341279
type ColorInput = string;
342280
function generateColorVariable(
343281
name: string,

‎packages/gitbook/src/fonts/customFont.test.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { describe, test, expect } from 'bun:test';
1+
import { describe, expect, test } from 'bun:test';
2+
import stylelint from 'stylelint';
23
import {
34
type CustomizationFontDefinition,
45
generateFontFacesCSS,
5-
getCustomFontSources,
6+
getFontSourcesToPreload,
67
} from './customFonts';
7-
import stylelint from 'stylelint';
88

99
const TEST_FONTS = {
1010
basic: {
@@ -281,14 +281,14 @@ describe('getCustomFontPreloadLinks', () => {
281281

282282
preloadTestCases.forEach(({ name, font, expectedCount }) => {
283283
test(`extracts ${expectedCount} URLs from ${name}`, () => {
284-
const result = getCustomFontSources(font);
284+
const result = getFontSourcesToPreload(font);
285285
expect(result).toBeArray();
286286
expect(result.length).toBe(expectedCount);
287287
});
288288
});
289289

290290
test('handles different URL types correctly', () => {
291-
const result = getCustomFontSources(TEST_FONTS.variousURLs);
291+
const result = getFontSourcesToPreload(TEST_FONTS.variousURLs);
292292

293293
expect(result).toBeArray();
294294
expect(result.length).toBe(3);

‎packages/gitbook/src/fonts/customFonts.ts

+37-18
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export type FontWeight = number;
1818
/** A font file referenced within a font-face declaration, specifying the file's location and format. */
1919
export interface FontSource {
2020
/** The absolute or relative URL pointing to the font file. */
21-
url: URL;
21+
url: string;
2222
/** The format of the font file. Prefer 'woff2' for modern browsers. */
2323
format?: 'woff2' | 'woff';
2424
}
@@ -67,7 +67,7 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
6767
.map((face) => {
6868
const srcAttr = face.sources
6969
.map((source) => {
70-
let srcDefinition = `url(${source.url.href})`;
70+
let srcDefinition = `url(${source.url})`;
7171

7272
if (source.format) {
7373
srcDefinition += ` format('${source.format}')`;
@@ -98,21 +98,39 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
9898
}
9999

100100
/**
101-
* Get the list of font URLs to preload
101+
* Get the list of font sources to preload
102102
*/
103-
export function getCustomFontSources(customFont: CustomizationFontDefinition): FontSource[] {
104-
return customFont.fontFaces.flatMap((face) => face.sources);
103+
export function getFontSourcesToPreload(customFont: CustomizationFontDefinition): FontSource[] {
104+
const allSources = customFont.fontFaces.flatMap((face) => face.sources);
105+
106+
const uniqueSources = new Map<string, FontSource>();
107+
108+
// Add each source to the map, using URL as the key
109+
allSources.forEach((source) => {
110+
const url = source.url.toString();
111+
if (!uniqueSources.has(url)) {
112+
uniqueSources.set(url, source);
113+
}
114+
});
115+
116+
return Array.from(uniqueSources.values());
105117
}
106118

119+
/**
120+
* The font data for a custom font
121+
* fontCSS is the @font-face CSS definitions
122+
* preloadSources is the list of font files to preload
123+
*/
107124
type CustomFontData = {
108-
isCustom: true;
109-
fontCSS: string;
110-
fontSources: FontSource[];
125+
cssClass: 'font-content';
126+
cssDefinitions: string;
127+
preloadSources: FontSource[];
111128
};
112129

113130
type DefaultFontData = {
114-
isCustom: false;
115-
fontVariable: string;
131+
cssClass: string;
132+
cssDefinitons: undefined;
133+
preloadSources: undefined;
116134
};
117135

118136
/**
@@ -121,18 +139,19 @@ type DefaultFontData = {
121139
* For custom fonts it returns the CSS for the @font-face definitions and font URLs to preload
122140
*/
123141
export function getFontData(font: CustomizationFont): CustomFontData | DefaultFontData {
124-
const isCustomFont = typeof font !== 'string';
125-
126-
if (isCustomFont) {
142+
if (typeof font === 'string') {
127143
return {
128-
isCustom: true,
129-
fontCSS: generateFontFacesCSS(font as CustomizationFontDefinition),
130-
fontSources: getCustomFontSources(font as CustomizationFontDefinition),
144+
// next/font variable name
145+
cssClass: fonts[font].variable,
146+
cssDefinitons: undefined,
147+
preloadSources: undefined,
131148
};
132149
}
133150

134151
return {
135-
isCustom: false,
136-
fontVariable: fonts[font].variable,
152+
// custom font variable name defined in tailwind.config.js
153+
cssClass: 'font-content',
154+
cssDefinitions: generateFontFacesCSS(font),
155+
preloadSources: getFontSourcesToPreload(font),
137156
};
138157
}

‎packages/gitbook/tailwind.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const config: Config = {
7272
'current-page': 'current="page"',
7373
},
7474
fontFamily: {
75-
sans: ['var(--font-content)', 'arial', 'sans-serif'],
75+
content: ['var(--font-content)', 'arial', 'sans-serif'],
7676
mono: ['var(--font-mono)'],
7777
emoji: [
7878
'Apple Color Emoji',

0 commit comments

Comments
 (0)