Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-25 17:34:52 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Chinese font options (#2905)

Browse Source 
Co-authored-by: Amruth Pillai <im.amruth@gmail.com>
This commit is contained in:
Platinum1154
2026-04-26 06:32:42 +08:00
committed by GitHub
parent 77ad14b359
commit a4e7d6680d
11 changed files with 474 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/resume/hooks/use-css-variables.tsx
+3 -2
View File
@@ -5,6 +5,7 @@ import { useMemo } from "react";
import type { resumeDataSchema } from "@/schema/resume/data";
import { pageDimensionsAsMillimeters } from "@/schema/page";
import { buildResumeFontFamily } from "@/utils/fonts";
type UseCssVariablesProps = Pick<z.infer<typeof resumeDataSchema>, "picture" | "metadata">;
@@ -36,12 +37,12 @@ export const useCSSVariables = ({ picture, metadata }: UseCssVariablesProps) =>
"--page-text-color": metadata.design.colors.text,
"--page-primary-color": metadata.design.colors.primary,
"--page-background-color": metadata.design.colors.background,
"--page-body-font-family": `'${metadata.typography.body.fontFamily}', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
"--page-body-font-family": buildResumeFontFamily(metadata.typography.body.fontFamily),
"--page-body-font-weight": fontWeightStyles.lowestBodyFontWeight,
"--page-body-font-weight-bold": fontWeightStyles.highestBodyFontWeight,
"--page-body-font-size": metadata.typography.body.fontSize,
"--page-body-line-height": metadata.typography.body.lineHeight,
"--page-heading-font-family": `'${metadata.typography.heading.fontFamily}', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
"--page-heading-font-family": buildResumeFontFamily(metadata.typography.heading.fontFamily),
"--page-heading-font-weight": fontWeightStyles.lowestHeadingFontWeight,
"--page-heading-font-weight-bold": fontWeightStyles.highestHeadingFontWeight,
"--page-heading-font-size": metadata.typography.heading.fontSize,
src/components/resume/hooks/use-webfonts.tsx
+30 -6
View File
@@ -5,7 +5,7 @@ import { useIsMounted } from "usehooks-ts";
import type { typographySchema } from "@/schema/resume/data";
import webfontlist from "@/components/typography/webfontlist.json";
import { getFallbackWebFontFamilies, getLoadableWebFontWeights, webFontMap } from "@/utils/fonts";
export function useWebfonts(typography: z.infer<typeof typographySchema>) {
const isMounted = useIsMounted();
@@ -17,7 +17,7 @@ export function useWebfonts(typography: z.infer<typeof typographySchema>) {
if (body) body.setAttribute("data-wf-loaded", "false");
async function loadFont(family: string, weights: string[]) {
const font = webfontlist.find((font) => font.family === family);
const font = webFontMap.get(family);
if (!font) return;
type FontUrl = { url: string; weight: string; style: "italic" | "normal" };
@@ -49,11 +49,35 @@ export function useWebfonts(typography: z.infer<typeof typographySchema>) {
const bodyTypography = typography.body;
const headingTypography = typography.heading;
const fontWeightsByFamily = new Map<string, Set<string>>();
void Promise.allSettled([
loadFont(bodyTypography.fontFamily, bodyTypography.fontWeights),
loadFont(headingTypography.fontFamily, headingTypography.fontWeights),
]).then(() => {
const addFontLoadPlan = (family: string, weights: string[]) => {
const loadableWeights = getLoadableWebFontWeights(family, weights);
if (loadableWeights.length === 0) return;
const existingWeights = fontWeightsByFamily.get(family) ?? new Set<string>();
for (const weight of loadableWeights) {
existingWeights.add(weight);
}
fontWeightsByFamily.set(family, existingWeights);
};
addFontLoadPlan(bodyTypography.fontFamily, bodyTypography.fontWeights);
addFontLoadPlan(headingTypography.fontFamily, headingTypography.fontWeights);
for (const fallbackFamily of getFallbackWebFontFamilies(bodyTypography.fontFamily)) {
addFontLoadPlan(fallbackFamily, bodyTypography.fontWeights);
}
for (const fallbackFamily of getFallbackWebFontFamilies(headingTypography.fontFamily)) {
addFontLoadPlan(fallbackFamily, headingTypography.fontWeights);
}
void Promise.all(
Array.from(fontWeightsByFamily.entries()).map(([family, weights]) => loadFont(family, Array.from(weights))),
).then(() => {
if (isMounted() && body) body.setAttribute("data-wf-loaded", "true");
});