Skip to content

Commit 0ad04f8

Browse files
jeffreyavenjeffreyaven
committed
responsive logo
1 parent 1901b82 commit 0ad04f8

File tree

6 files changed

+136
-21
lines changed

6 files changed

+136
-21
lines changed

‎website/docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const config = {
147147
href: '/',
148148
src: 'img/stackql-deploy-logo.svg',
149149
srcDark: 'img/stackql-deploy-logo-white.svg',
150-
},
150+
},
151151
items: [
152152
// {
153153
// type: 'docSidebar',

‎website/src/theme/Footer/index.tsx

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ import { useColorMode } from '@docusaurus/theme-common';
2020

2121
import { Icon } from '@iconify/react';
2222

23+
// add for responsive logo image
24+
import { useWindowSize } from '@docusaurus/theme-common';
25+
2326
// Custom styles to fix the spacing issue
24-
const socialIconsContainerStyle = {
27+
const socialIconsContainerStyle: React.CSSProperties = {
2528
display: 'flex',
2629
justifyContent: 'center',
2730
alignItems: 'center',
@@ -71,15 +74,36 @@ const FooterLogo = ({
7174
alt,
7275
width,
7376
height,
74-
}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
75-
<ThemedImage
76-
className="footer__logo"
77-
alt={alt}
78-
sources={sources}
79-
width={width}
80-
height={height}
81-
/>
82-
);
77+
logo,
78+
}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'> & { logo: any }) => {
79+
// Get window width for responsiveness
80+
const windowSize = useWindowSize();
81+
82+
// Set threshold for mobile view (e.g., 768px)
83+
const isMobile = windowSize === 'mobile' ? true : false;
84+
85+
const getMobileLogoPath = (path: string) => path?.replace('.svg', '-mobile.svg');
86+
87+
// Choose appropriate image sources based on screen size
88+
// const responsiveSources = {
89+
// light: useBaseUrl(isMobile ? getMobileLogoPath(logo.src) : logo.src),
90+
// dark: useBaseUrl(isMobile ? getMobileLogoPath(logo.srcDark || logo.src) : (logo.srcDark || logo.src)),
91+
// };
92+
const responsiveSources = {
93+
light: useBaseUrl(isMobile ? getMobileLogoPath(logo?.src) : logo?.src),
94+
dark: useBaseUrl(isMobile ? getMobileLogoPath(logo?.srcDark || logo?.src) : (logo?.srcDark || logo?.src)),
95+
};
96+
97+
return (
98+
<ThemedImage
99+
className="footer__logo"
100+
alt={alt}
101+
sources={responsiveSources}
102+
width={width}
103+
height={height}
104+
/>
105+
);
106+
}
83107

84108
function Footer(): JSX.Element | null {
85109
const socialLinks = {
@@ -94,7 +118,7 @@ function Footer(): JSX.Element | null {
94118

95119
const {footer} = useThemeConfig();
96120

97-
const {copyright, links = [], logo = {}} = footer || {};
121+
const {copyright, links = [], logo = { src: '' }} = footer || {};
98122
const sources = {
99123
light: useBaseUrl(logo.src),
100124
dark: useBaseUrl(logo.srcDark || logo.src),
@@ -115,15 +139,15 @@ function Footer(): JSX.Element | null {
115139
<div className="row footer__links">
116140
<div className="col col--6 footer__col">
117141
{logo && (logo.src || logo.srcDark) && (
118-
<div className="margin-bottom--sm">
119-
{logo.href ? (
120-
<Link href={logo.href} className={styles.footerLogoLink}>
121-
<FooterLogo alt={logo.alt} sources={sources} />
122-
</Link>
123-
) : (
124-
<FooterLogo alt={logo.alt} sources={sources} />
125-
)}
126-
</div>
142+
<div className="margin-bottom--sm">
143+
{logo.href ? (
144+
<Link href={logo.href} className={styles.footerLogoLink}>
145+
<FooterLogo alt={logo.alt} sources={sources} logo={logo} />
146+
</Link>
147+
) : (
148+
<FooterLogo alt={logo.alt} sources={sources} logo={logo} />
149+
)}
150+
</div>
127151
)}
128152
<p className="footer__subtitle">
129153
A new approach to querying and <br />

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
import { type ReactNode } from 'react';
8+
import type { Props } from '@theme/Logo';
9+
export default function Logo(props: Props): ReactNode;

‎website/src/theme/Logo/index.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
import React from 'react';
8+
import Link from '@docusaurus/Link';
9+
import useBaseUrl from '@docusaurus/useBaseUrl';
10+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
11+
import {useThemeConfig, useWindowSize} from '@docusaurus/theme-common';
12+
import ThemedImage from '@theme/ThemedImage';
13+
function LogoThemedImage({logo, alt, imageClassName}) {
14+
// Add window size detection
15+
const windowSize = useWindowSize();
16+
17+
// Determine if on mobile
18+
const isMobile = windowSize === 'mobile';
19+
20+
// Function to generate mobile logo path
21+
const getMobileLogoPath = (path) => path?.replace('.svg', '-mobile.svg');
22+
23+
// Get appropriate logo sources based on device
24+
const sources = {
25+
light: useBaseUrl(isMobile ? getMobileLogoPath(logo.src) : logo.src),
26+
dark: useBaseUrl(isMobile ? getMobileLogoPath(logo.srcDark || logo.src) : (logo.srcDark || logo.src)),
27+
};
28+
const themedImage = (
29+
<ThemedImage
30+
className={logo.className}
31+
sources={sources}
32+
height={logo.height}
33+
width={logo.width}
34+
alt={alt}
35+
style={logo.style}
36+
/>
37+
);
38+
// Is this extra div really necessary?
39+
// introduced in https://github.com/facebook/docusaurus/pull/5666
40+
return imageClassName ? (
41+
<div className={imageClassName}>{themedImage}</div>
42+
) : (
43+
themedImage
44+
);
45+
}
46+
export default function Logo(props) {
47+
const {
48+
siteConfig: {title},
49+
} = useDocusaurusContext();
50+
const {
51+
navbar: {title: navbarTitle, logo},
52+
} = useThemeConfig();
53+
const {imageClassName, titleClassName, ...propsRest} = props;
54+
const logoLink = useBaseUrl(logo?.href || '/');
55+
// If visible title is shown, fallback alt text should be
56+
// an empty string to mark the logo as decorative.
57+
const fallbackAlt = navbarTitle ? '' : title;
58+
// Use logo alt text if provided (including empty string),
59+
// and provide a sensible fallback otherwise.
60+
const alt = logo?.alt ?? fallbackAlt;
61+
return (
62+
<Link
63+
to={logoLink}
64+
{...propsRest}
65+
{...(logo?.target && {target: logo.target})}>
66+
{logo && (
67+
<LogoThemedImage
68+
logo={logo}
69+
alt={alt}
70+
imageClassName={imageClassName}
71+
/>
72+
)}
73+
{navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
74+
</Link>
75+
);
76+
}

‎website/static/img/stackql-deploy-logo-mobile.svg

Lines changed: 3 additions & 0 deletions
Loading

‎website/static/img/stackql-deploy-logo-white-mobile.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)