Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

- include more local fonts, such as Times New Roman and Arial (fixes #2170)

Browse Source 
- remove embedding fonts to PDF as it wasn't doing anything
This commit is contained in:
Amruth Pillai
2025-01-25 00:47:39 +01:00
parent c7ae0e94d7
commit 9406d78653
4 changed files with 45 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View File

@ -11,23 +11,28 @@ import { useResumeStore } from "@/client/stores/resume";
import { SectionIcon } from "../shared/section-icon";
const localFonts = ["Arial", "Cambria", "Garamond", "Times New Roman"];
const fontSuggestions = [
"Open Sans",
"Merriweather",
"Roboto Condensed",
"Playfair Display",
"Lato",
"Lora",
"PT Sans",
"PT Serif",
...localFonts,
"IBM Plex Sans",
"IBM Plex Serif",
"Lato",
"Lora",
"Merriweather",
"Open Sans",
"Playfair Display",
"PT Sans",
"PT Serif",
"Roboto Condensed",
];
const families: ComboboxOption[] = fonts.map((font) => ({
const families = fonts.map((font) => ({
value: font.family,
label: font.family,
}));
})) satisfies ComboboxOption[];
families.push(...localFonts.map((font) => ({ value: font, label: font })));
export const TypographySection = () => {
const [subsets, setSubsets] = useState<ComboboxOption[]>([]);
@ -52,10 +57,14 @@ export const TypographySection = () => {
useEffect(() => {
const subsets = fonts.find((font) => font.family === typography.font.family)?.subsets ?? [];
setSubsets(subsets.map((subset) => ({ value: subset, label: subset })));
if (subsets.length > 0) {
setSubsets(subsets.map((subset) => ({ value: subset, label: subset })));
}
const variants = fonts.find((font) => font.family === typography.font.family)?.variants ?? [];
setVariants(variants.map((variant) => ({ value: variant, label: variant })));
if (variants.length > 0) {
setVariants(variants.map((variant) => ({ value: variant, label: variant })));
}
}, [typography.font.family]);
return (
@ -69,31 +78,33 @@ export const TypographySection = () => {
<main className="grid gap-y-6">
<div className="grid grid-cols-2 gap-4">
{fontSuggestions.map((font) => (
<Button
key={font}
variant="outline"
style={{ fontFamily: font }}
disabled={typography.font.family === font}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-xs ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100 lg:text-sm",
typography.font.family === font && "ring-1",
)}
onClick={() => {
setValue("metadata.typography.font.family", font);
setValue("metadata.typography.font.subset", "latin");
setValue("metadata.typography.font.variants", ["regular"]);
}}
>
{font}
</Button>
))}
{fontSuggestions
.sort((a, b) => a.localeCompare(b))
.map((font) => (
<Button
key={font}
variant="outline"
style={{ fontFamily: font }}
disabled={typography.font.family === font}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-xs ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100 lg:text-sm",
typography.font.family === font && "ring-1",
)}
onClick={() => {
setValue("metadata.typography.font.family", font);
setValue("metadata.typography.font.subset", "latin");
setValue("metadata.typography.font.variants", ["regular"]);
}}
>
{font}
</Button>
))}
</div>
<div className="space-y-1.5">
<Label>{t`Font Family`}</Label>
<Combobox
options={families}
options={families.sort((a, b) => a.label.localeCompare(b.label))}
value={typography.font.family}
searchPlaceholder={t`Search for a font family`}
onValueChange={(value) => {