Skip to content

Commit bd1c366

Browse files
committed
Styling for alert-fatigue-reduction-triage-actionable-alerts article
1 parent bde0c89 commit bd1c366

29 files changed

Lines changed: 545 additions & 273 deletions

‎_TODO.md‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -250,28 +250,9 @@ https://mermaid.js.org/config/directives.html
250250

251251
- Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.
252252

253-
## Image component
253+
## Diagram
254254

255-
Only needed if images used in content: Use an in-project Image component to wrap Astro's Image and Picture. Show a magnifying glass with a "+" for the cursor on hover, and a modal to show a magnified view of images on click.
256-
257-
- `accTitle`: Alert severity decision tree
258-
- `accDescr`: Flowchart showing how to classify an alert as a Page or Notification. When an alert fires, check if there is user-facing impact. If no, it is a Notification. If yes, check if there is immediate revenue or safety impact. If yes, it is a Page. If no, check if the SLO burn rate is critical. If yes, it is a Page. If no, it is a Notification.
259-
260-
<figure>
261-
<!-- 1. The Image with a concise title -->
262-
<img src="diagram.jpg" alt="[accTitle] - see details below for full text description">
263-
264-
<figcaption>
265-
<!-- 2. Visible caption (if needed) -->
266-
<strong>Figure 1:</strong> Process Workflow
267-
268-
<!-- 3. Collapsible detailed description -->
269-
<details>
270-
<summary>View detailed text description</summary>
271-
<p>[Insert your full accDescr content here]</p>
272-
</details>
273-
</figcaption>
274-
</figure>
255+
Can you add a detailed description to the Diagram on line xxxx for the mermaid diagram right above it? The intention is to provide a detailed description for users with visual impairments so they can understand the diagram.
275256

276257
## Content Issues
277258

