Skip to content

Commit 099f203

Browse files
committed
zoomable image and toc header added
1 parent 7da740c commit 099f203

File tree

11 files changed

+195
-84
lines changed

11 files changed

+195
-84
lines changed

app/[[...slug]]/page.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { getGithubLastEdit } from "fumadocs-core/server";
1111
import { Metadata } from "next";
1212
import TocContributorCard from "@/components/toc-contributor-card";
1313
import { getFileContributors } from "@/lib/utils/github";
14+
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
15+
import TocHeader from "@/components/toc-header";
1416

1517
export default async function Page(props: {
1618
params: Promise<{ slug?: string[] }>;
@@ -39,10 +41,12 @@ export default async function Page(props: {
3941
tableOfContent={{
4042
style: "clerk",
4143
single: false,
44+
header: <TocHeader />,
4245
footer: <TocContributorCard contributors={contributors} />,
4346
}}
4447
tableOfContentPopover={{
4548
style: "clerk",
49+
header: <TocHeader />,
4650
footer: <TocContributorCard contributors={contributors} />,
4751
}}
4852
full={page.data.full}
@@ -58,7 +62,12 @@ export default async function Page(props: {
5862
<DocsTitle>{page.data.title}</DocsTitle>
5963
<DocsDescription>{page.data.description}</DocsDescription>
6064
<DocsBody>
61-
<MDX components={{ ...defaultMdxComponents }} />
65+
<MDX
66+
components={{
67+
...defaultMdxComponents,
68+
img: (props) => <ImageZoom {...(props as any)} />,
69+
}}
70+
/>
6271
</DocsBody>
6372
</DocsPage>
6473
);

components/image-switcher.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
2+
13
const ImageSwitcher = ({
24
lightSrc,
35
darkSrc,
@@ -23,4 +25,24 @@ const ImageSwitcher = ({
2325
);
2426
};
2527

28+
export const DarkImage = ({ src, alt }: { src: string; alt: string }) => (
29+
<ImageZoom
30+
src={src}
31+
alt={alt}
32+
width={1200}
33+
height={630}
34+
className="hidden dark:block object-contain"
35+
/>
36+
);
37+
38+
export const LightImage = ({ src, alt }: { src: string; alt: string }) => (
39+
<ImageZoom
40+
src={src}
41+
alt={alt}
42+
width={1200}
43+
height={630}
44+
className="block dark:hidden object-contain"
45+
/>
46+
);
47+
2648
export default ImageSwitcher;

components/toc-header.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { buttonVariants } from "fumadocs-ui/components/api";
2+
3+
const TocHeader = () => (
4+
<div className="flex gap-2 items-center justify-evenly mb-2">
5+
<a
6+
href="https://github.com/shield-auth/shield"
7+
target="_blank"
8+
className={buttonVariants({ color: "secondary", size: "sm" })}
9+
rel="noreferrer"
10+
>
11+
<svg
12+
width="15"
13+
height="15"
14+
viewBox="0 0 15 15"
15+
fill="none"
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
20+
fill="currentColor"
21+
fill-rule="evenodd"
22+
clip-rule="evenodd"
23+
></path>
24+
</svg>
25+
<span className="sr-only">GitHub</span>
26+
</a>
27+
<a
28+
href="https://discord.gg/7apj6VFc"
29+
target="_blank"
30+
className={buttonVariants({ color: "secondary", size: "sm" })}
31+
rel="noreferrer"
32+
>
33+
<svg
34+
width="15"
35+
height="15"
36+
viewBox="0 0 15 15"
37+
fill="none"
38+
xmlns="http://www.w3.org/2000/svg"
39+
>
40+
<path
41+
fill-rule="evenodd"
42+
clip-rule="evenodd"
43+
d="M5.07451 1.82584C5.03267 1.81926 4.99014 1.81825 4.94803 1.82284C4.10683 1.91446 2.82673 2.36828 2.07115 2.77808C2.02106 2.80525 1.97621 2.84112 1.93869 2.88402C1.62502 3.24266 1.34046 3.82836 1.11706 4.38186C0.887447 4.95076 0.697293 5.55032 0.588937 5.98354C0.236232 7.39369 0.042502 9.08728 0.0174948 10.6925C0.0162429 10.7729 0.0351883 10.8523 0.0725931 10.9234C0.373679 11.496 1.02015 12.027 1.66809 12.4152C2.32332 12.8078 3.08732 13.1182 3.70385 13.1778C3.85335 13.1922 4.00098 13.1358 4.10282 13.0255C4.2572 12.8581 4.5193 12.4676 4.71745 12.1643C4.80739 12.0267 4.89157 11.8953 4.95845 11.7901C5.62023 11.9106 6.45043 11.9801 7.50002 11.9801C8.54844 11.9801 9.37796 11.9107 10.0394 11.7905C10.1062 11.8957 10.1903 12.0269 10.2801 12.1643C10.4783 12.4676 10.7404 12.8581 10.8947 13.0255C10.9966 13.1358 11.1442 13.1922 11.2937 13.1778C11.9102 13.1182 12.6742 12.8078 13.3295 12.4152C13.9774 12.027 14.6239 11.496 14.925 10.9234C14.9624 10.8523 14.9813 10.7729 14.9801 10.6925C14.9551 9.08728 14.7613 7.39369 14.4086 5.98354C14.3003 5.55032 14.1101 4.95076 13.8805 4.38186C13.6571 3.82836 13.3725 3.24266 13.0589 2.88402C13.0214 2.84112 12.9765 2.80525 12.9264 2.77808C12.1708 2.36828 10.8907 1.91446 10.0495 1.82284C10.0074 1.81825 9.96489 1.81926 9.92305 1.82584C9.71676 1.85825 9.5391 1.96458 9.40809 2.06355C9.26977 2.16804 9.1413 2.29668 9.0304 2.42682C8.86968 2.61544 8.71437 2.84488 8.61428 3.06225C8.27237 3.03501 7.90138 3.02 7.5 3.02C7.0977 3.02 6.72593 3.03508 6.38337 3.06244C6.28328 2.84501 6.12792 2.61549 5.96716 2.42682C5.85626 2.29668 5.72778 2.16804 5.58947 2.06355C5.45846 1.96458 5.2808 1.85825 5.07451 1.82584ZM11.0181 11.5382C11.0395 11.5713 11.0615 11.6051 11.0838 11.6392C11.2169 11.843 11.3487 12.0385 11.4508 12.1809C11.8475 12.0916 12.352 11.8818 12.8361 11.5917C13.3795 11.2661 13.8098 10.8918 14.0177 10.5739C13.9852 9.06758 13.7993 7.50369 13.4773 6.21648C13.38 5.82759 13.2038 5.27021 12.9903 4.74117C12.7893 4.24326 12.5753 3.82162 12.388 3.5792C11.7376 3.24219 10.7129 2.88582 10.0454 2.78987C10.0308 2.79839 10.0113 2.81102 9.98675 2.82955C9.91863 2.881 9.84018 2.95666 9.76111 3.04945C9.71959 3.09817 9.68166 3.1471 9.64768 3.19449C9.953 3.25031 10.2253 3.3171 10.4662 3.39123C11.1499 3.6016 11.6428 3.89039 11.884 4.212C12.0431 4.42408 12.0001 4.72494 11.788 4.884C11.5759 5.04306 11.2751 5.00008 11.116 4.788C11.0572 4.70961 10.8001 4.4984 10.1838 4.30877C9.58933 4.12585 8.71356 3.98 7.5 3.98C6.28644 3.98 5.41067 4.12585 4.81616 4.30877C4.19988 4.4984 3.94279 4.70961 3.884 4.788C3.72494 5.00008 3.42408 5.04306 3.212 4.884C2.99992 4.72494 2.95694 4.42408 3.116 4.212C3.35721 3.89039 3.85011 3.6016 4.53383 3.39123C4.77418 3.31727 5.04571 3.25062 5.35016 3.19488C5.31611 3.14738 5.27808 3.09831 5.23645 3.04945C5.15738 2.95666 5.07893 2.881 5.01081 2.82955C4.98628 2.81102 4.96674 2.79839 4.95217 2.78987C4.28464 2.88582 3.25999 3.24219 2.60954 3.5792C2.42226 3.82162 2.20825 4.24326 2.00729 4.74117C1.79376 5.27021 1.61752 5.82759 1.52025 6.21648C1.19829 7.50369 1.01236 9.06758 0.97986 10.5739C1.18772 10.8918 1.61807 11.2661 2.16148 11.5917C2.64557 11.8818 3.15003 12.0916 3.5468 12.1809C3.64885 12.0385 3.78065 11.843 3.9138 11.6392C3.93626 11.6048 3.95838 11.5708 3.97996 11.5375C3.19521 11.2591 2.77361 10.8758 2.50064 10.4664C2.35359 10.2458 2.4132 9.94778 2.63377 9.80074C2.85435 9.65369 3.15236 9.71329 3.29941 9.93387C3.56077 10.3259 4.24355 11.0201 7.50002 11.0201C10.7565 11.0201 11.4392 10.326 11.7006 9.93386C11.8477 9.71329 12.1457 9.65369 12.3663 9.80074C12.5869 9.94779 12.6465 10.2458 12.4994 10.4664C12.2262 10.8762 11.8041 11.2598 11.0181 11.5382ZM4.08049 7.01221C4.32412 6.74984 4.65476 6.60162 5.00007 6.59998C5.34538 6.60162 5.67603 6.74984 5.91966 7.01221C6.16329 7.27459 6.30007 7.62974 6.30007 7.99998C6.30007 8.37021 6.16329 8.72536 5.91966 8.98774C5.67603 9.25011 5.34538 9.39833 5.00007 9.39998C4.65476 9.39833 4.32412 9.25011 4.08049 8.98774C3.83685 8.72536 3.70007 8.37021 3.70007 7.99998C3.70007 7.62974 3.83685 7.27459 4.08049 7.01221ZM9.99885 6.59998C9.65354 6.60162 9.3229 6.74984 9.07926 7.01221C8.83563 7.27459 8.69885 7.62974 8.69885 7.99998C8.69885 8.37021 8.83563 8.72536 9.07926 8.98774C9.3229 9.25011 9.65354 9.39833 9.99885 9.39998C10.3442 9.39833 10.6748 9.25011 10.9184 8.98774C11.1621 8.72536 11.2989 8.37021 11.2989 7.99998C11.2989 7.62974 11.1621 7.27459 10.9184 7.01221C10.6748 6.74984 10.3442 6.60162 9.99885 6.59998Z"
44+
fill="currentColor"
45+
></path>
46+
</svg>
47+
<span className="sr-only">Discord</span>
48+
</a>
49+
<a
50+
href="https://twitter.com/shield_auth"
51+
target="_blank"
52+
className={buttonVariants({ color: "secondary", size: "sm" })}
53+
rel="noreferrer"
54+
>
55+
<svg
56+
width="15"
57+
height="15"
58+
viewBox="0 0 15 15"
59+
fill="none"
60+
xmlns="http://www.w3.org/2000/svg"
61+
>
62+
<path
63+
d="M7.23336 4.69629C7.23336 2.96884 8.63335 1.56857 10.36 1.56857C11.3736 1.56857 12.183 2.04804 12.7254 2.74385C13.3079 2.62467 13.8557 2.40913 14.3513 2.11508C14.1559 2.72598 13.7424 3.2396 13.2033 3.56463C13.2038 3.56568 13.2042 3.56674 13.2047 3.56779C13.7334 3.50361 14.2364 3.36302 14.7048 3.15546L14.7037 3.15715C14.3667 3.66183 13.9431 4.10736 13.4561 4.47034C13.4823 4.64672 13.4956 4.82427 13.4956 5.00079C13.4956 8.6871 10.6873 12.9746 5.52122 12.9746C3.93906 12.9746 2.46544 12.511 1.22505 11.7152C0.992632 11.5661 0.925108 11.2568 1.07423 11.0244C1.0874 11.0038 1.10183 10.9846 1.11734 10.9666C1.20582 10.8202 1.37438 10.7309 1.5554 10.7522C2.47066 10.8601 3.38568 10.7485 4.19219 10.3962C3.39226 10.0434 2.77129 9.35975 2.50204 8.51974C2.45359 8.3686 2.48835 8.20311 2.59351 8.08422C2.59716 8.0801 2.60087 8.07606 2.60464 8.0721C1.96391 7.50819 1.55973 6.68208 1.55973 5.76143V5.72759C1.55973 5.56814 1.64411 5.42059 1.78155 5.33974C1.82671 5.31317 1.87537 5.29511 1.92532 5.28558C1.70549 4.86154 1.58116 4.37984 1.58116 3.86958C1.58116 3.40165 1.58384 2.81192 1.91332 2.28081C1.98718 2.16175 2.10758 2.08915 2.2364 2.07195C2.42588 2.01237 2.64087 2.06969 2.77406 2.23302C3.86536 3.57126 5.44066 4.49583 7.23366 4.73961L7.23336 4.69629ZM5.52122 11.9746C4.73387 11.9746 3.97781 11.8435 3.27248 11.6023C4.13012 11.4538 4.95307 11.1159 5.66218 10.5602C5.81211 10.4427 5.87182 10.2435 5.81126 10.0629C5.7507 9.88234 5.583 9.75943 5.39255 9.75607C4.68968 9.74366 4.06712 9.39716 3.67793 8.86845C3.86828 8.85306 4.05428 8.82039 4.23445 8.77167C4.43603 8.71716 4.57363 8.53114 4.56674 8.32243C4.55985 8.11372 4.41029 7.93718 4.20555 7.89607C3.42694 7.73977 2.79883 7.16764 2.56169 6.42174C2.76255 6.47025 2.97102 6.4991 3.18482 6.5061C3.38563 6.51267 3.56646 6.38533 3.62795 6.19405C3.68943 6.00277 3.61666 5.79391 3.44963 5.68224C2.86523 5.29155 2.48116 4.62464 2.48116 3.86958C2.48116 3.70213 2.48352 3.55268 2.49355 3.41719C3.85115 4.79913 5.70873 5.68931 7.77588 5.79338C7.93225 5.80126 8.08328 5.73543 8.18395 5.61553C8.28463 5.49562 8.32332 5.33548 8.28851 5.18284C8.25255 5.02517 8.23336 4.86284 8.23336 4.69629C8.23336 3.52085 9.18591 2.56857 10.36 2.56857C11.5943 2.56857 12.4956 3.71208 12.4956 5.00079C12.4956 8.25709 10.0202 11.9746 5.52122 11.9746Z"
64+
fill="currentColor"
65+
fill-rule="evenodd"
66+
clip-rule="evenodd"
67+
></path>
68+
</svg>
69+
<span className="sr-only">Twitter</span>
70+
</a>
71+
</div>
72+
);
73+
74+
export default TocHeader;

content/architectural-resource/admin-login.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Admin Login
33
description: This is the admin login flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/2-admin-login-transparent-light.png"
10-
darkSrc="/img/flow-charts/2-admin-login-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/2-admin-login-transparent-light.png"
10+
alt="Admin Login Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/2-admin-login-transparent.png"
1115
alt="Admin Login Flow Chart"
1216
/>

content/architectural-resource/create-api-user.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Create API User
33
description: This is the create API user flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/3-create-admin-user-transparent-light.png"
10-
darkSrc="/img/flow-charts/3-create-admin-user-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/3-create-admin-user-transparent-light.png"
10+
alt="Create API User Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/3-create-admin-user-transparent.png"
1115
alt="Create API User Flow Chart"
1216
/>

content/architectural-resource/index.mdx

Lines changed: 33 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,36 @@ import { Step, Steps } from "fumadocs-ui/components/steps";
77

88
## Resources
99

10-
<Steps>
11-
<Step>
12-
13-
### [Resource Initialization](/architectural-resource/resource-initialization)
14-
15-
On startup of the Shield server, the resource initialization process is triggered.
16-
17-
</Step>
18-
<Step>
19-
20-
### [Admin Login](/architectural-resource/admin-login)
21-
22-
Once the will reach healthy state then Admin Login api can be used for creation of the API Key.
23-
24-
</Step>
25-
<Step>
26-
27-
### [Create API User](/architectural-resource/create-api-user)
28-
29-
For any client related operations Like login, logout, password reset, etc. the
30-
API user is required. There can be more than one API user for a client and each
31-
API user can have different role.
32-
33-
</Step>
34-
<Step>
35-
36-
### [Signup user](/architectural-resource/signup-user)
37-
38-
An API user can create or register a new user to its own client.
39-
40-
</Step>
41-
<Step>
42-
43-
### [Non Admin Login](/architectural-resource/non-admin-login)
44-
45-
Regular (Non Admin) user can login to the client at this API endpoint.
46-
47-
</Step>
48-
<Step>
49-
50-
### [Refresh Token](/architectural-resource/refresh-token)
51-
52-
Refresh token is used to refresh the session and generate a new set of token
53-
so that the user can continue to use the client without having to login again.
54-
55-
</Step>
56-
<Step>
57-
58-
### [Introspection](/architectural-resource/introspection)
59-
60-
Introspection is used to get the current state of the token. Currently, we
61-
support only the access_token introspection.
62-
63-
</Step>
64-
</Steps>
10+
<Cards>
11+
<Card
12+
title="Resource Initialization"
13+
href="/architectural-resource/resource-initialization"
14+
>
15+
On startup of the Shield server, the resource initialization process is
16+
triggered.
17+
</Card>
18+
<Card title="Admin Login" href="/architectural-resource/admin-login">
19+
Once the will reach healthy state then Admin Login api can be used for
20+
creation of the API Key.
21+
</Card>
22+
<Card title="Create API User" href="/architectural-resource/create-api-user">
23+
For any client related operations Like login, logout, password reset, etc.
24+
the API user is required. There can be more than one API user for a client
25+
and each API user can have different role.
26+
</Card>
27+
<Card title="Signup user" href="/architectural-resource/signup-user">
28+
An API user can create or register a new user to its own client.
29+
</Card>
30+
<Card title="Non Admin Login" href="/architectural-resource/non-admin-login">
31+
Regular (Non Admin) user can login to the client at this API endpoint.
32+
</Card>
33+
<Card title="Refresh Token" href="/architectural-resource/refresh-token">
34+
Refresh token is used to refresh the session and generate a new set of token
35+
so that the user can continue to use the client without having to login
36+
again.
37+
</Card>
38+
<Card title="Introspection" href="/architectural-resource/introspection">
39+
Introspection is used to get the current state of the token. Currently, we
40+
support only the access_token introspection.
41+
</Card>
42+
</Cards>

content/architectural-resource/introspection.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Introspection
33
description: This is the introspection flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/7-introspection-transparent-light.png"
10-
darkSrc="/img/flow-charts/7-introspection-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/7-introspection-transparent-light.png"
10+
alt="Introspection Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/7-introspection-transparent.png"
1115
alt="Introspection Flow Chart"
1216
/>

content/architectural-resource/non-admin-login.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Non-Admin Login
33
description: This is the non-admin login flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/5-non-admin-login-transparent-light.png"
10-
darkSrc="/img/flow-charts/5-non-admin-login-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/5-non-admin-login-transparent-light.png"
10+
alt="Non-Admin Login Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/5-non-admin-login-transparent.png"
1115
alt="Non-Admin Login Flow Chart"
1216
/>

content/architectural-resource/refresh-token.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Refresh Token
33
description: This is the refresh token flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/6-refresh-token-transparent-light.png"
10-
darkSrc="/img/flow-charts/6-refresh-token-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/6-refresh-token-transparent-light.png"
10+
alt="Refresh Token Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/6-refresh-token-transparent.png"
1115
alt="Refresh Token Flow Chart"
1216
/>

content/architectural-resource/resource-initialization.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Resource Initialization
33
description: This is the resource initialization flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/1-shield-start-transparent-light.png"
10-
darkSrc="/img/flow-charts/1-shield-start-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/1-shield-start-transparent-light.png"
10+
alt="Resource Initialization Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/1-shield-start-transparent.png"
1115
alt="Resource Initialization Flow Chart"
1216
/>

content/architectural-resource/signup-user.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ title: Signup User
33
description: This is the signup user flow chart
44
---
55

6-
import ImageSwitcher from "@/components/image-switcher";
6+
import { LightImage, DarkImage } from "@/components/image-switcher";
77

8-
<ImageSwitcher
9-
lightSrc="/img/flow-charts/4-signup-user-transparent-light.png"
10-
darkSrc="/img/flow-charts/4-signup-user-transparent.png"
8+
<LightImage
9+
src="/img/flow-charts/4-signup-user-transparent-light.png"
10+
alt="Signup User Flow Chart"
11+
/>
12+
13+
<DarkImage
14+
src="/img/flow-charts/4-signup-user-transparent.png"
1115
alt="Signup User Flow Chart"
1216
/>

0 commit comments

Comments
 (0)