Merge branch 'master' into internship

Author: vr-varad

onRenderBody.js

@@ -26,13 +26,14 @@ const MagicScriptTag = (props) => {
             }
           const root = document.documentElement;
           const iterate = (obj) => {
-              Object.keys(obj).forEach(key => {
-                 if (typeof obj[key] === 'object') {
-                      iterate(obj[key])
-                 } else {
-                   root.style.setProperty("--" + key, obj[key])
-                 }
-                 })
+            if (!obj) return;
+            Object.keys(obj).forEach(key => {
+              if (typeof obj[key] === 'object') {
+                iterate(obj[key])
+              } else {
+                root.style.setProperty("--" + key, obj[key])
+              }
+            })
           }
           const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
           const theme = parsedTheme[colorMode]

package-lock.json

@@ -35,14 +35,14 @@
     "@fullcalendar/interaction": "^6.0.1",
     "@fullcalendar/react": "^6.1.8",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@sistent/sistent": "^0.14.201",
     "@loadable/component": "^5.16.4",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@mediacurrent/gatsby-plugin-silence-css-order-warning": "^1.0.0",
     "@mui/icons-material": "^6.4.6",
     "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
+    "@sistent/sistent": "^0.14.219",
     "@svgr/webpack": "^8.0.1",
     "@types/mui-datatables": "^4.3.12",
     "ajv": "^8.17.1",

package.json