‎src/components/Diagram/index.astro‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Picture } from 'astro:assets'
44
55
export interface Props {
66
/** The image source for the diagram */
7-
src: ImageMetadata
7+
src?: ImageMetadata
88
/** The title of the diagram */
99
title: string
1010
/** A detailed description of the diagram for vision-impaired users */
@@ -15,25 +15,29 @@ const { src, title, description } = Astro.props
1515
---
1616

1717
<figure class="my-6 mx-auto">
18-
<Picture
19-
src={src}
20-
alt={title}
21-
widths={[480, 768, 1024, 1280]}
22-
sizes="100vw"
23-
formats={['avif', 'webp', 'jpeg']}
24-
layout="constrained"
25-
fit="contain"
26-
position="center"
27-
class="w-full"
28-
loading="lazy"
29-
/>
18+
{src && (
19+
<Picture
20+
src={src}
21+
alt={title}
22+
widths={[480, 768, 1024, 1280]}
23+
sizes="100vw"
24+
formats={['avif', 'webp', 'jpeg']}
25+
layout="constrained"
26+
fit="contain"
27+
position="center"
28+
class="w-full"
29+
loading="lazy"
30+
/>
31+
)}
32+
33+
<slot />
3034

3135
<figcaption class="mt-3 text-content">
3236
<details class="m-0 border-0 p-0 not-italic">
3337
<summary class="group list-none outline-none focus:outline-none focus-visible:outline-none [anchor-name:unset] [&::marker]:hidden [&::-webkit-details-marker]:hidden [&::before]:content-none [&::before]:border-0 [&::after]:content-none [&::after]:border-0">
3438
<div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-base">
3539
<span>{title}</span>
36-
<span class="relative inline-flex shrink-0 items-center rounded-full bg-page-inverse px-2 py-1 text-xs leading-none text-content-inverse cursor-pointer select-none transition-colors duration-150 ease-linear group-hover:bg-page-active group-focus-visible:bg-page-active after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out group-focus-visible:after:opacity-100 group-focus-visible:after:-inset-1 group-focus-visible:after:border-spotlight">
40+
<span class="relative inline-flex shrink-0 items-center rounded-full bg-content px-2 py-1 text-xs leading-none text-content-inverse cursor-pointer select-none transition-colors duration-150 ease-linear group-hover:bg-content-offset group-focus-visible:bg-page-active after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out group-focus-visible:after:opacity-100 group-focus-visible:after:-inset-1 group-focus-visible:after:border-spotlight">
3741
description
3842
</span>
3943
</div>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
id?: string
10+
}
11+
12+
const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
13+
---
14+
15+
<svg
16+
id={id}
17+
xmlns="http://www.w3.org/2000/svg"
18+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
19+
fill="none"
20+
stroke="currentColor"
21+
viewBox="0 0 24 24"
22+
aria-hidden={accessible ? "false" : "true"}
23+
focusable={focusable ? "true" : "false"}
24+
>
25+
{accessible && <title>Chart with Line Moving Up Icon</title>}
26+
<path
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
stroke-width="2"
30+
d="M 22.800133,22.795552 H 3.1239701 c -0.6719333,0 -1.0078999,0 -1.2645333,-0.130666 -0.2256666,-0.115 -0.4092999,-0.298667 -0.5243333,-0.5243 C 1.2044369,21.883919 1.2044369,21.548019 1.2044369,20.876019 V 1.1997666 m 21.5956961,4.7990631 -6.51989,6.5198863 c -0.237667,0.237667 -0.356333,0.356333 -0.493333,0.400833 -0.120334,0.03933 -0.250334,0.03933 -0.370734,0 -0.137,-0.04467 -0.255666,-0.163333 -0.493333,-0.400833 l -2.2419,-2.241866 C 12.443276,10.039183 12.32461,9.9205162 12.18761,9.8760162 c -0.120334,-0.039333 -0.250334,-0.039333 -0.370734,0 -0.137,0.044667 -0.255666,0.1633338 -0.493333,0.4008338 L 6.00341,15.596956 M 22.800133,5.9988297 H 18.00107 m 4.799063,0 v 4.7990633"
31+
></path>
32+
</svg>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
id?: string
10+
}
11+
12+
const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
13+
---
14+
15+
<svg
16+
id={id}
17+
xmlns="http://www.w3.org/2000/svg"
18+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
19+
fill="currentColor"
20+
stroke="none"
21+
viewBox="0 0 24 24"
22+
aria-hidden={accessible ? "false" : "true"}
23+
focusable={focusable ? "true" : "false"}
24+
>
25+
{accessible && <title>Domain Name Server Icon</title>}
26+
<path
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
stroke-width="1"
30+
fill-rule="evenodd"
31+
d="M 1,3.5 A 1.5,1.5 0 0 1 2.5,2 h 15 A 1.5,1.5 0 0 1 19,3.5 v 2 A 1.5,1.5 0 0 1 17.5,7 H 2.5 A 1.5,1.5 0 0 1 1,5.5 Z m 3.5,1 a 1,1 0 1 1 -2,0 1,1 0 0 1 2,0 z M 1,9.5 A 1.5,1.5 0 0 1 2.5,8 h 6.073 a 1.5,1.5 0 0 1 1.342,2.17 l -1,2 A 1.5,1.5 0 0 1 7.573,13 H 2.5 A 1.5,1.5 0 0 1 1,11.5 Z m 3.5,1 a 1,1 0 1 1 -2,0 1,1 0 0 1 2,0 z M 1,15.5 A 1.5,1.5 0 0 1 2.5,14 h 5.27 a 1.5,1.5 0 0 1 1.471,1.206 l 0.4,2 A 1.5,1.5 0 0 1 8.171,19 H 2.5 A 1.5,1.5 0 0 1 1,17.5 Z m 3.5,1 a 1,1 0 1 1 -2,0 1,1 0 0 1 2,0 z m 7.659,-3.441 -0.682,-0.429 a 0.987,0.987 0 0 1 -0.452,-0.611 0.946,0.946 0 0 1 0.134,-0.742 0.983,0.983 0 0 1 0.639,-0.425 1.023,1.023 0 0 1 0.758,0.15 l 0.682,0.427 c 0.369,-0.31 0.8,-0.54 1.267,-0.676 V 9.97 c 0,-0.258 0.104,-0.504 0.291,-0.686 C 14.983,9.102 15.236,9 15.5,9 c 0.264,0 0.517,0.102 0.704,0.284 a 0.957,0.957 0 0 1 0.291,0.686 v 0.783 c 0.472,0.138 0.903,0.37 1.267,0.676 L 18.444,11 a 1.02,1.02 0 0 1 0.735,-0.107 c 0.25,0.058 0.467,0.208 0.606,0.419 0.14,0.21 0.19,0.465 0.141,0.71 a 0.97,0.97 0 0 1 -0.403,0.608 l -0.682,0.429 a 3.296,3.296 0 0 1 0,1.882 l 0.682,0.43 a 0.987,0.987 0 0 1 0.452,0.611 0.946,0.946 0 0 1 -0.134,0.742 0.982,0.982 0 0 1 -0.639,0.425 1.02,1.02 0 0 1 -0.758,-0.15 l -0.682,-0.428 c -0.369,0.31 -0.8,0.54 -1.267,0.676 V 18.03 A 0.957,0.957 0 0 1 16.204,18.716 1.01,1.01 0 0 1 15.5,19 1.01,1.01 0 0 1 14.796,18.716 0.957,0.957 0 0 1 14.505,18.03 V 17.247 A 3.503,3.503 0 0 1 13.238,16.571 L 12.556,17 a 1.02,1.02 0 0 1 -0.75,0.132 0.999,0.999 0 0 1 -0.627,-0.421 0.949,0.949 0 0 1 -0.135,-0.73 0.97,0.97 0 0 1 0.434,-0.61 l 0.68,-0.43 a 3.296,3.296 0 0 1 0,-1.882 z M 15.5,12.552 c -0.82,0 -1.487,0.65 -1.487,1.449 0,0.799 0.667,1.448 1.487,1.448 0.82,0 1.487,-0.65 1.487,-1.448 0,-0.8 -0.667,-1.45 -1.487,-1.45 z"
32+
></path>
33+
</svg>
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
id?: string
10+
}
11+
12+
const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
13+
---
14+
15+
<svg
16+
id={id}
17+
xmlns="http://www.w3.org/2000/svg"
18+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
19+
fill="currentColor"
20+
stroke="none"
21+
viewBox="0 0 24 24"
22+
aria-hidden={accessible ? "false" : "true"}
23+
focusable={focusable ? "true" : "false"}
24+
>
25+
{accessible && <title>User Avatar Icon</title>}
26+
<rect
27+
x="9.777771"
28+
y="4.4444437"
29+
width="1.7777777"
30+
height="1.7777777"
31+
stroke-width="0.9"
32+
/>
33+
<rect
34+
x="13.333331"
35+
y="4.4444437"
36+
width="1.7777777"
37+
height="1.7777777"
38+
stroke-width="0.9"
39+
/>
40+
<rect
41+
x="6.2222238"
42+
y="4.4444437"
43+
width="1.7777777"
44+
height="1.7777777"
45+
stroke-width="0.9"
46+
/>
47+
<path
48+
d="M 18.666666,11.555554 H 11.555554 V 8.8888891 H 9.7777765 V 11.555554 H 2.6666672 a 1.7798221,1.7798221 0 0 0 -1.77777479,1.777775 v 5.333334 H 2.6666672 v -5.333332 h 7.1111093 v 5.333335 h 1.7777745 v -5.333335 h 7.111112 v 5.333335 h 1.777775 v -5.333335 a 1.7798221,1.7798221 0 0 0 -1.777772,-1.777777 z"
49+
stroke-width="0.9"
50+
/>
51+
<rect
52+
x="0"
53+
y="20.444445"
54+
width="3.5555553"
55+
height="3.5555553"
56+
stroke-width="0.9"
57+
/>
58+
<rect
59+
x="8.8888874"
60+
y="20.444445"
61+
width="3.5555553"
62+
height="3.5555553"
63+
stroke-width="0.9"
64+
/>
65+
<rect
66+
x="17.777775"
67+
y="20.444445"
68+
width="3.5555553"
69+
height="3.5555553"
70+
stroke-width="0.9"
71+
/>
72+
<rect
73+
x="6.2222238"
74+
y="0"
75+
width="8.8888884"
76+
height="1.7777777"
77+
stroke-width="0.9"
78+
/>
79+
</svg>

