Skip to content

Commit 89afa57

Browse files
juicycleffjuicycleff
committed
refactor: Clean up code formatting and improve readability across multiple components
1 parent cdf47b0 commit 89afa57

6 files changed

Lines changed: 204 additions & 58 deletions

File tree

‎docs/content/docs/concepts/meta.json‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
{
22
"title": "Core Concepts",
3-
"pages": [
4-
"identity",
5-
"entities",
6-
"configuration",
7-
"errors",
8-
"multi-tenancy"
9-
]
3+
"pages": ["identity", "entities", "configuration", "errors", "multi-tenancy"]
104
}

‎docs/src/app/(home)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Footer } from "@/components/landing/footer";
55
export default function Layout({ children }: LayoutProps<"/">) {
66
return (
77
<HomeLayout {...baseOptions()}>
8-
{children}
8+
{children}
99
<Footer />
1010
</HomeLayout>
1111
);

‎docs/src/components/landing/delivery-flow-section.tsx‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,15 @@ interface StageProps {
4747
delay: number;
4848
}
4949

50-
function Stage({ label, sublabel, color, borderColor, bgColor, pulse, delay }: StageProps) {
50+
function Stage({
51+
label,
52+
sublabel,
53+
color,
54+
borderColor,
55+
bgColor,
56+
pulse,
57+
delay,
58+
}: StageProps) {
5159
return (
5260
<motion.div
5361
initial={{ opacity: 0, scale: 0.85 }}
@@ -71,9 +79,7 @@ function Stage({ label, sublabel, color, borderColor, bgColor, pulse, delay }: S
7179
{label}
7280
</span>
7381
{sublabel && (
74-
<span className="text-[10px] text-fd-muted-foreground">
75-
{sublabel}
76-
</span>
82+
<span className="text-[10px] text-fd-muted-foreground">{sublabel}</span>
7783
)}
7884
</motion.div>
7985
);
@@ -100,26 +106,48 @@ function Connection({
100106
if (!horizontal) {
101107
return (
102108
<div className="relative flex flex-col items-center h-6 w-px">
103-
<div className={cn("absolute inset-0 w-[1.5px] rounded-full", c.line)} />
109+
<div
110+
className={cn("absolute inset-0 w-[1.5px] rounded-full", c.line)}
111+
/>
104112
<motion.div
105113
className={cn("absolute size-1.5 rounded-full", c.particle)}
106114
animate={{ y: [-2, 22], opacity: [0, 1, 1, 0] }}
107-
transition={{ duration: 1.2, repeat: Infinity, ease: "linear", delay }}
115+
transition={{
116+
duration: 1.2,
117+
repeat: Infinity,
118+
ease: "linear",
119+
delay,
120+
}}
108121
/>
109122
</div>
110123
);
111124
}
112125

113126
return (
114127
<div className="relative flex items-center h-px w-8 md:w-12 shrink-0">
115-
<div className={cn("absolute inset-0 h-[1.5px] rounded-full my-auto", c.line)} />
128+
<div
129+
className={cn(
130+
"absolute inset-0 h-[1.5px] rounded-full my-auto",
131+
c.line,
132+
)}
133+
/>
116134
<motion.div
117135
className={cn("absolute size-1.5 rounded-full", c.particle)}
118136
animate={{ x: [-2, 40], opacity: [0, 1, 1, 0] }}
119137
transition={{ duration: 1.4, repeat: Infinity, ease: "linear", delay }}
120138
/>
121139
{/* Arrow */}
122-
<div className="absolute right-0 border-l-[4px] border-y-[2.5px] border-y-transparent border-l-current opacity-30" style={{ color: color === "amber" ? "#f59e0b" : color === "green" ? "#22c55e" : "#ef4444" }} />
140+
<div
141+
className="absolute right-0 border-l-[4px] border-y-[2.5px] border-y-transparent border-l-current opacity-30"
142+
style={{
143+
color:
144+
color === "amber"
145+
? "#f59e0b"
146+
: color === "green"
147+
? "#22c55e"
148+
: "#ef4444",
149+
}}
150+
/>
123151
</div>
124152
);
125153
}
@@ -139,8 +167,10 @@ function EndpointRow({
139167
delay: number;
140168
}) {
141169
const statusColors = {
142-
delivered: "text-green-600 dark:text-green-400 bg-green-500/10 border-green-500/20",
143-
retry: "text-amber-600 dark:text-amber-400 bg-amber-500/10 border-amber-500/20",
170+
delivered:
171+
"text-green-600 dark:text-green-400 bg-green-500/10 border-green-500/20",
172+
retry:
173+
"text-amber-600 dark:text-amber-400 bg-amber-500/10 border-amber-500/20",
144174
dlq: "text-red-600 dark:text-red-400 bg-red-500/10 border-red-500/20",
145175
};
146176

@@ -298,7 +328,13 @@ function FeatureBullet({
298328
>
299329
<div className="mt-1 flex items-center justify-center size-5 rounded-md bg-amber-500/10 shrink-0">
300330
<svg className="size-3 text-amber-500" viewBox="0 0 12 12" fill="none">
301-
<path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
331+
<path
332+
d="M2 6l3 3 5-5"
333+
stroke="currentColor"
334+
strokeWidth="1.5"
335+
strokeLinecap="round"
336+
strokeLinejoin="round"
337+
/>
302338
</svg>
303339
</div>
304340
<div>
@@ -360,7 +396,13 @@ export function DeliveryFlowSection() {
360396
>
361397
Learn about the architecture
362398
<svg className="size-3.5" viewBox="0 0 16 16" fill="none">
363-
<path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
399+
<path
400+
d="M6 4l4 4-4 4"
401+
stroke="currentColor"
402+
strokeWidth="1.5"
403+
strokeLinecap="round"
404+
strokeLinejoin="round"
405+
/>
364406
</svg>
365407
</a>
366408
</motion.div>

‎docs/src/components/landing/feature-bento.tsx‎

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,15 @@ const features: FeatureCard[] = [
2020
description:
2121
"Type-safe event registration with schema validation. Define your event types once, reference them everywhere.",
2222
icon: (
23-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
23+
<svg
24+
className="size-5"
25+
viewBox="0 0 24 24"
26+
fill="none"
27+
stroke="currentColor"
28+
strokeWidth="1.5"
29+
strokeLinecap="round"
30+
strokeLinejoin="round"
31+
>
2432
<path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
2533
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
2634
<path d="M8 7h8M8 11h6" />
@@ -38,7 +46,15 @@ const features: FeatureCard[] = [
3846
description:
3947
"Configurable retry schedules with exponential backoff. No event is lost, ever.",
4048
icon: (
41-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
49+
<svg
50+
className="size-5"
51+
viewBox="0 0 24 24"
52+
fill="none"
53+
stroke="currentColor"
54+
strokeWidth="1.5"
55+
strokeLinecap="round"
56+
strokeLinejoin="round"
57+
>
4258
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
4359
<path d="M9 12l2 2 4-4" />
4460
</svg>
@@ -57,7 +73,15 @@ const features: FeatureCard[] = [
5773
description:
5874
"Failed deliveries are captured automatically. Inspect, debug, and replay them on demand.",
5975
icon: (
60-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
76+
<svg
77+
className="size-5"
78+
viewBox="0 0 24 24"
79+
fill="none"
80+
stroke="currentColor"
81+
strokeWidth="1.5"
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
>
6185
<rect x="2" y="4" width="20" height="5" rx="1" />
6286
<path d="M4 9v9a2 2 0 002 2h12a2 2 0 002-2V9" />
6387
<path d="M10 13h4" />
@@ -75,7 +99,15 @@ r.DLQ().Replay(ctx, items[0].ID)`,
7599
description:
76100
"Every payload is signed with HMAC-SHA256. Receivers verify authenticity with a single call.",
77101
icon: (
78-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
102+
<svg
103+
className="size-5"
104+
viewBox="0 0 24 24"
105+
fill="none"
106+
stroke="currentColor"
107+
strokeWidth="1.5"
108+
strokeLinecap="round"
109+
strokeLinejoin="round"
110+
>
79111
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
80112
<path d="M7 11V7a5 5 0 0110 0v4" />
81113
</svg>
@@ -92,7 +124,15 @@ r.DLQ().Replay(ctx, items[0].ID)`,
92124
description:
93125
"Per-endpoint token bucket rate limiting protects downstream services from being overwhelmed.",
94126
icon: (
95-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
127+
<svg
128+
className="size-5"
129+
viewBox="0 0 24 24"
130+
fill="none"
131+
stroke="currentColor"
132+
strokeWidth="1.5"
133+
strokeLinecap="round"
134+
strokeLinejoin="round"
135+
>
96136
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
97137
<circle cx="12" cy="12" r="3" />
98138
</svg>
@@ -108,7 +148,15 @@ r.DLQ().Replay(ctx, items[0].ID)`,
108148
description:
109149
"Ship with in-memory for dev, swap to PostgreSQL for production. Bring your own store with a simple interface.",
110150
icon: (
111-
<svg className="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
151+
<svg
152+
className="size-5"
153+
viewBox="0 0 24 24"
154+
fill="none"
155+
stroke="currentColor"
156+
strokeWidth="1.5"
157+
strokeLinecap="round"
158+
strokeLinejoin="round"
159+
>
112160
<ellipse cx="12" cy="5" rx="9" ry="3" />
113161
<path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" />
114162
<path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" />

‎docs/src/components/landing/flow-primitives.tsx‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -67,19 +67,14 @@ export function FlowNode({
6767
>
6868
{pulse && (
6969
<motion.div
70-
className={cn(
71-
"absolute inset-0 rounded-lg border",
72-
colorMap[color],
73-
)}
70+
className={cn("absolute inset-0 rounded-lg border", colorMap[color])}
7471
animate={{ opacity: [0.5, 0], scale: [1, 1.15] }}
7572
transition={{ duration: 2, repeat: Infinity, ease: "easeOut" }}
7673
/>
7774
)}
7875
{icon}
7976
<span>{label}</span>
80-
{sublabel && (
81-
<span className="opacity-60 text-[0.85em]">{sublabel}</span>
82-
)}
77+
{sublabel && <span className="opacity-60 text-[0.85em]">{sublabel}</span>}
8378
</motion.div>
8479
);
8580
}
@@ -161,22 +156,21 @@ export function FlowLine({
161156
)}
162157

163158
{/* Arrowhead */}
164-
<div
165-
className={cn(
166-
"absolute",
167-
isH ? "right-0" : "bottom-0",
168-
)}
169-
>
159+
<div className={cn("absolute", isH ? "right-0" : "bottom-0")}>
170160
<div
171161
className={cn(
172162
"border-solid",
173163
isH
174164
? "border-l-[5px] border-y-[3px] border-y-transparent"
175165
: "border-t-[5px] border-x-[3px] border-x-transparent",
176-
color === "amber" && (isH ? "border-l-amber-500/50" : "border-t-amber-500/50"),
177-
color === "green" && (isH ? "border-l-green-500/50" : "border-t-green-500/50"),
178-
color === "red" && (isH ? "border-l-red-500/50" : "border-t-red-500/50"),
179-
color === "gray" && (isH ? "border-l-fd-border" : "border-t-fd-border"),
166+
color === "amber" &&
167+
(isH ? "border-l-amber-500/50" : "border-t-amber-500/50"),
168+
color === "green" &&
169+
(isH ? "border-l-green-500/50" : "border-t-green-500/50"),
170+
color === "red" &&
171+
(isH ? "border-l-red-500/50" : "border-t-red-500/50"),
172+
color === "gray" &&
173+
(isH ? "border-l-fd-border" : "border-t-fd-border"),
180174
)}
181175
/>
182176
</div>
@@ -252,12 +246,14 @@ interface StatusBadgeProps {
252246

253247
const statusConfig = {
254248
delivered: {
255-
color: "text-green-600 dark:text-green-400 bg-green-500/10 border-green-500/20",
249+
color:
250+
"text-green-600 dark:text-green-400 bg-green-500/10 border-green-500/20",
256251
defaultLabel: "200 Delivered",
257252
icon: "check",
258253
},
259254
retry: {
260-
color: "text-amber-600 dark:text-amber-400 bg-amber-500/10 border-amber-500/20",
255+
color:
256+
"text-amber-600 dark:text-amber-400 bg-amber-500/10 border-amber-500/20",
261257
defaultLabel: "503 Retry",
262258
icon: "retry",
263259
},
@@ -291,19 +287,47 @@ export function StatusBadge({ status, label, className }: StatusBadgeProps) {
291287
>
292288
{config.icon === "check" && (
293289
<svg className="size-2.5" viewBox="0 0 12 12" fill="none">
294-
<path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
290+
<path
291+
d="M2 6l3 3 5-5"
292+
stroke="currentColor"
293+
strokeWidth="1.5"
294+
strokeLinecap="round"
295+
strokeLinejoin="round"
296+
/>
295297
</svg>
296298
)}
297299
{config.icon === "retry" && (
298300
<svg className="size-2.5" viewBox="0 0 12 12" fill="none">
299-
<path d="M2 6a4 4 0 016.5-3M10 6a4 4 0 01-6.5 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
301+
<path
302+
d="M2 6a4 4 0 016.5-3M10 6a4 4 0 01-6.5 3"
303+
stroke="currentColor"
304+
strokeWidth="1.5"
305+
strokeLinecap="round"
306+
/>
300307
</svg>
301308
)}
302309
{config.icon === "archive" && (
303310
<svg className="size-2.5" viewBox="0 0 12 12" fill="none">
304-
<rect x="1" y="2" width="10" height="3" rx="0.5" stroke="currentColor" strokeWidth="1" />
305-
<path d="M2 5v4.5a.5.5 0 00.5.5h7a.5.5 0 00.5-.5V5" stroke="currentColor" strokeWidth="1" />
306-
<path d="M5 7h2" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
311+
<rect
312+
x="1"
313+
y="2"
314+
width="10"
315+
height="3"
316+
rx="0.5"
317+
stroke="currentColor"
318+
strokeWidth="1"
319+
/>
320+
<path
321+
d="M2 5v4.5a.5.5 0 00.5.5h7a.5.5 0 00.5-.5V5"
322+
stroke="currentColor"
323+
strokeWidth="1"
324+
/>
325+
<path
326+
d="M5 7h2"
327+
stroke="currentColor"
328+
strokeWidth="1"
329+
strokeLinecap="round"
330+
/>
307331
</svg>
308332
)}
309333
{label || config.defaultLabel}
@@ -318,7 +342,11 @@ interface FloatingBadgeProps {
318342
delay?: number;
319343
}
320344

321-
export function FloatingBadge({ label, className, delay = 0 }: FloatingBadgeProps) {
345+
export function FloatingBadge({
346+
label,
347+
className,
348+
delay = 0,
349+
}: FloatingBadgeProps) {
322350
return (
323351
<motion.div
324352
initial={{ opacity: 0, y: 8 }}

0 commit comments

Comments
 (0)