Skip to content

Commit 008cbe5

Browse files
rgodha24QuiiBz
rgodha24
and
QuiiBz
authored
feat: support custom fonts (#96)
Co-authored-by: Tom Lienard <[email protected]>
1 parent edc00ec commit 008cbe5

File tree

14 files changed

+330
-80
lines changed

14 files changed

+330
-80
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ db.sqlite*
99
.DS_Store
1010
*.log
1111
.env
12+
.env*
1213
*.tsbuildinfo

‎apps/dashboard/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.vercel
2+
.env*.local

‎apps/dashboard/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@vercel/kv": "^1.0.1",
2626
"@vercel/speed-insights": "^1.0.10",
2727
"clsx": "^2.1.1",
28+
"fuse.js": "^7.0.0",
2829
"next": "14.2.7",
2930
"next-themes": "^0.3.0",
3031
"react": "^18",

‎apps/dashboard/src/app/api/fonts/route.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { getFontData } from "../../../lib/fonts";
2+
3+
export const dynamic = "force-static";
4+
5+
export async function GET() {
6+
return Response.json(await getFontData());
7+
}

‎apps/dashboard/src/components/FontPreview.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useEffect } from "react";
2-
import { maybeLoadFont, type Font } from "../lib/fonts";
2+
import { maybeLoadFont } from "../lib/fonts";
33

44
interface FontPreviewProps {
5-
font: Font;
5+
font: string;
66
}
77

88
export function FontPreview({ font }: FontPreviewProps) {

‎apps/dashboard/src/components/RightPanel/FontSection.tsx

+36-28
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Flex, Grid, Text, Select, TextField, Tooltip } from "@radix-ui/themes";
22
import type { OGElement } from "../../lib/types";
3-
import type { Font } from "../../lib/fonts";
4-
import { FONTS, FONT_WEIGHTS } from "../../lib/fonts";
53
import { FontSizeIcon } from "../icons/FontSizeIcon";
64
import { LineHeightIcon } from "../icons/LineHeightIcon";
75
import { LetterSpacingIcon } from "../icons/LetterSpacingIcon";
86
import { useElementsStore } from "../../stores/elementsStore";
97
import { ColorPicker } from "../ColorPicker";
108
import { FontPreview } from "../FontPreview";
9+
import { useFontsStore } from "../../stores/fontsStore";
10+
import { FontSelector } from "./FontSelector";
1111

1212
const SPACES_REGEX = /\s+/g;
1313