@@ -26,6 +26,12 @@ components: [
 "colorIcon": "icons/components/metric-alarm/icons/color/metric-alarm-color.svg",
 "whiteIcon": "icons/components/metric-alarm/icons/white/metric-alarm-white.svg",
 "description": "",
+},
+{
+"name": "metric-stream",
+"colorIcon": "icons/components/metric-stream/icons/color/metric-stream-color.svg",
+"whiteIcon": "icons/components/metric-stream/icons/white/metric-stream-white.svg",
+"description": "",
 }]
 featureList: [
   "Provides you with data and actionable insights to monitor your applications, respond to system-wide performance changes, and optimize resource utilization.",

src/collections/integrations/aws-cloudwatch-controller/icons/components/metric-stream/icons/color/metric-stream-color.svg

@@ -42,6 +42,15 @@ const TOCWrapper = styled.div`
     margin-bottom: 1rem;
   }
 
+  .toc-list {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+    max-height: 530px;
+    position: sticky;
+    z-index: 1000;
+  }
+
   .toc-sub-heading {
     color: ${(props) => props.theme.text};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

src/collections/integrations/aws-cloudwatch-controller/icons/components/metric-stream/icons/white/metric-stream-white.svg

@@ -1,4 +1,3 @@
-
 import React from "react";
 import Slider from "react-slick";
 import styled from "styled-components";
@@ -7,25 +6,19 @@ import ChallangePNG from "./images/challange_mac.png";
 import DesignPNG from "./images/design_mac.png";
 import TutorialPNG from "./images/tutorial_mac.png";
 
-
 const PictureSliderWrapper = styled.div`
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  text-align:center;
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  text-align: center;
 
   .slick-slider {
     margin-top: 1rem;
-    height:100%;
-    width: 100%;
 
-    .slick-list{
-      width:100%;
-    }
-    @media (max-width: 36rem) {
-        margin: .5rem auto;
-        max-width: 100%;
+    .slick-list {
+      width: 100%;
     }
+
     .slick-prev,
     .slick-next {
       &:before {
@@ -39,30 +32,63 @@ const PictureSliderWrapper = styled.div`
 
     .slick-slide {
       display: flex;
-      height: auto;
       align-items: center;
       justify-content: center;
+
+      img {
+        width: 100%;
+        max-height: 500px;
+        object-fit: contain;
+      }
+    }
+  }
+
+  @media (max-width: 850px) {
+    .slick-prev,
+    .slick-next {
+      display: none ;
     }
   }
 `;
 
 const PictureSlider = () => {
   const data = [ChallangePNG, TutorialPNG, DesignPNG];
+
   const settings = {
     dots: false,
     infinite: true,
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
     autoplay: true,
-    autoplaySpeed: 2000
+    autoplaySpeed: 2000,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          arrows: false,
+          autoplay: true,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          arrows: false,
+          autoplay: true,
+        },
+      },
+    ],
   };
 
   return (
     <PictureSliderWrapper>
       <Slider {...settings}>
         {data.map((image, index) => (
-          <img key={index} src={image} alt="content" />
+          <img key={index} src={image} alt={`slide-${index}`} />
         ))}
       </Slider>
     </PictureSliderWrapper>

src/collections/integrations/aws-cloudwatch-controller/index.mdx

@@ -16,6 +16,7 @@ import LogStream from "./images/log-stream.svg";
 import LogStreamSearch from "./images/log-stream-search.svg";
 import { useState } from "react";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
+import DocsIcon from "../../Pricing/icons/docs.js";
 
 const VisualizerFeaturesWrapper = styled.div`
 
@@ -120,7 +121,7 @@ z-index: 10;
       transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
       /* transition: transform 1s ease-in-out 0.2s; */
     }
-`;
+  }`;
 
 const KanvasisualizerFeatures = () => {
   const [isHovered, setisHovered] = useState(false);
@@ -163,14 +164,17 @@ const KanvasisualizerFeatures = () => {
             </div>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
+          <a href="https://docs.layer5.io/kanvas/operator/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
             <div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
                 <img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
                 <img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
               </div>
               <h3>Interactive Terminal</h3>
               <p>Establish sessions with one or more pods at a time.</p>
+              <DocsIcon style={{ position: 'absolute', top: '16px', right: '16px', color: '#00D3A9' }} className="docs" />
             </div>
+          </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut}>

src/components/SistentNavigation/toc.style.js

@@ -1183,36 +1183,100 @@
     },
     "docs": ""
   },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "Academy",
+    "functionOrder": "",
+    "function": "Academy",
+    "feature": "Building, managing, and extending Layer5 Academy learning paths.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/academy/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "Academy",
+    "functionOrder": "",
+    "function": "Content Creator Guide",
+    "feature": "Learn how to create, manage, and publish learning paths, challenges, and certifications on the Layer5 Academy platform.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/academy/creating-content/"
+  },
   {
     "theme": "",
     "categoryOrder": "",
     "category": "Academy",
     "functionOrder": "",
     "function": "Extending the Academy",
-    "feature": "High-level guide to the Academy architecture and workflow",
+    "feature": "A high-level guide to understanding the architecture, features, and workflow for creating custom content on the Layer5 Academy platform.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/academy/creating-content/extending-the-academy/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "Academy",
+    "functionOrder": "",
+    "function": "Creating Your First Learning Path",
+    "feature": "A hands-on tutorial that walks you through creating, structuring, and testing a custom learning path for the Layer5 Academy.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/academy/creating-content/creating-your-learning-path/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "Academy",
+    "functionOrder": "",
+    "function": "Integrating Assessments in the Academy",
+    "feature": "Learn how to spice up the Academy with interactive assessments that keep learners engaged.",
     "subscription_tier": "Enterprise",
     "comparison_tiers": {
       "free": "",
       "teamDesigner": "",
       "teamOperator": "",
       "enterprise": "x"
     },
-    "docs": "https://docs.layer5.io/cloud/academy/extending-the-academy/"
+    "docs": "https://docs.layer5.io/cloud/academy/creating-content/integrating-assessments-in-the-academy/"
   },
   {
     "theme": "",
     "categoryOrder": "",
     "category": "Academy",
     "functionOrder": "",
-    "function": "Creating a Learning Path",
-    "feature": "Step-by-step tutorial for creating custom learning paths",
+    "function": "Building Certifications",
+    "feature": "A step-by-step guide to building a professional certification in the Academy.",
     "subscription_tier": "Enterprise",
     "comparison_tiers": {
       "free": "",
       "teamDesigner": "",
       "teamOperator": "",
       "enterprise": "x"
     },
-    "docs": "https://docs.layer5.io/cloud/academy/creating-your-learning-path/"
+    "docs": "https://docs.layer5.io/cloud/academy/creating-content/building-certifications/"
   }
 ]