Openstatus
www.openstatus.dev
🐛 fix badge size (#845)
authored by
Thibault Le Ouay
and committed by
GitHub
f0f51084
e175b5b1
+87
-48
+12
apps/docs/synthetic/features/status-page.mdx
+12
apps/docs/synthetic/features/status-page.mdx
···
38
38
```html
39
39
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark" />
40
40
```
41
+
42
+
You can also customize the size of the badge by adding a `size` parameter:
43
+
44
+
- `sm
45
+
- `md`
46
+
- `lg`
47
+
- `xl`
48
+
49
+
50
+
```html
51
+
<img src="https://YOUR-SLUG.openstatus.dev/badge?theme=dark&size=xl" />
52
+
```
+4
apps/web/next.config.js
+4
apps/web/next.config.js
+32
-15
apps/web/src/app/status-page/[domain]/badge/route.tsx
+32
-15
apps/web/src/app/status-page/[domain]/badge/route.tsx
···
36
36
},
37
37
} as const;
38
38
39
-
const SIZE = { width: 120, height: 34 };
40
-
39
+
// const SIZE = { width: 120, height: 34 };
40
+
const SIZE: Record<string, { width: number; height: number }> = {
41
+
sm: { width: 120, height: 34 },
42
+
md: { width: 160, height: 46 },
43
+
lg: { width: 200, height: 56 },
44
+
xl: { width: 240, height: 68 },
45
+
};
41
46
export async function GET(
42
47
req: NextRequest,
43
-
{ params }: { params: { domain: string } },
48
+
{ params }: { params: { domain: string } }
44
49
) {
45
50
const { status } = await getStatus(params.domain);
46
51
const theme = req.nextUrl.searchParams.get("theme");
47
-
52
+
const size = req.nextUrl.searchParams.get("size");
53
+
console.log(size);
54
+
let s = SIZE.sm;
55
+
if (size) {
56
+
if (SIZE[size]) {
57
+
s = SIZE[size];
58
+
}
59
+
}
48
60
const { label, color } = statusDictionary[status];
49
-
61
+
console.log(s);
50
62
const light = "border-gray-200 text-gray-700 bg-white";
51
63
const dark = "border-gray-800 text-gray-300 bg-gray-900";
52
64
53
65
return new ImageResponse(
54
-
<div
55
-
tw={`flex items-center justify-center rounded-md border px-3 py-1 text-sm ${
56
-
theme === "dark" ? dark : light
57
-
}`}
58
-
style={{ ...SIZE }}
59
-
>
60
-
{label}
61
-
<div tw={`flex h-2 w-2 rounded-full ml-2 ${color}`} />
62
-
</div>,
63
-
{ ...SIZE },
66
+
(
67
+
<div
68
+
tw={`flex items-center justify-center rounded-md border px-3 py-1
69
+
${size === "sm" && "text-sm"}${size === "md" && "text-md"} ${
70
+
size === "lg" && "text-lg"
71
+
} ${size === "xl" && "text-xl"} ${!size && "text-sm"} ${
72
+
theme === "dark" ? dark : light
73
+
}`}
74
+
style={{ ...s }}
75
+
>
76
+
{label}
77
+
<div tw={`flex h-2 w-2 rounded-full ml-2 ${color}`} />
78
+
</div>
79
+
),
80
+
{ ...s }
64
81
);
65
82
}
+9
-3
packages/api/src/router/invitation.ts
+9
-3
packages/api/src/router/invitation.ts
···
72
72
body: JSON.stringify({
73
73
to: email,
74
74
from: "OpenStatus <ping@openstatus.dev>",
75
-
subject: `You have been invited to join OpenStatus.dev`,
76
-
html: `<p>You have been invited by ${opts.ctx.user.email} ${!!opts.ctx.workspace.name ? `to join the workspace '${opts.ctx.workspace.name}'.` : "to join a workspace."}</p>
75
+
subject: "You have been invited to join OpenStatus.dev",
76
+
html: `<p>You have been invited by ${opts.ctx.user.email} ${
77
+
opts.ctx.workspace.name
78
+
? `to join the workspace '${opts.ctx.workspace.name}'.`
79
+
: "to join a workspace."
80
+
}</p>
77
81
<br>
78
-
<p>Click here to access the workspace: <a href='https://openstatus.dev/app/invite?token=${_invitation.token}'>accept invitation</a>.</p>
82
+
<p>Click here to access the workspace: <a href='https://openstatus.dev/app/invite?token=${
83
+
_invitation.token
84
+
}'>accept invitation</a>.</p>
79
85
<p>If you don't have an account yet, it will require you to create one.</p>
80
86
`,
81
87
}),
+30
-30
packages/api/src/router/monitor.ts
+30
-30
packages/api/src/router/monitor.ts
···
41
41
await opts.ctx.db.query.monitor.findMany({
42
42
where: and(
43
43
eq(monitor.workspaceId, opts.ctx.workspace.id),
44
-
isNull(monitor.deletedAt),
44
+
isNull(monitor.deletedAt)
45
45
),
46
46
})
47
47
).length;
···
104
104
const allNotifications = await opts.ctx.db.query.notification.findMany({
105
105
where: and(
106
106
eq(notification.workspaceId, opts.ctx.workspace.id),
107
-
inArray(notification.id, notifications),
107
+
inArray(notification.id, notifications)
108
108
),
109
109
});
110
110
···
120
120
const allTags = await opts.ctx.db.query.monitorTag.findMany({
121
121
where: and(
122
122
eq(monitorTag.workspaceId, opts.ctx.workspace.id),
123
-
inArray(monitorTag.id, tags),
123
+
inArray(monitorTag.id, tags)
124
124
),
125
125
});
126
126
···
136
136
const allPages = await opts.ctx.db.query.page.findMany({
137
137
where: and(
138
138
eq(page.workspaceId, opts.ctx.workspace.id),
139
-
inArray(page.id, pages),
139
+
inArray(page.id, pages)
140
140
),
141
141
});
142
142
···
163
163
where: and(
164
164
eq(monitor.id, opts.input.id),
165
165
eq(monitor.workspaceId, opts.ctx.workspace.id),
166
-
isNull(monitor.deletedAt),
166
+
isNull(monitor.deletedAt)
167
167
),
168
168
with: {
169
169
monitorTagsToMonitors: { with: { monitorTag: true } },
···
199
199
where: and(
200
200
eq(monitor.id, opts.input.id),
201
201
isNull(monitor.deletedAt),
202
-
eq(monitor.public, true),
202
+
eq(monitor.public, true)
203
203
),
204
204
});
205
205
if (!_monitor) return undefined;
···
211
211
});
212
212
213
213
const hasPageRelation = _page?.monitorsToPages.find(
214
-
({ monitorId }) => _monitor.id === monitorId,
214
+
({ monitorId }) => _monitor.id === monitorId
215
215
);
216
216
217
217
if (!hasPageRelation) return undefined;
···
271
271
and(
272
272
eq(monitor.id, opts.input.id),
273
273
eq(monitor.workspaceId, opts.ctx.workspace.id),
274
-
isNull(monitor.deletedAt),
275
-
),
274
+
isNull(monitor.deletedAt)
275
+
)
276
276
)
277
277
.returning()
278
278
.get();
···
287
287
(x) =>
288
288
!currentMonitorNotifications
289
289
.map(({ notificationId }) => notificationId)
290
-
?.includes(x),
290
+
?.includes(x)
291
291
);
292
292
293
293
if (addedNotifications.length > 0) {
···
311
311
eq(notificationsToMonitors.monitorId, currentMonitor.id),
312
312
inArray(
313
313
notificationsToMonitors.notificationId,
314
-
removedNotifications,
315
-
),
316
-
),
314
+
removedNotifications
315
+
)
316
+
)
317
317
)
318
318
.run();
319
319
}
···
328
328
(x) =>
329
329
!currentMonitorTags
330
330
.map(({ monitorTagId }) => monitorTagId)
331
-
?.includes(x),
331
+
?.includes(x)
332
332
);
333
333
334
334
if (addedTags.length > 0) {
···
350
350
.where(
351
351
and(
352
352
eq(monitorTagsToMonitors.monitorId, currentMonitor.id),
353
-
inArray(monitorTagsToMonitors.monitorTagId, removedTags),
354
-
),
353
+
inArray(monitorTagsToMonitors.monitorTagId, removedTags)
354
+
)
355
355
)
356
356
.run();
357
357
}
···
363
363
.all();
364
364
365
365
const addedPages = pages.filter(
366
-
(x) => !currentMonitorPages.map(({ pageId }) => pageId)?.includes(x),
366
+
(x) => !currentMonitorPages.map(({ pageId }) => pageId)?.includes(x)
367
367
);
368
368
369
369
if (addedPages.length > 0) {
···
385
385
.where(
386
386
and(
387
387
eq(monitorsToPages.monitorId, currentMonitor.id),
388
-
inArray(monitorsToPages.pageId, removedPages),
389
-
),
388
+
inArray(monitorsToPages.pageId, removedPages)
389
+
)
390
390
)
391
391
.run();
392
392
}
···
401
401
.where(
402
402
and(
403
403
eq(monitor.id, opts.input.id),
404
-
eq(monitor.workspaceId, opts.ctx.workspace.id),
405
-
),
404
+
eq(monitor.workspaceId, opts.ctx.workspace.id)
405
+
)
406
406
)
407
407
.get();
408
408
if (!monitorToDelete) return;
···
433
433
const monitors = await opts.ctx.db.query.monitor.findMany({
434
434
where: and(
435
435
eq(monitor.workspaceId, opts.ctx.workspace.id),
436
-
isNull(monitor.deletedAt),
436
+
isNull(monitor.deletedAt)
437
437
),
438
438
with: {
439
439
monitorTagsToMonitors: { with: { monitorTag: true } },
···
446
446
monitorTagsToMonitors: z
447
447
.array(z.object({ monitorTag: selectMonitorTagSchema }))
448
448
.default([]),
449
-
}),
449
+
})
450
450
)
451
451
.parse(monitors);
452
452
}),
···
461
461
and(
462
462
eq(monitor.id, opts.input.id),
463
463
eq(monitor.workspaceId, opts.ctx.workspace.id),
464
-
isNull(monitor.deletedAt),
465
-
),
464
+
isNull(monitor.deletedAt)
465
+
)
466
466
)
467
467
.get();
468
468
···
481
481
.where(
482
482
and(
483
483
eq(monitor.id, opts.input.id),
484
-
eq(monitor.workspaceId, opts.ctx.workspace.id),
485
-
),
484
+
eq(monitor.workspaceId, opts.ctx.workspace.id)
485
+
)
486
486
)
487
487
.run();
488
488
}),
···
510
510
notification,
511
511
and(
512
512
eq(notificationsToMonitors.notificationId, notification.id),
513
-
eq(notification.workspaceId, opts.ctx.workspace.id),
514
-
),
513
+
eq(notification.workspaceId, opts.ctx.workspace.id)
514
+
)
515
515
)
516
516
.where(eq(notificationsToMonitors.monitorId, opts.input.id))
517
517
.all();
···
524
524
await opts.ctx.db.query.monitor.findMany({
525
525
where: and(
526
526
eq(monitor.workspaceId, opts.ctx.workspace.id),
527
-
isNull(monitor.deletedAt),
527
+
isNull(monitor.deletedAt)
528
528
),
529
529
})
530
530
).length;