labs

Signed-off-by: Lee Calcote <[email protected]>
layer5io · Aug 12, 2023 · c14c19e · c14c19e
1 parent deaffe4
commit c14c19e
Show file tree

Hide file tree

Showing 19 changed files with 69 additions and 134 deletions.
diff --git a/src/assets/discuss/html/footer.html b/src/assets/discuss/html/footer.html
@@ -43,10 +43,10 @@
                        <h3 class="section-title"><a href="https://layer5.io/learn">RESOURCES</a></h3>
                        <h5 class="footer-h5"><a href="https://layer5.io/learn/learning-paths">Learning Paths</a></h5>
                        <h5 class="footer-h5"><a href="https://layer5.io/resources">Resource Library</a></h5>
-                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-books">Service Mesh Books</a></h5>
-                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-workshops">Service Mesh Workshops</a></h5>
+                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-books">Cloud Native Books</a></h5>
+                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-workshops">Cloud Native Workshops</a></h5>
                        <h5 class="footer-h5"><a href="https://layer5.io/service-mesh-landscape#service-mesh-comaprison-matrix">Service Mesh Comparison</a></h5>
-                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-labs">Service Mesh Interactive Labs</a></h5>
+                       <h5 class="footer-h5"><a href="https://layer5.io/learn/service-mesh-labs">Cloud Native Interactive Labs</a></h5>
                     </div>
                     <div class="even-col footer-sections footer-community">
                         <h3 class="section-title"><a href="https://layer5.io/community">COMMUNITY</a></h3>

diff --git a/src/collections/service-mesh-labs/meshery_performance_testing/index.mdx b/src/collections/service-mesh-labs/meshery_performance_testing/index.mdx
@@ -2,18 +2,8 @@
 title: "Running Performance Tests"
 ---
 
-<p>
-Sign into the Meshery Playground 
-</p>
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/performance-testing-with-meshery/running-performance-tests"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
+
diff --git a/src/collections/service-mesh-labs/traffic_splitting_with_meshery/index.mdx b/src/collections/service-mesh-labs/traffic_splitting_with_meshery/index.mdx
@@ -2,15 +2,7 @@
 title: "Traffic Splitting with Meshery"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/performance-testing-with-meshery/traffic-splitting"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_consul/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_consul/index.mdx
@@ -2,15 +2,7 @@
 title: "Working with Meshery and Consul"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/consul-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_istio/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_istio/index.mdx
@@ -2,15 +2,7 @@
 title: "Working with Meshery and Istio"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/istio-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_kuma/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_kuma/index.mdx
@@ -2,15 +2,7 @@
 title: "Working with Meshery and Kuma"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/kuma-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_linkerd/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_linkerd/index.mdx
@@ -2,15 +2,7 @@
 title: "Working with Meshery and Linkerd"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/linkerd-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
 
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_nsm/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_nsm/index.mdx
@@ -2,15 +2,6 @@
 title: "Working with Meshery and NSM"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/nsm-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
-
diff --git a/...lections/service-mesh-labs/working_with_meshery_and_open_service_mesh/index.mdx b/...lections/service-mesh-labs/working_with_meshery_and_open_service_mesh/index.mdx
@@ -2,14 +2,6 @@
 title: "Working with Meshery and Open Service Mesh"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/osm-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
-</div>
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
+</div>
diff --git a/src/collections/service-mesh-labs/working_with_meshery_and_traefik/index.mdx b/src/collections/service-mesh-labs/working_with_meshery_and_traefik/index.mdx
@@ -2,14 +2,6 @@
 title: "Working with Meshery and Traefik"
 ---
 
-<div id="katacoda-scenario"
-  data-katacoda-id="layer5/courses/meshery-adapters/traefik-meshery-adapter"
-  data-katacoda-startscenariobuttontext="Start Scenario"
-  data-katacoda-ctaurl="https://layer5.io/"
-  data-katacoda-color="#3C494F"
-  data-katacoda-secondary="#00b39f"
-  data-katacoda-background="#fff"
-  data-katacoda-hideprogress="true"
-  data-katacoda-font="Qanelas Soft"
-  data-katacoda-fontheader="Qanelas Soft">
+<div style="display:flex; justify-content:center; padding:2rem; width:100%; background-color:black;">
+Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
 </div>
