Skip to content

Commit 0a1b83a

Browse files
igalklebanovigalklebanov
committed
...
1 parent 097dd8f commit 0a1b83a

5 files changed

Lines changed: 235 additions & 62 deletions

File tree

‎site/src/components/SectionQuotes/index.tsx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { Quote } from './Quote'
44
import { quotes } from './quotes'
55
import styles from './styles.module.css'
66

7+
// Masonry with row-major reading order: quotes are distributed round-robin
8+
// into explicit column stacks (quote N goes to column N % count), so the
9+
// first quotes head the columns and reading left-to-right follows the
10+
// curated order in quotes.ts. The 3/2/1-column bucketings are all rendered
11+
// and media queries display exactly one, keeping this JS-free and SSR-exact.
12+
const COLUMN_LAYOUTS = [3, 2, 1]
13+
714
export function SectionQuotes() {
815
const [featured, ...rest] = quotes
916

@@ -13,15 +20,30 @@ export function SectionQuotes() {
1320
<h2 className={styles.sectionHeading}>
1421
Trusted by the people who build your other tools
1522
</h2>
16-
<p className={styles.sectionSub}>Unprompted, in public, on the record.</p>
23+
<p className={styles.sectionSub}>
24+
Unprompted, in public, on the record.
25+
</p>
1726
<div className={styles.featured}>
1827
<Quote {...featured} />
1928
</div>
20-
<div className={styles.quotesInnerContainer}>
21-
{rest.map((quote, index) => (
22-
<Quote key={index} {...quote} />
23-
))}
24-
</div>
29+
{COLUMN_LAYOUTS.map((columnCount) => (
30+
<div
31+
key={columnCount}
32+
className={clsx(styles.masonry, styles[`masonry${columnCount}`])}
33+
>
34+
{Array.from({ length: columnCount }, (_, columnIndex) => (
35+
<div key={columnIndex} className={styles.masonryColumn}>
36+
{rest
37+
.filter(
38+
(_, quoteIndex) => quoteIndex % columnCount === columnIndex,
39+
)
40+
.map((quote, index) => (
41+
<Quote key={index} {...quote} />
42+
))}
43+
</div>
44+
))}
45+
</div>
46+
))}
2547
</div>
2648
</section>
2749
)

‎site/src/components/SectionQuotes/styles.module.css‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
}
2626

2727
.featured .quoteContainer {
28-
margin-bottom: 0;
2928
padding: 26px 28px;
3029
}
3130

@@ -34,21 +33,45 @@
3433
line-height: 1.6;
3534
}
3635

