Skip to content

Commit 6e35c57

Browse files
KianNHKianNH
committed
[Docs Site] changelog-next styling
1 parent c7aa072 commit 6e35c57

File tree

5 files changed

+125
-178
lines changed

5 files changed

+125
-178
lines changed

‎src/components/changelog-next/Header.astro‎

Lines changed: 48 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,76 +9,71 @@ import HeroImage from "~/assets/images/changelog-next/hero.svg";
99
type Props = z.infer<typeof props>;
1010
1111
const props = z.object({
12-
entries: z.array(z.any()).optional(),
12+
notes: z.any().array().default([]),
1313
});
1414
15-
const { entries } = props.parse(Astro.props);
15+
const { notes } = props.parse(Astro.props);
1616
1717
async function uniqueProducts(
18-
entries?: Array<CollectionEntry<"changelogs-next">>,
18+
notes: Array<CollectionEntry<"changelogs-next">>,
1919
) {
20-
const products = entries?.flatMap((entry) => entry.data.products ?? []);
21-
2220
const unique = [
23-
...new Map(products?.map((product) => [product.id, product])).values(),
21+
...new Set(notes.flatMap((e) => e.data.products.map((p) => p.id))),
2422
];
2523
2624
return Promise.all(
2725
unique.map(async (product) => {
28-
return getEntry(product);
26+
return getEntry("products", product)!;
2927
}),
3028
);
3129
}
3230
33-
const products = await uniqueProducts(entries);
31+
const products = await uniqueProducts(notes);
3432
---
3533

3634
<div
37-
class="mb-16 flex w-full justify-center border-b-2 border-b-[#EAEAEA] bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] sm:h-[300px]"
35+
class="bg-linear-to-r mb-16 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] max-sm:flex-col-reverse sm:h-[18.75rem]"
3836
>
39-
<div class="flex justify-between self-center py-4 sm:py-0 md:w-[64rem]">
40-
<div class="w-full self-center max-sm:text-center sm:items-start">
41-
<div class="!mt-0 justify-items-center sm:hidden">
42-
<Image src={HeroImage} alt="hero image" height="240" />
43-
</div>
44-
<h1 class="sm:!mt-0">Changelog</h1>
45-
<p>
46-
New updates and improvements at Cloudflare.
47-
<span>
48-
<a
49-
href="/changelog-next/rss.xml"
50-
class="px-2 text-[#056DFF] no-underline hover:rounded-[4px] hover:bg-[#DCEBFF] hover:!text-[#056DFF] dark:text-[#79B1FF] dark:hover:bg-[#002B66] dark:hover:!text-[#79B1FF]"
51-
>
52-
Subscribe to RSS
53-
<StarlightIcon
54-
name="rss"
55-
size="18px"
56-
class="!inline align-text-top"
57-
/>
58-
</a>
59-
</span>
60-
</p>
61-
{
62-
entries && (
63-
<div>
64-
<select id="changelogs-next-filter" class="mt-2 h-8 w-52">
65-
<option value="all">All products</option>
66-
{products
67-
.sort((a, b) => a.id.localeCompare(b.id))
68-
.map(async (product) => {
69-
return (
70-
<option value={product.id}>
71-
{product.data.product.title}
72-
</option>
73-
);
74-
})}
75-
</select>
76-
</div>
77-
)
78-
}
79-
</div>
80-
<div class="!mt-0 hidden sm:block">
81-
<Image src={HeroImage} alt="hero image" height="240" />
82-
</div>
37+
<div class="text-center sm:text-left">
38+
<h1>Changelog</h1>
39+
<p>
40+
New updates and improvements at Cloudflare.
41+
<a
42+
href="/changelog-next/rss.xml"
43+
class="dark:!hover:text-[#79B1FF] -mx-2 whitespace-nowrap px-2 text-[#056DFF] no-underline hover:rounded-[4px] hover:bg-[#DCEBFF] hover:!text-[#056DFF] dark:text-[#79B1FF] dark:hover:bg-[#002B66] max-sm:block"
44+
>
45+
Subscribe to RSS
46+
<StarlightIcon name="rss" size="18px" class="!inline align-text-top" />
47+
</a>
48+
</p>
49+
{
50+
products.length > 0 && (
51+
<div>
52+
<select id="changelogs-next-filter" class="mt-2 h-8 w-52">
53+
<option value="all">All products</option>
54+
{products
55+
.sort((a, b) => a.id.localeCompare(b.id))
56+
.map(async (product) => {
57+
return (
58+
<option value={product.id}>
59+
{product.data.product.title}
60+
</option>
61+
);
62+
})}
63+
</select>
64+
</div>
65+
)
66+
}
8367
</div>
68+
<Image src={HeroImage} alt="hero image" height="240" class="!mt-0" />
8469
</div>
70+
71+
<style is:global>
72+
.sl-markdown-content {
73+
margin-top: 0px !important;
74+
}
75+
76+
.content-panel {
77+
padding-top: 0 !important;
78+
}
79+
</style>

