openstatus.dev
Openstatus
www.openstatus.dev
feat: rss button (#726)
authored by
Maximilian Kaske
and committed by
GitHub
3376fd1c
877a1709
+33
-4
+9
apps/web/src/app/(content)/blog/page.tsx
+9
apps/web/src/app/(content)/blog/page.tsx
···
1
1
import type { Metadata } from "next";
2
2
import Link from "next/link";
3
3
import { allPosts } from "contentlayer/generated";
4
+
import { Rss } from "lucide-react";
4
5
5
6
import { Button } from "@openstatus/ui";
6
7
···
36
37
<Timeline
37
38
title="Blog"
38
39
description="All the latest articles and news from OpenStatus."
40
+
actions={
41
+
<Button variant="outline" size="icon" asChild>
42
+
<a href="/blog/feed.xml" target="_blank">
43
+
<Rss className="h-4 w-4" />
44
+
<span className="sr-only">RSS feed</span>
45
+
</a>
46
+
</Button>
47
+
}
39
48
>
40
49
{posts.map((post) => (
41
50
<Timeline.Article
+11
apps/web/src/app/(content)/changelog/page.tsx
+11
apps/web/src/app/(content)/changelog/page.tsx
···
1
1
import type { Metadata } from "next";
2
2
import { allChangelogs } from "contentlayer/generated";
3
+
import { Rss } from "lucide-react";
4
+
5
+
import { Button } from "@openstatus/ui";
3
6
4
7
import {
5
8
defaultMetadata,
···
34
37
<Timeline
35
38
title="Changelog"
36
39
description="All the latest features, fixes and work to OpenStatus."
40
+
actions={
41
+
<Button variant="outline" size="icon" asChild>
42
+
<a href="/changelog/feed.xml" target="_blank">
43
+
<Rss className="h-4 w-4" />
44
+
<span className="sr-only">RSS feed</span>
45
+
</a>
46
+
</Button>
47
+
}
37
48
>
38
49
{changelogs.map((changelog) => (
39
50
<Timeline.Article
+13
-4
apps/web/src/components/content/timeline.tsx
+13
-4
apps/web/src/components/content/timeline.tsx
···
7
7
title: string;
8
8
description: string;
9
9
children?: React.ReactNode;
10
+
actions?: React.ReactNode;
10
11
}
11
12
12
-
export function Timeline({ title, description, children }: TimelineProps) {
13
+
export function Timeline({
14
+
title,
15
+
description,
16
+
children,
17
+
actions,
18
+
}: TimelineProps) {
13
19
return (
14
20
<div className="grid gap-8">
15
21
<div className="grid gap-4 md:grid-cols-5 md:gap-8">
16
22
<div className="md:col-span-1" />
17
-
<div className="grid gap-4 md:col-span-4">
18
-
<h1 className="text-foreground font-cal text-4xl">{title}</h1>
19
-
<p className="text-muted-foreground">{description}</p>
23
+
<div className="flex items-end justify-between gap-3 md:col-span-4">
24
+
<div className="grid gap-4">
25
+
<h1 className="text-foreground font-cal text-4xl">{title}</h1>
26
+
<p className="text-muted-foreground">{description}</p>
27
+
</div>
28
+
<div>{actions}</div>
20
29
</div>
21
30
</div>
22
31
{children}