fix: update import statements for logo components to use default imports

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

Author: leecalcote

fix_mdx_p_tags.py

@@ -10,7 +10,7 @@ published: true
 
 import { ProgramsWrapper } from "../Programs.style.js";
 import Button from "../../../reusecore/Button";
-import {LfxLogo} from "./lfx-white.svg";
+import LfxLogo from "./lfx-white.svg";
 import { Link } from "gatsby";
 
 <ProgramsWrapper>

fix_remaining_mdx.py

@@ -10,7 +10,7 @@ published: true
 
 import { ProgramsWrapper } from "../Programs.style.js";
 import Button from "../../../reusecore/Button";
-import {LfxLogo} from "./lfx-white.svg";
+import LfxLogo from "./lfx-white.svg";
 import { Link } from "gatsby";
 
 <ProgramsWrapper>

src/collections/programs/lfx-2023/lfx-2023.mdx

@@ -10,7 +10,7 @@ published: true
 
 import { ProgramsWrapper } from "../Programs.style.js";
 import Button from "../../../reusecore/Button";
-import {ReactComponent as LfxLogo} from "./lfx-white.svg";
+import LfxLogo from "./lfx-white.svg";
 import { Link } from "gatsby";
 
 <ProgramsWrapper>

src/collections/programs/lfx-2024/lfx-2024.mdx

@@ -10,7 +10,7 @@ published: true
 
 import { ProgramsWrapper } from "../Programs.style.js";
 import Button from "../../../reusecore/Button";
-import {MlhLogo} from "./mlh.svg";
+import MlhLogo from "./mlh.svg";
 
 <ProgramsWrapper>
 <MlhLogo alt="mlh_logo" className="mlh_logo"/>

src/collections/programs/lfx-2025/lfx-2025.mdx

@@ -10,7 +10,7 @@ published: true
 
 import { ProgramsWrapper } from "../Programs.style.js";
 import Button from "../../../reusecore/Button";
-import {ScaLogo} from "./sca.svg";
+import ScaLogo from "./sca.svg";
 
 <ProgramsWrapper>
 <ScaLogo alt="sca_logo" className="sca_logo"/>

src/collections/programs/mlh-2020/index.mdx

@@ -93,6 +93,16 @@ const BlogSingle = ({ data, children }) => {
   const [copied, setCopied] = useState(false);
   const { isDark } = useStyledDarkMode();
 
+  const primaryThumbnail = frontmatter.thumbnail || frontmatter.thumbnail_svg;
+  const secondaryThumbnail = frontmatter.darkthumbnail || frontmatter.darkthumbnail_svg;
+  const heroThumbnail = (() => {
+    if (isDark && secondaryThumbnail && (secondaryThumbnail?.publicURL !== primaryThumbnail?.publicURL || !primaryThumbnail)) {
+      return secondaryThumbnail;
+    }
+
+    return primaryThumbnail || secondaryThumbnail;
+  })();
+
   useEffect(() => {
     if (copied) {
       setTimeout(() => {
@@ -115,8 +125,8 @@ const BlogSingle = ({ data, children }) => {
             subtitle={frontmatter.subtitle}
             category={frontmatter.category}
             author={{ name: frontmatter.author }}
-            thumbnail={((isDark && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL) ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
-            darkthumbnail={frontmatter.thumbnail}
+            thumbnail={heroThumbnail}
+            darkthumbnail={secondaryThumbnail || primaryThumbnail}
             date={frontmatter.date}
           />
           <div className="single-post-wrapper">

src/collections/programs/sca-contributhon/index.mdx

@@ -34,6 +34,14 @@ export const query = graphql`query BlogsBySlug($slug: String!) {
           gatsbyImageData(width: 500, layout: CONSTRAINED)
         }
       }
+      thumbnail_svg {
+        extension
+        publicURL
+      }
+      darkthumbnail_svg {
+        extension
+        publicURL
+      }
     }
     fields {
       slug
@@ -65,5 +73,11 @@ export default BlogSinglePage;
 
 
 export const Head = ({ data }) => {
-  return <SEO title={data.mdx.frontmatter.title} image={data.mdx.frontmatter.thumbnail.publicURL} description={data.mdx.frontmatter.description} />;
+  const { frontmatter } = data.mdx;
+  const image = frontmatter.thumbnail?.publicURL
+    || frontmatter.thumbnail_svg?.publicURL
+    || frontmatter.darkthumbnail?.publicURL
+    || frontmatter.darkthumbnail_svg?.publicURL;
+
+  return <SEO title={frontmatter.title} image={image} description={frontmatter.description} />;
 };