diff --git a/src/components/ScenarioCard/ScenarioCard.style.js b/src/components/ScenarioCard/ScenarioCard.style.js
@@ -73,8 +73,15 @@ export const ScenarioCardWrapper = styled.div`
 		display: none;
 	}
 
+    .sub-content {
+        display:flex; 
+        justify-content:center; 
+        margin-top:4rem;
+        width:100%;
+    }
+
 	.active {
-		display: block;
+		display: blwock;
 		width: 100%;
 		height: 100%;
 		padding: 1.5rem;

diff --git a/src/components/ScenarioCard/index.js b/src/components/ScenarioCard/index.js
@@ -8,20 +8,20 @@ import { FaExternalLinkAlt } from "@react-icons/all-files/fa/FaExternalLinkAlt";
 
 const Card = ({ title, info, courseLink, link, cover, content, embed, subId, ID, toggleActive }) => {
 
-  const isScriptLoaded = (src) => {
-    return document.querySelector("script[src=\"" + src + "\"]") ? true : false;
-  };
+  // const isScriptLoaded = (src) => {
+  //   return document.querySelector("script[src=\"" + src + "\"]") ? true : false;
+  // };
 
-  React.useEffect(() => {
-    if (typeof window !== undefined && !isScriptLoaded("//katacoda.com/embed.js")) {
-      const script = document.createElement("script");
-      script.setAttribute("src", "//katacoda.com/embed.js");
-      document.body.appendChild(script);
-      return () => {
-        document.body.removeChild(script);
-      };
-    }
-  }, []);
+  // React.useEffect(() => {
+  //   if (typeof window !== undefined && !isScriptLoaded("//katacoda.com/embed.js" && false )) {
+  //     const script = document.createElement("script");
+  //     script.setAttribute("src", "//katacoda.com/embed.js");
+  //     // document.body.appendChild(script);
+  //     return () => {
+  //       document.body.removeChild(script);
+  //     };
+  //   }
+  // }, []);
 
   return (
     <ScenarioCardWrapper>
@@ -56,8 +56,11 @@ const Card = ({ title, info, courseLink, link, cover, content, embed, subId, ID,
         </Row>
         <Row>
           <Col xs={12} className={content && subId === ID ? "open-animate" : "close-animate"}>
+
             <div className={content && subId === ID ? "active" : "text-contents"}>
               <div className="sub-content">
+              Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
+                {/*
                 <div id="katacoda-scenario"
                   data-katacoda-id={`${courseLink}/${embed}`}
                   data-katacoda-startscenariobuttontext="Start Scenario"
@@ -68,7 +71,7 @@ const Card = ({ title, info, courseLink, link, cover, content, embed, subId, ID,
                   data-katacoda-hideprogress="true"
                   data-katacoda-font="Qanelas Soft"
                   data-katacoda-fontheader="Qanelas Soft" style={{ minHeight: "37rem" }}>
-                </div>
+                </div>*/}
               </div>
             </div>
           </Col>

diff --git a/src/pages/learn/service-mesh-labs.js b/src/pages/learn/service-mesh-labs.js
@@ -19,5 +19,5 @@ const ServiceMeshLabsPage = (props) => {
 };
 export default ServiceMeshLabsPage;
 export const Head = () => {
-  return <SEO title="Interactive DevOps, GitOps, and Cloud Native Labs" description="Learn to manage Kubernetes and Istio with experts from Layer5. Try an interactive service mesh lab." />;
+  return <SEO title="Interactive DevOps, GitOps, and Cloud Native Labs" description="Learn to manage Kubernetes, Prometheus, Meshery and all CNCF projects with experts from Layer5. Try an interactive cloud native lab." />;
 };
diff --git a/src/sections/Community/Handbook/learn5.js b/src/sections/Community/Handbook/learn5.js
@@ -31,11 +31,11 @@ const LearnLayer = () => {
             <p>As a community, we have put together an excellent set of learning materials and training resources to guide you through learning about cloud native infrastucture and service meshes.</p>
             <p>You can review the <Link to="/learn">complete list of learning resources</Link> or jump straight to the type of training you prefer:</p>
             <ul>
-              <li>Interactive <Link to="/learn/service-mesh-labs">service mesh labs</Link></li>
-              <li>Free <Link to="/learn/service-mesh-books">service mesh books</Link></li>
-              <li>Self-paced <Link to="/learn/service-mesh-workshops">service mesh workshops</Link></li>
+              <li>Interactive <Link to="/learn/service-mesh-labs">cloud native labs</Link></li>
+              <li>Free <Link to="/learn/service-mesh-books">cloud native books</Link></li>
+              <li>Self-paced <Link to="/learn/service-mesh-workshops">scloud nativeh workshops</Link></li>
               <li>Recorded training and talks on the <a href="https://www.youtube.com/c/Layer5io?sub_confirmation=1/playlists">Layer5 YouTube Channel</a></li>
-              <li>Multi-course, multi-mesh <Link to="/learn/learning-paths">service mesh learning paths</Link></li>
+              <li>Multi-course, multi-mesh <Link to="/learn/learning-paths">cloud native learning paths</Link></li>
             </ul>
             <p>
               These materials were created to be interactive, easy to use, and

diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js
@@ -141,7 +141,7 @@ export const repo_data = [
   },
 
   {
-    category: "Service Mesh Training",
+    category: "Cloud Native Training",
     subdata: [
       {
         project: "Service Mesh Labs",

diff --git a/src/sections/Learn/Lab-single/LabSinglePageWrapper.style.js b/src/sections/Learn/Lab-single/LabSinglePageWrapper.style.js
@@ -58,7 +58,7 @@ const LabSinglePageWrapper = styled.div`
 		margin: 0 5rem;
 	}
 	#katacoda-scenario {
