Openstatus www.openstatus.dev

Update status-widget.mdx (#920)

Add Astro Widget

authored by

Frankie and committed by
GitHub
e1afa3cb 9f337734

+119
+119
apps/docs/packages/status-widget.mdx
··· 160 160 ); 161 161 } 162 162 ``` 163 + 164 + Then, import your `StatusWidget.tsx` component to your layout as well as the slug prop to your specific monitor. Ideally, relative imports would be setup in your `tsconfig.json`. 165 + ```jsx 166 + import StatusWidget from '../../components/StatusWidget.tsx 167 + 168 + ... 169 + 170 + <StatusWidget slug="monitor-slug-here" /> 171 + ``` 172 + 173 + ### Astro Widget 174 + ```astro 175 + --- 176 + import * as z from "zod" 177 + 178 + const statusEnum = z.enum([ 179 + "operational", 180 + "degraded_performance", 181 + "partial_outage", 182 + "major_outage", 183 + "under_maintenance", 184 + "unknown", 185 + "incident", 186 + ]) 187 + 188 + const statusSchema = z.object({ status: statusEnum }) 189 + 190 + const dictionary = { 191 + operational: { 192 + label: "Operational", 193 + color: "bg-green-500", 194 + }, 195 + degraded_performance: { 196 + label: "Degraded Performance", 197 + color: "bg-yellow-500", 198 + }, 199 + partial_outage: { 200 + label: "Partial Outage", 201 + color: "bg-yellow-500", 202 + }, 203 + major_outage: { 204 + label: "Major Outage", 205 + color: "bg-red-500", 206 + }, 207 + unknown: { 208 + label: "Unknown", 209 + color: "bg-gray-500", 210 + }, 211 + incident: { 212 + label: "Incident", 213 + color: "bg-yellow-500", 214 + }, 215 + under_maintenance: { 216 + label: "Under Maintenance", 217 + color: "bg-blue-500", 218 + }, 219 + } 220 + 221 + const slug = Astro.props.slug 222 + 223 + const res = await fetch(`https://api.openstatus.dev/public/status/${slug}`, { 224 + // @ts-ignore 225 + next: { revalidate: 60 }, 226 + }) 227 + const data = await res.json() 228 + const parsed = statusSchema.safeParse(data) 229 + if (!parsed.success) { 230 + return null 231 + } 232 + const key = parsed.data.status 233 + const { label, color } = dictionary[key] 234 + --- 235 + 236 + <a 237 + class="border-border text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm" 238 + href={`https://${slug}.openstatus.dev`} 239 + target="_blank" 240 + rel="noreferrer" 241 + > 242 + {label} 243 + <span class="relative flex h-2 w-2"> 244 + { 245 + parsed.data.status === "operational" ? ( 246 + <span 247 + class:list={[ 248 + "absolute", 249 + "inline-flex", 250 + "h-full", 251 + "w-full", 252 + "animate-ping", 253 + "rounded-full", 254 + color, 255 + "opacity-75", 256 + "duration-1000", 257 + ]} 258 + /> 259 + ) : null 260 + } 261 + <span 262 + class:list={[ 263 + "relative", 264 + "inline-flex", 265 + "h-2", 266 + "w-2", 267 + "rounded-full", 268 + color, 269 + ]}></span> 270 + </span> 271 + </a> 272 + ``` 273 + 274 + Then, import your `StatusWidget.astro` component as well as the slug from your specific monitor to your layout, most likely your footer. It would be better to have relative imports setup in your tsconfig.json. 275 + ```astro 276 + --- 277 + import StatusWidget from '../../components/StatusWidget.astro' 278 + --- 279 + 280 + <StatusWidget slug="monitor-slug-here" /> 281 + ```