responsive logo

website/docusaurus.config.js

@@ -147,7 +147,7 @@ const config = {
           href: '/',
           src: 'img/stackql-deploy-logo.svg',
           srcDark: 'img/stackql-deploy-logo-white.svg',
-        },        
+        },
         items: [
           // {
           //   type: 'docSidebar',

website/src/theme/Footer/index.tsx

@@ -20,8 +20,11 @@ import { useColorMode } from '@docusaurus/theme-common';
 
 import { Icon } from '@iconify/react';
 
+// add for responsive logo image
+import { useWindowSize } from '@docusaurus/theme-common';
+
 // Custom styles to fix the spacing issue
-const socialIconsContainerStyle = {
+const socialIconsContainerStyle: React.CSSProperties = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -71,15 +74,36 @@ const FooterLogo = ({
   alt,
   width,
   height,
-}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
-  <ThemedImage
-    className="footer__logo"
-    alt={alt}
-    sources={sources}
-    width={width}
-    height={height}
-  />
-);
+  logo,
+}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'> & { logo: any }) => {
+  // Get window width for responsiveness
+  const windowSize = useWindowSize();
+
+  // Set threshold for mobile view (e.g., 768px)
+  const isMobile = windowSize === 'mobile' ? true : false;
+
+  const getMobileLogoPath = (path: string) => path?.replace('.svg', '-mobile.svg');
+
+  // Choose appropriate image sources based on screen size
+  // const responsiveSources = {
+  //   light: useBaseUrl(isMobile ? getMobileLogoPath(logo.src) : logo.src),
+  //   dark: useBaseUrl(isMobile ? getMobileLogoPath(logo.srcDark || logo.src) : (logo.srcDark || logo.src)),
+  // };
+  const responsiveSources = {
+    light: useBaseUrl(isMobile ? getMobileLogoPath(logo?.src) : logo?.src),
+    dark: useBaseUrl(isMobile ? getMobileLogoPath(logo?.srcDark || logo?.src) : (logo?.srcDark || logo?.src)),
+  };
+
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={alt}
+      sources={responsiveSources}
+      width={width}
+      height={height}
+    />
+  );
+}
 
 function Footer(): JSX.Element | null {
   const socialLinks = {
@@ -94,7 +118,7 @@ function Footer(): JSX.Element | null {
 
   const {footer} = useThemeConfig();
 
-  const {copyright, links = [], logo = {}} = footer || {};
+  const {copyright, links = [], logo = { src: '' }} = footer || {};
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
@@ -115,15 +139,15 @@ function Footer(): JSX.Element | null {
           <div className="row footer__links">
             <div className="col col--6 footer__col">
               {logo && (logo.src || logo.srcDark) && (
-                <div className="margin-bottom--sm">
-                  {logo.href ? (
-                    <Link href={logo.href} className={styles.footerLogoLink}>
-                      <FooterLogo alt={logo.alt} sources={sources} />
-                    </Link>
-                  ) : (
-                    <FooterLogo alt={logo.alt} sources={sources} />
-                  )}
-                </div>
+                  <div className="margin-bottom--sm">
+                    {logo.href ? (
+                      <Link href={logo.href} className={styles.footerLogoLink}>
+                        <FooterLogo alt={logo.alt} sources={sources} logo={logo} />
+                      </Link>
+                    ) : (
+                      <FooterLogo alt={logo.alt} sources={sources} logo={logo} />
+                    )}
+                  </div>                
               )}
               <p className="footer__subtitle">
                 A new approach to querying and <br />

website/src/theme/Logo/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Logo';
+export default function Logo(props: Props): ReactNode;

website/src/theme/Logo/index.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig, useWindowSize} from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+function LogoThemedImage({logo, alt, imageClassName}) {
+// Add window size detection
+  const windowSize = useWindowSize();
+
+  // Determine if on mobile
+  const isMobile = windowSize === 'mobile';
+
+  // Function to generate mobile logo path
+  const getMobileLogoPath = (path) => path?.replace('.svg', '-mobile.svg');
+
+  // Get appropriate logo sources based on device
+  const sources = {
+    light: useBaseUrl(isMobile ? getMobileLogoPath(logo.src) : logo.src),
+    dark: useBaseUrl(isMobile ? getMobileLogoPath(logo.srcDark || logo.src) : (logo.srcDark || logo.src)),
+  };  
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  );
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+export default function Logo(props) {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+    </Link>
+  );
+}