Skip to content

Commit 57b4e61

Browse files
KianNHKianNH
committed
more styling
1 parent a982672 commit 57b4e61

File tree

9 files changed

+89
-70
lines changed

9 files changed

+89
-70
lines changed

‎src/components/changelogs/Header.astro‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,46 @@
1-
<div class="flex mb-20">
2-
<div class="flex flex-col">
3-
<h1>Changelog</h1>
4-
<p>
5-
New updates and improvements at Cloudflare.
6-
<span>
7-
<a href="/release-notes/feed.rss">Subscribe to RSS</a>
8-
</span>
9-
</p>
1+
---
2+
import { Image } from "astro:assets";
3+
import { z } from "astro:schema";
4+
5+
import HeroImage from "~/assets/images/release-notes/hero.svg";
6+
7+
type Props = z.infer<typeof props>;
8+
9+
const props = z.object({
10+
showBackLink: z.boolean().optional(),
11+
});
12+
13+
const { showBackLink } = props.parse(Astro.props);
14+
---
15+
16+
<div class="w-full justify-self-center flex mb-20">
17+
<div class="flex justify-between w-full">
18+
<div
19+
class="flex flex-col w-full text-center items-center sm:items-start justify-center"
20+
>
21+
<div class="!mt-0 sm:hidden">
22+
<Image src={HeroImage} alt="hero image" height="175" />
23+
</div>
24+
<h1 class="sm:!mt-0">Changelog</h1>
25+
<p>
26+
New updates and improvements at Cloudflare.
27+
<span>
28+
<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
29+
</span>
30+
</p>
31+
<p>
32+
{
33+
showBackLink && (
34+
<a href="/release-notes/" class="no-underline">
35+
<span class="text-accent">← </span>
36+
<span class="text-black">Back to all posts</span>
37+
</a>
38+
)
39+
}
40+
</p>
41+
</div>
42+
<div class="!mt-0 hidden sm:block">
43+
<Image src={HeroImage} alt="hero image" height="175" />
44+
</div>
1045
</div>
1146
</div>

‎src/components/changelogs/Pill.astro‎

Whitespace-only changes.

‎src/components/changelogs/ProductPills.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
import { getEntries } from "astro:content";
3+
import { reference } from "astro:content";
4+
import { z } from "astro:schema";
5+
6+
type Props = z.infer<typeof props>;
7+
8+
const props = z.object({
9+
products: z.array(reference("products")),
10+
});
11+
12+
const { products } = Astro.props;
13+
14+
const data = await getEntries(products);
15+
---
16+
17+
{
18+
data.map((product) => (
19+
<a href={product.data.product.url} class="no-underline">
20+
<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
21+
{product.data.product.title}
22+
</span>
23+
</a>
24+
))
25+
}

‎src/content/release-notes/2024/11/13/other-stuff.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
title: Other stuff
33
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non arcu tortor. Duis fringilla nibh vitae lorem viverra tincidunt. Nullam nec maximus nulla, sed euismod sapien. Fusce venenatis ipsum non orci tincidunt aliquam.
44
products:
5-
- Access
6-
- WARP
7-
tags: feature
8-
date: 2024-11-13T21:00:00
5+
- access
6+
- warp-client
7+
date: 2024-11-13T21:00:00Z
98
---
109

1110
import { Details } from "~/components";

‎src/content/release-notes/2024/11/27/stuff-and-things.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
title: Stuff and things
33
description: Donec faucibus nunc vel fermentum porttitor. Etiam ac lorem dui. Duis facilisis facilisis sem, vel malesuada ipsum feugiat in.
44
products:
5-
- Workers
6-
- KV
5+
- workers
6+
- kv
77
tags: changed
88
date: 2024-11-27T11:00:00Z
99
---

