feat: Website updates for collapsible content (awslabs#296)

ovaleanu · Aug 21, 2023 · 38a19d8 · 38a19d8
1 parent 39e790c
commit 38a19d8
Show file tree

Hide file tree

Showing 13 changed files with 141 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
-[![plan-examples](https://github.com/awslabs/data-on-eks/actions/workflows/plan-examples.yml/badge.svg?branch=main)](https://github.com/awslabs/data-on-eks/actions/workflows/plan-examples.yml)
-# [Data on Amazon EKS (DoEKS)](https://awslabs.github.io/data-on-eks/)
 ![Data on EKS](website/static/img/doeks-logo-green.png)
+# [Data on Amazon EKS (DoEKS)](https://awslabs.github.io/data-on-eks/)
 
-**Build, Scale, and Optimize Data & AI/ML Platforms on [Amazon EKS](https://aws.amazon.com/eks/)!** 🚀
+[![plan-examples](https://github.com/awslabs/data-on-eks/actions/workflows/plan-examples.yml/badge.svg?branch=main)](https://github.com/awslabs/data-on-eks/actions/workflows/plan-examples.yml)
+
+### Build, Scale, and Optimize Data & AI/ML Platforms on [Amazon EKS](https://aws.amazon.com/eks/) 🚀
 
 Welcome to the **Data on EKS** repository, a comprehensive resource for scaling your data and machine learning workloads on Amazon EKS and unlocking the power of [Gen AI](https://aws.amazon.com/generative-ai/). Harness the capabilities of [AWS Trainium](https://aws.amazon.com/machine-learning/trainium/), [AWS Inferentia](https://aws.amazon.com/machine-learning/inferentia/) and [NVIDIA GPUs](https://aws.amazon.com/nvidia/) to scale and optimize your Gen AI workloads with ease.
 
@@ -33,21 +34,23 @@ Data on EKS(DoEKS) solution is categorized into the following focus areas.
 ## 🏃‍♀️Getting Started
 In this repository, you'll find a variety of deployment blueprints for creating Data/ML platforms with Amazon EKS clusters. These examples are just a small selection of the available blueprints - visit the [DoEKS website](https://awslabs.github.io/data-on-eks/) for the complete list of options.
 
-🚀 [EMR on EKS with Karpenter](https://awslabs.github.io/data-on-eks/docs/blueprints/amazon-emr-on-eks/emr-eks-karpenter) - 👈 Start here if you are new to EMR on EKS. This blueprint deploys EMR on EKS cluster and uses [Karpenter](https://karpenter.sh/) to scale Spark jobs.
+🚀 [JupyterHub on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/ai-ml/jupyterhub) 👈 This blueprint deploys a self-managed JupyterHub on EKS with Amazon Cognito authentication.
+
+🚀 [Ray on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/ai-ml/ray) 👈 This blueprint deploys Ray Operator on EKS with sample scripts.
+
+🚀 [Trainium/Inferentia with TorchX and Volcano on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/ai-ml/trainium) 👈 This blueprint deploys Gen AI blueprint on EKS with sample Training scripts.
 
-🚀 [Spark Operator with Apache YuniKorn on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/data-analytics/spark-operator-yunikorn) - This blueprint deploys EKS cluster and uses Spark Operator and Apache YuniKorn for running self-managed Spark jobs
+🚀 [EMR-on-EKS with Karpenter](https://awslabs.github.io/data-on-eks/docs/blueprints/amazon-emr-on-eks/emr-eks-karpenter)  👈 Start here if you are new to EMR on EKS. This blueprint deploys EMR on EKS cluster and uses [Karpenter](https://karpenter.sh/) to scale Spark jobs.
 
-🚀 [Ray on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/ai-ml/ray) - This blueprint deploys Ray Operator on EKS with sample scripts.
+🚀 [Spark Operator with Apache YuniKorn on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/data-analytics/spark-operator-yunikorn) 👈 This blueprint deploys EKS cluster and uses Spark Operator and Apache YuniKorn for running self-managed Spark jobs
 
-🚀 [Amazon Manged Workflows for Apache Airflow (MWAA)](https://awslabs.github.io/data-on-eks/docs/blueprints/job-schedulers/aws-managed-airflow) - This blueprint deploys EMR on EKS cluster and uses Amazon Managed Workflows for Apache Airflow (MWAA) to run Spark jobs.
+🚀 [Self-managed Airflow on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/job-schedulers/self-managed-airflow) 👈 This blueprint sets up a self-managed Apache Airflow on an Amazon EKS cluster, following best practices.
 
-🚀 [Self-managed Airflow on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/job-schedulers/self-managed-airflow) - This blueprint sets up a self-managed Apache Airflow on an Amazon EKS cluster, following best practices.
+🚀 [Argo Workflows on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/job-schedulers/argo-workflows-eks) 👈 This blueprint sets up a self-managed Argo Workflow on an Amazon EKS cluster, following best practices.
 
-🚀 [Argo Workflows on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/job-schedulers/argo-workflows-eks) - This blueprint sets up a self-managed Argo Workflow on an Amazon EKS cluster, following best practices.
+🚀 [Kafka on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/streaming-platforms/kafka) 👈 This blueprint deploys a self-managed Kafka on EKS using the popular Strimzi Kafka operator.
 
-🚀 [Kafka on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/streaming-platforms/kafka) - This blueprint deploys a self-managed Kafka on EKS using the popular Strimzi Kafka operator.
 
-🚀 [JupyterHub on EKS](https://awslabs.github.io/data-on-eks/docs/blueprints/ai-ml/jupyterhub) - This blueprint deploys a self-managed JupyterHub on EKS with Amazon Cognito authentication.
 
 ## 🗂️ Documentation
 For instructions on how to deploy Data on EKS patterns and run sample tests, visit the [DoEKS website](https://awslabs.github.io/data-on-eks/).

diff --git a/ai-ml/jupyterhub/helm-values/jupyterhub-values-dummy-cpu.yaml b/ai-ml/jupyterhub/helm-values/jupyterhub-values-dummy-cpu.yaml
@@ -44,4 +44,4 @@ singleuser:
     CHOWN_EXTRA: "/home/shared"
   uid: 0
   fsGid: 0
-  cmd: "start-singleuser.sh"
+  cmd: "start-singleuser.sh"
diff --git a/ai-ml/jupyterhub/jupyterhub.tf b/ai-ml/jupyterhub/jupyterhub.tf
@@ -277,4 +277,4 @@ resource "aws_cognito_user_pool_client" "user_pool_client" {
   ]
 
   depends_on = [aws_cognito_user_pool_domain.domain]
-}
+}
diff --git a/ai-ml/jupyterhub/variables.tf b/ai-ml/jupyterhub/variables.tf
@@ -64,4 +64,4 @@ variable "jupyterhub_domain" {
   type        = string
   description = "Enter sub-domain name for jupyterhub to be hosted,  e.g. eks.example.com. Only needed if auth mechanism is set to cognito"
   default     = ""
-}
+}
diff --git a/ai-ml/jupyterhub/versions.tf b/ai-ml/jupyterhub/versions.tf
@@ -18,5 +18,9 @@ terraform {
       source  = "gavinbunney/kubectl"
       version = ">= 1.14"
     }
+    random = {
+      source  = "hashicorp/random"
+      version = "3.1.0" # Replace with the appropriate version of the random provider
+    }
   }
 }
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {{onBrokenLinks: string, organizationName: string, plugins: string[], title: string, url: string, onBrokenMarkdownLinks: string, i18n: {defaultLocale: string, locales: string[]}, trailingSlash: boolean, baseUrl: string, presets: [string,Options][], githubHost: string, tagline: string, themeConfig: ThemeConfig & UserThemeConfig & AlgoliaThemeConfig, projectName: string}} */
 const config = {
   title: 'Data on EKS',
-  tagline: 'Supercharge your Data and Machine Learning Journey with Amazon EKS! 🚀',
+  tagline: 'Supercharge your Data and AI/ML Journey with Amazon EKS',
   url: 'https://awslabs.github.io',
   baseUrl: '/data-on-eks/',
   trailingSlash: false,

diff --git a/website/src/components/CollapsibleContent.js b/website/src/components/CollapsibleContent.js
@@ -1,29 +1,31 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styles from './CollapsibleContent.module.css';
 
-function CollapsibleContent({children, header}) {
-    const [isExpanded, setIsExpanded] = useState(false);
+function CollapsibleContent({ children, header }) {
+  const [isExpanded, setIsExpanded] = useState(false);
 
-    const toggleExpansion = () => {
-        setIsExpanded(!isExpanded);
-    };
+  const toggleExpansion = () => {
+    setIsExpanded(!isExpanded);
+  };
 
-    return (
-        <div className={styles.collapsibleContent}>
-            <div className={clsx(styles.header, {[styles.expanded]: isExpanded})} onClick={toggleExpansion}>
-                {header}
-                <span className={clsx(styles.icon, {[styles.expanded]: isExpanded})} />
-            </div>
-            {isExpanded && <div className={styles.content}>{children}</div>}
-        </div>
-    );
+  return (
+    <div className={styles.collapsibleContent}>
+      <div className={clsx(styles.header, { [styles.expanded]: isExpanded })} onClick={toggleExpansion}>
+        {header}
+        <span className={clsx(styles.icon, { [styles.expanded]: isExpanded })}>
+          {isExpanded ? '👇' : '👈'}
+        </span>
+      </div>
+      {isExpanded && <div className={styles.content}>{children}</div>}
+    </div>
+  );
 }
 
 CollapsibleContent.propTypes = {
-    children: PropTypes.node.isRequired,
-    header: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  header: PropTypes.node.isRequired,
 };
 
 export default CollapsibleContent;
diff --git a/website/src/components/CollapsibleContent.module.css b/website/src/components/CollapsibleContent.module.css
@@ -10,24 +10,32 @@
     padding: 1rem;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     font-size: 1.5rem;
     font-weight: bold;
 }
 
 .icon {
-    margin-left: auto;
-    width: 2rem;
-    height: 2rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.999 18.674l-7.406-7.406 1.413-1.414 5.993 5.993 5.993-5.993 1.413 1.414-7.406 7.406z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-size: contain;
+    font-size: 2.0rem; /* Increase the font size for a larger emoji */
     transition: transform 0.3s ease-in-out;
+    line-height: 1;
+    animation: blinkAnimation 1s infinite;
+}
+
+@keyframes blinkAnimation {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
 }
 
 .content {
     padding: 1rem;
 }
 
-.icon.expanded {
-    transform: rotate(180deg);
+.expanded .icon {
+    transform: scale(1.0);
+    animation: none;
 }
diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js
@@ -3,15 +3,15 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const FeatureList = [
-    {
-        title: 'Amazon EMR on EKS',
-        Svg: require('@site/static/img/green-emr.svg').default,
-        description: (
-            <>
-                Optimized Multi-Tenant Deployment of Amazon EMR on EKS Cluster with Best Practices using Karpenter Autoscaler and Apache YuniKorn Templates<br/>
-            </>
-        ),
-    },
+  {
+    title: 'AI/ML',
+    Svg: require('@site/static/img/green-ai.svg').default,
+    description: (
+      <>
+          Unlocking Best Practices for AI/ML Deployment on EKS with KubeFlow, JupyterHub, and More
+      </>
+    ),
+  },
   {
     title: 'Data Analytics',
     Svg: require('@site/static/img/green-da.svg').default,
@@ -22,33 +22,33 @@ const FeatureList = [
     ),
   },
   {
-    title: 'AI/ML',
-    Svg: require('@site/static/img/green-ai.svg').default,
+    title: 'Amazon EMR on EKS',
+    Svg: require('@site/static/img/green-emr.svg').default,
     description: (
-      <>
-          Unlocking Best Practices for AI/ML Deployment on EKS with KubeFlow, JupyterHub, and More
-      </>
+        <>
+            Optimized Multi-Tenant Deployment of Amazon EMR on EKS Cluster with Best Practices using Karpenter Autoscaler and Apache YuniKorn Templates<br/>
+        </>
     ),
   },
-    {
+  {
         title: 'Streaming Data Platforms',
         Svg: require('@site/static/img/green-stream.svg').default,
         description: (
             <>
                 Building High-Scalability Streaming Data Platforms with Kafka, Flink, Spark Streaming, and More
             </>
         ),
-    },
-    {
+  },
+  {
         title: 'Schedulers',
         Svg: require('@site/static/img/green-schd.svg').default,
         description: (
             <>
                 Optimizing Job Scheduling on EKS with Apache Airflow, Amazon MWAA, Argo Workflow, and More
             </>
         ),
-    },
-    {
+  },
+  {
         title: 'Distributed Databases & Query Engines',
         Svg: require('@site/static/img/green-dd.svg').default,
         description: (

diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -10,6 +10,29 @@
   color: var(--ifm-color-primary);
   height: 250px;
   width: 250px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.featureSvg:hover {
+  transform: scale(1.5); /* Zoom in slightly on hover */
+}
+
+/* Adding animation to feature items */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Apply animation to each feature item */
+.row .col {
+  animation: fadeInUp 0.5s ease forwards;
+  animation-delay: 0.3s;
 }
 
 .heading {

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -28,9 +28,19 @@ html[data-theme="dark"] {
   --ifm-background-color: #141520;
 }
 
+.hero__subtitle::after {
+  content: '🚀';
+  margin-left: 8px; /* Adjust the spacing between the tagline and the rocket */
+}
+
+/* Highlight navbar items on hover */
+.navbar__link:hover {
+  color: var(--ifm-color-primary); /* Change to your desired color */
+}
+
 .boldTagline {
   font-weight: bold;
-  /*font-family: 'Roboto Mono for Powerline', sans-serif;*/
+  /* font-family: 'Roboto Mono for Powerline', sans-serif; */
 }
 
 .button-3d {

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -6,24 +6,30 @@ import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 
-//TODO - fix code to get the correct theme to show the light-logo.png or dark-logo.png
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  // const currentTheme = document.documentElement.getAttribute('data-theme');
+  const { siteConfig } = useDocusaurusContext();
 
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container" style={{textAlign: 'center'}}>
-        <img src="img/light-logo.png" alt="Header image" style={{width: '45%'}}/>
-        {/*<img src={currentTheme === 'dark' ? 'img/dark-logo.png' : 'img/light-logo.png'} alt="Header image" style={{width: '45%'}}/>*/}
-          {/*<main className={styles.main}>*/}
-        {/*<h1 className="hero__title">{siteConfig.title}</h1>*/}
-          {/*</main>*/}
-          <p className='hero__subtitle' style={{fontSize: 18, fontSmooth: "auto", animation: "float 2s ease-in-out infinite"}}>{siteConfig.tagline}</p>
+      <div className="container" style={{ textAlign: 'center' }}>
+        <img
+          src="img/light-logo.png"
+          alt="Header image"
+          className={styles.logoImage} // Add this line
+        />
+        <p
+          className='hero__subtitle'
+          style={{
+            fontSize: 18,
+            fontSmooth: 'auto',
+            animation: 'float 2s ease-in-out infinite'
+          }}>
+          {siteConfig.tagline}
+        </p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg button-3d button-sparkles"
-            style={{padding: '0.5rem 1.5rem', fontSize: '0.9rem'}}
+            style={{ padding: '0.5rem 1.5rem', fontSize: '1.0rem' }}
             to="/docs/introduction/intro">
             Let's Spin Up
           </Link>
@@ -34,7 +40,7 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -1,8 +1,4 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
+/* Update the heroBanner class */
 .heroBanner {
   padding: 4rem 0;
   text-align: center;
@@ -11,6 +7,18 @@
   height: 500px;
 }
 
+/* Add styles for logo image */
+.logoImage {
+  width: 60%;
+  transition: transform 0.3s ease-in-out;
+}
+
+/* Apply zoom effect on hovering the logo image */
+.logoImage:hover {
+  transform: scale(1.1); /* Increase size on hover */
+}
+
+/* Rest of your existing CSS remains unchanged */
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 4rem;
-Original file line number
+Diff line change
@@ Expand Up @@
       ]
       depends_on = [aws_cognito_user_pool_domain.domain]
-    }
+    }