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
··· 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
··· 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
··· 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}