Skip to content

Commit 52654e9

Browse files
KianNHKianNH
committed
wip
1 parent b9f77da commit 52654e9

File tree

1 file changed

+144
-13
lines changed

1 file changed

+144
-13
lines changed

‎src/pages/index.astro‎

Lines changed: 144 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import HeroImageLight from "~/assets/Dev-Docs-Header-Illustration-Light-Mode-cro
77
import { Tabs, TabItem } from "@astrojs/starlight/components";
88
import Render from "~/components/Render.astro";
99
10+
import { render } from "astro:content";
11+
import { getChangelogs } from "~/util/changelog";
12+
1013
const frontmatter = {
1114
title: "Welcome to Cloudflare",
1215
description:
@@ -23,7 +26,7 @@ const frontmatter = {
2326
},
2427
} as const;
2528
26-
const cards = [
29+
const topCards = [
2730
{
2831
label: "Fundamentals",
2932
href: "/fundamentals/",
@@ -41,11 +44,38 @@ const cards = [
4144
},
4245
{
4346
label: "Reference architectures",
44-
href: "/reference-architectures/",
47+
href: "/reference-architecture/",
4548
description: "How our products are designed and architected.",
4649
},
4750
];
4851
52+
const getStartedCards = [
53+
{
54+
label: "Sign up",
55+
href: "https://dash.cloudflare.com/sign-up",
56+
description:
57+
"Create an account on the Cloudflare dashboard to get started.",
58+
},
59+
{
60+
label: "Onboard your domain",
61+
href: "/fundamentals/setup/manage-domains/add-site/",
62+
description:
63+
"Put your website or app behind Cloudflare to boost site speed and fight web attacks like DDoS.",
64+
},
65+
{
66+
label: "Get started with Zero Trust",
67+
href: "/cloudflare-one/setup/",
68+
description:
69+
"Connect a workforce or home network to protect users, devices, data, and private apps.",
70+
},
71+
{
72+
label: "Get started with Workers",
73+
href: "/workers/get-started/",
74+
description:
75+
"Build and scale a simple website or full-stack application. Deploy code globally while Cloudflare handles the infrastructure.",
76+
},
77+
];
78+
4979
const footer = [
5080
{
5181
heading: "Community",
@@ -86,7 +116,7 @@ const footer = [
86116
],
87117
},
88118
{
89-
label: "Blog",
119+
heading: "Blog",
90120
description:
91121
"Get the latest news on Cloudflare products, technologies, and culture.",
92122
links: [
@@ -97,31 +127,86 @@ const footer = [
97127
],
98128
},
99129
];
130+
131+
const changelogs = await getChangelogs({}).then((arr) => arr.slice(0, 5));
100132
---
101133

102134
<StarlightPage frontmatter={frontmatter}>
103-
<div class="grid grid-cols-4 gap-4">
135+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
104136
{
105-
cards.map((card) => (
137+
topCards.map((card) => (
106138
<a
107139
href={card.href}
108140
class="rounded-md border border-solid border-gray-200 p-6 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
109141
>
110-
<p class="!mt-3 font-semibold">{card.label}</p>
142+
<p class="!mt-0 font-semibold">{card.label}</p>
111143
<div class="leading-2 !mt-1 text-sm">{card.description}</div>
112144
</a>
113145
))
114146
}
115147
</div>
116-
<div class="flex flex-col items-center justify-center p-16">
148+
<div class="flex flex-col items-center justify-center gap-10 py-16">
117149
<h2>Explore Cloudflare offerings</h2>
150+
<div class="not-content w-full shadow-md">
151+
<ul
152+
role="tablist"
153+
class="grid list-none grid-cols-3 gap-2 pl-0 text-center"
154+
>
155+
{
156+
["Overview", "Connect & Protect", "Build"].map((label) => (
157+
<li
158+
role="presentation"
159+
class="h-14 rounded-t border-l border-r border-t p-4"
160+
>
161+
{label}
162+
</li>
163+
))
164+
}
165+
</ul>
166+
<div class="h-72 overflow-hidden rounded-b p-6">
167+
<p>
168+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
169+
non placerat arcu. Nunc ornare libero ut metus dignissim, vitae
170+
efficitur justo pretium. Suspendisse arcu magna, condimentum at
171+
rhoncus commodo, condimentum ut enim. Proin in hendrerit sapien, quis
172+
hendrerit libero. Suspendisse et dictum tellus, vitae suscipit mi.
173+
Proin vulputate at erat vel vulputate. Duis velit sapien, vestibulum
174+
facilisis ex facilisis, molestie efficitur lacus. Aliquam erat
175+
volutpat. Maecenas tempor tincidunt elementum. Aenean augue ante,
176+
vehicula vitae lectus sit amet, dictum maximus lorem. Fusce vitae
177+
ultricies tellus. Etiam gravida pulvinar quam, eu vehicula lorem.
178+
Maecenas fermentum porttitor mauris. Vestibulum imperdiet turpis ut
179+
malesuada facilisis. Etiam pharetra efficitur purus, sodales ultricies
180+
orci condimentum vel. Pellentesque sagittis egestas lectus ut rutrum.
181+
Curabitur ac libero sapien. Vestibulum tempus leo lectus. Phasellus a
182+
convallis ante, non condimentum nibh. Fusce et lacus nibh. Proin
183+
venenatis malesuada magna, vel pharetra mi.
184+
</p>
185+
</div>
186+
</div>
118187
</div>
119-
<div class="flex flex-col items-center justify-center p-16">
188+
<div class="flex flex-col items-center justify-center gap-10 py-16">
120189
<h2>Get started</h2>
190+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
191+
{
192+
getStartedCards.map((card) => (
193+
<a
194+
href={card.href}
195+
class="rounded-md border border-solid border-gray-200 p-6 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
196+
>
197+
<p class="!mt-0 font-semibold">{card.label}</p>
198+
<div class="leading-2 !mt-1 text-sm">{card.description}</div>
199+
</a>
200+
))
201+
}
202+
</div>
121203
</div>
122-
<div class="flex flex-col p-16">
123-
<div>
204+
<div class="flex w-full flex-col gap-10 py-16">
205+
<div class="flex justify-between">
124206
<h2>Build with Cloudflare</h2>
207+
<a href="https://developers.cloudflare.com/workers/">
208+
Learn more about Workers
209+
</a>
125210
</div>
126211
<div>
127212
<Tabs>
@@ -143,10 +228,56 @@ const footer = [
143228
</Tabs>
144229
</div>
145230
</div>
146-
<div class="flex flex-col items-center justify-center p-16">
231+
<div class="flex flex-col items-center justify-center gap-10 py-16">
147232
<h2>Documentation changelog</h2>
233+
<div class="h-[28rem] w-3/4 overflow-y-scroll rounded border px-6 py-4">
234+
<ul class="overflow-y-scroll pl-0">
235+
{
236+
changelogs.map(async (changelog) => {
237+
const { Content } = await render(changelog);
238+
239+
return (
240+
<li>
241+
<h5>{changelog.data.title}</h5>
242+
<div class="line-clamp-4">
243+
<Content />
244+
</div>
245+
<a href={`/changelog/${changelog.id}`}>Read more</a>
246+
</li>
247+
);
248+
})
249+
}
250+
</ul>
251+
</div>
252+
<a href="/changelog/"> Go to full changelog </a>
148253
</div>
149-
<div class="flex items-center justify-center gap-8 p-16">
150-
{footer.map((group) => <div></div>)}
254+
<div class="not-content flex justify-center gap-8 py-16">
255+
{
256+
footer.map((group) => (
257+
<div>
258+
<p>{group.heading}</p>
259+
<p>{group.description}</p>
260+
<ul class="list-none pl-0">
261+
{group.links.map((item) => (
262+
<li>
263+
<a href={item.href}>{item.label}</a>
264+
</li>
265+
))}
266+
</ul>
267+
</div>
268+
))
269+
}
151270
</div>
152271
</StarlightPage>
272+
273+
<style>
274+
:root {
275+
.content-panel {
276+
--sl-content-pad-x: 4rem;
277+
}
278+
279+
.sl-container {
280+
max-width: 100% !important;
281+
}
282+
}
283+
</style>

0 commit comments

Comments
 (0)