fix build error

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

src/collections/blog/2020/2020-08-11-20-learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/index.mdx

@@ -13,8 +13,6 @@ tags:
  - Envoy
  - Consul
 published: false
-redirect_from:
- - /blog/webassembly/learn-how-to-write-wasm-filters-for-envoy-in-rust-and-deploy-with-consul/
 ---
 
 import { BlogWrapper } from "../../Blog.style.js";

src/sections/Learn-Layer5/Chapters/index.js

@@ -10,67 +10,81 @@ import { Tooltip } from "react-tooltip";
 import Pagination from "../../../components/Learn-Components/Pagination";
 import QuizModal from "../../../components/Learn-Components/QuizModal";
 
-const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCData, children }) => {
-
+const Chapters = ({
+  chapterData,
+  courseData,
+  location,
+  serviceMeshesList,
+  TOCData,
+  children,
+}) => {
   const { frontmatter } = chapterData;
   const [showQuizModal, setShowQuizModal] = useState(false);
 
   const serviceMeshImages = courseData.frontmatter.meshesYouLearn || [];
-  const tableOfContents = TOCData
-    .filter(node => !!node.fields.section)
-    .map(toc => ({ section: toc.fields.section, chapter: toc.fields.chapter }));
-
+  const tableOfContents = TOCData.filter((node) => !!node.fields.section).map(
+    (toc) => ({ section: toc.fields.section, chapter: toc.fields.chapter }),
+  );
 
   const replaceSlugPart = (index) => (oldSlug) => (replacement) => {
     let parts = oldSlug.split("/");
     parts[index] = replacement;
     return parts.join("/");
   };
   const replaceServiceMeshInSlug = replaceSlugPart(4)(chapterData.fields.slug);
-  const replaceChapterInSlug = (slugWithReplacedMesh) => replaceSlugPart(5)(slugWithReplacedMesh);
+  const replaceChapterInSlug = (slugWithReplacedMesh) =>
+    replaceSlugPart(5)(slugWithReplacedMesh);
 
   useEffect(() => {
-
     let bookmarkPath = location.pathname;
     if (bookmarkPath.endsWith(".html")) {
       bookmarkPath = bookmarkPath.replace(".html", "");
     }
-    localStorage.setItem(`bookmarkpath-${location.pathname.split("/")[4]}`, bookmarkPath);
+    localStorage.setItem(
+      `bookmarkpath-${location.pathname.split("/")[4]}`,
+      bookmarkPath,
+    );
   }, []);
 
   const isMeshActive = (sm) => chapterData.fields.slug.split("/")[4] === sm;
 
   const mapMeshWithFormattedSlug = (sm, serviceMeshes) => {
     let chapterFound = false;
-    tableOfContents.forEach(toc => {
+    tableOfContents.forEach((toc) => {
       if (toc.section === sm.fields.section) {
-        if (toc.chapter === chapterData.fields.slug.split("/")[5]) chapterFound = true;
+        if (toc.chapter === chapterData.fields.slug.split("/")[5])
+          chapterFound = true;
       }
     });
 
-    if (!serviceMeshes.map(sm => sm.section).includes(sm.fields.section))
+    if (!serviceMeshes.map((sm) => sm.section).includes(sm.fields.section))
       serviceMeshes.push({
-        section: sm.fields.section, slug: chapterFound ?
-          replaceServiceMeshInSlug(sm.fields.section)
-          : replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(tableOfContents[0].chapter)
+        section: sm.fields.section,
+        slug: chapterFound
+          ? replaceServiceMeshInSlug(sm.fields.section)
+          : replaceChapterInSlug(replaceServiceMeshInSlug(sm.fields.section))(
+              tableOfContents[0].chapter,
+            ),
       });
-
   };
 
   const getAvailableServiceMeshes = () => {
     let serviceMeshes = [];
-    serviceMeshesList.forEach(sm => {
+    serviceMeshesList.forEach((sm) => {
       mapMeshWithFormattedSlug(sm, serviceMeshes);
     });
 
     return serviceMeshes;
   };
   const availableServiceMeshesArray = getAvailableServiceMeshes();
 
-  const findServiceMeshImage = (images, serviceMesh) => images.find(image => image.name.toLowerCase() == serviceMesh);
+  const findServiceMeshImage = (images, serviceMesh) =>
+    images.find((image) => image.name.toLowerCase() == serviceMesh);
   const hasMeshImageData = (meshImage) => {
     const imagePath = meshImage?.imagepath;
-    return Boolean(imagePath?.childImageSharp?.gatsbyImageData || imagePath?.publicURL);
+    return Boolean(
+      imagePath?.childImageSharp?.gatsbyImageData || imagePath?.publicURL,
+    );
   };
   const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 
@@ -81,74 +95,102 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
     })
     .map(({ section }) => section);
 
-  if (missingServiceMeshImages.length > 0) {
+  if (
+    process.env.NODE_ENV === "development" &&
+    missingServiceMeshImages.length > 0
+  ) {
     const context = chapterData?.fields?.slug || "unknown-chapter";
-    throw new Error(`[Chapters] Missing meshesYouLearn image data for: ${missingServiceMeshImages.join(", ")} (chapter: ${context}).`);
+    console.warn(
+      `[Chapters] Missing meshesYouLearn image data for: ${missingServiceMeshImages.join(", ")} (chapter: ${context}).`,
+    );
   }
 
-  const ServiceMeshesAvailable = ({ serviceMeshes }) => serviceMeshes.map((sm, index) => {
-    const meshImage = findServiceMeshImage(serviceMeshImages, sm.section);
+  const availableServiceMeshesWithImages = availableServiceMeshesArray.filter(
+    ({ section }) => {
+      const meshImage = findServiceMeshImage(serviceMeshImages, section);
+      return hasMeshImageData(meshImage);
+    },
+  );
 
-    if (!meshImage?.imagepath) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn(`[Chapters] Missing meshesYouLearn image data for: ${sm.section} (chapter: ${chapterData.fields.slug})`);
+  const ServiceMeshesAvailable = ({ serviceMeshes }) =>
+    serviceMeshes.map((sm, index) => {
+      const meshImage = findServiceMeshImage(serviceMeshImages, sm.section);
+
+      if (!hasMeshImageData(meshImage)) {
+        return null;
       }
-      return null;
-    }
 
-    return (
-      <React.Fragment key={sm.section || index}>
-        <div className={`service-mesh-image ${isMeshActive(sm.section) ? "service-mesh-image-active" : ""}`}>
-          <Link to={`/${sm.slug}`} data-tooltip-id="mesh-name" data-tooltip-content={capitalize(sm.section)} className="course" key={index}>
-            <Image
-              {...meshImage.imagepath}
-              className="docker"
-              alt={sm.section}
-            />
-          </Link>
-        </div>
-        <Tooltip
-          id="mesh-name"
-          place="bottom"
-
-          style={{ backgroundColor: "rgb(60,73,79)" }}
-          className="mesh-tooltip"
-        />
-      </React.Fragment>);
-  });
+      return (
+        <React.Fragment key={sm.section || index}>
+          <div
+            className={`service-mesh-image ${isMeshActive(sm.section) ? "service-mesh-image-active" : ""}`}
+          >
+            <Link
+              to={`/${sm.slug}`}
+              data-tooltip-id="mesh-name"
+              data-tooltip-content={capitalize(sm.section)}
+              className="course"
+              key={index}
+            >
+              <Image
+                {...meshImage.imagepath}
+                className="docker"
+                alt={sm.section}
+              />
+            </Link>
+          </div>
+          <Tooltip
+            id="mesh-name"
+            place="bottom"
+            style={{ backgroundColor: "rgb(60,73,79)" }}
+            className="mesh-tooltip"
+          />
+        </React.Fragment>
+      );
+    });
 
   if (showQuizModal) {
     return <QuizModal />;
   }
 
-
   return (
     <ChapterWrapper>
       <Container className="chapter-container">
         <Row>
           <Col $sm={12} $md={3}>
             <div className="toc-switcher-parent-div">
-              <TOC courseData={courseData} TOCData={TOCData} chapterData={chapterData} location={location} />
+              <TOC
+                courseData={courseData}
+                TOCData={TOCData}
+                chapterData={chapterData}
+                location={location}
+              />
               <div>
-                {serviceMeshImages.length !== 0 && availableServiceMeshesArray.length != 0 && (
-                  <>
-                    <h4>Technologies Available</h4>
-                    <div className="service-mesh-switcher">
-                      <ServiceMeshesAvailable serviceMeshes={availableServiceMeshesArray} />
-                    </div>
-                  </>
-                )}
+                {serviceMeshImages.length !== 0 &&
+                  availableServiceMeshesWithImages.length != 0 && (
+                    <>
+                      <h4>Technologies Available</h4>
+                      <div className="service-mesh-switcher">
+                        <ServiceMeshesAvailable
+                          serviceMeshes={availableServiceMeshesWithImages}
+                        />
+                      </div>
+                    </>
+                  )}
               </div>
             </div>
           </Col>
           <Col $sm={12} $md={9}>
             <div className="chapter-data">
               <h1 className="chapter-heading">{frontmatter.chapterTitle}</h1>
-              <SRLWrapper>
-                {children}
-              </SRLWrapper>
+              <SRLWrapper>{children}</SRLWrapper>
             </div>
-            <Pagination TOCData={TOCData} chapterData={chapterData} location={location} showQuizModal={() => setShowQuizModal(true)} />
+            <Pagination
+              TOCData={TOCData}
+              chapterData={chapterData}
+              location={location}
+              showQuizModal={() => setShowQuizModal(true)}
+            />
           </Col>
         </Row>
       </Container>