diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index c56181f..dc10c91 100644 --- a/website/docusaurus.config.js +++ b/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', diff --git a/website/src/theme/Footer/index.tsx b/website/src/theme/Footer/index.tsx index adaedbd..99ba9d5 100644 --- a/website/src/theme/Footer/index.tsx +++ b/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) => ( - -); + logo, +}: Pick & { 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 ( + + ); +} 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 {
{logo && (logo.src || logo.srcDark) && ( -
- {logo.href ? ( - - - - ) : ( - - )} -
+
+ {logo.href ? ( + + + + ) : ( + + )} +
)}

A new approach to querying and
diff --git a/website/src/theme/Logo/index.d.ts b/website/src/theme/Logo/index.d.ts new file mode 100644 index 0000000..786099f --- /dev/null +++ b/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; diff --git a/website/src/theme/Logo/index.js b/website/src/theme/Logo/index.js new file mode 100644 index 0000000..d0b73e2 --- /dev/null +++ b/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 = ( + + ); + // Is this extra div really necessary? + // introduced in https://github.com/facebook/docusaurus/pull/5666 + return imageClassName ? ( +

{themedImage}
+ ) : ( + 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 ( + + {logo && ( + + )} + {navbarTitle != null && {navbarTitle}} + + ); +} diff --git a/website/static/img/stackql-deploy-logo-mobile.svg b/website/static/img/stackql-deploy-logo-mobile.svg new file mode 100644 index 0000000..1de09ec --- /dev/null +++ b/website/static/img/stackql-deploy-logo-mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/stackql-deploy-logo-white-mobile.svg b/website/static/img/stackql-deploy-logo-white-mobile.svg new file mode 100644 index 0000000..88c628e --- /dev/null +++ b/website/static/img/stackql-deploy-logo-white-mobile.svg @@ -0,0 +1,3 @@ + + +