‎src/components/Icon/icons/moon-svgrepo-com.svg‎

Lines changed: 0 additions & 52 deletions
This file was deleted.
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
id?: string
10+
}
11+
12+
const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
13+
---
14+
15+
<svg
16+
id={id}
17+
xmlns="http://www.w3.org/2000/svg"
18+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
19+
fill="none"
20+
stroke="currentColor"
21+
viewBox="0 0 24 24"
22+
aria-hidden={accessible ? "false" : "true"}
23+
focusable={focusable ? "true" : "false"}
24+
>
25+
{accessible && <title>User Avatar Icon</title>}
26+
<path
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
stroke-width="2"
30+
d="M 1.2041657,11.999951 H 22.795829 M 11.999999,7.2018051 v 4.7981459 m -6.5974531,0 V 16.7981 M 18.597449,11.999951 V 16.7981 M 9.7208765,7.2018051 h 4.5582415 c 0.67187,0 1.007738,0 1.264305,-0.1306672 C 15.769091,6.9561374 15.952592,6.77247 16.067625,6.5469025 16.198293,6.2902348 16.198293,5.9544001 16.198293,5.2825974 V 3.123422 c 0,-0.6718026 0,-1.007704 -0.130668,-1.264305 C 15.952625,1.6334494 15.769291,1.4499153 15.543423,1.3348815 15.286756,1.2042143 14.950988,1.2042143 14.279118,1.2042143 H 9.7208765 c -0.6718027,0 -1.007704,0 -1.264305,0.1306672 C 8.2309039,1.449882 8.0473698,1.6335494 7.932336,1.859117 7.8016688,2.1157847 7.8016688,2.4516194 7.8016688,3.123422 v 2.1591754 c 0,0.6718027 0,1.007704 0.1306672,1.2643051 0.1150005,0.2256675 0.2986679,0.4092016 0.5242355,0.5242354 0.2566677,0.1306672 0.5925023,0.1306672 1.264305,0.1306672 z M 16.31833,22.795784 h 4.558241 c 0.67187,0 1.007738,0 1.264305,-0.130667 0.225668,-0.115 0.409169,-0.298334 0.524202,-0.524202 0.130668,-0.256668 0.130668,-0.592436 0.130668,-1.264305 v -2.159175 c 0,-0.67187 0,-1.007738 -0.130668,-1.264305 -0.115,-0.225668 -0.298334,-0.409169 -0.524202,-0.524203 C 21.884209,16.79826 21.548407,16.79826 20.876571,16.79826 H 16.31833 c -0.67187,0 -1.007738,0 -1.264305,0.130667 -0.225668,0.115001 -0.409169,0.298335 -0.524203,0.524203 -0.130667,0.256667 -0.130667,0.592435 -0.130667,1.264305 v 2.159175 c 0,0.671869 0,1.007737 0.130667,1.264305 0.115001,0.225668 0.298335,0.409168 0.524203,0.524202 0.256667,0.130667 0.592469,0.130667 1.264305,0.130667 z m -13.1949066,0 H 7.681665 c 0.6718027,0 1.0077041,0 1.2643051,-0.130667 0.2256676,-0.115 0.4092016,-0.298334 0.5242354,-0.524202 0.1306672,-0.256668 0.1306672,-0.592436 0.1306672,-1.264305 v -2.159175 c 0,-0.67187 0,-1.007738 -0.1306672,-1.264305 C 9.3552051,17.227462 9.1715377,17.043961 8.9459701,16.928927 8.6893024,16.79826 8.3534677,16.79826 7.681665,16.79826 H 3.1234234 c -0.6718027,0 -1.007704,0 -1.2643051,0.130667 -0.2256675,0.115001 -0.4092016,0.298335 -0.5242354,0.524203 -0.1306672,0.256667 -0.1306672,0.592435 -0.1306672,1.264305 v 2.159175 c 0,0.671869 0,1.007737 0.1306672,1.264305 0.1150005,0.225668 0.2986679,0.409168 0.5242354,0.524202 0.2566677,0.130667 0.5925024,0.130667 1.2643051,0.130667 z"
31+
></path>
32+
</svg>
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
id?: string
10+
}
11+
12+
const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
13+
---
14+
15+
<svg
16+
id={id}
17+
xmlns="http://www.w3.org/2000/svg"
18+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
19+
fill="currentColor"
20+
stroke="currentColor"
21+
viewBox="0 0 24 24"
22+
aria-hidden={accessible ? "false" : "true"}
23+
focusable={focusable ? "true" : "false"}
24+
>
25+
{accessible && <title>On Call Phone Icon</title>}
26+
<path
27+
style="stroke-width:0.0889286"
28+
d="M 9.7776258,17.078978 C 9.2792704,17.681201 7.9018568,16.107255 6.9711308,14.869102 6.0392483,13.632195 5.1341324,11.728679 5.8717952,11.470431 7.2404047,10.993062 6.4395156,7.7848759 5.3493405,6.2193773 4.2582763,4.6527242 3.1169659,3.5619253 1.4749003,4.705192 1.0630725,4.9924305 -2.6043401,8.6174247 3.4547178,17.317661 c 6.0587015,8.70077 10.7306522,6.518642 11.1422982,6.231936 1.64243,-1.1438 1.015129,-2.592267 -0.07554,-4.159189 -1.090532,-1.565498 -3.821793,-3.429709 -4.7438057,-2.31143 z"
29+
/>
30+
<path
31+
style="stroke-width:0.0889286"
32+
d="m 8.8759793,6.8064841 c 0.1396253,0.096587 0.2688304,0.204002 0.3842612,0.3196091 1.0405525,1.0408202 1.0899965,2.7163219 0.1127697,3.8145008 -0.3226329,0.362384 -0.2903534,0.917744 0.072203,1.240377 0.1674531,0.149043 0.3759898,0.222321 0.5837278,0.222321 0.242062,0 0.483148,-0.09942 0.656642,-0.294443 1.595301,-1.792356 1.51516,-4.5267295 -0.182481,-6.2249998 C 10.313067,5.6937125 10.101946,5.5179981 9.8757119,5.3614837 9.4764228,5.0853601 8.9292451,5.1852204 8.6532998,5.5841611 8.3770892,5.9831829 8.4767732,6.5305388 8.8759793,6.8064841 Z"
33+
/>
34+
<path
35+
style="stroke-width:0.0889286"
36+
d="m 11.421563,4.1471647 c 0.149671,0.1254684 0.293468,0.2570026 0.4272,0.3906633 2.481478,2.481373 2.539726,6.423755 0.132658,8.975204 -0.332942,0.352956 -0.31684,0.909115 0.03605,1.242063 0.169924,0.160162 0.386491,0.239486 0.602754,0.239486 0.233357,0 0.466431,-0.09248 0.63921,-0.275678 1.468922,-1.557051 2.261813,-3.59476 2.232729,-5.7377598 C 15.463001,6.8336071 14.610262,4.814306 13.091011,3.2951405 12.921087,3.1252772 12.739133,2.9589015 12.550414,2.8006089 12.178525,2.4888256 11.624398,2.5375567 11.312621,2.9094494 11.000844,3.281259 11.049654,3.8353734 11.421583,4.1471566 Z"
37+
/>
38+
<path
39+
style="stroke-width:0.0889286"
40+
d="m 15.165178,0.22212389 c -0.362471,-0.32245466 -0.917833,-0.28999492 -1.240466,0.0723848 -0.322531,0.36256201 -0.290086,0.91792001 0.0723,1.24046371 0.159392,0.1418329 0.303595,0.2773691 0.440365,0.4139625 3.863858,3.863769 3.926116,10.2099761 0.138734,14.1466671 -0.336426,0.349666 -0.325671,0.905913 0.0239,1.242331 0.17033,0.163989 0.389874,0.245442 0.609074,0.245442 0.230501,0 0.46084,-0.09027 0.633255,-0.269452 2.1632,-2.24847 3.339099,-5.206501 3.310907,-8.32896 C 19.125097,5.8581459 17.891537,2.9180792 15.679426,0.70606918 15.518211,0.54501603 15.349948,0.38672743 15.164975,0.22211984 Z"
41+
/>
42+
</svg>

‎src/components/Inset/index.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
import DefaultInset from './layouts/DefaultInset.astro'
3+
4+
export type Props = {
5+
classes?: {
6+
layout?: string
7+
wrapper?: string
8+
}
9+
size?: number
10+
variant: string
11+
}
12+
13+
const { variant = 'default', classes } = Astro.props
14+
---
15+
16+
<div class:list={[classes?.wrapper ? classes.wrapper : 'mb-8']}>
17+
{variant === 'default' &&
18+
(classes?.layout !== undefined ? (
19+
<DefaultInset classes={{ layout: classes.layout }}>
20+
<slot />
21+
</DefaultInset>
22+
) : (
23+
<DefaultInset>
24+
<slot />
25+
</DefaultInset>
26+
))}
27+
</div>

0 commit comments

Comments
 (0)