Openstatus www.openstatus.dev

fix: prefix navigation value (#1357)

authored by

Maximilian Kaske and committed by
GitHub
b66b3df4 74cdb8a2

+21 -13
+5 -3
apps/status-page/src/components/nav/header.tsx
··· 26 26 return [ 27 27 { 28 28 label: "Status", 29 - href: `/${prefix}`, 29 + href: `${prefix ? `/${prefix}` : ""}`, 30 30 isActive: pathname === `/${prefix}`, 31 31 }, 32 32 { 33 33 label: "Events", 34 - href: `/${prefix}/events`, 34 + href: `${prefix ? `/${prefix}` : ""}/events`, 35 35 isActive: pathname.startsWith(`/${prefix}/events`), 36 36 }, 37 37 { 38 38 label: "Monitors", 39 - href: `/${prefix}/monitors`, 39 + href: `${prefix ? `/${prefix}` : ""}/monitors`, 40 40 isActive: pathname.startsWith(`/${prefix}/monitors`), 41 41 }, 42 42 ]; ··· 88 88 onSubscribe={async (email) => { 89 89 await subscribeMutation.mutateAsync({ slug: domain, email }); 90 90 }} 91 + slug={page?.slug} 91 92 /> 92 93 <div className="flex gap-3 md:hidden"> 93 94 <NavMobile /> ··· 96 97 onSubscribe={async (email) => { 97 98 await subscribeMutation.mutateAsync({ slug: domain, email }); 98 99 }} 100 + slug={page?.slug} 99 101 /> 100 102 </div> 101 103 </nav>
+6 -2
apps/status-page/src/components/status-page/status-feed.tsx
··· 103 103 </span> 104 104 </StatusEventAside> 105 105 <Link 106 - href={`${prefix}/events/report/${report.id}`} 106 + href={`${prefix ? `/${prefix}` : ""}/events/report/${ 107 + report.id 108 + }`} 107 109 className="rounded-lg" 108 110 > 109 111 <StatusEventContent> ··· 142 144 ) : null} 143 145 </StatusEventAside> 144 146 <Link 145 - href={`${prefix}/events/maintenance/${maintenance.id}`} 147 + href={`${prefix ? `/${prefix}` : ""}/events/maintenance/${ 148 + maintenance.id 149 + }`} 146 150 className="rounded-lg" 147 151 > 148 152 <StatusEventContent>
+3 -1
apps/status-page/src/components/status-page/status-tracker.tsx
··· 273 273 return ( 274 274 <Link 275 275 key={event.id} 276 - href={`/${prefix}/events/report/${event.id}`} 276 + href={`${ 277 + prefix ? `/${prefix}` : "" 278 + }/events/report/${event.id}`} 277 279 > 278 280 {content} 279 281 </Link>
+6 -6
apps/status-page/src/components/status-page/status-updates.tsx
··· 10 10 } from "@/components/ui/popover"; 11 11 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; 12 12 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 13 - import { usePathnamePrefix } from "@/hooks/use-pathname-prefix"; 14 13 import { cn } from "@/lib/utils"; 15 14 import { Inbox } from "lucide-react"; 16 15 import { useState } from "react"; ··· 19 18 20 19 interface StatusUpdatesProps extends React.ComponentProps<typeof Button> { 21 20 types?: StatusUpdateType[]; 21 + slug?: string; 22 22 onSubscribe?: (value: string) => Promise<void> | void; 23 23 } 24 24 25 25 export function StatusUpdates({ 26 26 className, 27 27 types = ["rss", "atom"], 28 + slug, 28 29 onSubscribe, 29 30 ...props 30 31 }: StatusUpdatesProps) { 31 32 const [success, setSuccess] = useState(false); 32 - const prefix = usePathnamePrefix(); 33 33 34 34 return ( 35 35 <Popover> ··· 85 85 <TabsContent value="rss" className="flex flex-col gap-2"> 86 86 <div className="border-b px-2 pb-2"> 87 87 <Input 88 - placeholder={`https://${prefix}.openstatus.dev/feed/rss`} 88 + placeholder={`https://${slug}.openstatus.dev/feed/rss`} 89 89 className="disabled:opacity-90" 90 90 disabled 91 91 /> ··· 93 93 <div className="px-2 pb-2"> 94 94 <CopyButton 95 95 className="w-full" 96 - value={`https://${prefix}.openstatus.dev/feed/rss`} 96 + value={`https://${slug}.openstatus.dev/feed/rss`} 97 97 /> 98 98 </div> 99 99 </TabsContent> 100 100 <TabsContent value="atom" className="flex flex-col gap-2"> 101 101 <div className="border-b px-2 pb-2"> 102 102 <Input 103 - placeholder={`https://${prefix}.openstatus.dev/feed/atom`} 103 + placeholder={`https://${slug}.openstatus.dev/feed/atom`} 104 104 className="disabled:opacity-90" 105 105 disabled 106 106 /> ··· 108 108 <div className="px-2 pb-2"> 109 109 <CopyButton 110 110 className="w-full" 111 - value={`https://${prefix}.openstatus.dev/feed/atom`} 111 + value={`https://${slug}.openstatus.dev/feed/atom`} 112 112 /> 113 113 </div> 114 114 </TabsContent>
+1 -1
apps/status-page/src/hooks/use-pathname-prefix.ts
··· 14 14 hostnames[0] !== "www" && 15 15 !window.location.hostname.endsWith(".vercel.app") 16 16 ) { 17 - setPrefix(hostnames[0]); 17 + setPrefix(""); 18 18 } else { 19 19 setPrefix(pathnames[1]); 20 20 }