Skip to content

Commit 22c60a8

Browse files
izadoesdevizadoesdev
committed
feat(dashboard): rebrand og image with lt-superior brand kit
1 parent e55f2e5 commit 22c60a8

5 files changed

Lines changed: 180 additions & 61 deletions

File tree

‎apps/dashboard/app/(dby)/dby/og/brand.tsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
// biome-ignore-all lint/a11y: OG image SVGs don't need alt text
2+
3+
import { readFile } from "node:fs/promises";
4+
import path from "node:path";
5+
6+
export const OG_COLORS = {
7+
background: "#27282D",
8+
foreground: "#E7E8EB",
9+
muted: "#A3A4AB",
10+
faint: "#75767E",
11+
amber: "#E3A514",
12+
grid: "rgba(231, 232, 235, 0.025)",
13+
badgeBackground: "rgba(231, 232, 235, 0.06)",
14+
badgeBorder: "rgba(231, 232, 235, 0.12)",
15+
purpleGlow: "rgba(69, 60, 124, 0.5)",
16+
amberGlow: "rgba(227, 165, 20, 0.12)",
17+
} as const;
18+
19+
const FONT_DIR = path.join(process.cwd(), "fonts", "lt-superior");
20+
21+
export async function loadOgFonts() {
22+
const [regular, medium, bold] = await Promise.all([
23+
readFile(path.join(FONT_DIR, "regular.otf")),
24+
readFile(path.join(FONT_DIR, "medium.otf")),
25+
readFile(path.join(FONT_DIR, "bold.otf")),
26+
]);
27+
28+
return [
29+
{
30+
name: "LT Superior",
31+
data: regular,
32+
weight: 400 as const,
33+
style: "normal" as const,
34+
},
35+
{
36+
name: "LT Superior",
37+
data: medium,
38+
weight: 500 as const,
39+
style: "normal" as const,
40+
},
41+
{
42+
name: "LT Superior",
43+
data: bold,
44+
weight: 700 as const,
45+
style: "normal" as const,
46+
},
47+
];
48+
}
49+
50+
const LOGOMARK_ASPECT = 997.25 / 1000;
51+
const WORDMARK_ASPECT = 3529.1 / 722.77;
52+
53+
export function OgLogomark({
54+
height,
55+
fill = OG_COLORS.foreground,
56+
}: {
57+
height: number;
58+
fill?: string;
59+
}) {
60+
return (
61+
<svg
62+
height={height}
63+
viewBox="0 0 997.25 1000"
64+
width={Math.round(height * LOGOMARK_ASPECT)}
65+
xmlns="http://www.w3.org/2000/svg"
66+
>
67+
<path
68+
d="M277.99,385.02c-27.27-46.18-25.63-105.37-8.54-154.6,5.31-15.32,12.27-30.02,20.04-44.23,7.14-13.05,14.48-26.97,23.64-38.71,9.07-11.62,24.6-24.78,40.28-23.74,3.79.27,7.34,2.19,9.44,5.36,4.32,6.54,1.32,12.38-2.3,17.54-3.49,4.98-7.11,9.86-10.55,14.88-6.85,10.01-13.37,20.25-19.42,30.77-12.05,20.95-22.27,43.01-29.51,66.1-2.85,9.07-5.24,18.3-7.12,27.62-4.59,22.79-7.33,46.18-8.88,69.37-.63,9.22-.6,18.48-.54,27.72.13,3.65-4.69,5.06-6.54,1.92Z"
69+
fill={fill}
70+
/>
71+
<path
72+
d="M985.63,712.96c-12.31-19.06-31.57-41-72.7-41-6.45,0-13.22,1.45-19.39-1.12-6.25-2.6-8.15-8.41-8.46-14.57-.37-7.27-.11-14.66-.58-21.95-1.77-27.44-10.21-54.13-23.31-78.22-14.67-26.96-34.97-50.73-58.52-70.32-23.9-19.88-51.06-35.16-80.39-45.41-35.1-12.27-72.84-15.68-109.84-15.19-4.52.06-8-3.99-7.31-8.46.79-5.18,1.58-9.96,2.53-13.8,8.66-35.12,13.65-62.56,16.16-88.97,5.33-56.05-1.49-105.89-20.25-148.14-23-51.76-65.77-91.59-114.43-106.53-6.29-1.94-12.62-3.12-18.75-4.27-7.68-1.44-14.31-2.1-20.25-7.62-4.71-4.38-8.1-9.95-12.61-14.52-5.88-5.96-12.1-12.69-19.27-17.14C401.03,5.03,380.14,0,359.98,0c-25.73,0-52.1,8.03-76.25,23.22-25.3,15.92-47.98,39.28-69.31,71.43-48.82,73.55-69.69,160.6-62.19,259.17.41,5.38-2.42,10.49-7.26,12.87C35.86,420.43-24.14,549.33,9.2,667.54c24.08,85.38,89.58,140.95,167.26,177.15,10.05,4.69,21.59,7.54,31.19,12.7,3.67,1.98,7.09,5.13,8.53,9.14,1.52,4.24.5,8.89-.59,13.03-6.28,23.87-11.71,44.17.57,67.29,9.95,18.75,27.54,33.64,46.92,41.97,6.64,2.86,16.18,5.13,25.76,6.88,18.49,3.36,37.31,4.67,56.09,4.21,66.72-1.62,133.31-4.44,199.78-8.46,27.58-1.67,55-5.49,81.88-11.86,22.35-5.3,42.81-11.81,61.76-19.62,26.19-10.8,50.68-33.03,80.21-32.89,25.95.13,48.24,13.58,74.76,13.58,41.96,0,82.08-20.94,110.39-51.34,23.2-24.9,63.51-108,31.92-176.36ZM240.43,784.96c-24.61,1.16-49.52-2.92-72.23-12.56-61.88-26.27-104.74-90.39-109.1-157.47-4.36-67.08,28.25-134.58,81.2-176,12.58-9.84,26.23-18.3,40.62-25.23,10.17-4.9,27.25-7.71,33.35-18.27,6-10.37-.53-22.53-2.78-32.93-3.19-14.73-4.18-30.09-4.48-45.13-.55-26.87,2.38-53.8,8.53-79.95,12.3-52.29,37.61-101.67,74.15-141.17,15.55-16.81,34-32.44,56.37-37.32,20.5-4.48,39.92,2.47,53.67,17.75,10.73,11.94,15.47,29.12,32.72,33.17,9.61,2.25,19.64,1.72,29.45,2.87,41.58,4.9,74.45,40.27,88.95,79.55,11.51,31.17,16.19,64.41,15.77,98.07-.83,67.79-22.28,137.33-50.02,195.35-6.02,12.58-16.22,26.97-30.22,24.09-6.97-1.43-12.38-6.91-14.64-13.65-4.32-12.92.5-25.39,4.87-37.37,19.14-52.58,31.25-107.7,35.92-163.46,1.86-22.28,2.41-45.45-5.96-66.18-8.38-20.74-27.8-38.48-50.16-38.41-15.72.05-30.41,8.77-41.12,20.27-68.42,73.48-69.95,204.23-42.58,294.54,4.4,14.52,7.89,34.17-5.78,41.29-6.04,3.14-13.32,2.37-19.14-1.16-11.8-7.16-16.21-19.85-22.85-30.92-25.97-43.29-81.87-53.06-125.37-32.3-42.3,20.19-67.86,65.19-68.41,111.44-.93,78.43,66.27,137.43,142.73,134.06,11.78-.52,23.18-4.06,34.09-8.33,9.79-3.84,19.31-8.34,29.02-12.36,3.95-1.63,8-3.82,12.2-4.7,3.04-.64,6.38-.44,9.02,1.2,2.71,1.7,4.39,4.79,4.77,7.96.6,4.98-1.89,10.22-4.16,14.53-4.37,8.3-10.7,15.37-17.77,21.47-26.31,22.69-66.19,35.64-100.63,37.26ZM284.61,571.98l-.1.09c-5.24,4.91-12.28,6.04-18.89,10.01-7.89,4.11-14.92,14.74-23.61,15.82-8.93.85-15.02-8.97-16.91-16.76-6-25.13,15.35-63.48,44.49-52.81,9.59,3.59,16.67,12.33,19.03,22.3,1.8,7.6,1.66,15.87-4.01,21.35ZM751.84,845.77c-32.79,37-99.2,60.01-159.48,73.95-55.17,12.75-111.57,19.36-168.17,20.58-40.98.88-100.99,1.22-100.99,1.22,0,0-45.17.15-45.17-22.35s31.36-25.52,46.89-26.76c15.54-1.24,163.21-10.62,235.84-35.11,62.24-20.98,129.68-46.1,166.71-104.2,25.03-39.27,31.65-93.21,9.6-135.29-24.13-46.03-82.43-63.4-131.74-62.42-32.27.65-64.3,9.92-92.05,26.37-11.22,6.65-22.27,18.81-36.65,14.7-10.92-3.12-19.4-15.27-17.98-26.62,2.51-19.97,30.7-34.44,45.22-45.52,17.59-13.43,37.45-23.86,58.37-31.04,41.01-14.09,86.5-15.77,128.04-2.9,50.28,15.57,97.39,54.22,121.92,102.39,42.34,83.15-3.01,188.27-60.36,253ZM945.13,775.7c-4.3,41.42-31.12,86.59-69.66,100.68-30.86,11.28-63.18-14.91-58.27-47.4,8.33-55.09,74.33-123.75,113.51-90.6,10.77,9.1,15.88,23.29,14.42,37.32Z"
73+
fill={fill}
74+
/>
75+
</svg>
76+
);
77+
}
78+
79+
export function OgWordmark({
80+
height,
81+
fill = OG_COLORS.foreground,
82+
}: {
83+
height: number;
84+
fill?: string;
85+
}) {
86+
return (
87+
<svg
88+
height={height}
89+
viewBox="0 0 3529.1 722.77"
90+
width={Math.round(height * WORDMARK_ASPECT)}
91+
xmlns="http://www.w3.org/2000/svg"
92+
>
93+
<path
94+
d="M295.56,0h81.49c9.53,0,17.26,7.73,17.26,17.26v409.19c0,36.46,1.95,77.3,4.69,104.87,1.01,10.17-6.95,18.99-17.18,18.99h-71.52c-8.76,0-16.14-6.56-17.15-15.26-.07-.57-.13-1.14-.2-1.72-1.6-13.66-17.64-19.96-28.25-11.22-25.86,21.29-63.37,34.47-100.87,34.47C67.42,556.58,0,469.57,0,346.49s67.42-210.09,163.84-210.09c30.27,0,62.41,11.56,86.9,29.53,11.44,8.4,27.55.35,27.55-13.84V17.26c0-9.53,7.73-17.26,17.26-17.26ZM278.29,333.95c0-66.63-29.79-105.83-76.82-105.83-51.74,0-85.45,46.25-85.45,118.37s33.71,120.72,85.45,120.72c46.25,0,76.82-40.76,76.82-109.75v-23.52Z"
95+
fill={fill}
96+
/>
97+
<path
98+
d="M665.98,536.77c-.04-.18-.08-.37-.12-.56-2.68-12.16-17.03-17.67-27.02-10.23-26.56,19.78-57.65,31.38-92.12,31.38-83.1,0-136.4-54.09-136.4-124.64,0-76.82,67.42-116.8,175.6-128.56l49.87-6.01c8.67-1.04,15.2-8.4,15.2-17.14v-3.5c0-29.01-21.95-49.39-50.17-49.39-22.85,0-44.54,9.79-54.71,31.35-3.21,6.79-10.24,10.91-17.69,9.88l-79.65-11.06c-10.88-1.51-17.74-12.72-13.86-22.99,21.84-57.79,85.8-98.89,167.48-98.89,97.21,0,165.41,61.93,165.41,156v134.05c0,52.01,1,78.98,4.21,104.52,1.29,10.28-6.77,19.34-17.13,19.34h-72.02c-8.1,0-15.11-5.63-16.86-13.54ZM650.97,383.34v-.92c0-10.35-9.04-18.37-19.32-17.14l-39.47,4.74c-39.98,4.7-65.85,23.52-65.85,53.31,0,25.09,18.03,43.9,48.6,43.9,45.47,0,76.04-30.57,76.04-83.88Z"
99+
fill={fill}
100+
/>
101+
<path
102+
d="M803.18,227.34h-21.91c-9.53,0-17.26-7.73-17.26-17.26v-41.22c0-8.35,5.98-15.51,14.2-16.99l31.97-5.77c6.32-1.14,11.48-5.69,13.4-11.82l26.79-85.34c2.26-7.2,8.93-12.09,16.47-12.09h53.94c9.53,0,17.26,7.73,17.26,17.26v72.87c0,9.53,7.73,17.26,17.26,17.26h46.22c9.53,0,17.26,7.73,17.26,17.26v51.7c0,9.53-7.73,17.26-17.26,17.26h-46.22c-9.53,0-17.26,7.73-17.26,17.26v170.09c0,30.57,13.33,50.95,47.03,50.95,8.1,0,15.82-.74,28.29-3,10.58-1.91,20.31,6.24,20.31,16.99v54.01c0,8.49-6.16,15.72-14.54,17.05-15.96,2.54-35.23,4.31-50.53,4.31-98.77,0-148.16-63.5-148.16-138.75v-174.8c0-9.53-7.73-17.26-17.26-17.26Z"
103+
fill={fill}
104+
/>
105+
<path
106+
d="M1293.34,536.77c-.04-.18-.08-.37-.12-.56-2.68-12.16-17.03-17.67-27.02-10.23-26.56,19.78-57.65,31.38-92.12,31.38-83.1,0-136.4-54.09-136.4-124.64,0-76.82,67.42-116.8,175.6-128.56l49.87-6.01c8.67-1.04,15.2-8.4,15.2-17.14v-3.5c0-29.01-21.95-49.39-50.17-49.39-22.85,0-44.54,9.79-54.71,31.35-3.21,6.79-10.24,10.91-17.69,9.88l-79.65-11.06c-10.88-1.51-17.74-12.72-13.86-22.99,21.84-57.79,85.8-98.89,167.48-98.89,97.21,0,165.41,61.93,165.41,156v134.05c0,52.01,1,78.98,4.21,104.52,1.29,10.28-6.77,19.34-17.13,19.34h-72.02c-8.1,0-15.11-5.63-16.86-13.54ZM1278.33,383.34v-.92c0-10.35-9.04-18.37-19.32-17.14l-39.47,4.74c-39.98,4.7-65.85,23.52-65.85,53.31,0,25.09,18.03,43.9,48.6,43.9,45.47,0,76.04-30.57,76.04-83.88Z"
107+
fill={fill}
108+
/>
109+
<path
110+
d="M1545.33,151.97c0,14.22,16.15,22.24,27.6,13.81,24.28-17.88,56.12-29.38,86.85-29.38,95.64,0,164.62,87.01,164.62,210.09s-68.99,210.09-164.62,210.09c-37.43,0-75.26-13.13-101.05-34.33-10.53-8.66-26.44-2.6-28.24,10.91-.1.75-.2,1.48-.29,2.2-1.15,8.56-8.47,14.95-17.11,14.95h-71.69c-10.32,0-18.31-8.98-17.15-19.24,3.11-27.56,5.05-68.27,5.05-104.62V17.26c0-9.53,7.73-17.26,17.26-17.26h81.49c9.53,0,17.26,7.73,17.26,17.26v134.71ZM1545.33,357.47c0,68.99,30.57,109.75,78.39,109.75,50.17,0,83.1-45.47,83.1-120.72s-32.92-118.37-83.1-118.37-78.39,39.2-78.39,105.83v23.52Z"
111+
fill={fill}
112+
/>
113+
<path
114+
d="M2101.93,537.65c-.23-.86-.46-1.71-.68-2.57-3.08-11.89-17.22-16.82-27.05-9.45-25.44,19.05-56.84,30.17-92.41,30.17-82.31,0-138.75-60.36-138.75-153.65v-240.65c0-9.53,7.73-17.26,17.26-17.26h83.06c9.53,0,17.26,7.73,17.26,17.26v224.97c0,51.74,21.95,79.17,60.36,79.17,41.55,0,69.77-32.14,69.77-93.29v-210.86c0-9.53,7.73-17.26,17.26-17.26h81.49c9.53,0,17.26,7.73,17.26,17.26v264.95c0,51.86,1,78.82,4.58,104.3,1.45,10.35-6.66,19.56-17.11,19.56h-75.67c-7.76,0-14.62-5.17-16.64-12.67Z"
115+
fill={fill}
116+
/>
117+
<path
118+
d="M2523.2,0h81.49c9.53,0,17.26,7.73,17.26,17.26v409.19c0,36.46,1.95,77.3,4.69,104.87,1.01,10.17-6.95,18.99-17.18,18.99h-71.52c-8.76,0-16.14-6.56-17.15-15.26-.07-.57-.13-1.14-.2-1.72-1.6-13.66-17.64-19.96-28.25-11.22-25.86,21.29-63.37,34.47-100.87,34.47-96.42,0-163.84-87.01-163.84-210.09s67.42-210.09,163.84-210.09c30.27,0,62.41,11.56,86.9,29.53,11.44,8.4,27.55.35,27.55-13.84V17.26c0-9.53,7.73-17.26,17.26-17.26ZM2505.94,333.95c0-66.63-29.79-105.83-76.82-105.83-51.74,0-85.45,46.25-85.45,118.37s33.71,120.72,85.45,120.72c46.25,0,76.82-40.76,76.82-109.75v-23.52Z"
119+
fill={fill}
120+
/>
121+
<path
122+
d="M2931.91,0h81.49c9.53,0,17.26,7.73,17.26,17.26v409.19c0,36.46,1.95,77.3,4.69,104.87,1.01,10.17-6.95,18.99-17.18,18.99h-71.52c-8.76,0-16.14-6.56-17.15-15.26-.07-.57-.13-1.14-.2-1.72-1.6-13.66-17.64-19.96-28.25-11.22-25.86,21.29-63.37,34.47-100.87,34.47-96.42,0-163.84-87.01-163.84-210.09s67.42-210.09,163.84-210.09c30.27,0,62.41,11.56,86.9,29.53,11.44,8.4,27.55.35,27.55-13.84V17.26c0-9.53,7.73-17.26,17.26-17.26ZM2914.64,333.95c0-66.63-29.79-105.83-76.82-105.83-51.74,0-85.45,46.25-85.45,118.37s33.71,120.72,85.45,120.72c46.25,0,76.82-40.76,76.82-109.75v-23.52Z"
123+
fill={fill}
124+
/>
125+
<path
126+
d="M3060.33,144.24h81.69c7.18,0,13.61,4.45,16.15,11.16l77.36,204.85c5.65,14.97,26.87,14.86,32.36-.17l74.76-204.51c2.49-6.81,8.97-11.34,16.21-11.34h81.87c12.14,0,20.48,12.19,16.1,23.5l-164.13,423.33c-25.87,65.06-59.58,131.7-163.84,131.7-20.76,0-46.88-3.22-68.16-9.22-7.45-2.1-12.59-8.89-12.59-16.63v-56.8c0-11.48,10.99-19.73,22.03-16.59,29.14,8.3,41.97,9.87,54.79,9.87,38.23,0,54.72-33.39,68.78-68.48.14-.34.26-.68.37-1.02l4.53-13.59h-.78l-153.54-382.37c-4.55-11.34,3.8-23.7,16.02-23.7Z"
127+
fill={fill}
128+
/>
129+
<path
130+
d="M3507.1,384.04c-52.5-37.3-127.76,55.54-132.35,125.31-2.71,41.15,40.48,70.47,77.88,53.1,46.7-21.69,75.46-81.01,76.45-133.26.34-17.7-7.55-34.89-21.98-45.15Z"
131+
fill={fill}
132+
/>
133+
</svg>
134+
);
135+
}
136+
137+
export function OgLogo({ height = 48 }: { height?: number }) {
138+
return (
139+
<div
140+
style={{
141+
display: "flex",
142+
alignItems: "center",
143+
gap: `${Math.round(height * 0.3)}px`,
144+
}}
145+
>
146+
<OgLogomark height={height} />
147+
<OgWordmark height={Math.round(height * 0.62)} />
148+
</div>
149+
);
150+
}

