Merge pull request #6083 from vishalvivekm/logo-fix

enhance logic to display thumbnail based on theme
layer5io · Nov 15, 2024 · a237528 · a237528
2 parents 9b067af + ce46253
commit a237528
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/...nches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/index.mdx b/...nches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/index.mdx
@@ -66,7 +66,10 @@ Like Figma for engineers, Kanvas users can access Kanvas from any computer with
   <li><strong>Design Reviews</strong>: Collaboratively review and provide feedback on designs and prototypes.</li>
 </ul>
 
-
+<div>
+<iframe width="100%" height="315" style="margin-right: 1.5rem;margin-left:1.5rem;" src="https://www.youtube.com/embed/4WcofErPTx4?si=UfouUV7mhADg3zkk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<p style="font-style:italic;font-size:1rem;margin-left:1rem;">Birth of Kanvas from Meshery</p>
+</div>
 #### Kanvas caters to a wide range of users, including:
 <ul>
   <li>Teams and engineering managers for brainstorming, diagramming, wireframing, and interviewing.</li>

diff --git a/src/sections/Company/News-single/index.js b/src/sections/Company/News-single/index.js
@@ -8,8 +8,10 @@ import NewsSidebar from "./Sidebar";
 
 import NewsPageWrapper from "./NewsSingle.style.js";
 import RelatedPosts from "../../../components/Related-Posts";
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const NewsSingle = ({ data }) => {
+  const { isDark } = useStyledDarkMode();
   const { frontmatter, body, fields } = data.mdx;
   const newsData = useStaticQuery(
     graphql`query relatedNewsPosts {
@@ -54,7 +56,8 @@ const NewsSingle = ({ data }) => {
         subtitle={frontmatter.subtitle}
         category={frontmatter.category}
         author={{ name: frontmatter.author }}
-        thumbnail={frontmatter.thumbnail}
+        thumbnail={ isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL
+          ? frontmatter.darkthumbnail : frontmatter.thumbnail}
         date={frontmatter.date}
       />
       <div className="single-post-wrapper">

diff --git a/src/templates/news-single.js b/src/templates/news-single.js
@@ -24,6 +24,13 @@ export const query = graphql`
           extension
           publicURL
         }
+        darkthumbnail {
+          childImageSharp {
+            gatsbyImageData(width: 500, layout: CONSTRAINED)
+          }
+          extension
+          publicURL
+        }
       }
       fields {
         slug