Skip to content

Commit ff6c075

Browse files
ssalbdivadssalbdivad
committed
docs: improve landing page cards
1 parent b227e45 commit ff6c075

File tree

3 files changed

+61
-102
lines changed

3 files changed

+61
-102
lines changed

‎ark/docs/app/(home)/page.tsx‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,42 +19,32 @@ export default () => (
1919

2020
<ArkCards>
2121
<ArkCard title="Unparalleled DX" icon={<TsIcon height={20} />}>
22-
<p>
23-
Type syntax you already know with safety and completions unlike
24-
anything you&apos;ve ever seen
25-
</p>
22+
Type syntax you already know with safety and completions unlike anything
23+
you've ever seen
2624
<CodeBlock fromFile="unparalleledDx" includesCompletions />
2725
</ArkCard>
28-
<ArkCard title="Faster... everything" icon={<RocketIcon />}>
29-
<p>
30-
100x faster than Zod at runtime with editor performance that will
31-
remind you how autocomplete is supposed to feel
32-
</p>
33-
<RuntimeBenchmarksGraph className="mt-2" />
26+
<ArkCard title="Better Errors" icon={<MessageCircleWarning />}>
27+
Deeply customizable messages with great defaults
28+
<CodeBlock fromFile="betterErrors" />
3429
</ArkCard>
3530
<ArkCard title="Clarity and Concision" icon={<MessageSquareTextIcon />}>
36-
<p>
37-
Definitions are half as long, type errors are twice as readable, and
38-
hovers tell you just what really matters
39-
</p>
31+
Definitions are half as long, type errors are twice as readable, and
32+
hovers tell you just what really matters
4033
<CodeBlock fromFile="clarityAndConcision" />
4134
</ArkCard>
42-
<ArkCard title="Better Errors" icon={<MessageCircleWarning />}>
43-
<p>Deeply customizable messages with great defaults</p>
44-
<CodeBlock fromFile="betterErrors" />
35+
<ArkCard title="Faster... everything" icon={<RocketIcon />}>
36+
100x faster than Zod and 2,000x faster than Yup at runtime, with editor
37+
performance that will remind you how autocomplete is supposed to feel
38+
<RuntimeBenchmarksGraph className="mt-2" />
4539
</ArkCard>
4640
<ArkCard title="Deep Introspectability" icon={<SearchIcon />}>
47-
<p>
48-
ArkType uses set theory to understand and expose the relationships
49-
between your types at runtime the way TypeScript does at compile time
50-
</p>
41+
ArkType uses set theory to understand and expose the relationships
42+
between your types at runtime the way TypeScript does at compile time
5143
<CodeBlock fromFile="deepIntrospectability" />
5244
</ArkCard>
5345
<ArkCard title="Intrinsic Optimization" icon={<LightbulbIcon />}>
54-
<p>
55-
Every schema is internally normalized and reduced to its purest and
56-
fastest representation
57-
</p>
46+
Every schema is internally normalized and reduced to its purest and
47+
fastest representation
5848
<CodeBlock fromFile="intrinsicOptimization" />
5949
</ArkCard>
6050
{/* <Card title="Portable" icon="seti:json">

‎ark/docs/components/ArkCard.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ export const ArkCard: React.FC<CardProps> = ({
3737
{...props}
3838
className={cn(
3939
"ark-card", // special class for ArkCards targeting
40-
"sm:even:translate-y-10 [&>h3]:text-2xl [&>h3]:font-semibold border-[#003b62]",
40+
"sm:even:translate-y-10 [&>h3]:text-2xl [&>h3]:font-semibold [&_.prose-no-margin]:text-lg border-[#003b62]",
41+
"[&>.prose-no-margin]:flex [&>.prose-no-margin]:flex-col [&>.prose-no-margin]:flex-grow",
42+
"flex flex-col",
4143
className
4244
)}
4345
>

‎ark/docs/components/RuntimeBenchmarksGraph.tsx‎

Lines changed: 43 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,71 @@
11
import { cn } from "fumadocs-ui/components/api"
2+
import React from "react"
23

34
const barStyles: React.CSSProperties = {
45
height: "30px",
5-
borderRadius: "5px",
6+
borderRadius: "8px",
67
display: "flex",
78
alignItems: "baseline",
8-
marginRight: "1rem",
9+
marginRight: "0.5rem",
10+
marginBottom: "0.5rem",
911
color: "black"
1012
}
1113

1214
const arkBarStyles = {
1315
...barStyles,
1416
background:
15-
"repeating-linear-gradient(135deg, #40decc, #40decc 10px, #34c8b9 10px, #34c8b9 20px)"
17+
"repeating-linear-gradient(135deg, #00ffd5, #00ffd5 12px, #00e6bf 12px, #00e6bf 24px)"
1618
}
17-
1819
const zodBarStyles = {
1920
...barStyles,
2021
background:
21-
"repeating-linear-gradient(135deg, #b084f6, #b084f6 10px, #9a6fe3 10px, #9a6fe3 20px)"
22+
"repeating-linear-gradient(135deg, rgba(140, 205, 255, 0.6), rgba(140, 205, 255, 0.6) 12px, rgba(124, 189, 237, 0.6) 12px, rgba(124, 189, 237, 0.6) 24px)"
23+
}
24+
25+
const yupBarStyles = {
26+
...barStyles,
27+
background:
28+
"repeating-linear-gradient(135deg, rgba(144, 175, 224, 0.7), rgba(144, 175, 224, 0.7) 12px, rgba(133, 157, 199, 0.7) 12px, rgba(133, 157, 199, 0.7) 24px)"
2229
}
2330

2431
export const RuntimeBenchmarksGraph: React.FC<{ className?: string }> = ({
2532
className
2633
}) => (
2734
<div
28-
style={{ fontSize: 14, fontWeight: 500 }}
35+
style={{
36+
fontSize: 16.8,
37+
fontWeight: 500,
38+
display: "flex",
39+
flexDirection: "column",
40+
flexGrow: 1
41+
}}
2942
className={cn("font-semibold text-white", className)}
3043
>
31-
<div
32-
style={{
33-
display: "flex",
34-
flexDirection: "row"
35-
}}
36-
>
37-
<h6 className="text-lg mb-2">
38-
Object Validation, Node v22.2.0 (
39-
<a
40-
target="_blank"
41-
href="https://moltar.github.io/typescript-runtime-type-benchmarks/"
42-
>
43-
source
44-
</a>
45-
)
46-
</h6>
47-
</div>
48-
<div
49-
style={{
50-
display: "flex",
51-
alignItems: "center"
52-
}}
53-
>
54-
<div style={{ ...arkBarStyles, width: "1.06%" }}></div>
55-
ArkType (15 nanoseconds)
56-
</div>
57-
<div style={{ ...zodBarStyles, width: "100%" }}>
58-
&nbsp;&nbsp;Zod (1374 nanoseconds)
59-
</div>
60-
</div>
61-
)
62-
63-
export const TypeBenchmarksGraph = () => (
64-
<div style={{ fontSize: 14, fontWeight: 500 }}>
65-
<div
66-
style={{
67-
display: "flex",
68-
flexDirection: "row"
69-
}}
70-
>
71-
<h6 style={{ fontSize: 15 }}>
72-
Union Type Instantiations, TypeScript 5.5.3 (
73-
<a
74-
target="_blank"
75-
href="https://github.com/arktypeio/arktype/blob/468da965d9a2bbb16fe38d37e82c3b35e5158334/ark/repo/scratch/discriminatedComparison.ts"
76-
>
77-
source
78-
</a>
79-
)
80-
</h6>
81-
</div>
82-
<div
83-
style={{
84-
display: "flex",
85-
alignItems: "center"
86-
}}
87-
>
88-
<div style={{ ...arkBarStyles, width: "10.94%" }}></div>
89-
ArkType Auto-Discriminated (7,801)
90-
</div>
91-
<div
92-
style={{
93-
display: "flex",
94-
alignItems: "center"
95-
}}
96-
>
97-
<div style={{ ...zodBarStyles, width: "34.98%" }}></div>
98-
Zod Raw (24,944)
44+
<div style={{ display: "flex", flexDirection: "row" }}>
45+
<h6 className="text-xl mb-2">Object Validation, Node v23.6.1</h6>{" "}
46+
<a
47+
className="underline ml-2"
48+
target="_blank"
49+
href="https://moltar.github.io/typescript-runtime-type-benchmarks/"
50+
style={{ textDecoration: "underline", color: "#1e90ff" }}
51+
>
52+
(source)
53+
</a>
9954
</div>
100-
<div style={{ ...zodBarStyles, width: "100%", justifyContent: "end" }}>
101-
Zod Discriminated (71,312)&nbsp;&nbsp;
55+
<div style={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
56+
<div style={{ display: "flex", alignItems: "center" }}>
57+
<div style={{ ...arkBarStyles, width: "0.5%" }}></div>
58+
ArkType ⚡ 14 nanoseconds
59+
</div>
60+
<div style={{ ...zodBarStyles, width: "50%" }}>
61+
&nbsp;&nbsp;&nbsp;Zod 👍 1397 nanoseconds
62+
</div>
63+
<div style={{ ...yupBarStyles, width: "100%" }}>
64+
&nbsp;&nbsp;&nbsp;Yup 🐌 40755 nanoseconds*
65+
</div>
66+
<div className="text-xs mt-auto self-end">
67+
*scaling generously logarithmized
68+
</div>
10269
</div>
10370
</div>
10471
)

0 commit comments

Comments
 (0)