37-
.quotesInnerContainer {
38-
column-gap: 16px;
39-
columns: 3;
36+
.masonry {
37+
display: none;
38+
gap: 16px;
39+
}
40+
41+
.masonryColumn {
42+
display: flex;
43+
flex: 1;
44+
flex-direction: column;
45+
gap: 16px;
46+
min-width: 0;
47+
}
48+
49+
@media (min-width: 997px) {
50+
.masonry3 {
51+
display: flex;
52+
}
53+
}
54+
55+
@media (min-width: 641px) and (max-width: 996px) {
56+
.masonry2 {
57+
display: flex;
58+
}
59+
}
60+
61+
@media (max-width: 640px) {
62+
.masonry1 {
63+
display: flex;
64+
}
4065
}
4166

4267
.quoteContainer {
4368
align-items: flex-start;
4469
background-color: var(--kl-bg);
4570
border: 1px solid var(--kl-line);
4671
border-radius: 10px;
47-
break-inside: avoid;
4872
display: flex;
4973
flex-direction: column;
5074
gap: 10px;
51-
margin-bottom: 16px;
5275
padding: 20px 22px;
5376
position: relative;
5477
text-decoration: none;
@@ -100,14 +123,3 @@
100123
fill: #e8e8e8;
101124
}
102125

103-
@media (max-width: 996px) {
104-
.quotesInnerContainer {
105-
columns: 2;
106-
}
107-
}
108-
109-
@media (max-width: 640px) {
110-
.quotesInnerContainer {
111-
columns: 1;
112-
}
113-
}

‎site/src/data/production-proof.json‎

Lines changed: 133 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,193 @@
11
[
2+
{
3+
"name": "AWS Blocks",
4+
"repo": "aws-devtools-labs/aws-blocks",
5+
"path": "packages/bb-data/package.json",
6+
"sha": "ac0966a5cda9b8b617dd0fabbe2024b13e43a2d9",
7+
"href": "https://github.com/aws-devtools-labs/aws-blocks/blob/ac0966a5cda9b8b617dd0fabbe2024b13e43a2d9/packages/bb-data/package.json",
8+
"group": "built-into"
9+
},
210
{
311
"name": "Better Auth",
412
"repo": "better-auth/better-auth",
513
"path": "packages/better-auth/src/db/get-migration.ts",
6-
"sha": "e2c73fbec87f5e19f6a2b5ac371bc5bba9bd49ff",
7-
"href": "https://github.com/better-auth/better-auth/blob/e2c73fbec87f5e19f6a2b5ac371bc5bba9bd49ff/packages/better-auth/src/db/get-migration.ts"
14+
"sha": "de5acf171f9c5b4af2c2c59bc69ffc631d03eb9f",
15+
"href": "https://github.com/better-auth/better-auth/blob/de5acf171f9c5b4af2c2c59bc69ffc631d03eb9f/packages/better-auth/src/db/get-migration.ts",
16+
"group": "built-into"
817
},
918
{
1019
"name": "Bluesky",
1120
"repo": "bluesky-social/atproto",
1221
"path": "packages/pds/package.json",
13-
"sha": "87e6a95c39f199e53b6a68b7d1fa23fbe8459753",
14-
"href": "https://github.com/bluesky-social/atproto/blob/87e6a95c39f199e53b6a68b7d1fa23fbe8459753/packages/pds/package.json"
22+
"sha": "d3bbeb5fe87f8c389c2f18abd2bc055ef916a63a",
23+
"href": "https://github.com/bluesky-social/atproto/blob/d3bbeb5fe87f8c389c2f18abd2bc055ef916a63a/packages/pds/package.json",
24+
"group": "production"
1525
},
1626
{
1727
"name": "Cal.com",
18-
"href": "https://github.com/kysely-org/kysely/issues/320#issuecomment-2990566802"
28+
"href": "https://github.com/kysely-org/kysely/issues/320#issuecomment-2990566802",
29+
"group": "production"
30+
},
31+
{
32+
"name": "Carbon",
33+
"repo": "crbnos/carbon",
34+
"path": "packages/database/package.json",
35+
"sha": "e6f41ce54886bec46c7c83615ed3c2e5708e2071",
36+
"href": "https://github.com/crbnos/carbon/blob/e6f41ce54886bec46c7c83615ed3c2e5708e2071/packages/database/package.json",
37+
"group": "built-into"
38+
},
39+
{
40+
"name": "Colanode",
41+
"repo": "colanode/colanode",
42+
"path": "packages/client/src/services/kysely-service.ts",
43+
"sha": "d649523637f0f059c936418488165d4a689da27c",
44+
"href": "https://github.com/colanode/colanode/blob/d649523637f0f059c936418488165d4a689da27c/packages/client/src/services/kysely-service.ts",
45+
"group": "built-into"
46+
},
47+
{
48+
"name": "Conar",
49+
"repo": "wannabespace/conar",
50+
"path": "apps/app/package.json",
51+
"sha": "7bb1b88a8bb9822188e2f548f998505f07a2dce0",
52+
"href": "https://github.com/wannabespace/conar/blob/7bb1b88a8bb9822188e2f548f998505f07a2dce0/apps/app/package.json",
53+
"group": "built-into"
1954
},
2055
{
2156
"name": "Deno",
22-
"href": "https://reddit.com/r/Deno/comments/1hvofl1/comment/mbbhmf1"
57+
"href": "https://reddit.com/r/Deno/comments/1hvofl1/comment/mbbhmf1",
58+
"group": "production"
2359
},
2460
{
2561
"name": "Docmost",
2662
"repo": "docmost/docmost",
2763
"path": "apps/server/package.json",
2864
"sha": "70d2ff86856f0ffa66b5c64d0dadac80133c8b5c",
29-
"href": "https://github.com/docmost/docmost/blob/70d2ff86856f0ffa66b5c64d0dadac80133c8b5c/apps/server/package.json"
65+
"href": "https://github.com/docmost/docmost/blob/70d2ff86856f0ffa66b5c64d0dadac80133c8b5c/apps/server/package.json",
66+
"group": "production"
3067
},
3168
{
3269
"name": "Documenso",
3370
"repo": "documenso/documenso",
3471
"path": "ARCHITECTURE.md",
3572
"sha": "a457e1ef7de449e4f758fc6943a8014e952c34c6",
36-
"href": "https://github.com/documenso/documenso/blob/a457e1ef7de449e4f758fc6943a8014e952c34c6/ARCHITECTURE.md"
73+
"href": "https://github.com/documenso/documenso/blob/a457e1ef7de449e4f758fc6943a8014e952c34c6/ARCHITECTURE.md",
74+
"group": "production"
75+
},
76+
{
77+
"name": "EmDash",
78+
"repo": "emdash-cms/emdash",
79+
"path": "packages/core/package.json",
80+
"sha": "481949b25a2741e0a4d842c0a8c01ce4457ff333",
81+
"href": "https://github.com/emdash-cms/emdash/blob/481949b25a2741e0a4d842c0a8c01ce4457ff333/packages/core/package.json",
82+
"group": "built-into"
83+
},
84+
{
85+
"name": "Evolu",
86+
"repo": "evoluhq/evolu",
87+
"path": "packages/common/package.json",
88+
"sha": "5e0cde081c4edd36d2d513994e8056a61b3202f2",
89+
"href": "https://github.com/evoluhq/evolu/blob/5e0cde081c4edd36d2d513994e8056a61b3202f2/packages/common/package.json",
90+
"group": "built-into"
91+
},
92+
{
93+
"name": "Immich",
94+
"repo": "immich-app/immich",
95+
"path": "server/package.json",
96+
"sha": "bcf6e66e26d4a26dc8e08da1423ff4e8a6cd1fd8",
97+
"href": "https://github.com/immich-app/immich/blob/bcf6e66e26d4a26dc8e08da1423ff4e8a6cd1fd8/server/package.json",
98+
"group": "built-into"
3799
},
38100
{
39101
"name": "Maersk",
40-
"href": "https://github.com/kysely-org/kysely/issues/320#issuecomment-2183966432"
102+
"href": "https://github.com/kysely-org/kysely/issues/320#issuecomment-2183966432",
103+
"group": "production"
104+
},
105+
{
106+
"name": "MikroORM",
107+
"repo": "mikro-orm/mikro-orm",
108+
"path": "packages/sql/package.json",
109+
"sha": "2b3b6b8c014e5a8678df72fcf7d0aaaf62a44c89",
110+
"href": "https://github.com/mikro-orm/mikro-orm/blob/2b3b6b8c014e5a8678df72fcf7d0aaaf62a44c89/packages/sql/package.json",
111+
"group": "built-into"
41112
},
42113
{
43114
"name": "Mozilla",
44115
"repo": "mozilla/fxa",
45116
"path": "libs/shared/db/mysql/account/src/lib/kysely-types.ts",
46-
"sha": "ea296fd6814bfc1fd801e2bb35a11ffbe4f173a8",
47-
"href": "https://github.com/mozilla/fxa/blob/ea296fd6814bfc1fd801e2bb35a11ffbe4f173a8/libs/shared/db/mysql/account/src/lib/kysely-types.ts"
117+
"sha": "15da9e7abcf772e6cca61cb3068efcd62ecbab0d",
118+
"href": "https://github.com/mozilla/fxa/blob/15da9e7abcf772e6cca61cb3068efcd62ecbab0d/libs/shared/db/mysql/account/src/lib/kysely-types.ts",
119+
"group": "production"
120+
},
121+
{
122+
"name": "Notesnook",
123+
"repo": "streetwriters/notesnook",
124+
"path": "apps/web/src/common/sqlite/wa-sqlite-kysely-driver.ts",
125+
"sha": "b5140d9947d01d34635d5e8b1d4653bea26a73a7",
126+
"href": "https://github.com/streetwriters/notesnook/blob/b5140d9947d01d34635d5e8b1d4653bea26a73a7/apps/web/src/common/sqlite/wa-sqlite-kysely-driver.ts",
127+
"group": "built-into"
48128
},
49129
{
50130
"name": "OpenClaw",
51131
"repo": "openclaw/openclaw",
52132
"path": "package.json",
53-
"sha": "6a4e2f3d7526296da59ce407dd68f7311e37bcc7",
54-
"href": "https://github.com/openclaw/openclaw/blob/6a4e2f3d7526296da59ce407dd68f7311e37bcc7/package.json"
133+
"sha": "d239a59d82ea929c92df2fff716a70c8e5d6bf1e",
134+
"href": "https://github.com/openclaw/openclaw/blob/d239a59d82ea929c92df2fff716a70c8e5d6bf1e/package.json",
135+
"group": "built-into"
55136
},
56137
{
57138
"name": "Parabol",
58139
"repo": "ParabolInc/parabol",
59140
"path": "package.json",
60141
"sha": "184f571ef5c724bcb840061afb433b08205e1f35",
61-
"href": "https://github.com/ParabolInc/parabol/blob/184f571ef5c724bcb840061afb433b08205e1f35/package.json"
142+
"href": "https://github.com/ParabolInc/parabol/blob/184f571ef5c724bcb840061afb433b08205e1f35/package.json",
143+
"group": "production"
62144
},
63145
{
64146
"name": "Prisma",
65147
"repo": "prisma/studio",
66148
"path": "data/query.ts",
67149
"sha": "550f51d2b1cdf4487a6abfb3278df8c3a51aeb2b",
68-
"href": "https://github.com/prisma/studio/blob/550f51d2b1cdf4487a6abfb3278df8c3a51aeb2b/data/query.ts"
150+
"href": "https://github.com/prisma/studio/blob/550f51d2b1cdf4487a6abfb3278df8c3a51aeb2b/data/query.ts",
151+
"group": "production"
152+
},
153+
{
154+
"name": "RedwoodSDK",
155+
"repo": "redwoodjs/sdk",
156+
"path": "sdk/package.json",
157+
"sha": "a6705a453c6447bf467e8cebe32cd35f31d9696c",
158+
"href": "https://github.com/redwoodjs/sdk/blob/a6705a453c6447bf467e8cebe32cd35f31d9696c/sdk/package.json",
159+
"group": "built-into"
160+
},
161+
{
162+
"name": "Sink",
163+
"repo": "miantiao-me/Sink",
164+
"path": "package.json",
165+
"sha": "3f8d30ae8c917f269249d6c7c1c3894fc8d8af91",
166+
"href": "https://github.com/miantiao-me/Sink/blob/3f8d30ae8c917f269249d6c7c1c3894fc8d8af91/package.json",
167+
"group": "built-into"
168+
},
169+
{
170+
"name": "StudioCMS",
171+
"repo": "withstudiocms/studiocms",
172+
"path": "packages/@withstudiocms/kysely/package.json",
173+
"sha": "8f953e8c2d6cdc037c09a06eee684083c3a82ff3",
174+
"href": "https://github.com/withstudiocms/studiocms/blob/8f953e8c2d6cdc037c09a06eee684083c3a82ff3/packages/@withstudiocms/kysely/package.json",
175+
"group": "built-into"
69176
},
70177
{
71178
"name": "tldraw",
72179
"repo": "tldraw/tldraw",
73180
"path": "apps/dotcom/sync-worker/package.json",
74-
"sha": "e857c8e412bef005cec63bef6c30807fab255ff7",
75-
"href": "https://github.com/tldraw/tldraw/blob/e857c8e412bef005cec63bef6c30807fab255ff7/apps/dotcom/sync-worker/package.json"
181+
"sha": "46979946f542a7819bdab5f41bc30a0837fb107e",
182+
"href": "https://github.com/tldraw/tldraw/blob/46979946f542a7819bdab5f41bc30a0837fb107e/apps/dotcom/sync-worker/package.json",
183+
"group": "production"
184+
},
185+
{
186+
"name": "ZenStack",
187+
"repo": "zenstackhq/zenstack",
188+
"path": "packages/orm/package.json",
189+
"sha": "78e741e3ef426bb79749a91e24d3b660075f1aae",
190+
"href": "https://github.com/zenstackhq/zenstack/blob/78e741e3ef426bb79749a91e24d3b660075f1aae/packages/orm/package.json",
191+
"group": "built-into"
76192
}
77193
]

‎site/src/pages/index.module.css‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -162,38 +162,45 @@
162162
text-transform: uppercase;
163163
}
164164