‎src/pages/release-notes/[...slug].astro‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
33
import type { GetStaticPaths } from "astro";
44
import { getCollection } from "astro:content";
5+
import Header from "~/components/changelogs/Header.astro";
6+
import ProductPills from "~/components/changelogs/ProductPills.astro";
57
import { format } from "date-fns";
6-
import { Image } from "astro:assets";
7-
import HeroImage from "~/assets/images/release-notes/hero.svg";
88
99
export const getStaticPaths = (async () => {
1010
const notes = await getCollection("release-notes");
@@ -35,38 +35,14 @@ const { Content, headings } = await note.render();
3535
hideTitle={true}
3636
hideBreadcrumbs={true}
3737
>
38-
<div class="w-full justify-self-center flex mb-20">
39-
<div class="flex justify-between w-full">
40-
<div class="flex flex-col">
41-
<h1>Changelog</h1>
42-
<p>
43-
New updates and improvements at Cloudflare.
44-
<span>
45-
<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
46-
</span>
47-
</p>
48-
<p>
49-
<a href="/release-notes/" class="no-underline">← Back to all posts</a>
50-
</p>
51-
</div>
52-
<div class="!mt-0">
53-
<Image src={HeroImage} alt="hero image" height="175" />
54-
</div>
55-
</div>
56-
</div>
38+
<Header showBackLink={true} />
5739
<div class="w-full justify-self-center">
5840
<h2>{note.data.title}</h2>
5941
<div>
6042
<strong
6143
>{format(note.id.split("/").slice(0, 3), "MMMM dd")}, 12:00PM</strong
6244
>
63-
{
64-
note.data.products.map((product) => (
65-
<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
66-
{product}
67-
</span>
68-
))
69-
}
45+
<ProductPills products={note.data.products} />
7046
</div>
7147
<div>
7248
<Content />

‎src/pages/release-notes/index.astro‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
22
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
33
import { getCollection } from "astro:content";
4+
5+
import Header from "~/components/changelogs/Header.astro";
6+
import ProductPills from "~/components/changelogs/ProductPills.astro";
7+
48
import { Steps } from "~/components";
59
import { format } from "date-fns";
6-
import { Image } from "astro:assets";
7-
import HeroImage from "~/assets/images/release-notes/hero.svg";
810
911
const notes = await getCollection("release-notes");
1012
@@ -18,22 +20,7 @@ const days = Object.entries(
1820
hideTitle={true}
1921
hideBreadcrumbs={true}
2022
>
21-
<div class="w-full justify-self-center flex mb-20">
22-
<div class="flex justify-between w-full">
23-
<div class="flex flex-col">
24-
<h1>Changelog</h1>
25-
<p>
26-
New updates and improvements at Cloudflare.
27-
<span>
28-
<a href="/release-notes/feed.rss"> Subscribe to RSS </a>
29-
</span>
30-
</p>
31-
</div>
32-
<div class="!mt-0">
33-
<Image src={HeroImage} alt="hero image" height="175" />
34-
</div>
35-
</div>
36-
</div>
23+
<Header />
3724
<div class="md:grid md:grid-cols-[10%_90%] justify-self-center">
3825
{
3926
days.sort().reverse().map(([date, entries]) => {
@@ -60,13 +47,7 @@ const days = Object.entries(
6047
{entry.data.title}
6148
</h3>
6249
</a>
63-
{
64-
entry.data.products.map((product) => (
65-
<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
66-
{product}
67-
</span>
68-
))
69-
}
50+
<ProductPills products={entry.data.products} />
7051
</div>
7152
<p>
7253
<Content />

‎src/schemas/release-notes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { reference } from "astro:content";
12
import { z } from "astro:schema";
23

34
export const releaseNotesSchema = z.object({
45
title: z.string(),
56
description: z.string(),
67
date: z.coerce.date(),
7-
products: z.string().array(),
8-
tags: z.enum(["feature", "changed", "improvement"]),
8+
products: z.array(reference("products")),
99
});

‎tailwind.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export default {
1818
theme: {
1919
extend: {
2020
colors: {
21+
black: {
22+
DEFAULT: "var(--sl-color-white)",
23+
},
2124
accent: {
2225
DEFAULT: "var(--sl-color-accent)",
2326
200: "var(--tw-accent-200)",

0 commit comments

Comments
 (0)