Skip to content

Commit 27e697d

Browse files
maxwolfsmaxwolfs
committed
add first single components to overview component
Signed-off-by: Max Wolfs <mail@maxwolfs.com>
1 parent 1ab591d commit 27e697d

File tree

8 files changed

+202
-80
lines changed

8 files changed

+202
-80
lines changed

‎docs/index.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ SCS is built, backed, and operated by an active open-source community worldwide.
1212

1313
## Architectual Overview
1414

15-
<ArchitecturalModel jsonFilePath="data/architecturalLayerData.json" />
15+
<ArchitecturalModel jsonFilePath="data/architecturalOverviewData.json" />
1616

1717
## Use Cases and Deployment Examples
1818

@@ -63,6 +63,7 @@ While the SCS project tracks the efforts across the released epics and user stor
6363
- OSISM and others.
6464

6565
All code not pushed upstream can be found in the [SCS Github organization](https://github.com/SovereignCloudStack).
66+
6667
### Issues and Bugs
6768

6869
If you can identify the affected component, raise the issue against the relevant repository in the SovereignCloudStack or OSISM space. Otherwise, you can use the [issues repository](https://github.com/SovereignCloudStack/issues). We appreciate PRs as well as issues; please don't forget to sign off your contributions see [contributor guide](https://docs.scs.community/community).
@@ -77,4 +78,4 @@ See our Release Notes [here](https://docs.scs.community/docs/category/releases)
7778

7879
## Standards, Conformity and Certification
7980

80-
How to get compliant? With what am I compliant then? What are the benefits? What does it involve? What to expect in the future? Learn more in the [standards section](https://docs.scs.community/standards).
81+
How to get compliant? What do I need to be compliant? What are the benefits? What does it involve? What to expect in the future? Learn more in the [standards section](https://docs.scs.community/standards).

‎src/components/ArchitecturalModel.tsx

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,25 @@ interface ArchitecturalLayerItem {
77
body: string
88
url: string
99
buttonText: string
10+
components?: []
1011
}
1112

1213
interface ArchitecturalLayerData {
13-
left: ArchitecturalLayerItem[]
14-
center: ArchitecturalLayerItem[]
15-
right: ArchitecturalLayerItem[]
14+
ops: ArchitecturalLayerItem[]
15+
container: ArchitecturalLayerItem[]
16+
iaas: ArchitecturalLayerItem[]
17+
iam: ArchitecturalLayerItem[]
1618
}
1719

1820
interface ArchitecturalModelProps {
1921
jsonFilePath: string
22+
topLayers?: boolean
2023
}
2124

22-
const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = ({
23-
jsonFilePath
24-
}) => {
25+
const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = (
26+
props
27+
) => {
28+
const { jsonFilePath, topLayers } = props
2529
const [data, setData] = useState<ArchitecturalLayerData | null>(null)
2630
const [isLoading, setIsLoading] = useState(true)
2731
const [error, setError] = useState<string | null>(null)
@@ -58,41 +62,67 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = ({
5862
}
5963

6064
return (
61-
<div className={`${styles.gradient} row`}>
62-
<div className="col col--3">
63-
{data.left.map((item) => (
65+
<div className={`${styles.gradient} ${styles.border} row`}>
66+
<div
67+
style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}
68+
className={`${styles.bottom} col col--3`}>
69+
{data.ops.map((layer) => (
6470
<ContentCard
65-
maxHeight
66-
title={item.title}
67-
body={item.body}
68-
buttonText={item.buttonText}
69-
url={item.url}
71+
small={!topLayers}
72+
style={topLayers && { height: '100%' }}
73+
title={layer.title}
74+
body={topLayers && layer.body}
75+
buttonText={topLayers && layer.buttonText}
76+
url={layer.url}
77+
components={!topLayers && layer.components}
7078
/>
7179
))}
7280
</div>
73-
<div className="col col--6">
74-
{data.center.map((item) => (
81+
<div
82+
className="col col--6"
83+
style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
84+
{data.container.map((layer) => (
7585
<div
7686
style={{
77-
marginBottom: item === data.center[0] ? '3rem' : '0'
87+
marginBottom: layer === data.container[0] ? '8px' : '0'
7888
}}>
7989
<ContentCard
80-
title={item.title}
81-
body={item.body}
82-
buttonText={item.buttonText}
83-
url={item.url}
90+
small={!topLayers}
91+
style={topLayers && { height: '100%' }}
92+
title={layer.title}
93+
body={topLayers && layer.body}
94+
buttonText={topLayers && layer.buttonText}
95+
url={layer.url}
96+
components={!topLayers && layer.components}
97+
/>
98+
</div>
99+
))}
100+
{data.iaas.map((layer) => (
101+
<div>
102+
<ContentCard
103+
small={!topLayers}
104+
style={topLayers && { height: '100%' }}
105+
title={layer.title}
106+
body={topLayers && layer.body}
107+
buttonText={topLayers && layer.buttonText}
108+
url={layer.url}
109+
components={!topLayers && layer.components}
84110
/>
85111
</div>
86112
))}
87113
</div>
88-
<div className="col col--3">
89-
{data.right.map((item) => (
114+
<div
115+
className="col col--3"
116+
style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
117+
{data.iam.map((layer) => (
90118
<ContentCard
91-
maxHeight
92-
title={item.title}
93-
body={item.body}
94-
buttonText={item.buttonText}
95-
url={item.url}
119+
small={!topLayers}
120+
style={topLayers && { height: '100%' }}
121+
title={layer.title}
122+
body={topLayers && layer.body}
123+
buttonText={topLayers && layer.buttonText}
124+
url={layer.url}
125+
components={!topLayers && layer.components}
96126
/>
97127
))}
98128
</div>

‎src/components/ContentCard.tsx

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,63 @@
11
import React, { CSSProperties } from 'react'
22
import styles from './contentcard.module.css'
33
import Link from '@docusaurus/Link'
4+
import { useLocation } from '@docusaurus/router'
5+
6+
interface LayerComponent {
7+
title: string
8+
url: string
9+
}
410

511
interface ContentCardProps {
12+
style?: React.CSSProperties
613
title: string
714
body: string
815
url: string
916
buttonText: string
10-
maxHeight?: boolean
17+
small?: boolean
18+
components?: LayerComponent[]
1119
}
1220

1321
const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
14-
const { title, body, url, buttonText, maxHeight } = props
22+
const { title, body, url, buttonText, style, small, components } = props
23+
24+
const location = useLocation()
25+
console.log(location.pathname)
1526

1627
return (
17-
<div className={`${maxHeight && styles.card} card`}>
28+
<div style={style} className={`${styles.contentCard} card`}>
1829
<div className="card__header">
19-
<h3>{title}</h3>
30+
{small ? <h5>{title}</h5> : <h3>{title}</h3>}
2031
</div>
2132
<div className="card__body">
2233
<p>{body}</p>
2334
</div>
24-
<div className="card__footer">
25-
<Link className="button button--secondary button--lg" to={url}>
26-
{buttonText}
27-
</Link>
35+
<div style={{ display: 'flex' }}>
36+
{components &&
37+
components.map((component) => (
38+
<Link to={component.url}>
39+
<div
40+
style={
41+
location.pathname == component.url
42+
? {
43+
background: 'rgba(0, 97, 255, 0.5)',
44+
color: '#FFF'
45+
}
46+
: {}
47+
}
48+
className={styles.layerComponent}>
49+
{component.title}
50+
</div>
51+
</Link>
52+
))}
2853
</div>
54+
{buttonText && (
55+
<div className="card__footer">
56+
<Link className="button button--secondary button--md" to={url}>
57+
{buttonText}
58+
</Link>
59+
</div>
60+
)}
2961
</div>
3062
)
3163
}

‎src/components/architecturalmodel.module.css

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
.gradient {
22
background: linear-gradient(
33
180deg,
4-
#0061ff 0%,
5-
rgba(80, 195, 165, 0) 50%,
6-
#50c3a5 100%
4+
rgb(0, 97, 255, 0.2) 20%,
5+
rgba(80, 195, 165, 10) 50%,
6+
#50c3a5 80%
77
);
88
border-radius: 16px;
9-
margin: 16px;
10-
padding: 16px;
9+
margin: 4px;
10+
}
11+
12+
.border {
13+
border: rgba(0, 97, 255, 1) solid 4px;
14+
border-radius: 16px;
15+
margin: 4px;
16+
}
17+
18+
.bottom {
19+
margin-bottom: 16px;
1120
}

‎src/components/contentcard.module.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,23 @@
2626
}
2727
}
2828

29-
.card {
30-
margin-bottom: 1rem;
29+
.contentCard {
30+
border: solid #666 2px;
31+
box-shadow: 2px 2px 4px 4px rgba(10, 10, 10, 0.1);
32+
}
33+
34+
.layerComponent {
35+
border-radius: 4px;
36+
background: #eee;
37+
width: 80px;
38+
height: 80px;
39+
margin: 0 0 16px 16px;
40+
padding: 8px;
41+
font-size: 10px;
42+
text-decoration: none;
43+
color: black;
44+
&&:hover {
45+
color: blue;
46+
text-decoration: none;
47+
}
3148
}

‎src/pages/index.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export default function Home(): JSX.Element {
6565
{featureContent.map((card, index) => (
6666
<div className="col col--3" key={index}>
6767
<ContentCard
68-
maxHeight
6968
title={card.title}
7069
body={card.body}
7170
url={card.url}
@@ -78,7 +77,12 @@ export default function Home(): JSX.Element {
7877
<div className="col col--12">
7978
<h1>Architectural Layers</h1>
8079
</div>
81-
<ArchitecturalModel jsonFilePath="data/architecturalLayerData.json" />
80+
<div style={{ marginLeft: '16px', marginRight: '16px' }}>
81+
<ArchitecturalModel
82+
topLayers
83+
jsonFilePath="data/architecturalOverviewData.json"
84+
/>
85+
</div>
8286
</div>
8387
<div className="row" style={{ marginTop: '3rem' }}>
8488
<div className="col col--12">
@@ -89,7 +93,6 @@ export default function Home(): JSX.Element {
8993
{additionalResources.map((card, index) => (
9094
<div className="col col--3" key={index}>
9195
<ContentCard
92-
maxHeight
9396
title={card.title}
9497
body={card.body}
9598
url={card.url}

‎static/data/architecturalLayerData.json

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎static/data/architecturalOverviewData.json

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"ops": [
3+
{
4+
"title": "Ops Layer",
5+
"body": "Tooling and infrastructure design for easy, efficient and transparent ways to operate an SCS Cloud.",
6+
"url": "/docs/category/operating-scs",
7+
"buttonText": "Learn More",
8+
"components": [
9+
{
10+
"title": "Status Page API",
11+
"url": "/docs/operating-scs/components/status-page/docs/overview"
12+
}
13+
]
14+
}
15+
],
16+
"container": [
17+
{
18+
"title": "Container Layer",
19+
"body": "SCS offers a robust solution for managing container workloads on a Kubernetes infrastructure.",
20+
"url": "/docs/container",
21+
"buttonText": "Learn More",
22+
"components": [
23+
{
24+
"title": "k8s Cluster API Provider",
25+
"url": "/docs/category/k8s-cluster-api-provider"
26+
}
27+
]
28+
}
29+
],
30+
"iaas": [
31+
{
32+
"title": "IaaS Layer",
33+
"body": "SCS offers OpenStack infrastructure solutions based on KVM virutalization to deploy VM workloads and enabling the container layer optionally.",
34+
"url": "/docs/faq",
35+
"buttonText": "Learn More",
36+
"components": [
37+
{
38+
"title": "Image Manager",
39+
"url": "/docs/iaas/components/image-manager"
40+
},
41+
{
42+
"title": "Flavor Manager",
43+
"url": "/docs/iaas/components/flavor-manager"
44+
}
45+
]
46+
}
47+
],
48+
"iam": [
49+
{
50+
"title": "IAM Layer",
51+
"body": "Working on Keycloak federated identity provider within our Team IAM.",
52+
"url": "/docs/iam",
53+
"buttonText": "Learn More",
54+
"components": [
55+
{
56+
"title": "Status Page API",
57+
"url": "/docs/category/status-page-api"
58+
}
59+
]
60+
}
61+
]
62+
}

0 commit comments

Comments
 (0)