Skip to content

Commit be03d28

Browse files
valentin0hvalentin0h
committed
add tests
1 parent 7cbe8d4 commit be03d28

File tree

6 files changed

+634
-116
lines changed

6 files changed

+634
-116
lines changed

‎bun.lock‎

Lines changed: 161 additions & 28 deletions
Large diffs are not rendered by default.

‎packages/gitbook/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@
7070
"devDependencies": {
7171
"@argos-ci/playwright": "^3.10.0",
7272
"@cloudflare/next-on-pages": "1.13.7",
73-
"vercel": "^39.3.0",
7473
"@cloudflare/workers-types": "^4.20241230.0",
7574
"@playwright/test": "^1.49.1",
7675
"@types/js-cookie": "^3.0.6",
@@ -90,8 +89,10 @@
9089
"jsonwebtoken": "^9.0.2",
9190
"postcss": "^8",
9291
"psi": "^4.1.0",
92+
"stylelint": "^16.15.0",
9393
"tailwindcss": "^3.4.0",
9494
"ts-essentials": "^10.0.1",
95-
"typescript": "^5.5.3"
95+
"typescript": "^5.5.3",
96+
"vercel": "^39.3.0"
9697
}
9798
}

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

Lines changed: 63 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@ import {
2222
} from '@gitbook/colors';
2323
import { IconStyle, IconsProvider } from '@gitbook/icons';
2424

25-
import { fontNotoColorEmoji, fonts, ibmPlexMono } from '@/fonts';
25+
import {
26+
type CustomizationFont,
27+
fontNotoColorEmoji,
28+
fonts,
29+
generateFontFacesCSS,
30+
ibmPlexMono,
31+
} from '@/fonts';
2632
import { getSpaceLanguage } from '@/intl/server';
2733
import { getAssetURL } from '@/lib/assets';
2834
import { tcls } from '@/lib/tailwind';
@@ -33,37 +39,6 @@ import '@gitbook/icons/style.css';
3339
import './globals.css';
3440
import { GITBOOK_ICONS_TOKEN, GITBOOK_ICONS_URL } from '@v2/lib/env';
3541

36-
const CUSTTOM_FONTS_WORKER_URL = 'https://public-valentino.gitbook.space/';
37-
38-
interface FontFace {
39-
weight: number;
40-
url: string;
41-
}
42-
43-
interface CustomFont {
44-
fontFamily: string;
45-
faces: FontFace[];
46-
}
47-
48-
const regularFontWorkerUrl =
49-
'https://public-valentino.gitbook.space/valentino/fonts/3ey8MCM8uEpKWRFnaFp2/nvidia_regular.woff2';
50-
const boldFontWorkerUrl =
51-
'https://public-valentino.gitbook.space/valentino/fonts/3ey8MCM8uEpKWRFnaFp2/nvidia_bold.woff2';
52-
53-
// // This would come from props/API
54-
// const nvidiaFont: CustomFont = {
55-
// id: 'custom-font',
56-
// name: 'CustomFont',
57-
// links: {
58-
// regular: regularFontWorkerUrl,
59-
// bold: boldFontWorkerUrl,
60-
// },
61-
// display: 'swap',
62-
// fallback: ['system-ui', 'arial'],
63-
// };
64-
//
65-
// const customFont = nvidiaFont;
66-
6742
/**
6843
* Layout shared between the content and the PDF renderer.
6944
* It takes care of setting the theme and the language.
@@ -80,18 +55,21 @@ export async function CustomizationRootLayout(props: {
8055
const sidebarStyles = getSidebarStyles(customization);
8156
const { infoColor, successColor, warningColor, dangerColor } = getSemanticColors(customization);
8257

83-
const hasCustomFont = typeof customization.styling.font !== 'string';
58+
const font = customization.styling.font as CustomizationFont;
59+
60+
const hasCustomFont = typeof font !== 'string';
61+
8462
// Add custom font handling
85-
const customFontCSS = hasCustomFont
86-
? generateCustomFontFaces(customization.styling.font as CustomFont)
87-
: '';
63+
const customFontCSS = hasCustomFont ? generateFontFacesCSS(font) : '';
8864

8965
const customFontLinks = hasCustomFont
9066
? customization.styling.font.faces.map((face) => face.url)
9167
: [];
9268

9369
console.log('customFontLinks', customFontLinks, customization.styling.font);
9470

71+
// TODO: also add preconnect
72+
9573
return (
9674
<html
9775
suppressHydrationWarning
@@ -305,59 +283,58 @@ function getSemanticColors(
305283
},
306284
};
307285
}
308-
309286
/**
310287
* Define the custom font faces and set the --font-content to the custom font name
311288
*/
312-
function generateCustomFontFaces(customFont: CustomFont): string {
313-
const { fontFamily, faces } = customFont;
314-
315-
const regularFont = faces.find((face) => face.weight === 400);
316-
const boldFont = faces.find((face) => face.weight === 700);
317-
318-
if (!regularFont || !boldFont) {
319-
throw new Error('Custom font must have a regular and a bold face');
320-
}
321-
322-
const regular = `
323-
@font-face {
324-
font-family: ${fontFamily};
325-
font-style: normal;
326-
font-weight: ${regularFont.weight};
327-
font-display: swap;
328-
src: url(${regularFont.url});
329-
}
330-
`;
331-
332-
// const semiBold = `
333-
// @font-face {
334-
// font-family: ${fontFamily};
335-
// font-style: normal;
336-
// font-weight: 600;
337-
// font-display: swap;
338-
// src: url(${boldFont.url});
339-
// }
340-
// `
341-
// : "";
342-
343-
const bold = `
344-
@font-face {
345-
font-family: ${fontFamily};
346-
font-style: normal;
347-
font-weight: ${boldFont.weight};
348-
font-display: swap;
349-
src: url(${boldFont.url});
350-
}
351-
`;
352-
353-
return `
354-
${regular}
355-
${bold}
356-
:root {
357-
--font-content: ${fontFamily};
358-
}
359-
`;
360-
}
289+
// function generateCustomFontFaces(customFont: CustomizationFontDefinition): string {
290+
// const { fontFamily, faces } = customFont;
291+
//
292+
// const regularFont = faces.find((face) => face.weight === 400);
293+
// const boldFont = faces.find((face) => face.weight === 700);
294+
//
295+
// if (!regularFont || !boldFont) {
296+
// throw new Error('Custom font must have a regular and a bold face');
297+
// }
298+
//
299+
// const regular = `
300+
// @font-face {
301+
// font-family: ${fontFamily};
302+
// font-style: normal;
303+
// font-weight: ${regularFont.weight};
304+
// font-display: swap;
305+
// src: url(${regularFont.url});
306+
// }
307+
// `;
308+
//
309+
// // const semiBold = `
310+
// // @font-face {
311+
// // font-family: ${fontFamily};
312+
// // font-style: normal;
313+
// // font-weight: 600;
314+
// // font-display: swap;
315+
// // src: url(${boldFont.url});
316+
// // }
317+
// // `
318+
// // : "";
319+
//
320+
// const bold = `
321+
// @font-face {
322+
// font-family: ${fontFamily};
323+
// font-style: normal;
324+
// font-weight: ${boldFont.weight};
325+
// font-display: swap;
326+
// src: url(${boldFont.url});
327+
// }
328+
// `;
329+
//
330+
// return `
331+
// ${regular}
332+
// ${bold}
333+
// :root {
334+
// --font-content: ${fontFamily};
335+
// }
336+
// `;
337+
// }
361338
type ColorInput = string;
362339
function generateColorVariable(
363340
name: string,

0 commit comments

Comments
 (0)