openstatus.dev
Openstatus
www.openstatus.dev
Update status-widget.mdx (#920)
Add Astro Widget
+119
+119
apps/docs/packages/status-widget.mdx
+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
+
```