Skip to content

Commit af959e9

Browse files
bartlomiejubartlomieju
committed
feat: consolidate secondary features into compact grid section
Replace 5 full-width SideBySide sections (View Transitions, API Routes, WebSockets, Head, OTEL) with a single "And there's more" grid of compact cards. Keep the 4 core features (Rendering, Islands, Forms, Partials) as star sections with interactive demos. Restore more breathing room between star sections.
1 parent e7a7767 commit af959e9

3 files changed

Lines changed: 199 additions & 11 deletions

File tree

‎www/components/PageSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function PageSection(props: JSX.HTMLAttributes<HTMLDivElement>) {
44
return (
55
<section
66
id={props.id ?? ""}
7-
class={`w-full max-w-screen-xl mx-auto my-8 md:my-12 lg:my-16 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-6 md:gap-8 ${
7+
class={`w-full max-w-screen-xl mx-auto my-12 md:my-16 lg:my-24 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-6 md:gap-8 ${
88
props.class ?? ""
99
}`}
1010
>

‎www/components/homepage/MoreFeatures.tsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import { CodeBlock } from "../../components/CodeBlock.tsx";
2+
import { CodeWindow } from "../../components/CodeWindow.tsx";
3+
import { PageSection } from "../../components/PageSection.tsx";
4+
import { SectionHeading } from "../../components/homepage/SectionHeading.tsx";
5+
6+
const features = [
7+
{
8+
title: "View Transitions",
9+
description:
10+
"Native-feeling page transitions with a single config flag. Customize per-element with plain CSS.",
11+
href: "/docs/advanced/view-transitions",
12+
icon: (
13+
<svg
14+
aria-hidden="true"
15+
xmlns="http://www.w3.org/2000/svg"
16+
class="text-fresh"
17+
width="1.5rem"
18+
height="1.5rem"
19+
viewBox="0 0 24 24"
20+
stroke-width="1.5"
21+
stroke="currentColor"
22+
fill="none"
23+
stroke-linecap="round"
24+
stroke-linejoin="round"
25+
>
26+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
27+
<path d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12z" />
28+
<path d="M9 12h6" />
29+
<path d="M13 8l4 4l-4 4" />
30+
</svg>
31+
),
32+
code: `const app = new App({
33+
viewTransition: true,
34+
});`,
35+
lang: "js" as const,
36+
},
37+
{
38+
title: "Route Handlers",
39+
description:
40+
"Define GET, POST, DELETE — any HTTP method as a named handler on your route, with full type safety.",
41+
href: "/docs/concepts/routing",
42+
icon: (
43+
<svg
44+
aria-hidden="true"
45+
xmlns="http://www.w3.org/2000/svg"
46+
class="text-fresh"
47+
width="1.5rem"
48+
height="1.5rem"
49+
viewBox="0 0 24 24"
50+
stroke-width="1.5"
51+
stroke="currentColor"
52+
fill="none"
53+
stroke-linecap="round"
54+
stroke-linejoin="round"
55+
>
56+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
57+
<path d="M4 13h5" />
58+
<path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3" />
59+
<path d="M20 8v8" />
60+
<path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" />
61+
</svg>
62+
),
63+
code: `export const handlers = define.handlers({
64+
GET(ctx) { /* ... */ },
65+
POST(ctx) { /* ... */ },
66+
DELETE(ctx) { /* ... */ },
67+
});`,
68+
lang: "js" as const,
69+
},
70+
{
71+
title: "WebSockets",
72+
description:
73+
"Add real-time endpoints with app.ws() — define open, message, and close handlers in a single object.",
74+
href: "/docs/advanced/websockets",
75+
icon: (
76+
<svg
77+
aria-hidden="true"
78+
xmlns="http://www.w3.org/2000/svg"
79+
class="text-fresh"
80+
width="1.5rem"
81+
height="1.5rem"
82+
viewBox="0 0 24 24"
83+
stroke-width="1.5"
84+
stroke="currentColor"
85+
fill="none"
86+
stroke-linecap="round"
87+
stroke-linejoin="round"
88+
>
89+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
90+
<path d="M7 10h14l-4 -4" />
91+
<path d="M17 14h-14l4 4" />
92+
</svg>
93+
),
94+
code: `app.ws("/chat", {
95+
open(socket) { /* ... */ },
96+
message(socket, event) {
97+
socket.send(event.data);
98+
},
99+
});`,
100+
lang: "js" as const,
101+
},
102+
{
103+
title: "<Head> Component",
104+
description:
105+
"Set titles, meta tags, stylesheets, and scripts from any page or island — no hoisting hacks needed.",
106+
href: "/docs/advanced/head",
107+
icon: (
108+
<svg
109+
aria-hidden="true"
110+
xmlns="http://www.w3.org/2000/svg"
111+
class="text-fresh"
112+
width="1.5rem"
113+
height="1.5rem"
114+
viewBox="0 0 24 24"
115+
stroke-width="1.5"
116+
stroke="currentColor"
117+
fill="none"
118+
stroke-linecap="round"
119+
stroke-linejoin="round"
120+
>
121+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
122+
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
123+
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
124+
<path d="M10 13l-1 2l1 2" />
125+
<path d="M14 13l1 2l-1 2" />
126+
</svg>
127+
),
128+
code: `<Head>
129+
<title>My Page</title>
130+
<meta name="description"
131+
content="..." />
132+
</Head>`,
133+
lang: "jsx" as const,
134+
},
135+
{
136+
title: "OpenTelemetry",
137+
description:
138+
"Auto-injects a traceparent meta tag into every page, connecting browser traces to server spans.",
139+
href: "/docs/advanced/opentelemetry",
140+
icon: (
141+
<svg
142+
aria-hidden="true"
143+
xmlns="http://www.w3.org/2000/svg"
144+
class="text-fresh"
145+
width="1.5rem"
146+
height="1.5rem"
147+
viewBox="0 0 24 24"
148+
stroke-width="1.5"
149+
stroke="currentColor"
150+
fill="none"
151+
stroke-linecap="round"
152+
stroke-linejoin="round"
153+
>
154+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
155+
<path d="M6 21l6 -5l6 5" />
156+
<path d="M12 13v8" />
157+
<path d="M3.294 13.678l.166 .281c.52 .88 1.624 1.265 2.605 .91l14.242 -5.165a1.023 1.023 0 0 0 .565 -1.456l-2.62 -4.705a1.024 1.024 0 0 0 -1.462 -.394l-13.397 7.719c-1.038 .598 -1.272 1.783 -.594 2.692" />
158+
<path d="M8 11.5l5.5 -3.2" />
159+
<path d="M12.602 8.3l-2.552 4.6" />
160+
</svg>
161+
),
162+
code: `const app = new App({
163+
otel: true,
164+
});`,
165+
lang: "js" as const,
166+
},
167+
];
168+
169+
export function MoreFeatures() {
170+
return (
171+
<PageSection>
172+
<div class="text-center flex flex-col gap-2">
173+
<SectionHeading>And there's more</SectionHeading>
174+
</div>
175+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
176+
{features.map((f) => (
177+
<a
178+
href={f.href}
179+
class="flex flex-col gap-3 p-5 rounded-lg border border-gray-200 hover:border-fresh transition-colors"
180+
>
181+
<div class="flex items-center gap-2">
182+
{f.icon}
183+
<h3 class="font-bold text-base">{f.title}</h3>
184+
</div>
185+
<p class="text-gray-600 text-sm">{f.description}</p>
186+
<div class="text-xs [&>pre]:!m-0 [&>pre]:!p-3 flex-1">
187+
<CodeWindow>
188+
<CodeBlock code={f.code} lang={f.lang} />
189+
</CodeWindow>
190+
</div>
191+
</a>
192+
))}
193+
</div>
194+
</PageSection>
195+
);
196+
}

‎www/routes/index.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ import { PartialsSection } from "../components/homepage/PartialsSection.tsx";
1010
import { RenderingSection } from "../components/homepage/RenderingSection.tsx";
1111
import { FormsSection } from "../components/homepage/FormsSection.tsx";
1212
import { SocialProof } from "../components/homepage/SocialProof.tsx";
13-
import { TransitionsSection } from "../components/homepage/TransitionsSection.tsx";
14-
import { APIRoutesSection } from "../components/homepage/APIRoutesSection.tsx";
15-
import { WebSocketSection } from "../components/homepage/WebSocketSection.tsx";
16-
import { HeadSection } from "../components/homepage/HeadSection.tsx";
17-
import { SecuritySection } from "../components/homepage/SecuritySection.tsx";
13+
import { MoreFeatures } from "../components/homepage/MoreFeatures.tsx";
1814
import { DenoSection } from "../components/homepage/DenoSection.tsx";
1915
import { define } from "../utils/state.ts";
2016

@@ -67,11 +63,7 @@ export default define.page<typeof handler>(function MainPage() {
6763
<IslandsSection />
6864
<FormsSection />
6965
<PartialsSection />
70-
<TransitionsSection />
71-
<APIRoutesSection />
72-
<WebSocketSection />
73-
<HeadSection />
74-
<SecuritySection />
66+
<MoreFeatures />
7567
<SocialProof />
7668
<DenoSection />
7769
<CTA />

0 commit comments

Comments
 (0)