Skip to content

Commit f918fe2

Browse files
KianNHKianNH
committed
wip
1 parent 2f0a56f commit f918fe2

File tree

7 files changed

+198
-48
lines changed

7 files changed

+198
-48
lines changed

‎src/assets/images/release-notes/hero.svg‎

Lines changed: 111 additions & 0 deletions
Loading

‎src/components/changelogs/Header.astro‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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>
10+
</div>
11+
</div>

‎src/components/changelogs/Pill.astro‎

Whitespace-only changes.

‎src/components/overrides/PageTitle.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,3 +118,13 @@ const hideBreadcrumbs = Astro.props.hideBreadcrumbs;
118118
--color-link-breadcrumbs: var(--sl-color-text-accent);
119119
}
120120
</style>
121+
122+
{ hideTitle && hideBreadcrumbs &&
123+
<style>
124+
main {
125+
.content-panel:first-of-type {
126+
display: none;
127+
}
128+
}
129+
</style>
130+
}

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

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
33
import type { GetStaticPaths } from "astro";
44
import { getCollection } from "astro:content";
55
import { format } from "date-fns";
6+
import { StarlightIcon } from "~/components";
67
78
export const getStaticPaths = (async () => {
89
const notes = await getCollection("release-notes");
@@ -21,39 +22,6 @@ export const getStaticPaths = (async () => {
2122
2223
const notes = await getCollection("release-notes");
2324
24-
const months = Object.entries(
25-
Object.groupBy(notes, (note) => note.id.split("/").slice(0, 2).join("/")),
26-
);
27-
28-
const sidebar = [
29-
{
30-
label: "release-notes",
31-
items: [
32-
{
33-
label: "Latest releases",
34-
link: "/release-notes/",
35-
},
36-
...months.map(([date, entries]) => {
37-
return {
38-
label: format(date, "MMMM yyyy"),
39-
items: entries
40-
?.sort()
41-
.reverse()
42-
.map((entry) => {
43-
const date = entry.id.split("/").slice(0, 3).join("/");
44-
const formatted = format(date, "MMMM dd");
45-
46-
return {
47-
label: `${formatted} - ${entry.data.title}`,
48-
link: `/release-notes/${entry.slug}/`,
49-
};
50-
}),
51-
};
52-
}),
53-
],
54-
},
55-
];
56-
5725
const { note } = Astro.props;
5826
5927
const { Content, headings } = await note.render();
@@ -62,10 +30,46 @@ const { Content, headings } = await note.render();
6230
<StarlightPage
6331
frontmatter={{
6432
title: note.data.title,
33+
template: "splash",
6534
}}
66-
sidebar={sidebar}
6735
headings={headings}
36+
hideTitle={true}
6837
hideBreadcrumbs={true}
6938
>
70-
<Content />
39+
<div class="flex mb-20">
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+
<StarlightIcon
50+
name="left-arrow"
51+
class="align-middle !inline text-accent"
52+
/>
53+
<a href="/release-notes/" class="no-underline">Back to all posts</a>
54+
</p>
55+
</div>
56+
</div>
57+
<div class="max-w-3xl w-full justify-self-center">
58+
<h2>{note.data.title}</h2>
59+
<div>
60+
<strong
61+
>{format(note.id.split("/").slice(0, 3), "MMMM dd")}, 12:00PM</strong
62+
>
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+
}
70+
</div>
71+
<div>
72+
<Content />
73+
</div>
74+
</div>
7175
</StarlightPage>

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

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
33
import { getCollection } from "astro:content";
4-
import { LinkButton, Steps } from "~/components";
4+
import { StarlightIcon, Steps } from "~/components";
55
import { format } from "date-fns";
66
77
const notes = await getCollection("release-notes");
@@ -19,19 +19,27 @@ const days = Object.entries(
1919
<div class="flex mb-20">
2020
<div class="flex flex-col">
2121
<h1>Changelog</h1>
22-
<p>New updates and improvements at Cloudflare.</p>
22+
<p>
23+
New updates and improvements at Cloudflare.
24+
<span>
25+
<a href="/release-notes/feed.rss">
26+
Subscribe to RSS
27+
</a>
28+
</span>
29+
</p>
2330
</div>
2431
</div>
25-
<!-- <LinkButton href="/release-notes/rss.xml" icon="rss" style={{ padding: "0.4375rem 1.125rem" }}>RSS</LinkButton> -->
2632
<div class="grid grid-cols-[10%_90%] justify-self-center">
2733
{
2834
days.sort().reverse().map(([date, entries]) => {
2935
const formatted = format(date, "MMMM dd");
3036

3137
return (
3238
<div class="!mt-0">
33-
<strong class="text-xs">{formatted}</strong>
34-
<p class="text-xs">12:00PM</p>
39+
<p class="leading-none">
40+
<strong class="text-xs">{formatted}</strong>
41+
<span class="text-xs">12:00PM</span>
42+
</p>
3543
</div>
3644
<Steps>
3745
<ol class="!mt-0 max-w-3xl">
@@ -41,14 +49,20 @@ const days = Object.entries(
4149

4250
return (
4351
<li>
52+
<div>
4453
<a href={`/release-notes/${entry.slug}/`} class="no-underline hover:underline">
4554
<h3 class="text-[var(--sl-color-text)]">
4655
{entry.data.title}
4756
</h3>
4857
</a>
49-
<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
50-
{entry.data.products.join(", ")}
51-
</span>
58+
{
59+
entry.data.products.map((product) => (
60+
<span class="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
61+
{product}
62+
</span>
63+
))
64+
}
65+
</div>
5266
<p>
5367
<Content />
5468
</p>
@@ -66,10 +80,9 @@ const days = Object.entries(
6680

6781
<style>
6882
.sl-steps > li::before {
69-
content: "";
70-
}
71-
72-
:root {
73-
--sl-content-width: 70rem !important;
83+
content: "•";
84+
font-size: calc(var(--bullet-size) * 2);
85+
line-height: calc(var(--bullet-size) / 1.5);
86+
color: var(--sl-color-accent);
7487
}
7588
</style>

‎tailwind.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
extend: {
2020
colors: {
2121
accent: {
22+
DEFAULT: "var(--sl-color-accent)",
2223
200: "var(--tw-accent-200)",
2324
600: "var(--tw-accent-600)",
2425
900: "var(--tw-accent-900)",

0 commit comments

Comments
 (0)