diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 82086aa..f9a2058 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -3,8 +3,6 @@ import Heading from '@theme/Heading'; import styles from './styles.module.css'; import UndrawAlienScience from './img/undraw_alien_science.svg'; -import UndrawDeveloperActivity from './img/undraw_developer_activity.svg'; -import UndrawEngineeringTeam from './img/undraw_engineering_team.svg'; import UndrawInformedDecision from './img/undraw_informed_decision.svg'; import UndrawServerCluster from './img/undraw_server_cluster.svg'; @@ -21,10 +19,9 @@ const FeatureList: FeatureItem[] = [ Svg: UndrawServerCluster, description: ( <> - Through installers, OKD can deploy into clouds, lab environments or metal. Depending - on your platform installation could be fully automated, partially automated or require - manual work. OKD controls the full operating system of each host, configurable through the - Kubernetes API. + OKD is intended to be run at all scales from cloud to metal to edge. + The installer is fully automated on some platforms (such as AWS), or + supports configuration into custom environments (such as metal or labs). ), }, @@ -33,10 +30,9 @@ const FeatureList: FeatureItem[] = [ Svg: UndrawInformedDecision, description: ( <> - The landscape of cloud tools is vast. A community of practice means there is precedence on - what to use (e.g GitOps, CI/CD, Service Mesh, etc). - This is expressed through how OKD is deployed, the cluster components included and - the operators chosen to be included in catalogs. + The cloud landscape is vast. From GitOps to Service Meshes, Virtualisation to Storage, OKD integrated + deployments of leading projects. Recommended Design Patterns enchance security posture + and defaults include hardended configuration ), }, @@ -45,7 +41,9 @@ const FeatureList: FeatureItem[] = [ Svg: UndrawAlienScience, description: ( <> - OKD uses evolving best practice design patterns and software. We can be used as a testground for + OKD adopts developing best practise and technology. A great platform for technologists and students + to learn, experiment and contribute across the cloud ecosystem. For OpenShift contributors and partners + our technical similarity makes us an ideal lab and development environemnt. ), }, diff --git a/src/components/HomepageInsideOKD/index.tsx b/src/components/HomepageInsideOKD/index.tsx index 150fd9c..c1e0b58 100644 --- a/src/components/HomepageInsideOKD/index.tsx +++ b/src/components/HomepageInsideOKD/index.tsx @@ -1,19 +1,63 @@ import clsx from 'clsx'; import styles from './styles.module.scss'; + + export default function HomagepageInsideOKD(): JSX.Element { return (
-

What's in the box? (in progress)

-

This is a component that should go through and explain what makes up OKD

- -

Just needs to look a bit prettier... thinking of basing it off the "Customer Stories" component from Apache Doris site

+

What's in the box?

+
+ {THE_BOX.map((boxItem) => ( +
+
+

{boxItem.title}

+
+
+ {boxItem.text} +
+
+ ))} +
+
); -} \ No newline at end of file +} + + + +const THE_BOX = [ + { + id: 'os', + title: 'Operating System', + text: (<> + Nodes run an immutable operating system that is updated and managed + through cluster APIs. + ), + }, + { + id: 'k8s', + title: 'Kubernetes', + text: (<> + The industry leading way to orchestrate. OKD is 100% compliant, + with additional patches on some Kubernetes components to support + some advanced featuresets. + ), + }, + { + id: 'cluster-components', + title: 'Cluster Components', + text: (<> + Full featured web console, authentication, image registry/tooling, monitoring, + node config/upgrades, networking and operator management out of the box. + ) + }, + { + id: 'okderators', + title: 'OKDerators', + text: (<> + Installable catalog of GitOps, Storage, Mesh and Storage (+ more!) operators + using leading OSS projects. Designed to work easily with you and each other. + ) + }, +]; diff --git a/src/components/HomepageInsideOKD/styles.module.scss b/src/components/HomepageInsideOKD/styles.module.scss index e69de29..b5d50ea 100644 --- a/src/components/HomepageInsideOKD/styles.module.scss +++ b/src/components/HomepageInsideOKD/styles.module.scss @@ -0,0 +1,22 @@ +.tabList { + +} + +.tabItem { + +} + +.tabContent { + +} + +.inTheBoxHeader { + background-color: var(--ifm-color-primary); + //--ifm-hero-text-color: var(--ifm-font-color-base-inverse); + //color: var(--ifm-hero-text-color); + text-align: center; + vertical-align: center; + h2 { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/src/components/HomepageSoWhatIsOKD/index.tsx b/src/components/HomepageSoWhatIsOKD/index.tsx index 26c500d..446aacd 100644 --- a/src/components/HomepageSoWhatIsOKD/index.tsx +++ b/src/components/HomepageSoWhatIsOKD/index.tsx @@ -3,7 +3,7 @@ import styles from './styles.module.scss'; export default function HomepageSoWhatIsOKD(): JSX.Element { return ( -
+
@@ -11,7 +11,7 @@ export default function HomepageSoWhatIsOKD(): JSX.Element {

So what does that mean exactly?

Cloud buzzwords, right? In short, OKD is a very opinionated deployment of Kubernetes. - Kubernetes is a collection of software and design patters to operate applications at scale.

+ Kubernetes is a collection of software and design patterns to operate applications at scale.

We add some features directly as modifications into Kubernetes, but mostly we augment the platform by "preinstalling" a large amount of pieces of software called "Operators" into the deployed cluster.

These operators then provide all of our cluster components (over 100 of them!) which make up the platform, such as OS upgrades, web consoles, monitoring and image building

diff --git a/src/components/HomepageSoWhatIsOKD/styles.module.scss b/src/components/HomepageSoWhatIsOKD/styles.module.scss index 4d10ac5..c06df87 100644 --- a/src/components/HomepageSoWhatIsOKD/styles.module.scss +++ b/src/components/HomepageSoWhatIsOKD/styles.module.scss @@ -2,4 +2,8 @@ display: flex; justify-content: center; align-items: center; +} + +.whatIsContainer { + background-color: var(--ifm-color-emphasis-200); } \ No newline at end of file