165+
.productionCaption:not(:first-child) {
166+
margin-top: 10px;
167+
}
168+
165169
.productionNames {
166-
align-items: baseline;
170+
align-items: stretch;
167171
display: flex;
168172
flex-wrap: wrap;
169-
gap: 26px;
173+
gap: 8px;
170174
}
171175

172176
.productionNames a {
177+
align-items: center;
178+
border: 1px solid var(--kl-line);
179+
border-radius: 8px;
173180
color: #c9c9c9;
174-
font-size: 17px;
175-
font-weight: 700;
181+
display: inline-flex;
182+
font-size: 14.5px;
183+
font-weight: 650;
184+
padding: 8px 14px;
176185
text-decoration: none;
177186
}
178187

179188
.productionNames a:hover {
189+
border-color: var(--kl-mut);
180190
color: var(--kl-ink);
181191
text-decoration: none;
182192
}
183193

184-
.productionCTA {
194+
.productionNames a.productionCTA {
185195
border: 1px dashed #3c3c3c;
186-
border-radius: 7px;
187196
color: var(--kl-acc);
188197
font-size: 12.5px;
189-
padding: 6px 12px;
190-
text-decoration: none;
198+
font-weight: 600;
191199
}
192200

193-
.productionCTA:hover {
201+
.productionNames a.productionCTA:hover {
194202
border-color: var(--kl-acc);
195203
color: var(--kl-acc);
196-
text-decoration: none;
197204
}
198205

199206
/* --------------------------- error figure --------------------------- */

0 commit comments

Comments
 (0)