Merge branch 'master' into feat/news-source-url

Author: rishiraj38

README.md

@@ -176,7 +176,7 @@ alt="Learn Layer5" align="left" />
 </div>
 <br />
 <ul>
-  <li>Find us on Twitter: <a href="https://x.com/layer5">@layer5</a>, <a href="https://x.com/mesheryio">@mesheryio</a>, and <a href="https://x.com/kanvas-new">@kanvas-new</a>.</li>
+  <li>Find us on Twitter: <a href="https://x.com/layer5">@layer5</a>, <a href="https://x.com/mesheryio">@mesheryio</a>, and <a href="https://x.com/kanvas_new">@kanvas-new</a>.</li>
   <li>Visit us on LinkedIn: <a href="https://www.linkedin.com/company/layer5">Layer5</a>, <a href="https://www.linkedin.com/showcase/meshery/">Meshery</a>, and <a href="https://www.linkedin.com/showcase/kanvas-new">Kanvas</a>.</li>
   <li>Subscribe on <a href="https://www.youtube.com/Layer5io?sub_confirmation=1">Layer5 Youtube</a>, <a href="https://www.youtube.com/@mesheryio?sub_confirmation=1">Meshery Youtube</a></li>
 </ul>

package-lock.json

@@ -30,7 +30,7 @@
     "@emotion/is-prop-valid": "^1.4.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fullcalendar/core": "^6.1.19",
+    "@fullcalendar/core": "^6.1.20",
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/google-calendar": "^6.1.19",
     "@fullcalendar/interaction": "^6.1.19",
@@ -126,7 +126,7 @@
     "@babel/core": "^7.28.5",
     "@babel/eslint-parser": "^7.28.5",
     "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "baseline-browser-mapping": "^2.8.32",
     "cpx": "^1.5.0",
@@ -140,8 +140,8 @@
     "gatsby-plugin-eslint": "^4.0.4",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
     "gh-pages": "^6.0.0",
-    "globals": "^16.5.0",
-    "husky": "^8.0.3",
+    "globals": "^17.0.0",
+    "husky": "^9.1.7",
     "rimraf": "^6.1.2",
     "webpack-cli": "^6.0.1"
   }

package.json

@@ -104,6 +104,18 @@ components: [
 "colorIcon": "icons/components/couchbase-user/icons/color/couchbase-user-color.svg",
 "whiteIcon": "icons/components/couchbase-user/icons/white/couchbase-user-white.svg",
 "description": "",
+},
+{
+"name": "couchbase-encryption-key",
+"colorIcon": "icons/components/couchbase-encryption-key/icons/color/couchbase-encryption-key-color.svg",
+"whiteIcon": "icons/components/couchbase-encryption-key/icons/white/couchbase-encryption-key-white.svg",
+"description": "",
+},
+{
+"name": "couchbase-encryption-key",
+"colorIcon": "icons/components/couchbase-encryption-key/icons/color/couchbase-encryption-key-color.svg",
+"whiteIcon": "icons/components/couchbase-encryption-key/icons/white/couchbase-encryption-key-white.svg",
+"description": "",
 }]
 featureList: [
   "Automates Couchbase cluster deployment",

src/assets/images/meshery/meshery-dark-tag-text.webp

@@ -0,0 +1,13 @@
+---
+name: Himani Sahu
+position: Contributor
+image_path: ./himani-sahu.webp
+github: Siddhi-sahu
+linkedin: himani-sahu-922a2a303
+twitter: HimaniSahu67644
+layer5: 337a7dd1-2d26-48d6-bb28-26922e16d30d
+location: Noida, India
+bio: Hi! I’m Himani Sahu. When I’m not coding, I read and practice yoga.
+status: Active
+published: true
+---

src/collections/integrations/couchbase-operator/icons/components/couchbase-encryption-key/icons/color/couchbase-encryption-key-color.svg

@@ -1,36 +1,77 @@
-import React from "react";
+import React, {useLayoutEffect, useState, useRef}  from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
 import Card from "../Card";
 import RelatedPostsWrapper from "./relatedPosts.style";
 import { Col } from "../../reusecore/Layout";
 import Slider from "react-slick";
-import useHasMounted from "../../utils/useHasMounted";
 
 const RelatedPosts = props => {
+  const [isClient, setIsClient] = useState(false);
+  const [slidesToShowState, setSlidesToShowState] = useState(null);
+  const sliderRef = useRef(null);
 
   const { postType , relatedPosts , mainHead , lastCardHead , linkToAllItems } = props;
 
-  const hasMounted = useHasMounted();
+  const computeSlides = () => {
+    const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
+    if (w <= 600) return 1;
+    if (w <= 800) return 1.5;
+    if (w <= 1024) return 2;
+    if (w <= 1200) return 3;
+    return 3;
+  };
+
+  useLayoutEffect(() => {
+    setIsClient(true);
+    setSlidesToShowState(computeSlides());
+
+    let resizeTimeout = null;
+    const onResizeDebounced = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const slides = computeSlides();
+        setSlidesToShowState((prev) => {
+          if (prev !== slides) return slides;
+          return prev;
+        });
+        if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
+          sliderRef.current.innerSlider.onWindowResized();
+        }
+      }, 100);
+    };
+
+    window.addEventListener("resize", onResizeDebounced);
+    window.addEventListener("load", onResizeDebounced);
+
+    return () => {
+      window.removeEventListener("resize", onResizeDebounced);
+      window.removeEventListener("load", onResizeDebounced);
+      clearTimeout(resizeTimeout);
+    };
+  }, []);
+
+  const settings = {
+    dots: slidesToShowState < 2,
+    arrows: slidesToShowState >= 2,
+    infinite: false,
+    speed: 500,
+    slidesToShow: slidesToShowState,
+    slidesToScroll: 1,
+    swipe: true,
+    swipeToSlide: true,
+    touchThreshold: 10,
+  };
+
 
   return (
     <RelatedPostsWrapper>
       <div className="widgets-title">
         <h3>{mainHead}</h3>
       </div>
       {
-        hasMounted &&
-                <Slider
-                  dots= { window.innerWidth < 992 }
-                  arrows={ window.innerWidth >= 992 }
-                  infinite= {false}
-                  speed= "500"
-                  slidesToShow= {window.innerWidth <= 720 ? 1 : window.innerWidth <= 991 ? 2 : 3}
-                  slidesToScroll= {1}
-                  swipe={true}
-                  swipeToSlide={true}
-                  touchThreshold={10}
-                >
+        isClient &&
+                <Slider{...settings} ref={sliderRef} key={`review-slider-${slidesToShowState}`}>
                   {
                     postType === "blogs" ? relatedPosts.map((item) => {
                       const post = item.post || item;