Skip to content

Commit c0e9940

Browse files
KianNHKianNH
committed
[Docs Site] Move deprecations to new page, move date header on changelogs
1 parent 9a1c606 commit c0e9940

File tree

3 files changed

+92
-42
lines changed

3 files changed

+92
-42
lines changed

‎src/pages/changelog/index.astro‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
---
22
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
3-
import { Badge } from "~/components";
3+
import { Aside, Badge } from "~/components";
44
import { marked } from "marked";
55
import { getChangelogs } from "~/util/changelogs";
66
77
const { products, productAreas, changelogs } = await getChangelogs();
88
---
99

1010
<StarlightPage frontmatter={{ title: "Changelogs", template: "splash" }}>
11-
<Badge text="Beta" variant="caution" size="medium" />
12-
<br />
13-
<br />
11+
<Aside>
12+
Looking for API deprecations? They can be found on our <a
13+
href="/deprecations/">dedicated deprecations page.</a
14+
>
15+
</Aside>
1416
<p id="productDescription">
1517
Subscribe to all Changelog posts via <a href="/changelog/index.xml">RSS</a>.
1618
</p>
@@ -44,43 +46,48 @@ const { products, productAreas, changelogs } = await getChangelogs();
4446
</select>
4547
{
4648
changelogs.map(([date, entries]) => (
47-
<div style="overflow-anchor: none;" data-date={date}>
48-
<h2>{date}</h2>
49-
{entries?.map((entry) => (
50-
<div
51-
data-product={entry.product.toLowerCase()}
52-
data-productArea={entry.productAreaName.toLowerCase()}
53-
>
54-
<h3>
55-
<a href={entry.link}>{entry.product}</a>
56-
</h3>
57-
{["WAF", "DDoS protection"].includes(entry.product) ? (
58-
<p
59-
set:html={marked.parse(
60-
entry.scheduled
61-
? "**" +
62-
"Scheduled changes for " +
63-
(entry.date ?? "") +
64-
"**"
65-
: "**" + (entry.date ?? "") + "**",
66-
)}
67-
/>
68-
) : (
69-
<p set:html={marked.parse("**" + (entry.title ?? "") + "**")} />
70-
)}
71-
{["WAF", "DDoS protection"].includes(entry.product) ? (
72-
<p
73-
set:html={marked.parse(
74-
"For more details, refer to the [changelog page](" +
75-
entry.link +
76-
").",
77-
)}
78-
/>
79-
) : (
80-
<p set:html={marked.parse(entry.description ?? "")} />
81-
)}
82-
</div>
83-
))}
49+
<div class="md:grid md:grid-cols-[20%_80%]" data-date={date}>
50+
<div>
51+
<h2 class="text-nowrap">{date}</h2>
52+
</div>
53+
<div class="!mt-0">
54+
{entries?.map((entry) => (
55+
<div
56+
data-product={entry.product.toLowerCase()}
57+
data-productArea={entry.productAreaName.toLowerCase()}
58+
>
59+
<h3>
60+
<a href={entry.link}>{entry.product}</a>
61+
</h3>
62+
{["WAF", "DDoS protection"].includes(entry.product) && (
63+
<p
64+
set:html={marked.parse(
65+
entry.scheduled
66+
? "**" +
67+
"Scheduled changes for " +
68+
(entry.date ?? "") +
69+
"**"
70+
: "**" + (entry.date ?? "") + "**",
71+
)}
72+
/>
73+
)}
74+
{entry.title && (
75+
<p set:html={marked.parse("**" + (entry.title ?? "") + "**")} />
76+
)}
77+
{["WAF", "DDoS protection"].includes(entry.product) ? (
78+
<p
79+
set:html={marked.parse(
80+
"For more details, refer to the [changelog page](" +
81+
entry.link +
82+
").",
83+
)}
84+
/>
85+
) : (
86+
<p set:html={marked.parse(entry.description ?? "")} />
87+
)}
88+
</div>
89+
))}
90+
</div>
8491
</div>
8592
))
8693
}
@@ -94,7 +101,9 @@ const { products, productAreas, changelogs } = await getChangelogs();
94101
);
95102
const navHeightPx = Number(navHeightRem.split("rem")[0]) * 16 + 16;
96103

97-
const headers = document.querySelectorAll<HTMLElement>("[data-date] > h2");
104+
const headers = document.querySelectorAll<HTMLElement>(
105+
"[data-date] > div > h2",
106+
);
98107
headers.forEach(
99108
(header) => new StickyHeader(header, { offset: 0 - navHeightPx }),
100109
);

‎src/pages/deprecations/index.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
3+
import { marked } from "marked";
4+
import { getChangelogs } from "~/util/changelogs";
5+
6+
const { changelogs } = await getChangelogs({
7+
deprecationsOnly: true,
8+
});
9+
---
10+
11+
<StarlightPage frontmatter={{ title: "Deprecations", template: "splash" }}>
12+
<p>
13+
Unless otherwise noted, all dates refer to the release date of the change.
14+
</p>
15+
<br />
16+
{
17+
changelogs.map(([date, entries]) => (
18+
<div>
19+
<h2>{date}</h2>
20+
{entries?.map((entry) => (
21+
<div
22+
data-product={entry.product.toLowerCase()}
23+
data-productArea={entry.productAreaName.toLowerCase()}
24+
>
25+
<h3>
26+
<a href={entry.link}>{entry.product}</a>
27+
</h3>
28+
<p set:html={marked.parse(entry.description ?? "")} />
29+
</div>
30+
))}
31+
</div>
32+
))
33+
}
34+
</StarlightPage>

‎src/util/changelogs.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { type CollectionEntry } from "astro:content";
55
export async function getChangelogs(opts?: {
66
filter?: Parameters<typeof getCollection<"changelogs">>[1];
77
wranglerOnly?: boolean;
8+
deprecationsOnly?: boolean;
89
}) {
910
let changelogs;
1011

@@ -22,6 +23,12 @@ export async function getChangelogs(opts?: {
2223
);
2324
}
2425

26+
if (opts?.deprecationsOnly) {
27+
changelogs = changelogs.filter((x) => x.id === "api-deprecations");
28+
} else {
29+
changelogs = changelogs.filter((x) => x.id !== "api-deprecations");
30+
}
31+
2532
const products = [...new Set(changelogs.flatMap((x) => x.data.productName))];
2633
const productAreas = [
2734
...new Set(changelogs.flatMap((x) => x.data.productArea)),

0 commit comments

Comments
 (0)