Merge branch 'master' into replace-learnservicemeshcta-with-kanvascta

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.15.0",
     "@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

@@ -63,6 +63,47 @@ Layer5 is all about <Link to="/community">its community</Link> of contributors.
 
 Technical writers and other contributors are what comprise Layer5 - an open organization, built by the community for the community. Our vibrant community has seen many talented student contributors go on to secure exciting job opportunities with renowned technology companies such as Red Hat, Microsoft, and VMware, just to name a few. At Layer5, we have high expectations from our interns, and in return, we provide them with incredible opportunities to showcase their work on prestigious stages like DockerCon and KubeCon. We actively promote and uplift our interns, and many of them have gone on to become project maintainers. There are <a href="https://www.linkedin.com/company/layer5" rel="nofollow">many</a>, <Link to="https://layer5.io/blog/category/community">many examples</Link> of this on the layer5.io websites.
 
+## LFX Mentorship 2025 Fall Projects
+<br />
+
+### Meshery
+<br />
+
+#### Meshery: Solutions architecture for cloud-native deployments
+
+**Description**: Learning paths with hands-on labs are a crucial resource for DevOps engineers and cloud-native practitioners. The Meshery Playground provides a live cluster environment, making it an ideal platform for learning every kind of cloud and cloud native technology. Meshery Docs is in need of comprehensive tutorials and scenarios covering common infrastructure management use cases. Mission is to create and publish a series of hands-on tutorials using Meshery Playground. Each tutorial will include step-by-step guides, live demonstrations, and interactive labs using the Playground allowing learners to apply their knowledge directly without the hassle of any configuration.These tutorials will be reviewed by various project maintainers and then published in guides/tutorials.
+- Expected Outcome: 
+  - 10+ new solution architectures (designs) published in Meshery Catalog
+  - Each design is ideally adjoined with an interactive tutorial (using Meshery Playground), guiding users through infrastructure.
+  - Tutorials should vary in complexity, catering to beginners and advanced learners.
+- Recommended written English, Markdown, Kubernetes, DevOps, and hands-on experience with cloud-native tools
+- Mentor(s): <Link to="/community/members/lee-calcote">Lee Calcote</Link>, <Link to ="">Rian Cteulp</Link>, <Link to ="/community/members/sangram-rath">Sangram Rath</Link>
+- Upstream Issue: https://github.com/meshery/meshery/issues/15532
+- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/a183c51e-22c6-473b-93f4-6c286993e435
+
+#### Meshery: Relationships for AWS services
+
+**Description**: Meshery Models are declarative representations of infrastructure and applications. Within these models, Relationships define how different Components (e.g., Kubernetes resources, Cloud services) interact and depend on each other. These relationships are crucial for visualizing, understanding, and managing complex cloud native systems.
+<br />
+This internship focuses on significantly expanding the breadth and depth of Meshery Relationships across a wide array of technologies supported by Meshery. As Meshery continues to integrate with more cloud-native technologies (Kubernetes, public clouds, and all CNCF projects), there's a growing need to accurately model the intricate relationships between their components - vital for providing users with comprehensive insights and control over their deployments.
+- Expected Outcome:
+  - A multitude of new relationships defined both intra and inter AWS services.
+  - Policy Contribution: For advanced interns, there may be opportunities to contribute to the Rego policies that evaluate and enforce these relationships.
+- Recommended Skills:DevOps, systems administration, solutions architecture. Experience with Kubernetes, AWS and its services.
+- Mentor(s): <Link to="/community/members/lee-calcote">Lee Calcote</Link>, <Link to ="/community/members/sangram-rath">Sangram Rath</Link>, <Link to ="community/members/mia-grenell">Mia Grenell</Link>
+- Upstream Issue: https://github.com/meshery/meshery/issues/15531
+- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/ed9d4af5-823a-4127-afdf-643c2b623f22
+
+#### Meshery: Relationships for GCP services
+
+**Description**: Meshery Models are declarative representations of infrastructure and applications. Within these models, Relationships define how different Components (e.g., Kubernetes resources, Cloud services) interact and depend on each other. These relationships are crucial for visualizing, understanding, and managing complex cloud native systems.
+- Expected Outcome: 
+  - A multitude of new relationships defined both intra and inter GCP services.
+  - Policy Contribution: For advanced interns, there may be opportunities to contribute to the Rego policies that evaluate and enforce these relationships.
+- Recommended Skills:DevOps, systems administration, solutions architecture. Experience with Kubernetes, GCP and its services.
+- Mentor(s): <Link to="/community/members/lee-calcote">Lee Calcote</Link>, <Link to ="">James Horton</Link>
+- Upstream Issue: https://github.com/meshery/meshery/issues/15531
+- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/ed9d4af5-823a-4127-afdf-643c2b623f22
 
 ## LFX Mentorship 2025 Spring Projects
 <br />

src/collections/integrations/aws-cloudwatch-controller/icons/components/metric-stream/icons/white/metric-stream-white.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/index.mdx

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-
 export default function HTML(props) {
   return (
     <html lang="en" {...props.htmlAttributes}>
@@ -24,20 +23,45 @@ export default function HTML(props) {
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>
-        <script dangerouslySetInnerHTML={{
-          __html:
-            `(function() {
-							try {
-                var banner = sessionStorage.getItem('banner');
-                if (banner === null)
-                  document.body.classList.add('banner1');
-                else
-                  document.body.classList.add('banner' + banner);
-							} catch (e) {
-								return;
-							}
-					})();`,
-        }}
+        {/* Script for theme initialization - needs to run before React renders to prevent flicker */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  // Theme initialization
+                  const darkThemeKey = 'theme';
+                  let initialTheme = 'system';
+                  try {
+                    initialTheme = localStorage.getItem(darkThemeKey) || 'system';
+                  } catch (e) {}
+                  
+                  // Determine initial dark mode
+                  let isDarkMode = false;
+                  if (initialTheme === 'dark') {
+                    isDarkMode = true;
+                  } else if (initialTheme === 'system') {
+                    isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  }
+                  
+                  // Set initial color mode
+                  document.documentElement.style.setProperty(
+                    '--initial-color-mode',
+                    isDarkMode ? 'dark' : 'light'
+                  );
+                  
+                  // Banner initialization
+                  var banner = sessionStorage.getItem('banner');
+                  if (banner === null)
+                    document.body.classList.add('banner1');
+                  else
+                    document.body.classList.add('banner' + banner);
+                } catch (e) {
+                  console.error('Error in theme initialization:', e);
+                }
+              })();
+            `,
+          }}
         />
         {props.preBodyComponents}
         <div