-		min-height: 45rem;
+		min-height: 25rem;
 	}
 `;
 

diff --git a/src/sections/Learn/Lab-single/index.js b/src/sections/Learn/Lab-single/index.js
@@ -9,16 +9,16 @@ import Button from "../../../reusecore/Button";
 
 const LabSinglePage = ({ frontmatter, body }) => {
 
-  React.useEffect(() => {
-    if (typeof window !== undefined) {
-      const script = document.createElement("script");
-      script.setAttribute("src", "//katacoda.com/embed.js");
-      document.body.appendChild(script);
-      return () => {
-        document.body.removeChild(script);
-      };
-    }
-  }, []);
+  // React.useEffect(() => {
+  //   if (typeof window !== undefined) {
+  //     const script = document.createElement("script");
+  //     script.setAttribute("src", "//katacoda.com/embed.js");
+  //     document.body.appendChild(script);
+  //     return () => {
+  //       document.body.removeChild(script);
+  //     };
+  //   }
+  // }, []);
 
   return (
     <LabSinglePageWrapper>
@@ -36,7 +36,7 @@ const LabSinglePage = ({ frontmatter, body }) => {
       </div>
       <div className="join-community">
         <div className="join-community_text-and_button">
-          <h1>Use Service Mesh Patterns</h1>
+          <h1>Use Cloud Native Patterns</h1>
           <p>Service mesh patterns help you get the most out of any service mesh. Each pattern can be used as a template and is customizable.</p>
           <Button primary title="Visit Service Mesh Patterns website" url="https://service-mesh-patterns.github.io/service-mesh-patterns/" external={true} />
         </div>

diff --git a/src/sections/Learn/Service-Mesh-Labs/index.js b/src/sections/Learn/Service-Mesh-Labs/index.js
@@ -36,7 +36,7 @@ const ServiceMeshLabs = ({ selectedIndex, setSelectedIndex }) => {
 
   return (
     <LabsWrapper>
-      <PageHeader title="Learn how to service mesh" subtitle="with interactive labs" />
+      <PageHeader title="Learn how to manage Kubernetes" subtitle="with interactive labs" />
       <div className="Labs-section-wrapper">
         <Container>
           <Tabs className="course-tabs"

diff --git a/static/mail/books/the-enterprise-path-to-service-mesh-architectures.html b/static/mail/books/the-enterprise-path-to-service-mesh-architectures.html
@@ -765,9 +765,9 @@ <h1>2022 New Year's Resolutions</h1>
 
                             <p style="font-family: &quot;Qanelas Soft&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">We hope that you enjoy your free copy of <em>The Enterprise Path to Service Mesh Architectures (2nd Edition)</em>. There's more where this comes from.&nbsp;</p>
 
-<p style="font-family: &quot;Qanelas Soft&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">Choose from our free&nbsp;<a href="https://layer5.io/learn/learning-paths" target="_blank">learning paths</a>&nbsp;and&nbsp;<a href="https://layer5.io/learn/service-mesh-labs" target="_blank">interactive labs</a> on your way to service mesh certification as a MeshMaster. Be first to know of new <a href="https://layer5.io/workshops" target="_blank">workshops</a> and <a href="https://layer5.io/books" target="_blank">books</a> that will give you practical,&nbsp;real-world examples on how to use service meshes.<br>
+<p style="font-family: &quot;Qanelas Soft&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">Choose from our free&nbsp;<a href="https://layer5.io/learn/learning-paths" target="_blank">learning paths</a>&nbsp;and&nbsp;<a href="https://layer5.io/learn/service-mesh-labs" target="_blank">interactive labs</a> on your way to cloud native certification as a MeshMaster. Be first to know of new <a href="https://layer5.io/workshops" target="_blank">workshops</a> and <a href="https://layer5.io/books" target="_blank">books</a> that will give you practical,&nbsp;real-world examples on how to use cloud native infrasturcture.<br>
 <br>
-For the latest on happenings in the ecosystem, join the service mesh&nbsp;<a href="https://discuss.layer5.io" target="_blank">discussion forum</a>,&nbsp;community&nbsp;<a href="https://slack.layer5.io" target="_blank">Slack</a>&nbsp;or jump into any of the&nbsp;<a href="https://meet.layer5.io" target="_blank">community meetings</a>. <a href="https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA?sub_confirmation=1" target="_blank">Watch</a>&nbsp;and&nbsp;<a href="https://layer5.io/labs" target="_blank">learn&nbsp;how</a>&nbsp;to design and operate your cloud native infrastructure.</p>
+For the latest on happenings in the ecosystem, join the cloud native&nbsp;<a href="https://discuss.layer5.io" target="_blank">discussion forum</a>,&nbsp;community&nbsp;<a href="https://slack.layer5.io" target="_blank">Slack</a>&nbsp;or jump into any of the&nbsp;<a href="https://meet.layer5.io" target="_blank">community meetings</a>. <a href="https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA?sub_confirmation=1" target="_blank">Watch</a>&nbsp;and&nbsp;<a href="https://layer5.io/labs" target="_blank">learn&nbsp;how</a>&nbsp;to design and operate your cloud native infrastructure.</p>
 
                         </td>
                     </tr>