‎apps/dashboard/app/(dby)/dby/og/route.tsx‎

Lines changed: 27 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { ImageResponse } from "next/og";
2+
import { loadOgFonts, OG_COLORS, OgLogo } from "./brand";
23

3-
export const runtime = "edge";
4-
5-
export function GET(request: Request) {
4+
export async function GET(request: Request) {
65
const { searchParams } = new URL(request.url);
76
const title = searchParams.get("title") || "Shared via Databuddy";
87
const description = searchParams.get("description");
@@ -16,33 +15,31 @@ export function GET(request: Request) {
1615
flexDirection: "column",
1716
alignItems: "flex-start",
1817
justifyContent: "flex-end",
19-
backgroundColor: "#0a0a0a",
18+
backgroundColor: OG_COLORS.background,
2019
padding: "60px 80px",
2120
position: "relative",
21+
fontFamily: "LT Superior",
2222
}}
2323
>
2424
<div
2525
style={{
2626
position: "absolute",
27-
top: "-40%",
28-
left: "20%",
29-
width: "800px",
30-
height: "600px",
31-
background:
32-
"radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 70%)",
33-
transform: "rotate(-15deg)",
27+
top: "-45%",
28+
right: "-15%",
29+
width: "900px",
30+
height: "700px",
31+
background: `radial-gradient(ellipse at center, ${OG_COLORS.purpleGlow}, transparent 70%)`,
3432
}}
3533
/>
3634

3735
<div
3836
style={{
3937
position: "absolute",
40-
top: "0%",
41-
right: "5%",
42-
width: "500px",
43-
height: "400px",
44-
background:
45-
"radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03), transparent 60%)",
38+
bottom: "-35%",
39+
right: "-5%",
40+
width: "600px",
41+
height: "500px",
42+
background: `radial-gradient(ellipse at center, ${OG_COLORS.amberGlow}, transparent 70%)`,
4643
}}
4744
/>
4845

@@ -53,8 +50,7 @@ export function GET(request: Request) {
5350
left: 0,
5451
right: 0,
5552
bottom: 0,
56-
backgroundImage:
57-
"linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
53+
backgroundImage: `linear-gradient(${OG_COLORS.grid} 1px, transparent 1px), linear-gradient(90deg, ${OG_COLORS.grid} 1px, transparent 1px)`,
5854
backgroundSize: "60px 60px",
5955
}}
6056
/>
@@ -65,54 +61,26 @@ export function GET(request: Request) {
6561
top: "60px",
6662
left: "80px",
6763
display: "flex",
68-
alignItems: "center",
69-
gap: "16px",
7064
}}
7165
>
72-
<svg
73-
height="44"
74-
style={{ borderRadius: "4px" }}
75-
viewBox="0 0 8 8"
76-
width="44"
77-
xmlns="http://www.w3.org/2000/svg"
78-
>
79-
<title>Databuddy</title>
80-
<path d="M0 0h8v8H0z" fill="#000" />
81-
<path
82-
d="M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z"
83-
fill="#fff"
84-
/>
85-
</svg>
86-
<span
87-
style={{
88-
color: "#ffffff",
89-
fontSize: "22px",
90-
fontWeight: 600,
91-
fontFamily: "monospace",
92-
letterSpacing: "0.1em",
93-
textTransform: "uppercase",
94-
}}
95-
>
96-
Databuddy
97-
</span>
66+
<OgLogo height={52} />
9867
</div>
9968