@@ -17,6 +17,7 @@ interface FontSectionProps {
1717

1818
export function FontSection({ selectedElement }: FontSectionProps) {
1919
const updateElement = useElementsStore((state) => state.updateElement);
20+
const { allFonts, installedFonts, installFont } = useFontsStore();
2021

2122
if (selectedElement.tag !== "p" && selectedElement.tag !== "span") {
2223
return null;
@@ -25,50 +26,36 @@ export function FontSection({ selectedElement }: FontSectionProps) {
2526
return (
2627
<Flex direction="column" gap="2">
2728
<Text size="1">Font</Text>
28-
<Grid columns="2" gap="2">
29+
<Flex direction="row" gap="2" className="justify-between">
2930
<Select.Root
30-
onValueChange={(value) => {
31-
const font = value as unknown as Font;
31+
onValueChange={(font) => {
32+
const weights = allFonts.find(({ name }) => name === font)?.weights;
33+
if (!installedFonts.has(font)) {
34+
installFont(font);
35+
}
3236

3337
updateElement({
3438
...selectedElement,
3539
fontFamily: font,
36-
fontWeight: FONT_WEIGHTS[font].includes(
37-
selectedElement.fontWeight,
38-
)
40+
fontWeight: weights?.includes(selectedElement.fontWeight)
3941
? selectedElement.fontWeight
4042
: 400,
4143
});
4244
}}
4345
value={selectedElement.fontFamily}
4446
>
45-
<Select.Trigger color="gray" variant="soft" />
47+
<Select.Trigger color="gray" variant="soft" className="flex-1" />
4648
<Select.Content variant="soft">
47-
{FONTS.map((font) => (
49+
{Array.from(installedFonts).map((font) => (
4850
<Select.Item key={font} value={font}>
4951
<FontPreview font={font} />
5052
</Select.Item>
5153
))}
5254
</Select.Content>
5355
</Select.Root>
54-
<Select.Root
55-
onValueChange={(value) => {
56-
updateElement({
57-
...selectedElement,
58-
fontWeight: Number(value),
59-
});
60-
}}
61-
value={String(selectedElement.fontWeight)}
62-
>
63-
<Select.Trigger color="gray" variant="soft" />
64-
<Select.Content variant="soft">
65-
{FONT_WEIGHTS[selectedElement.fontFamily].map((weight) => (
66-
<Select.Item key={weight} value={String(weight)}>
67-
{weight}
68-
</Select.Item>
69-
))}
70-
</Select.Content>
71-
</Select.Root>
56+
<FontSelector selectedElement={selectedElement} />
57+
</Flex>
58+
<Grid columns="2" gap="2">
7259
<TextField.Root
7360
color="gray"
7461
onChange={(event) => {
@@ -88,6 +75,27 @@ export function FontSection({ selectedElement }: FontSectionProps) {
8875
</Tooltip>
8976
<TextField.Slot>px</TextField.Slot>
9077
</TextField.Root>
78+
<Select.Root
79+
onValueChange={(value) => {
80+
updateElement({
81+
...selectedElement,
82+
fontWeight: Number(value),
83+
});
84+
}}
85+
value={String(selectedElement.fontWeight)}
86+
>
87+
<Select.Trigger color="gray" variant="soft" />
88+
<Select.Content variant="soft">
89+
{allFonts
90+
.find(({ name }) => name === selectedElement.fontFamily)
91+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- the ? is definitely required
92+
?.weights?.map((weight) => (
93+
<Select.Item key={weight} value={String(weight)}>
94+
{weight}
95+
</Select.Item>
96+
))}
97+
</Select.Content>
98+
</Select.Root>
9199
<ColorPicker
92100
onChange={(color) => {
93101
updateElement({

‎apps/dashboard/src/components/RightPanel/FontSelector.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Popover, Button, TextField, Flex, Badge } from "@radix-ui/themes";
2+
import Fuse from "fuse.js";
3+
import { useMemo, useState } from "react";
4+
import { useFontsStore } from "../../stores/fontsStore";
5+
import { useElementsStore } from "../../stores/elementsStore";
6+
import { FontPreview } from "../FontPreview";
7+
import type { OGElement } from "../../lib/types";
8+
import { useDebounce } from "../../lib/hooks/useDebounce";
9+
import { DEFAULT_FONTS } from "../../lib/fonts";
10+
11+
interface FontSelectorProps {
12+
selectedElement: OGElement & { tag: "p" | "span" };
13+
}
14+
15+
export function FontSelector({ selectedElement }: FontSelectorProps) {
16+
const { allFonts, installedFonts, installFont } = useFontsStore();
17+
const updateElement = useElementsStore((state) => state.updateElement);
18+
const fuse = useMemo(
19+
() => new Fuse(allFonts, { keys: ["name"] }),
20+
[allFonts],
21+
);
22+
const [search, setSearch] = useState("");
23+
const [isOpen, setIsOpen] = useState(false);
24+
const debouncedSearch = useDebounce(search, 200);
25+
26+
const searchedFonts = fuse
27+
.search(debouncedSearch)
28+
.slice(0, 8)
29+
.map(({ item }) => item.name);
30+
31+
return (
32+
<Popover.Root open={isOpen} onOpenChange={setIsOpen}>
33+
<Popover.Trigger>
34+
<Button size="2" variant="soft" color="gray">
35+
+
36+
</Button>
37+
</Popover.Trigger>
38+
<Popover.Content width="300px">
39+
<Flex gap="3" direction="column">
40+
<TextField.Root
41+
placeholder="Search any fontsource font..."
42+
value={search}
43+
onChange={(event) => {
44+
setSearch(event.target.value);
45+
}}
46+
/>
47+
<Flex gap="1" direction="column">
48+
{searchedFonts.map((font) => (
49+
<Button
50+
variant="soft"
51+
color="gray"
52+
key={font}
53+
onClick={() => {
54+
installFont(font);
55+
const weights = allFonts.find(
56+
({ name }) => name === font,
57+
)?.weights;
58+
59+
updateElement({
60+
...selectedElement,
61+
fontFamily: font,
62+
fontWeight: weights?.includes(selectedElement.fontWeight)
63+
? selectedElement.fontWeight
64+
: 400,
65+
});
66+
67+
setIsOpen(false);
68+
}}
69+
>
70+
<FontPreview font={font} />
71+
{DEFAULT_FONTS.includes(font) ? (
72+
<Badge color="blue">Pre-installed</Badge>
73+
) : installedFonts.has(font) ? (
74+
<Badge color="green">Installed</Badge>
75+
) : null}
76+
</Button>
77+
))}
78+
</Flex>
79+
</Flex>
80+
</Popover.Content>
81+
</Popover.Root>
82+
);
83+
}

‎apps/dashboard/src/lib/__tests__/fonts.test.ts

+69-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,16 @@ describe("maybeLoadFont", () => {
77
maybeLoadFont("Roboto", 400);
88

99
expect(document.head.innerHTML).toMatchInlineSnapshot(
10-
`"<link id="font-Roboto-400" rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400">"`,
10+
`
11+
"<style id="font-roboto-400">
12+
@font-face {
13+
font-family: "Roboto";
14+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff") format("woff");
15+
font-weight: 400;
16+
font-style: normal;
17+
}
18+
</style>"
19+
`,
1120
);
1221
});
1322

@@ -16,7 +25,16 @@ describe("maybeLoadFont", () => {
1625
maybeLoadFont("Roboto", 400);
1726

1827
expect(document.head.innerHTML).toMatchInlineSnapshot(
19-
`"<link id="font-Roboto-400" rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400">"`,
28+
`
29+
"<style id="font-roboto-400">
30+
@font-face {
31+
font-family: "Roboto";
32+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff") format("woff");
33+
font-weight: 400;
34+
font-style: normal;
35+
}
36+
</style>"
37+
`,
2038
);
2139
});
2240

@@ -26,7 +44,30 @@ describe("maybeLoadFont", () => {
2644
maybeLoadFont("Roboto", 700);
2745

2846
expect(document.head.innerHTML).toMatchInlineSnapshot(
29-
`"<link id="font-Roboto-400" rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400"><link id="font-Roboto-500" rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:500"><link id="font-Roboto-700" rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:700">"`,
47+
`
48+
"<style id="font-roboto-400">
49+
@font-face {
50+
font-family: "Roboto";
51+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff") format("woff");
52+
font-weight: 400;
53+
font-style: normal;
54+
}
55+
</style><style id="font-roboto-500">
56+
@font-face {
57+
font-family: "Roboto";
58+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-500-normal.woff") format("woff");
59+
font-weight: 500;
60+
font-style: normal;
61+
}
62+
</style><style id="font-roboto-700">
63+
@font-face {
64+
font-family: "Roboto";
65+
src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-700-normal.woff") format("woff");
66+
font-weight: 700;
67+
font-style: normal;
68+
}
69+
</style>"
70+
`,
3071
);
3172
});
3273
});
@@ -74,6 +115,26 @@ describe("loadFonts", () => {
74115
fontSize: 50,
75116
align: "left",
76117
},
118+
{
119+
id: createElementId(),
120+
tag: "p",
121+
name: "Text",
122+
x: 0,
123+
y: 0,
124+
width: 100,
125+
height: 50,
126+
visible: true,
127+
rotate: 0,
128+
blur: 0,
129+
content: "Text",
130+
color: "#000000",
131+
fontFamily: "Monaspace Radon",
132+
fontWeight: 500,
133+
lineHeight: 1,
134+
letterSpacing: 0,
135+
fontSize: 50,
136+
align: "left",
137+
},
77138
]);
78139

79140
expect(data).toMatchInlineSnapshot(`
@@ -88,6 +149,11 @@ describe("loadFonts", () => {
88149
"name": "Roboto",
89150
"weight": 500,
90151
},
152+
{
153+
"data": ArrayBuffer [],
154+
"name": "Monaspace Radon",
155+
"weight": 500,
156+
},
91157
]
92158
`);
93159
});

0 commit comments

Comments
 (0)