github/open-resume
1
Fork 0
mirror of https://github.com/xitanggg/open-resume synced 2024-11-03 09:19:21 +01:00
Code Releases Activity

Update a few variable names for readbility and consistency

Browse Source
This commit is contained in:
Xitang 2023-08-06 22:55:03 -07:00 committed by Xitang Zhao
parent be68e5c2f3
commit cbf9c4eae6
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/Resume/index.tsx
View File

@ -15,7 +15,7 @@ import {
useRegisterReactPDFFont,
useRegisterReactPDFHyphenationCallback,
} from "components/fonts/hooks";
import { NonEnglishFontsCSSLoader } from "components/fonts/NonEnglishFontsCSSLoader";
import { NonEnglishFontsCSSLazyLoader } from "components/fonts/NonEnglishFontsCSSLoader";
export const Resume = () => {
const [scale, setScale] = useState(0.8);
@ -31,7 +31,7 @@ export const Resume = () => {
return (
<>
<NonEnglishFontsCSSLoader />
<NonEnglishFontsCSSLazyLoader />
<div className="relative flex justify-center md:justify-start">
<FlexboxSpacer maxWidth={50} className="hidden md:block" />
<div className="relative">

8
src/app/components/fonts/NonEnglishFontsCSSLoader.tsx
View File

@ -2,16 +2,16 @@ import { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import { getAllFontFamiliesToLoad } from "components/fonts/lib";
const FontsZh = dynamic(() => import("components/fonts/FontsZh"), {
const FontsZhCSR = dynamic(() => import("components/fonts/FontsZh"), {
ssr: false,
});
/**
* Empty component to load non-english fonts CSS conditionally
* Empty component to lazy load non-english fonts CSS conditionally
*
* Reference: https://prawira.medium.com/react-conditional-import-conditional-css-import-110cc58e0da6
*/
export const NonEnglishFontsCSSLoader = () => {
export const NonEnglishFontsCSSLazyLoader = () => {
const [shouldLoadFontsZh, setShouldLoadFontsZh] = useState(false);
useEffect(() => {
@ -20,5 +20,5 @@ export const NonEnglishFontsCSSLoader = () => {
}
}, []);
return <>{shouldLoadFontsZh && <FontsZh />}</>;
return <>{shouldLoadFontsZh && <FontsZhCSR />}</>;
};

6
src/app/components/fonts/constants.ts
View File

@ -5,11 +5,11 @@
* Non-English fonts -> NON_ENGLISH_FONT_FAMILIES
* Once the font is added, it would take care of
* a. Registering font family for React PDF at "components/fonts/hooks.tsx"
* b. Loading font family for React PDF iframe at "components/Resume/ResumeIframe.tsx"
* b. Loading font family for React PDF iframe at "components/Resume/ResumeIFrame.tsx"
* c. Adding font family selection to Resume Settings at "components/ResumeForm/ThemeForm/Selection.tsx"
* Step 2. To load css correctly for the Resume Form:
* English fonts -> add it to the "public\fonts\fonts.css" file
* Non-English fonts -> create/update "public\fonts\fonts-<language>.css" and update "components/fonts/NonEnglishFontsCSSLoader.tsx"
* Non-English fonts -> create/update "public\fonts\fonts-<language>.css" and update "components/fonts/NonEnglishFontsCSSLazyLoader.tsx"
* Step 3. Update FONT_FAMILY_TO_STANDARD_SIZE_IN_PT and FONT_FAMILY_TO_DISPLAY_NAME accordingly
*
* IMPORTANT NOTE:
@ -51,7 +51,7 @@ type EnglishFontFamily = (typeof ENGLISH_FONT_FAMILIES)[number];
export const NON_ENGLISH_FONT_FAMILIES = ["NotoSansSC"] as const;
type NonEnglishFontFamily = (typeof NON_ENGLISH_FONT_FAMILIES)[number];
export const NON_ENGLISH_FONT_FAMILIES_TO_LANGUAGE: Record<
export const NON_ENGLISH_FONT_FAMILY_TO_LANGUAGE: Record<
NonEnglishFontFamily,
string[]
> = {

6
src/app/components/fonts/lib.ts
View File

@ -2,16 +2,16 @@
import {
ENGLISH_FONT_FAMILIES,
NON_ENGLISH_FONT_FAMILIES,
NON_ENGLISH_FONT_FAMILIES_TO_LANGUAGE,
NON_ENGLISH_FONT_FAMILY_TO_LANGUAGE,
} from "components/fonts/constants";
/**
* getPreferredNonEnglishFontFamilies returns non-english font families that are included in
* user's preferred languages. This is to avoid loading fonts/languages that users won't use.
*/
export const getPreferredNonEnglishFontFamilies = () => {
const getPreferredNonEnglishFontFamilies = () => {
return NON_ENGLISH_FONT_FAMILIES.filter((fontFamily) => {
const fontLanguages = NON_ENGLISH_FONT_FAMILIES_TO_LANGUAGE[fontFamily];
const fontLanguages = NON_ENGLISH_FONT_FAMILY_TO_LANGUAGE[fontFamily];
const userPreferredLanguages = navigator.languages ?? [navigator.language];
return userPreferredLanguages.some((preferredLanguage) =>
fontLanguages.includes(preferredLanguage)