wip

Author: KianNH

astro.config.ts

@@ -104,7 +104,6 @@ export default defineConfig({
 				Footer: "./src/components/overrides/Footer.astro",
 				Head: "./src/components/overrides/Head.astro",
 				Header: "./src/components/overrides/Header.astro",
-				Hero: "./src/components/overrides/Hero.astro",
 				MarkdownContent: "./src/components/overrides/MarkdownContent.astro",
 				Sidebar: "./src/components/overrides/Sidebar.astro",
 				PageTitle: "./src/components/overrides/PageTitle.astro",

package-lock.json

@@ -92,6 +92,7 @@
 		"react-icons": "5.5.0",
 		"react-instantsearch": "7.15.4",
 		"react-markdown": "10.0.1",
+		"react-tabs": "6.1.0",
 		"redirects-in-workers": "0.0.5",
 		"rehype": "13.0.2",
 		"rehype-autolink-headings": "7.1.0",

package.json

@@ -0,0 +1,74 @@
+---
+const groups = [
+	{
+		heading: "Community",
+		description:
+			"Share ideas, answers, code and compare notes with the Cloudflare community",
+		links: [
+			{
+				label: "Discord",
+				href: "https://discord.gg/cloudflaredev",
+			},
+			{
+				label: "Twitter",
+				href: "https://twitter.com/cloudflaredev",
+			},
+			{
+				label: "Community forum",
+				href: "https://community.cloudflare.com/",
+			},
+		],
+	},
+	{
+		heading: "Open Source",
+		description:
+			"Cloudflare contributes to the open-source ecosystem in a variety of ways, including:",
+		links: [
+			{
+				label: "GitHub projects",
+				href: "https://github.com/cloudflare/",
+			},
+			{
+				label: "Sponsorship projects",
+				href: "/sponsorships/",
+			},
+			{
+				label: "Style guide",
+				href: "/style-guide/",
+			},
+		],
+	},
+	{
+		heading: "Blog",
+		description:
+			"Get the latest news on Cloudflare products, technologies, and culture.",
+		links: [
+			{
+				label: "Read the blog",
+				href: "https://blog.cloudflare.com/",
+			},
+		],
+	},
+];
+---
+
+{
+	groups.map((group) => (
+		<div>
+			<p class="text-xs font-medium uppercase">{group.heading}</p>
+			<p class="mt-1 text-sm">{group.description}</p>
+			<ul class="mt-4 list-none pl-0">
+				{group.links.map((item) => (
+					<li>
+						<a
+							href={item.href}
+							class="text-sm font-medium !text-black no-underline"
+						>
+							{item.label}
+						</a>
+					</li>
+				))}
+			</ul>
+		</div>
+	))
+}

src/assets/network-map.svg

@@ -0,0 +1,30 @@
+---
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Render from "~/components/Render.astro";
+---
+
+<div class="flex justify-between">
+	<h2>Build with Cloudflare</h2>
+	<a href="https://developers.cloudflare.com/workers/">
+		Learn more about Workers
+	</a>
+</div>
+<div>
+	<Tabs>
+		<TabItem label="Return HTML">
+			<Render file="return-html-example-js" product="workers" />
+		</TabItem>
+		<TabItem label="Return JSON">
+			<Render file="return-json-example-js" product="workers" />
+		</TabItem>
+		<TabItem label="Fetch HTML">
+			<Render file="fetch-html-example-js" product="workers" />
+		</TabItem>
+		<TabItem label="Redirect">
+			<Render file="redirect-example-js" product="workers" />
+		</TabItem>
+		<TabItem label="Respond with another site">
+			<Render file="respond-another-site-example-js" product="workers" />
+		</TabItem>
+	</Tabs>
+</div>