10069
<div
10170
style={{
10271
display: "flex",
10372
alignItems: "center",
104-
gap: "8px",
10573
marginBottom: "24px",
10674
padding: "8px 16px",
107-
backgroundColor: "rgba(255, 255, 255, 0.06)",
75+
backgroundColor: OG_COLORS.badgeBackground,
10876
borderRadius: "9999px",
109-
border: "1px solid rgba(255, 255, 255, 0.1)",
77+
border: `1px solid ${OG_COLORS.badgeBorder}`,
11078
}}
11179
>
11280
<span
11381
style={{
114-
color: "#a3a3a3",
115-
fontSize: "13px",
82+
color: OG_COLORS.muted,
83+
fontSize: "14px",
11684
fontWeight: 500,
11785
textTransform: "uppercase",
11886
letterSpacing: "0.08em",
@@ -124,11 +92,11 @@ export function GET(request: Request) {
12492

12593
<h1
12694
style={{
127-
color: "#ffffff",
95+
color: OG_COLORS.foreground,
12896
fontSize: title.length > 40 ? "48px" : "60px",
12997
fontWeight: 700,
13098
lineHeight: 1.1,
131-
letterSpacing: "-0.03em",
99+
letterSpacing: "-0.02em",
132100
marginBottom: description ? "16px" : "0",
133101
maxWidth: "900px",
134102
}}
@@ -139,10 +107,10 @@ export function GET(request: Request) {
139107
{description && (
140108
<p
141109
style={{
142-
color: "#737373",
110+
color: OG_COLORS.muted,
143111
fontSize: "24px",
144112
lineHeight: 1.5,
145-
maxWidth: "800px",
113+
maxWidth: "820px",
146114
}}
147115
>
148116
{description.length > 120
@@ -157,15 +125,13 @@ export function GET(request: Request) {
157125
bottom: "60px",
158126
right: "80px",
159127
display: "flex",
160-
alignItems: "center",
161-
gap: "8px",
162128
}}
163129
>
164130
<span
165131
style={{
166-
color: "#525252",
132+
color: OG_COLORS.faint,
167133
fontSize: "18px",
168-
fontFamily: "monospace",
134+
fontWeight: 500,
169135
}}
170136
>
171137
databuddy.cc/links
@@ -175,6 +141,7 @@ export function GET(request: Request) {
175141
{
176142
width: 1200,
177143
height: 630,
144+
fonts: await loadOgFonts(),
178145
}
179146
);
180147
}

‎apps/dashboard/next.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const demoFrameAncestorSources = [
1515

1616
const nextConfig: NextConfig = {
1717
outputFileTracingRoot: path.join(process.cwd(), "../.."),
18+
outputFileTracingIncludes: {
19+
"/dby/og": ["./fonts/lt-superior/*.otf"],
20+
},
1821
serverExternalPackages: ["pg"],
1922
images: {
2023
remotePatterns: [

‎apps/dashboard/public/logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/dashboard/public/og-image.png‎

96.9 KB
Loading

0 commit comments

Comments
 (0)