resolve theme conditionals for frontmatter thumbs

Signed-off-by: Randy Lau <[email protected]>

Author: randychilau

context-wrapper.js

@@ -2,13 +2,11 @@ import React from "react";
 import { StyledThemeProvider } from "./src/theme/app/StyledThemeProvider";
 import { ThemeManagerProvider } from "./src/theme/app/ThemeManager";
 import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
-import { GlobalStyle } from "./src/sections/app.style";
 
 export const ContextWrapper = ({ children }) => {
   return (
     <ThemeManagerProvider>
       <StyledThemeProvider lightTheme={lighttheme} darkTheme={darktheme}>
-        <GlobalStyle />
         {children}
       </StyledThemeProvider>
     </ThemeManagerProvider>

src/components/Card/Card.style.js

@@ -6,7 +6,7 @@ export const CardWrapper = styled.div`
         border-radius: 0.5rem;
         background-Color:${props => props.theme.grey212121ToWhite};
         box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
-        transition: all 0.3s ease-in;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
         &:hover{
             box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne};
             .post-thumb-block{

src/components/Card/index.js

@@ -9,14 +9,14 @@ import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 const Card = ({ frontmatter, fields }) => {
 
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   return (
     <CardWrapper fixed={!!frontmatter.abstract}>
       <div className="post-block">
         <div className="post-thumb-block">
           <Image
-            {...(theme === "dark" ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
+            {...((isDark && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL)
+              ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
             imgStyle={{ objectFit: "contain" }}
             alt={frontmatter.title}
           />

src/components/blog-view-tooltip.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Row } from "../reusecore/Layout";
 import { TiThList } from "@react-icons/all-files/ti/TiThList";
 import { BsGrid3X3GapFill } from "@react-icons/all-files/bs/BsGrid3X3GapFill";
@@ -36,43 +36,59 @@ export const ToolTipWrapper = styled.div`
 `;
 
 const BlogViewToolTip = ({ isListView, setListView, setGridView }) => {
+
+  const NoSsr = ({ children }) => {
+    const [isMounted, setMount] = useState(false);
+
+    useEffect(() => {
+      setMount(true);
+    }, []);
+
+    return <>{isMounted ? children : null}</>;
+  };
+
   return (
     <ToolTipWrapper>
       <Row className="border">
         <a
           data-tip="Grid View"
           data-for="grid-view"
           onClick={setGridView}
-          className={`${isListView ? "" : "active"}`}
+          className={`${!isListView && "active"}`}
         >
           <BsGrid3X3GapFill size={22} />
         </a>
-        <ReactTooltip
-          id="grid-view"
-          border
-          className="grid-view"
-          backgroundColor="black"
-          place="top"
-          effect="solid"
-        />
+        <NoSsr>
+          <ReactTooltip
+            id="grid-view"
+            border
+            className="grid-view"
+            backgroundColor="black"
+            place="top"
+            effect="solid"
+          />
+        </NoSsr>
         <a
           data-tip="List View"
           data-for="list-view"
           onClick={setListView}
-          className={`${isListView ? "active" : ""}`}
+          className={`${isListView && "active"}`}
         >
           <TiThList size={22} />
         </a>
-        <ReactTooltip
-          id="list-view"
-          className="list-view"
-          backgroundColor="black"
-          place="top"
-          type="dark"
-          effect="solid"
-        />
+        <NoSsr>
+          <ReactTooltip
+            id="list-view"
+            className="list-view"
+            backgroundColor="black"
+            place="top"
+            type="dark"
+            effect="solid"
+          />
+        </NoSsr>
       </Row>
     </ToolTipWrapper>
+
   );
 };
 

src/components/image.js

@@ -1,17 +1,18 @@
 import React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
 
-
 const Image = ({ childImageSharp, extension, publicURL, alt, ...rest }) => {
+
   if (!childImageSharp && extension === "svg") {
     return (
       <div className="old-gatsby-image-wrapper">
         <img src={publicURL} alt={alt} />
       </div>
     );
-  } else {
-    return <GatsbyImage image={childImageSharp.gatsbyImageData} {...rest} alt={alt} />;
   }
+
+  return <GatsbyImage
+    key={publicURL} image={childImageSharp.gatsbyImageData} {...rest} alt={alt}/>;
 };
 
 export default Image;

src/components/layout.js

@@ -12,11 +12,13 @@ import PropTypes from "prop-types";
 import ScrollToTopBtn from "./Scrolltotop-button";
 import Navigation from "../sections/General/Navigation";
 import Footer from "../sections/General/Footer";
+import { GlobalStyle } from "../sections/app.style";
 
 const Layout = ({ children }) => {
 
   return (
     <>
+      <GlobalStyle />
       <Navigation/>
       {children}
       <ScrollToTopBtn />

src/pages/blog/index.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react";
-
 import SEO from "../../components/seo";
 import BlogGrid from "../../sections/Blog/Blog-grid";
-
 import { graphql } from "gatsby";
 import loadable from "@loadable/component";
 const BlogList = loadable(() => import ("../../sections/Blog/Blog-list"));
+
 export const query = graphql`
   query allBlogs {
     allMdx(
@@ -44,6 +43,7 @@ export const query = graphql`
     }
   }
 `;
+
 const Blog = (props) => {
   const [isListView, setIsListView] = useState(false);
   const setListView = () => {

src/sections/Blog/Blog-grid/index.js

@@ -64,7 +64,7 @@ const BlogGrid = ({
 
                   {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }) => (
                     <Col key={id} xs={12} sm={6}>
-                      <Card  frontmatter={frontmatter} fields={fields} />
+                      <Card frontmatter={frontmatter} fields={fields} />
                     </Col>
                   ))}
                   <Col>

src/sections/Blog/Blog-single/index.js

@@ -92,7 +92,6 @@ const BlogSingle = ({ data }) => {
 
   const [copied, setCopied] = useState(false);
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   useEffect(() => {
     if (copied) {
@@ -116,10 +115,9 @@ const BlogSingle = ({ data }) => {
             subtitle={frontmatter.subtitle}
             category={frontmatter.category}
             author={{ name: frontmatter.author }}
-            thumbnail={(theme === "dark" ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
+            thumbnail={(isDark ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
             darkthumbnail={frontmatter.thumbnail}
             date={frontmatter.date}
-
           />
           <div className="single-post-wrapper">
             <SRLWrapper>

src/sections/Careers/Careers-Programs-grid/index.js

@@ -46,7 +46,6 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
   let path = hide_path ? "" : "Programs";
   let programsArray = [];
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   const programs = data.allMdx.nodes.filter((item) => {
     if (programsArray.indexOf(item.frontmatter.program) >= 0) {
@@ -76,7 +75,7 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
                     <div className={`program ${sub_section ? "sub-section_program" : ""}`}>
                       <div className={`icon ${sub_section ? "sub-section_icon" : ""}`}>
                         <Image
-                          {...(frontmatter.darkthumbnail !== null && theme === "dark" ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
+                          {...(frontmatter.darkthumbnail !== null && isDark ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
                           imgStyle={{ objectFit: "contain" }}
                           alt={frontmatter.title}
                         />

src/sections/General/Navigation/utility/ScrollspyMenu.js

@@ -12,15 +12,17 @@ import SupportingArrows from "../../../../sections/Meshmap/Meshmap-collaborate/i
 import EmptyLight from "../../../../sections/Meshmap/Meshmap-collaborate/images/banner-transitions/empty-light.svg";
 import EmptyDark from "../../../../sections/Meshmap/Meshmap-collaborate/images/banner-transitions/empty-dark.svg";
 import { useInView } from "react-intersection-observer";
+import { useStyledDarkMode } from "../../../../theme/app/StyledThemeProvider";
 
-const ScrollspyMenu = ({ menuItems, theme, ...props }) => {
+const ScrollspyMenu = ({ menuItems, ...props }) => {
   const { blogData,className } = props;
 
   const addAllClasses = className ? [className] : [""];
   const [activeState,setActiveState] = useState(null);
 
   const [isWrapVisible,setIsWrapperVisible] = useState(false);
   const [imageInView, setimageInView] = useState(false);
+  const { isDark } = useStyledDarkMode();
 
   const handleMouseOver = (index) => {
     setActiveState(menuItems[index]);
@@ -107,7 +109,7 @@ const ScrollspyMenu = ({ menuItems, theme, ...props }) => {
                   <Link to="/cloud-native-management/meshmap">
                     <div className="single-card">
                       <div className="transition-container" ref={transitionRef}>
-                        <img className="canvas" src={theme == "dark" ? EmptyDark : EmptyLight} alt="" />
+                        <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
                         <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
                         <IngressGatewayImage alt="IngressGatewayImage" className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"}/>
                         <KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />

src/sections/Home/So-Special-Section/index.js

@@ -99,7 +99,6 @@ const SoSpecial = () => {
   };
 
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   return (
     <SoSpecialWrapper>
@@ -115,7 +114,7 @@ const SoSpecial = () => {
                 <div id="special-cont" >
                   <div id="special-cont_img">
                     <Image
-                      {...(theme === "dark" ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
+                      {...(isDark ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
                       imgStyle={{ objectFit: "contain" }}
                       alt={frontmatter.title}
                     />

src/sections/Landscape/ServiceMeshTimeline.js

@@ -27,7 +27,6 @@ const ServiceMeshTimeline = () => {
   const [elements, setElements] = useState(initialMeshes);
   const [loadedAll, showIcon] = useState(false);
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   const loadMore = () => {
     setElements([...elements, ...remainingMeshes]);
@@ -46,7 +45,7 @@ const ServiceMeshTimeline = () => {
       >
         {mesh.icon ?
           <div className={`meshtitle-img-${mesh.timeline_order % 2}`}>
-            <img src={theme === "dark" ? mesh?.darkIcon || mesh.icon : mesh.icon} alt={mesh.name} className={mesh.name === "Vulcand" ? "vulcan-img" : ""} />
+            <img src={isDark ? mesh?.darkIcon || mesh.icon : mesh.icon} alt={mesh.name} className={mesh.name === "Vulcand" ? "vulcan-img" : ""} />
           </div>
           : <div className={`meshtitle-img-${mesh.timeline_order % 2}`}>
             <img src={ServiceMeshIcon} alt={mesh.name} />

src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js

@@ -87,7 +87,6 @@ const IntegrationsGrid = ({ category, count }) => {
   const [hideFilter, setHideFilter] = useState(false);
   const allIntegrations = useRef(data.allMdx.nodes);
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   // fetch all the category names from activeIntegrationList and remove the duplicate category names
   const categoryNames = allIntegrations.current.reduce(
@@ -283,7 +282,7 @@ const IntegrationsGrid = ({ category, count }) => {
                     <img
                       className="integration-icon"
                       src={
-                        theme === "dark" && darkModeIntegrationIcon !== null
+                        isDark && darkModeIntegrationIcon !== null
                           ? darkModeIntegrationIcon.publicURL
                           : integrationIcon
                       }
@@ -311,7 +310,7 @@ const IntegrationsGrid = ({ category, count }) => {
                       <img
                         className="integration-icon"
                         src={
-                          theme === "dark" && darkModeIntegrationIcon !== null
+                          isDark && darkModeIntegrationIcon !== null
                             ? darkModeIntegrationIcon.publicURL
                             : integrationIcon
                         }
@@ -320,7 +319,7 @@ const IntegrationsGrid = ({ category, count }) => {
                         width={70}
                         style={{
                           filter:
-                            theme === "dark" && darkModeIntegrationIcon == null
+                            isDark && darkModeIntegrationIcon == null
                               ? "brightness(0) invert(1)"
                               : "none",
                         }}

src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js

@@ -184,7 +184,6 @@ const MeshmapCollaborateBanner = () => {
     setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   return (
     <CollaborationBannerWrapper>
@@ -195,7 +194,7 @@ const MeshmapCollaborateBanner = () => {
           <Button primary className="join-community-button" title="Start Collaborating" url="/projects" />
         </div>
         <div className="transition-container" ref={transitionRef}>
-          <img className="canvas" src={theme == "dark" ? EmptyDark : EmptyLight} alt="" />
+          <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
           <div>
             <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
           </div>

src/sections/Meshmap/Meshmap-design/meshmap-design-hero.js

@@ -82,13 +82,12 @@ const MeshmapHeroSection = () => {
     setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   return (
     <HeroSectionWrapper>
       <div className="hero-image">
-        <img className={imageInView ? "locator-moving" : "locator"} src={theme === "dark" ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
-        <img className={imageInView ? "map map-visible" : "map"} src={theme === "dark" ? MeshmapImageBottomDark : MeshmapImageBottomLight} alt="integrations" ref={locatorRef} />
+        <img className={imageInView ? "locator-moving" : "locator"} src={isDark ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
+        <img className={imageInView ? "map map-visible" : "map"} src={isDark ? MeshmapImageBottomDark : MeshmapImageBottomLight} alt="integrations" ref={locatorRef} />
       </div>
       <div className="hero-text">
         <h1><span>Design your infrastructure</span></h1>

src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-features.js

@@ -122,7 +122,6 @@ const MeshmapVisualizerFeatures = () => {
   const [hoveredFeature, sethoveredFeature] = useState("");
 
   const { isDark } = useStyledDarkMode();
-  const theme = isDark ? "dark" : "light";
 
   const handleMouseOver = (num) => {
     setisHovered(true);
@@ -181,7 +180,7 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={theme == "dark" ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
+                <img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
                 <ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
                   style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
                 />