create-swift-rust 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1030 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/templates/default/src/app/about/page.tsx +6 -6
- package/templates/default/src/app/about/team/page.tsx +6 -6
- package/templates/default/src/app/blog/[slug]/page.tsx +24 -16
- package/templates/default/src/app/blog/page.tsx +23 -19
- package/templates/default/src/app/blog/tag/[tag]/page.tsx +8 -8
- package/templates/default/src/app/contact/page.tsx +8 -8
- package/templates/default/src/app/dashboard/analytics/page.tsx +12 -12
- package/templates/default/src/app/dashboard/loading.tsx +8 -8
- package/templates/default/src/app/dashboard/page.tsx +36 -27
- package/templates/default/src/app/dashboard/posts/[id]/not-found.tsx +2 -2
- package/templates/default/src/app/dashboard/posts/[id]/page.tsx +5 -5
- package/templates/default/src/app/dashboard/posts/new/page.tsx +15 -10
- package/templates/default/src/app/dashboard/posts/page.tsx +7 -7
- package/templates/default/src/app/dashboard/settings/page.tsx +39 -17
- package/templates/default/src/app/error.tsx +2 -2
- package/templates/default/src/app/fonts/page.tsx +39 -39
- package/templates/default/src/app/images/page.tsx +53 -15
- package/templates/default/src/app/layout.tsx +1 -1
- package/templates/default/src/app/loading.tsx +5 -5
- package/templates/default/src/app/not-found.tsx +2 -2
- package/templates/default/src/app/page.tsx +114 -72
- package/templates/default/src/app/videos/page.tsx +22 -22
- package/templates/default/src/components/font-studio.tsx +37 -37
- package/templates/default/src/components/footer.tsx +5 -5
- package/templates/default/src/components/logo.tsx +2 -2
- package/templates/default/src/components/nav.tsx +28 -10
- package/templates/default/src/components/sidebar.tsx +10 -10
|
@@ -25,7 +25,8 @@ const RENDERERS = [
|
|
|
25
25
|
const FEATURES = [
|
|
26
26
|
{
|
|
27
27
|
title: "Streaming SSR",
|
|
28
|
-
description:
|
|
28
|
+
description:
|
|
29
|
+
"Async components, Suspense boundaries, and edge-ready streaming out of the box.",
|
|
29
30
|
icon: IconBolt,
|
|
30
31
|
},
|
|
31
32
|
{
|
|
@@ -42,7 +43,8 @@ const FEATURES = [
|
|
|
42
43
|
},
|
|
43
44
|
{
|
|
44
45
|
title: "Built-in components",
|
|
45
|
-
description:
|
|
46
|
+
description:
|
|
47
|
+
"Image, Font, and PDF components with automatic optimization, like you expect.",
|
|
46
48
|
icon: IconBox,
|
|
47
49
|
},
|
|
48
50
|
{
|
|
@@ -79,19 +81,26 @@ export default function HomePage() {
|
|
|
79
81
|
stroke="currentColor"
|
|
80
82
|
strokeWidth="2"
|
|
81
83
|
>
|
|
82
|
-
<path
|
|
84
|
+
<path
|
|
85
|
+
d="M5 12h14M13 6l6 6-6 6"
|
|
86
|
+
strokeLinecap="round"
|
|
87
|
+
strokeLinejoin="round"
|
|
88
|
+
/>
|
|
83
89
|
</svg>
|
|
84
90
|
</Link>
|
|
85
|
-
<h1 className="text-balance text-5xl font-semibold tracking-tight text-
|
|
91
|
+
<h1 className="text-balance text-5xl font-semibold tracking-tight text-fg sm:text-6xl md:text-7xl">
|
|
86
92
|
The React framework
|
|
87
93
|
<br />
|
|
88
|
-
<span className="text-
|
|
89
|
-
<span className="text-
|
|
90
|
-
<span className="text-
|
|
94
|
+
<span className="text-accent">Powered</span>{" "}
|
|
95
|
+
<span className="text-fg-muted">with Rust +</span>{" "}
|
|
96
|
+
<span className="text-accent">Bun</span>.
|
|
91
97
|
</h1>
|
|
92
|
-
<p className="mx-auto mt-7 max-w-xl text-pretty text-lg leading-relaxed text-
|
|
93
|
-
TSX, streaming SSR, file-system routing, and a single binary at
|
|
94
|
-
|
|
98
|
+
<p className="mx-auto mt-7 max-w-xl text-pretty text-lg leading-relaxed text-fg-muted">
|
|
99
|
+
TSX, streaming SSR, file-system routing, and a single binary at
|
|
100
|
+
deploy.{" "}
|
|
101
|
+
<span className="font-semibold text-fg">
|
|
102
|
+
10x faster than Next.js.
|
|
103
|
+
</span>{" "}
|
|
95
104
|
Familiar to anyone who has used Next.js. Familiar to nobody else.
|
|
96
105
|
</p>
|
|
97
106
|
<div className="mt-10 flex flex-wrap items-center justify-center gap-3">
|
|
@@ -104,11 +113,22 @@ export default function HomePage() {
|
|
|
104
113
|
stroke="currentColor"
|
|
105
114
|
strokeWidth="2"
|
|
106
115
|
>
|
|
107
|
-
<path
|
|
116
|
+
<path
|
|
117
|
+
d="M5 12h14M13 6l6 6-6 6"
|
|
118
|
+
strokeLinecap="round"
|
|
119
|
+
strokeLinejoin="round"
|
|
120
|
+
/>
|
|
108
121
|
</svg>
|
|
109
122
|
</Link>
|
|
110
|
-
<Link
|
|
111
|
-
|
|
123
|
+
<Link
|
|
124
|
+
href={siteConfig.githubUrl}
|
|
125
|
+
className="btn btn-outline btn-lg"
|
|
126
|
+
>
|
|
127
|
+
<svg
|
|
128
|
+
viewBox="0 0 24 24"
|
|
129
|
+
className="h-4 w-4"
|
|
130
|
+
fill="currentColor"
|
|
131
|
+
>
|
|
112
132
|
<path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1.16-.02-2.11-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.4-5.25 5.68.41.36.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .31.21.68.8.56C20.21 21.38 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z" />
|
|
113
133
|
</svg>
|
|
114
134
|
Star on GitHub
|
|
@@ -120,24 +140,29 @@ export default function HomePage() {
|
|
|
120
140
|
</div>
|
|
121
141
|
</section>
|
|
122
142
|
|
|
123
|
-
<section className="border-t border-
|
|
143
|
+
<section className="border-t border-border bg-surface py-24">
|
|
124
144
|
<div className="container-page">
|
|
125
145
|
<div className="mx-auto max-w-2xl text-center">
|
|
126
146
|
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
|
|
127
147
|
Four ways to render.
|
|
128
148
|
</h2>
|
|
129
|
-
<p className="mt-4 text-pretty text-
|
|
130
|
-
Pick a mode when you scaffold. Change it later in one line of
|
|
149
|
+
<p className="mt-4 text-pretty text-fg-muted">
|
|
150
|
+
Pick a mode when you scaffold. Change it later in one line of
|
|
151
|
+
config.
|
|
131
152
|
</p>
|
|
132
153
|
</div>
|
|
133
|
-
<div className="mt-16 grid gap-px overflow-hidden rounded-2xl border border-
|
|
154
|
+
<div className="mt-16 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4">
|
|
134
155
|
{RENDERERS.map((r) => (
|
|
135
|
-
<div key={r.name} className="flex flex-col gap-2 bg-
|
|
156
|
+
<div key={r.name} className="flex flex-col gap-2 bg-surface p-6">
|
|
136
157
|
<div className="flex items-center justify-between">
|
|
137
|
-
<h3 className="text-[0.95rem] font-semibold text-
|
|
138
|
-
|
|
158
|
+
<h3 className="text-[0.95rem] font-semibold text-fg">
|
|
159
|
+
{r.name}
|
|
160
|
+
</h3>
|
|
161
|
+
{r.badge ? (
|
|
162
|
+
<span className="badge badge-accent">{r.badge}</span>
|
|
163
|
+
) : null}
|
|
139
164
|
</div>
|
|
140
|
-
<p className="text-[0.875rem] leading-relaxed text-
|
|
165
|
+
<p className="text-[0.875rem] leading-relaxed text-fg-muted">
|
|
141
166
|
{r.description}
|
|
142
167
|
</p>
|
|
143
168
|
</div>
|
|
@@ -152,21 +177,23 @@ export default function HomePage() {
|
|
|
152
177
|
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
|
|
153
178
|
Everything you'd expect.
|
|
154
179
|
</h2>
|
|
155
|
-
<p className="mt-4 text-pretty text-
|
|
180
|
+
<p className="mt-4 text-pretty text-fg-muted">
|
|
156
181
|
The primitives every framework should have shipped with years ago.
|
|
157
182
|
</p>
|
|
158
183
|
</div>
|
|
159
|
-
<div className="mt-16 grid gap-px overflow-hidden rounded-2xl border border-
|
|
184
|
+
<div className="mt-16 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
|
|
160
185
|
{FEATURES.map((f) => {
|
|
161
186
|
const Icon = f.icon;
|
|
162
187
|
return (
|
|
163
188
|
<div
|
|
164
189
|
key={f.title}
|
|
165
|
-
className="flex flex-col gap-3 bg-
|
|
190
|
+
className="flex flex-col gap-3 bg-surface p-6 transition-colors hover:bg-surface-2"
|
|
166
191
|
>
|
|
167
|
-
<Icon className="h-5 w-5 text-
|
|
168
|
-
<h3 className="text-[0.95rem] font-semibold text-
|
|
169
|
-
|
|
192
|
+
<Icon className="h-5 w-5 text-accent" />
|
|
193
|
+
<h3 className="text-[0.95rem] font-semibold text-fg">
|
|
194
|
+
{f.title}
|
|
195
|
+
</h3>
|
|
196
|
+
<p className="text-[0.875rem] leading-relaxed text-fg-muted">
|
|
170
197
|
{f.description}
|
|
171
198
|
</p>
|
|
172
199
|
</div>
|
|
@@ -176,17 +203,20 @@ export default function HomePage() {
|
|
|
176
203
|
</div>
|
|
177
204
|
</section>
|
|
178
205
|
|
|
179
|
-
<section className="border-t border-
|
|
206
|
+
<section className="border-t border-border bg-surface py-24">
|
|
180
207
|
<div className="container-page">
|
|
181
208
|
<div className="grid items-start gap-16 lg:grid-cols-[1fr_1.4fr]">
|
|
182
209
|
<div className="lg:sticky lg:top-24">
|
|
183
|
-
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
|
|
184
|
-
|
|
185
|
-
|
|
210
|
+
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
|
|
211
|
+
From the blog.
|
|
212
|
+
</h2>
|
|
213
|
+
<p className="mt-4 text-fg-muted">
|
|
214
|
+
Field notes, release announcements, and the occasional rant
|
|
215
|
+
about bundlers.
|
|
186
216
|
</p>
|
|
187
217
|
<Link
|
|
188
218
|
href="/blog"
|
|
189
|
-
className="mt-6 inline-flex items-center gap-1.5 text-[0.875rem] font-medium text-
|
|
219
|
+
className="mt-6 inline-flex items-center gap-1.5 text-[0.875rem] font-medium text-accent hover:text-accent-hover"
|
|
190
220
|
>
|
|
191
221
|
Read all posts
|
|
192
222
|
<svg
|
|
@@ -196,11 +226,15 @@ export default function HomePage() {
|
|
|
196
226
|
stroke="currentColor"
|
|
197
227
|
strokeWidth="2"
|
|
198
228
|
>
|
|
199
|
-
<path
|
|
229
|
+
<path
|
|
230
|
+
d="M5 12h14M13 6l6 6-6 6"
|
|
231
|
+
strokeLinecap="round"
|
|
232
|
+
strokeLinejoin="round"
|
|
233
|
+
/>
|
|
200
234
|
</svg>
|
|
201
235
|
</Link>
|
|
202
236
|
</div>
|
|
203
|
-
<ul className="divide-y divide-
|
|
237
|
+
<ul className="divide-y divide-border border-y border-border">
|
|
204
238
|
{recentPosts.map((post) => (
|
|
205
239
|
<li key={post.slug}>
|
|
206
240
|
<Link
|
|
@@ -208,21 +242,21 @@ export default function HomePage() {
|
|
|
208
242
|
className="group flex items-start justify-between gap-6 py-6 transition-colors"
|
|
209
243
|
>
|
|
210
244
|
<div className="flex-1">
|
|
211
|
-
<div className="flex items-center gap-2 text-[0.75rem] text-
|
|
245
|
+
<div className="flex items-center gap-2 text-[0.75rem] text-fg-subtle">
|
|
212
246
|
<time dateTime={post.date}>{post.date}</time>
|
|
213
247
|
<span>·</span>
|
|
214
248
|
<span>{post.readingTime}</span>
|
|
215
249
|
</div>
|
|
216
|
-
<h3 className="mt-2 text-[1.0625rem] font-semibold text-
|
|
250
|
+
<h3 className="mt-2 text-[1.0625rem] font-semibold text-fg group-hover:text-accent">
|
|
217
251
|
{post.title}
|
|
218
252
|
</h3>
|
|
219
|
-
<p className="mt-1.5 text-[0.875rem] leading-relaxed text-
|
|
253
|
+
<p className="mt-1.5 text-[0.875rem] leading-relaxed text-fg-muted">
|
|
220
254
|
{post.excerpt}
|
|
221
255
|
</p>
|
|
222
256
|
</div>
|
|
223
257
|
<svg
|
|
224
258
|
viewBox="0 0 24 24"
|
|
225
|
-
className="mt-1 h-4 w-4 shrink-0 text-
|
|
259
|
+
className="mt-1 h-4 w-4 shrink-0 text-fg-subtle transition-all group-hover:translate-x-0.5 group-hover:text-fg"
|
|
226
260
|
fill="none"
|
|
227
261
|
stroke="currentColor"
|
|
228
262
|
strokeWidth="2"
|
|
@@ -243,12 +277,13 @@ export default function HomePage() {
|
|
|
243
277
|
|
|
244
278
|
<section className="py-24">
|
|
245
279
|
<div className="container-page">
|
|
246
|
-
<div className="rounded-3xl border border-
|
|
247
|
-
<h2 className="text-balance text-3xl font-semibold tracking-tight text-
|
|
280
|
+
<div className="rounded-3xl border border-border bg-fg p-12 text-center sm:p-16">
|
|
281
|
+
<h2 className="text-balance text-3xl font-semibold tracking-tight text-bg sm:text-4xl">
|
|
248
282
|
Stop waiting on the build.
|
|
249
283
|
</h2>
|
|
250
|
-
<p className="mx-auto mt-4 max-w-lg text-pretty text-
|
|
251
|
-
Install with one command. Scaffold a project, write TSX, ship a
|
|
284
|
+
<p className="mx-auto mt-4 max-w-lg text-pretty text-fg-subtle">
|
|
285
|
+
Install with one command. Scaffold a project, write TSX, ship a
|
|
286
|
+
binary.
|
|
252
287
|
</p>
|
|
253
288
|
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
254
289
|
<code className="rounded-md border border-white/10 bg-white/5 px-3 py-2 font-mono text-[0.875rem] text-white">
|
|
@@ -267,55 +302,55 @@ export default function HomePage() {
|
|
|
267
302
|
|
|
268
303
|
function CodePreview() {
|
|
269
304
|
return (
|
|
270
|
-
<div className="mx-auto mt-20 max-w-4xl overflow-hidden rounded-2xl border border-
|
|
271
|
-
<div className="flex items-center gap-1.5 border-b border-
|
|
305
|
+
<div className="mx-auto mt-20 max-w-4xl overflow-hidden rounded-2xl border border-border bg-surface shadow-[0_24px_64px_-12px_rgb(0_0_0_0.12)]">
|
|
306
|
+
<div className="flex items-center gap-1.5 border-b border-border px-4 py-3">
|
|
272
307
|
<span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
|
|
273
308
|
<span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
|
|
274
309
|
<span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
|
|
275
|
-
<span className="ml-3 font-mono text-[0.75rem] text-
|
|
310
|
+
<span className="ml-3 font-mono text-[0.75rem] text-fg-subtle">
|
|
276
311
|
app/page.tsx
|
|
277
312
|
</span>
|
|
278
313
|
</div>
|
|
279
314
|
<pre className="overflow-x-auto p-6 font-mono text-[0.8125rem] leading-relaxed">
|
|
280
315
|
<code>
|
|
281
|
-
<span className="block text-
|
|
316
|
+
<span className="block text-fg-subtle">
|
|
282
317
|
{"// A page is just a component."}
|
|
283
318
|
</span>
|
|
284
319
|
{"\n"}
|
|
285
320
|
<span className="text-[#7c3aed]">export default function</span>{" "}
|
|
286
321
|
<span className="text-[#0ea5e9]">Page</span>
|
|
287
|
-
<span className="text-
|
|
322
|
+
<span className="text-fg-muted">() {"{"}</span>
|
|
288
323
|
{"\n "}
|
|
289
|
-
<span className="text-
|
|
290
|
-
<span className="text-
|
|
324
|
+
<span className="text-fg-subtle">return</span>{" "}
|
|
325
|
+
<span className="text-fg-muted">(</span>
|
|
291
326
|
{"\n <"}
|
|
292
|
-
<span className="text-
|
|
327
|
+
<span className="text-danger">main</span>{" "}
|
|
293
328
|
<span className="text-[#0ea5e9]">className</span>
|
|
294
|
-
<span className="text-
|
|
295
|
-
<span className="text-
|
|
296
|
-
<span className="text-
|
|
329
|
+
<span className="text-fg-muted">=</span>
|
|
330
|
+
<span className="text-success">"container"</span>
|
|
331
|
+
<span className="text-fg-muted">{">"}</span>
|
|
297
332
|
{"\n <"}
|
|
298
|
-
<span className="text-
|
|
299
|
-
<span className="text-
|
|
300
|
-
<span className="text-
|
|
301
|
-
<span className="text-
|
|
302
|
-
<span className="text-
|
|
303
|
-
<span className="text-
|
|
333
|
+
<span className="text-danger">h1</span>
|
|
334
|
+
<span className="text-fg-muted">{">"}</span>
|
|
335
|
+
<span className="text-fg">Hello from Rust</span>
|
|
336
|
+
<span className="text-fg-muted">{"</"}</span>
|
|
337
|
+
<span className="text-danger">h1</span>
|
|
338
|
+
<span className="text-fg-muted">{">"}</span>
|
|
304
339
|
{"\n <"}
|
|
305
|
-
<span className="text-
|
|
306
|
-
<span className="text-
|
|
307
|
-
<span className="text-
|
|
308
|
-
<span className="text-
|
|
309
|
-
<span className="text-
|
|
310
|
-
<span className="text-
|
|
340
|
+
<span className="text-danger">p</span>
|
|
341
|
+
<span className="text-fg-muted">{">"}</span>
|
|
342
|
+
<span className="text-fg-muted">{"Streamed in 14ms."}</span>
|
|
343
|
+
<span className="text-fg-muted">{"</"}</span>
|
|
344
|
+
<span className="text-danger">p</span>
|
|
345
|
+
<span className="text-fg-muted">{">"}</span>
|
|
311
346
|
{"\n "}
|
|
312
|
-
<span className="text-
|
|
313
|
-
<span className="text-
|
|
314
|
-
<span className="text-
|
|
347
|
+
<span className="text-fg-muted">{"</"}</span>
|
|
348
|
+
<span className="text-danger">main</span>
|
|
349
|
+
<span className="text-fg-muted">{">"}</span>
|
|
315
350
|
{"\n "}
|
|
316
|
-
<span className="text-
|
|
351
|
+
<span className="text-fg-muted">{")"}</span>
|
|
317
352
|
{"\n"}
|
|
318
|
-
<span className="text-
|
|
353
|
+
<span className="text-fg-muted">{"}"}</span>
|
|
319
354
|
</code>
|
|
320
355
|
</pre>
|
|
321
356
|
</div>
|
|
@@ -344,7 +379,11 @@ function IconCode({ className = "" }: { className?: string }) {
|
|
|
344
379
|
strokeWidth="1.75"
|
|
345
380
|
className={className}
|
|
346
381
|
>
|
|
347
|
-
<path
|
|
382
|
+
<path
|
|
383
|
+
d="m8 6-6 6 6 6M16 6l6 6-6 6"
|
|
384
|
+
strokeLinecap="round"
|
|
385
|
+
strokeLinejoin="round"
|
|
386
|
+
/>
|
|
348
387
|
</svg>
|
|
349
388
|
);
|
|
350
389
|
}
|
|
@@ -357,7 +396,10 @@ function IconLayers({ className = "" }: { className?: string }) {
|
|
|
357
396
|
strokeWidth="1.75"
|
|
358
397
|
className={className}
|
|
359
398
|
>
|
|
360
|
-
<path
|
|
399
|
+
<path
|
|
400
|
+
d="M12 3 2 8l10 5 10-5-10-5ZM2 14l10 5 10-5M2 18l10 5 10-5"
|
|
401
|
+
strokeLinejoin="round"
|
|
402
|
+
/>
|
|
361
403
|
</svg>
|
|
362
404
|
);
|
|
363
405
|
}
|
|
@@ -36,17 +36,17 @@ export default function VideosPage() {
|
|
|
36
36
|
|
|
37
37
|
return (
|
|
38
38
|
<div className="container-page py-16 sm:py-20">
|
|
39
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
39
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
40
40
|
Showcase
|
|
41
41
|
</p>
|
|
42
42
|
<h1 className="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">Video</h1>
|
|
43
|
-
<p className="mt-4 max-w-2xl text-
|
|
43
|
+
<p className="mt-4 max-w-2xl text-fg-muted">
|
|
44
44
|
Drop a YouTube URL, get an embed. Auto-detected, privacy-preserving, zero JavaScript
|
|
45
45
|
required from your bundle.
|
|
46
46
|
</p>
|
|
47
47
|
|
|
48
48
|
<div className="mt-12 grid items-start gap-12 lg:grid-cols-[1.6fr_1fr]">
|
|
49
|
-
<div className="min-w-0 rounded-2xl border border-
|
|
49
|
+
<div className="min-w-0 rounded-2xl border border-border bg-surface p-3">
|
|
50
50
|
<div className="aspect-video w-full overflow-hidden rounded-xl">
|
|
51
51
|
<Video
|
|
52
52
|
src={YOUTUBE_URL}
|
|
@@ -59,17 +59,17 @@ export default function VideosPage() {
|
|
|
59
59
|
|
|
60
60
|
<div className="min-w-0">
|
|
61
61
|
<h2 className="text-xl font-semibold tracking-tight">YouTube embed, auto-detected</h2>
|
|
62
|
-
<p className="mt-3 text-[0.95rem] leading-relaxed text-
|
|
62
|
+
<p className="mt-3 text-[0.95rem] leading-relaxed text-fg-muted">
|
|
63
63
|
The component inspects the URL, extracts the video ID, and switches to a
|
|
64
64
|
privacy-preserving <code>youtube-nocookie</code> embed automatically. No provider config
|
|
65
65
|
needed — paste, render, ship.
|
|
66
66
|
</p>
|
|
67
67
|
|
|
68
|
-
<div className="mt-6 overflow-hidden rounded-xl border border-
|
|
69
|
-
<div className="border-b border-
|
|
68
|
+
<div className="mt-6 overflow-hidden rounded-xl border border-border bg-surface">
|
|
69
|
+
<div className="border-b border-border bg-surface-2 px-4 py-2 font-mono text-[0.7rem] text-fg-subtle">
|
|
70
70
|
example.tsx
|
|
71
71
|
</div>
|
|
72
|
-
<pre className="overflow-x-auto p-4 font-mono text-[0.75rem] leading-relaxed text-
|
|
72
|
+
<pre className="overflow-x-auto p-4 font-mono text-[0.75rem] leading-relaxed text-fg">
|
|
73
73
|
<code>{SAMPLE_CODE}</code>
|
|
74
74
|
</pre>
|
|
75
75
|
</div>
|
|
@@ -78,12 +78,12 @@ export default function VideosPage() {
|
|
|
78
78
|
|
|
79
79
|
<section className="mt-24">
|
|
80
80
|
<h2 className="text-2xl font-semibold tracking-tight">Auto-detection in action</h2>
|
|
81
|
-
<p className="mt-2 max-w-2xl text-
|
|
81
|
+
<p className="mt-2 max-w-2xl text-fg-muted">
|
|
82
82
|
The same <code>isYouTubeUrl</code> helper that powers the <code>Video</code> component is
|
|
83
83
|
exported from <code>swift-rust</code>. Try a few URLs against the live detector:
|
|
84
84
|
</p>
|
|
85
|
-
<div className="mt-6 overflow-hidden rounded-2xl border border-
|
|
86
|
-
<label className="block text-[0.7rem] font-semibold uppercase tracking-wider text-
|
|
85
|
+
<div className="mt-6 overflow-hidden rounded-2xl border border-border bg-surface p-6">
|
|
86
|
+
<label className="block text-[0.7rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
87
87
|
URL
|
|
88
88
|
</label>
|
|
89
89
|
<input
|
|
@@ -98,20 +98,20 @@ export default function VideosPage() {
|
|
|
98
98
|
setDetected(false);
|
|
99
99
|
}
|
|
100
100
|
}}
|
|
101
|
-
className="mt-2 w-full rounded-md border border-
|
|
101
|
+
className="mt-2 w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-[0.85rem] text-fg focus:border-accent focus:outline-none"
|
|
102
102
|
spellCheck={false}
|
|
103
103
|
/>
|
|
104
104
|
<div className="mt-3 flex items-center gap-2 text-[0.85rem]">
|
|
105
105
|
<span
|
|
106
106
|
className={
|
|
107
107
|
detected
|
|
108
|
-
? "rounded-full bg-
|
|
109
|
-
: "rounded-full border border-
|
|
108
|
+
? "rounded-full bg-accent px-2.5 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wider text-white"
|
|
109
|
+
: "rounded-full border border-border bg-bg px-2.5 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wider text-fg-muted"
|
|
110
110
|
}
|
|
111
111
|
>
|
|
112
112
|
{detected ? "YouTube" : "Not YouTube"}
|
|
113
113
|
</span>
|
|
114
|
-
<code className="font-mono text-[0.7rem] text-
|
|
114
|
+
<code className="font-mono text-[0.7rem] text-fg-subtle">
|
|
115
115
|
isYouTubeUrl("{input}") → {String(detected)}
|
|
116
116
|
</code>
|
|
117
117
|
</div>
|
|
@@ -129,17 +129,17 @@ export default function VideosPage() {
|
|
|
129
129
|
return (
|
|
130
130
|
<div
|
|
131
131
|
key={url}
|
|
132
|
-
className="flex items-center gap-3 rounded-xl border border-
|
|
132
|
+
className="flex items-center gap-3 rounded-xl border border-border bg-surface px-4 py-3"
|
|
133
133
|
>
|
|
134
|
-
<code className="flex-1 truncate font-mono text-[0.8rem] text-
|
|
134
|
+
<code className="flex-1 truncate font-mono text-[0.8rem] text-fg">
|
|
135
135
|
{url}
|
|
136
136
|
</code>
|
|
137
137
|
{yt ? (
|
|
138
|
-
<span className="shrink-0 rounded-full bg-
|
|
138
|
+
<span className="shrink-0 rounded-full bg-accent px-2.5 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wider text-white">
|
|
139
139
|
YouTube
|
|
140
140
|
</span>
|
|
141
141
|
) : (
|
|
142
|
-
<span className="shrink-0 rounded-full border border-
|
|
142
|
+
<span className="shrink-0 rounded-full border border-border bg-bg px-2.5 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wider text-fg-muted">
|
|
143
143
|
—
|
|
144
144
|
</span>
|
|
145
145
|
)}
|
|
@@ -151,15 +151,15 @@ export default function VideosPage() {
|
|
|
151
151
|
|
|
152
152
|
<section className="mt-24">
|
|
153
153
|
<h2 className="text-2xl font-semibold tracking-tight">Helper functions</h2>
|
|
154
|
-
<p className="mt-2 max-w-2xl text-
|
|
154
|
+
<p className="mt-2 max-w-2xl text-fg-muted">
|
|
155
155
|
Need to know what kind of URL you have, or build an embed URL yourself? These utilities
|
|
156
156
|
are exported from <code>swift-rust</code>.
|
|
157
157
|
</p>
|
|
158
|
-
<div className="mt-8 overflow-hidden rounded-2xl border border-
|
|
159
|
-
<div className="border-b border-
|
|
158
|
+
<div className="mt-8 overflow-hidden rounded-2xl border border-border bg-surface">
|
|
159
|
+
<div className="border-b border-border bg-surface-2 px-4 py-2 font-mono text-[0.7rem] text-fg-subtle">
|
|
160
160
|
helpers.ts
|
|
161
161
|
</div>
|
|
162
|
-
<pre className="overflow-x-auto p-5 font-mono text-[0.78rem] leading-relaxed text-
|
|
162
|
+
<pre className="overflow-x-auto p-5 font-mono text-[0.78rem] leading-relaxed text-fg">
|
|
163
163
|
<code>{`import {
|
|
164
164
|
isYouTubeUrl,
|
|
165
165
|
getYouTubeId,
|