Skip to content

Commit bab5202

Browse files
raferdevraferdev
committed
feat(stories): add system architecture details
1 parent 5c3b588 commit bab5202

6 files changed

Lines changed: 203 additions & 0 deletions

File tree

‎src/stories/content/systemArch/Architecture/Schema/index.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useEffect, useState } from 'react'
2+
import mermaid from 'mermaid'
3+
4+
const MermaidChart = `
5+
graph TD
6+
AB(Client) --> A[DNS]
7+
A --> AB
8+
AB --> B[AWS Route 53 -]
9+
B --> A
10+
B -->C[AWS Load Balance -]
11+
C -->B
12+
C -->D[AWS ECS Group -]
13+
D -->C
14+
D -->E(NGINX)
15+
E -->D
16+
subgraph AWS EC2/
17+
E .->F[storybook.rafer.dev - static files]
18+
E .->FF[rafer.dev - static files]
19+
end
20+
`
21+
const DiagramSVG = async () => {
22+
mermaid.initialize({
23+
startOnLoad: false,
24+
fontFamily: 'Ubuntu',
25+
theme: 'default',
26+
flowchart: {
27+
useMaxWidth: true,
28+
htmlLabels: true,
29+
padding: 10,
30+
curve: 'basis',
31+
},
32+
})
33+
34+
const { svg } = await mermaid.render('ArchitectureSVG', MermaidChart)
35+
36+
return svg
37+
}
38+
39+
const ArchtecturePage = () => {
40+
const [svg, setSvg] = useState('')
41+
42+
useEffect(() => {
43+
;(async () => {
44+
setSvg(await DiagramSVG())
45+
})()
46+
}, [])
47+
48+
return (
49+
<pre
50+
className="flex h-full w-full justify-center"
51+
dangerouslySetInnerHTML={{ __html: svg }}
52+
></pre>
53+
)
54+
}
55+
56+
export { ArchtecturePage }

‎src/stories/content/systemArch/Architecture/schema.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Meta } from '@storybook/blocks'
2+
3+
import { ArchtecturePage } from './Schema'
4+
5+
<Meta title="System Architecture/Architecture/Schema" />
6+
7+
<ArchtecturePage />

‎src/stories/content/systemArch/CICD/Schema/index.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useEffect, useState } from 'react'
2+
import mermaid from 'mermaid'
3+
4+
const MermaidChart = `
5+
graph TD
6+
AB(Github) --> A[Github Actions]
7+
A ---|Tests|B[Github Hosted Runner]
8+
B ---|Deploy|C[Docker]
9+
subgraph AWS EC2 - Self Hosted Runner /
10+
C .->E[volumes]
11+
C .->EA[Container]
12+
end
13+
`
14+
const DiagramSVG = async () => {
15+
mermaid.initialize({
16+
startOnLoad: false,
17+
fontFamily: 'Ubuntu',
18+
theme: 'default',
19+
flowchart: {
20+
useMaxWidth: true,
21+
htmlLabels: true,
22+
padding: 10,
23+
curve: 'basis',
24+
},
25+
})
26+
27+
const { svg } = await mermaid.render('CicdSVG', MermaidChart)
28+
29+
return svg
30+
}
31+
32+
const CicdPage = () => {
33+
const [svg, setSvg] = useState('')
34+
35+
useEffect(() => {
36+
;(async () => {
37+
setSvg(await DiagramSVG())
38+
})()
39+
}, [])
40+
41+
return (
42+
<pre
43+
className="flex h-full w-full justify-center"
44+
dangerouslySetInnerHTML={{ __html: svg }}
45+
></pre>
46+
)
47+
}
48+
49+
export { CicdPage }

‎src/stories/content/systemArch/CICD/schema.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Meta } from '@storybook/blocks'
2+
3+
import { CicdPage } from './Schema'
4+
5+
<Meta title="System Architecture/CI-CD/Schema" />
6+
7+
<CicdPage />

‎src/stories/content/systemArch/Server/About/index.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Docs } from '@/stories/components/Docs'
2+
3+
const { Container, Content, Header } = Docs
4+
5+
const ServerPage = () => (
6+
<Container>
7+
<Header.Container className="overflow-visible">
8+
<div className="flex flex-col items-baseline gap-4">
9+
<Header.Title>Server</Header.Title>
10+
<Header.SubTitle>Provided by nginx</Header.SubTitle>
11+
</div>
12+
</Header.Container>
13+
14+
<div className="flex flex-col gap-8 px-6">
15+
<div className="flex flex-col py-6">
16+
<Content.Topic>Overview</Content.Topic>
17+
<Content.Paragraph>
18+
Using Nginx as a server, you can understand more about the web
19+
structure. How the requests are made and how the responses are sent to
20+
serve this simple static page.
21+
</Content.Paragraph>
22+
</div>
23+
<div className="flex flex-col !pb-14">
24+
<Content.Topic>HTTP</Content.Topic>
25+
<Content.SubTopic className="!mt-6">
26+
CSP (Content-Security-Policy)
27+
</Content.SubTopic>
28+
29+
<Content.Paragraph>
30+
<Content.Paragraph>
31+
<span className="font-bold">X-Frame-Options:</span> same origin
32+
</Content.Paragraph>
33+
<Content.Paragraph>
34+
<span className="font-bold">X-XSS-Protection:</span> 1, mode: block.
35+
</Content.Paragraph>
36+
<Content.Paragraph>
37+
<span className="font-bold">Content-Security-Policy:</span>{' '}
38+
worker-src blob:| script-src: 'self', 'unsafe-inline',
39+
'unsafe-eval', *.googletagmanager.com, *.datadoghq-browser-agent.com
40+
| frame-src: 'self', *.youtube.com, object-src, 'none'| base-uri:
41+
'self'| form-action: 'none' | frame-ancestors: 'self'| img-src:
42+
'self', data:| font-src: 'self' | manifest-src 'self'
43+
</Content.Paragraph>
44+
<Content.Paragraph>
45+
<span className="font-bold">Strict-Transport-Security:</span> max
46+
age:31536000 | includeSubDomains | preload
47+
</Content.Paragraph>
48+
<Content.Paragraph>
49+
<span className="font-bold">Referrer-Policy:</span> strict origin
50+
</Content.Paragraph>
51+
<Content.Paragraph>
52+
<span className="font-bold">Permissions-Policy:</span> geolocation:
53+
(self), midi:(), sync xhr:(), microphone:(), camera:(),
54+
magnetometer:(), gyroscope:(), fullscreen:(), payment:()
55+
</Content.Paragraph>
56+
<Content.Paragraph>
57+
<span className="font-bold">X-Content-Type-Options:</span> nosniff
58+
</Content.Paragraph>
59+
</Content.Paragraph>
60+
<Content.SubTopic className="!mt-16 !pb-14">
61+
Server Domains
62+
</Content.SubTopic>
63+
64+
<Content.Paragraph>
65+
https://storybook.rafer.dev && https://rafer.dev
66+
</Content.Paragraph>
67+
<Content.SubTopic className="!mt-16 !pb-14">Redirect</Content.SubTopic>
68+
69+
<Content.Paragraph>
70+
https://raferdev.com to: rafer.dev, status: 401
71+
</Content.Paragraph>
72+
</div>
73+
</div>
74+
</Container>
75+
)
76+
77+
export { ServerPage }

‎src/stories/content/systemArch/Server/about.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Meta } from '@storybook/blocks'
2+
3+
import { ServerPage } from './About'
4+
5+
<Meta title="System Architecture/Server/About" />
6+
7+
<ServerPage />

0 commit comments

Comments
 (0)