‎src/components/changelog-next/ProductPills.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const data = await getEntries(products);
2020
{
2121
data.map((product) => (
2222
<a href={product.data.product.url} class="no-underline">
23-
<Badge text={product.data.product.title} class="ml-1" />
23+
<Badge text={product.data.product.title} variant="tip" />
2424
</a>
2525
))
2626
}

‎src/pages/changelog-next/[...slug].astro‎

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -40,61 +40,37 @@ const props = {
4040

4141
<StarlightPage {...props}>
4242
<Header />
43-
<div class="w-full max-w-[50rem] justify-self-center px-4">
44-
<div class="!mt-0 mb-10">
45-
<a href="/changelog-next/" class="no-underline">
46-
<span class="text-accent">← </span>
47-
<span class="text-black">Back to all posts</span>
48-
</a>
43+
<div class="mt-0! mb-10">
44+
<a href="/changelog-next/" class="no-underline">
45+
<span class="text-accent">← </span>
46+
<span class="text-black">Back to all posts</span>
47+
</a>
48+
</div>
49+
<div>
50+
<h2>{note.data.title}</h2>
51+
<div>
52+
<strong
53+
>{format(note.data.date, "MMM dd, yyyy")}, {
54+
format(note.data.date, "hh:mm a")
55+
}</strong
56+
>
57+
<ProductPills products={note.data.products} />
4958
</div>
50-
<div class="w-full justify-self-center">
51-
<h2>{note.data.title}</h2>
52-
<div>
53-
<strong
54-
>{format(note.data.date, "MMM dd, yyyy")}, {
55-
format(note.data.date, "hh:mm a")
56-
}</strong
57-
>
58-
<ProductPills products={note.data.products} />
59-
</div>
60-
<div>
61-
<Content />
62-
</div>
59+
<div>
60+
<Content />
6361
</div>
6462
</div>
6563
</StarlightPage>
6664

6765
<style>
6866
:root {
69-
--sl-content-width: 100% !important;
70-
71-
.sl-markdown-content {
72-
margin-top: 0px !important;
73-
}
74-
75-
.content-panel {
76-
padding: 0px !important;
67+
.sl-container {
68+
--sl-content-width: 50rem !important;
69+
margin-inline: auto !important;
7770
}
7871

79-
#feedback-thumbs,
8072
#footer-links {
81-
justify-self: center;
82-
}
83-
84-
.sl-markdown-content
85-
:not(a, strong, em, del, span, input, code, br)
86-
+ :not(
87-
a,
88-
strong,
89-
em,
90-
del,
91-
span,
92-
input,
93-
code,
94-
br,
95-
:where(.not-content *)
96-
) {
97-
margin-top: 1.5rem;
73+
justify-content: center;
9874
}
9975
}
10076
</style>

‎src/pages/changelog-next/index.astro‎

Lines changed: 54 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -26,53 +26,50 @@ const props = {
2626
---
2727

2828
<StarlightPage {...props}>
29-
<Header entries={notes} />
30-
<div
31-
class="w-full max-w-[50rem] justify-self-center px-4 md:grid md:grid-cols-[15%_auto]"
32-
>
33-
{
34-
notes.map(async (entry) => {
35-
const date = format(entry.data.date, "MMM dd, yyyy");
36-
const time = format(entry.data.date, "hh:mm a");
37-
const productIds = JSON.stringify(
38-
entry.data.products.map((product) => product.id),
39-
);
40-
41-
const { Content } = await render(entry);
42-
43-
return (
44-
<>
45-
<div class="!mt-0" data-products={productIds}>
46-
<p class="md:content-center md:pr-4 md:text-right md:leading-none">
47-
<strong class="text-xs">{date}</strong>
48-
<span class="text-xs">{time}</span>
49-
</p>
50-
</div>
51-
<Steps>
52-
<ol class="!mt-0 overflow-x-auto" data-products={productIds}>
53-
<li class="!pb-16">
54-
<div>
29+
<Header notes={notes} />
30+
{
31+
notes.map(async (entry) => {
32+
const date = format(entry.data.date, "MMM dd, yyyy");
33+
const time = format(entry.data.date, "hh:mm a");
34+
const productIds = JSON.stringify(
35+
entry.data.products.map((product) => product.id),
36+
);
37+
38+
const { Content } = await render(entry);
39+
40+
return (
41+
<div class="!mt-0 sm:flex" data-products={productIds}>
42+
<time
43+
datetime={entry.data.date.toISOString()}
44+
class="whitespace-nowrap leading-none sm:pr-4 sm:text-right"
45+
>
46+
<strong class="text-xs">{date}</strong>
47+
<span class="text-xs sm:block">{time}</span>
48+
</time>
49+
<Steps>
50+
<ol class="!mt-0 overflow-x-auto">
51+
<li class="!pb-16">
52+
<div>
53+
<h3 class="leading-none">
5554
<a
5655
href={`/changelog-next/${entry.id}/`}
57-
class="no-underline hover:underline"
56+
class="mb-4 !text-black no-underline hover:underline"
5857
>
59-
<h3 class="mb-4 !leading-[36px] text-black">
60-
{entry.data.title}
61-
</h3>
58+
{entry.data.title}
6259
</a>
63-
<ProductPills products={entry.data.products} />
64-
</div>
65-
<p>
66-
<Content />
67-
</p>
68-
</li>
69-
</ol>
70-
</Steps>
71-
</>
72-
);
73-
})
74-
}
75-
</div>
60+
</h3>
61+
<ProductPills products={entry.data.products} />
62+
</div>
63+
<p>
64+
<Content />
65+
</p>
66+
</li>
67+
</ol>
68+
</Steps>
69+
</div>
70+
);
71+
})
72+
}
7673
</StarlightPage>
7774

7875
<script>
@@ -111,52 +108,31 @@ const props = {
111108

112109
<style>
113110
:root {
114-
--sl-content-width: 100% !important;
115-
116-
.sl-markdown-content
117-
:not(a, strong, em, del, span, input, code, br)
118-
+ :not(
119-
a,
120-
strong,
121-
em,
122-
del,
123-
span,
124-
input,
125-
code,
126-
br,
127-
:where(.not-content *)
128-
) {
129-
margin-top: 1.5rem;
130-
}
131-
132-
.sl-markdown-content {
133-
margin-top: 0px !important;
134-
}
135-
136-
.content-panel {
137-
padding: 0px !important;
111+
.sl-container {
112+
--sl-content-width: 50rem !important;
113+
margin-inline: auto !important;
138114
}
139115

140116
.feedback-prompt-content {
141117
display: none !important;
142118
}
143119

144120
#footer-links {
145-
justify-self: center;
121+
justify-content: center;
146122
}
123+
}
147124

148-
.sl-steps {
149-
--bullet-size: 24px !important;
125+
.sl-steps {
126+
--bullet-size: 24px !important;
150127

151-
& > li {
152-
padding-inline-start: calc(var(--bullet-size) + 2.5rem) !important;
128+
& > li {
129+
padding-inline-start: calc(var(--bullet-size) + 2.5rem) !important;
153130

154-
&::before {
155-
content: "•" !important;
156-
font-size: calc(var(--bullet-size) * 2) !important;
157-
line-height: calc(var(--bullet-size) / 1.5) !important;
158-
color: var(--orange-accent-200) !important;
159-
}
131+
&::before {
132+
content: "•" !important;
133+
font-size: calc(var(--bullet-size) * 2) !important;
134+
line-height: calc(var(--bullet-size) / 1.5) !important;
135+
color: var(--orange-accent-200) !important;
160136
}
161137
}
162138
}

‎src/pages/changelog-next/rss.xml.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const GET: APIRoute = async () => {
1010
return rss({
1111
title: "Changelogs",
1212
description: `Cloudflare changelogs`,
13-
site: "https://developers.cloudflare.com",
13+
site: "https://developers.cloudflare.com/changelog-next/",
1414
items: notes.map((entry) => {
1515
return {
1616
title: entry.data.title,

0 commit comments

Comments
 (0)