Skip to content

[Homepage] Replace DevPlat cards with video #17403

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 21, 2024
Merged

[Homepage] Replace DevPlat cards with video #17403

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16ce4b1
[Homepage] Replace DevPlat cards with video
KianNH Oct 8, 2024
6580225
Merge branch 'production' into kian/PCX-13986
jason-cf Nov 21, 2024
4f70cc1
updating thumbnail
jason-cf Nov 21, 2024
a407484
adding the cf-stack image to assets
jason-cf Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions src/components/homepage/FeaturedContentSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { z } from "astro:schema";
import { marked } from "marked";

import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
import Stream from "../Stream.astro";

const props = z.object({
title: z.string(),
Expand Down Expand Up @@ -47,17 +48,35 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
</div>
)
}
<CardGrid>

<div class="w-full">
{
cards.map((card) => (
<Card title={card.title}>
<span set:html={marked.parse(card.text)} />
<br />
<LinkCard title={card.cta.title} href={card.cta.href} />
</Card>
))
title === "Developer Platform" ? (
<div class="[&>article]:gap-0">
Copy link
Member Author

@KianNH KianNH Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want a title on this card, and we need to override the gap because of the now-empty <p> tag still causing it to be calculated.

<Card title="">
<Stream
videoId="d89f290431f98e551f2b1467f85d6561"
videoTitle="foo"
thumbnailStartTime="517s"
/>

<LinkCard title={"Explore our Developer Platform"} href={"/products/?product-group=Developer+platform"} />
</Card>
</div>
) : (
<CardGrid>
{cards.map((card) => (
<Card title={card.title}>
<span set:html={marked.parse(card.text)} />
<br />
<LinkCard title={card.cta.title} href={card.cta.href} />
</Card>
))}
</CardGrid>
)
}
</CardGrid>
</div>

{
imagePosition === "after" && (
<div class="w-full m-8">
Expand Down
33 changes: 17 additions & 16 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,22 +119,23 @@ const featuredSections = [
},
imagePosition: "before",
cards: [
{
title: "Create API Tokens",
text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
cta: {
title: "Create Tokens",
href: "/fundamentals/api/get-started/create-token/",
},
},
{
title: "View Workers Examples",
text: "Review fully functional sample scripts to get started with Workers.",
cta: {
title: "View Examples",
href: "/workers/examples/",
},
},
// Currently unused.
// {
// title: "Create API Tokens",
// text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
// cta: {
// title: "Create Tokens",
// href: "/fundamentals/api/get-started/create-token/",
// },
// },
// {
// title: "View Workers Examples",
// text: "Review fully functional sample scripts to get started with Workers.",
// cta: {
// title: "View Examples",
// href: "/workers/examples/",
// },
// },
],
},
{
Expand Down
Loading