feat: add homepage supported resources

caas-team · Oct 21, 2024 · bf25bc7 · bf25bc7
1 parent 090902a
commit bf25bc7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 31 deletions.
diff --git a/website/src/components/CaasAvatar.tsx b/website/src/components/CaasAvatar.tsx
@@ -3,19 +3,19 @@ import CaasLogo from "/img/CaaS-Logo.svg";
 export default function CaasAvatar(): JSX.Element {
   const name = "CaaS@DTIT";
   const description = "The Container as a Service Team at Deutsch Telekom IT";
-  const linkTo = "https://github.com/caas-team";
+  const link = "https://github.com/caas-team";
 
   return (
     <div className="section margin-vert--md">
       <div className="container avatar">
         <a
           className="avatar__photo-link avatar__photo avatar__photo--lg"
-          href={linkTo}
+          href={link}
         >
           <CaasLogo />
         </a>
         <div className="avatar__intro">
-          <a href={linkTo}>
+          <a href={link}>
             <div className="avatar__name">{name}</div>
           </a>
           <small className="avatar__subtitle">{description}</small>

diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -6,75 +6,79 @@ type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<"svg">>;
   href: string;
-  description: JSX.Element;
+  supportedResources: string[];
 };
 
 const FeatureList: FeatureItem[] = [
-  {
-    title: "Kubernetes",
-    Svg: require("@site/static/img/Kubernetes.svg").default,
-    href: "https://kubernetes.io/",
-    description: (
-      <>
-        batch/CronJob, apps/DeamonSet, apps/Deployment,
-        autoscaling/HorizontalPodAutoscaler, batch/Job,
-        policy/PodDisruptionBudget, apps/StatefulSet
-      </>
-    ),
-  },
   {
     title: "Prometheus",
     Svg: require("@site/static/img/Prometheus.svg").default,
     href: "https://prometheus.io/",
-    description: <>monitoring.coreos.com/Prometheus</>,
+    supportedResources: ["Prometheuses"],
   },
   {
     title: "Argo",
     Svg: require("@site/static/img/Argo.svg").default,
     href: "https://argoproj.github.io/",
-    description: <>argoproj.io/Rollout</>,
+    supportedResources: ["Rollouts"],
+  },
+  {
+    title: "Kubernetes",
+    Svg: require("@site/static/img/Kubernetes.svg").default,
+    href: "https://kubernetes.io/",
+    supportedResources: [
+      "Deployment",
+      "StatefulSet",
+      "DeamonSet",
+      "CronJob",
+      "HorizontalPodAutoscaler",
+      "PodDisruptionBudget",
+      "Job",
+    ],
   },
   {
     title: "Keda",
     Svg: require("@site/static/img/Keda.svg").default,
     href: "https://keda.sh/",
-    description: <>keda.sh/ScaledObject</>,
+    supportedResources: ["ScaledObjects"],
   },
   {
     title: "Zalando",
     Svg: require("@site/static/img/Zalando.svg").default,
     href: "https://zalando.com/",
-    description: <>zalando.org/Stack</>,
+    supportedResources: ["Stacks"],
   },
 ];
 
-function Feature({ title, Svg, href, description }: FeatureItem) {
+function Feature({ title, Svg, href, supportedResources }: FeatureItem) {
   return (
     <div className={clsx("col", styles.feature)}>
       <div className={clsx("text--center")}>
         <a href={href}>
           <Svg className={styles.image} />
         </a>
       </div>
-      <div className="text--center padding-horiz--md">
+      <div className={"text--center padding-horiz--md"}>
         <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        <p>{supportedResources.join(", ")}</p>
       </div>
     </div>
   );
 }
 
 export default function HomepageFeatures(): JSX.Element {
   return (
-    <section className={styles.features}>
+    <>
       <h1 className={styles.heading}>Supported Resources</h1>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            {FeatureList.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
   );
 }
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -16,4 +16,7 @@
 
 .heading {
   display: block;
+  width: 100%;
+  text-align: center;
+  padding-top: 2rem;
 }