Skip to content

Commit d9ed68d

Browse files
morningmanmorningman
authored
[fix] fix banner and docs (#3618)
1 parent 8b4ca2e commit d9ed68d

6 files changed

Lines changed: 114 additions & 126 deletions

File tree

‎src/components/home-next/HomeNext.scss‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,3 @@
2323
overflow-x: clip;
2424
}
2525

26-
.home-next-preview-banner {
27-
position: sticky;
28-
top: 0;
29-
z-index: 110;
30-
width: 100%;
31-
background: #FFD23F;
32-
color: #0F1A14;
33-
text-align: center;
34-
padding: 8px 16px;
35-
font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
36-
font-size: 13px;
37-
font-weight: 500;
38-
line-height: 1.4;
39-
letter-spacing: 0.01em;
40-
border-bottom: 1px solid rgba(15, 26, 20, 0.12);
41-
42-
&__text {
43-
display: inline-block;
44-
max-width: 1180px;
45-
}
46-
47-
&__link {
48-
background: none;
49-
border: none;
50-
padding: 0;
51-
margin: 0;
52-
font: inherit;
53-
color: inherit;
54-
text-decoration: underline;
55-
text-underline-offset: 2px;
56-
cursor: pointer;
57-
58-
&:hover {
59-
text-decoration: none;
60-
}
61-
}
62-
}
63-
64-
@media (max-width: 640px) {
65-
.home-next-preview-banner {
66-
font-size: 12px;
67-
padding: 8px 12px;
68-
}
69-
}

‎src/components/home-next/LayoutNext.tsx‎

Lines changed: 3 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { JSX, useEffect, useRef } from 'react';
1+
import React, { JSX } from 'react';
22
import { PageMetadata } from '@docusaurus/theme-common';
33
import LayoutProvider from '@theme/Layout/Provider';
44
import Footer from '@theme/Footer';
55
import AnnouncementBar from '@theme/AnnouncementBar';
66
import { NavbarNext } from './NavbarNext';
7+
import { PreviewBanner } from './PreviewBanner';
78

89
interface LayoutNextProps {
910
title?: string;
@@ -14,57 +15,11 @@ interface LayoutNextProps {
1415
}
1516

1617
export function LayoutNext({ title, description, onSwitchBack, children }: LayoutNextProps): JSX.Element {
17-
const bannerRef = useRef<HTMLDivElement>(null);
18-
19-
useEffect(() => {
20-
const el = bannerRef.current;
21-
if (!el) return;
22-
const update = () => {
23-
document.documentElement.style.setProperty(
24-
'--home-next-banner-height',
25-
`${el.offsetHeight}px`,
26-
);
27-
};
28-
update();
29-
const ro = new ResizeObserver(update);
30-
ro.observe(el);
31-
return () => {
32-
ro.disconnect();
33-
document.documentElement.style.removeProperty('--home-next-banner-height');
34-
};
35-
}, []);
36-
3718
return (
3819
<LayoutProvider>
3920
<PageMetadata title={title} description={description} />
4021
<AnnouncementBar />
41-
<div ref={bannerRef} className="home-next-preview-banner" role="status">
42-
<span className="home-next-preview-banner__text">
43-
You're viewing the preview version of this page. For the full experience, please return to the
44-
{' '}
45-
<button
46-
type="button"
47-
className="home-next-preview-banner__link"
48-
onClick={() => {
49-
if (onSwitchBack) {
50-
onSwitchBack();
51-
return;
52-
}
53-
if (typeof window !== 'undefined') {
54-
try {
55-
window.localStorage.removeItem('doris-home-version');
56-
} catch {
57-
// localStorage may be unavailable (private mode / disabled cookies)
58-
}
59-
window.location.assign('/');
60-
}
61-
}}
62-
>
63-
classic homepage
64-
</button>
65-
.
66-
</span>
67-
</div>
22+
<PreviewBanner onSwitchBack={onSwitchBack} />
6823
<NavbarNext />
6924
<main className="home-next-main">{children}</main>
7025
<Footer />

‎src/components/home-next/NavbarNext.tsx‎

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import { useLocation } from '@docusaurus/router';
44
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
55
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
66
import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname } from '@site/src/utils/locale';
7+
import { STAR_COUNT } from '@site/src/constant/github.data';
78
import './NavbarNext.scss';
89

910
const GITHUB_REPO = 'apache/doris';
10-
const FALLBACK_STARS = '-';
1111
const HOME_VERSION_KEY = 'doris-home-version';
12+
const STAR_DISPLAY = `${STAR_COUNT}k`;
1213

1314
function safeSetLocalStorage(key: string, value: string): void {
1415
try {
@@ -18,33 +19,6 @@ function safeSetLocalStorage(key: string, value: string): void {
1819
}
1920
}
2021

21-
function formatStars(n: number): string {
22-
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
23-
return String(n);
24-
}
25-
26-
function useGitHubStars(repo: string, fallback: string): string {
27-
const [stars, setStars] = useState(fallback);
28-
useEffect(() => {
29-
let cancelled = false;
30-
const timer = window.setTimeout(() => {
31-
fetch(`https://api.github.com/repos/${repo}`)
32-
.then(r => (r.ok ? r.json() : null))
33-
.then(data => {
34-
if (!cancelled && data && typeof data.stargazers_count === 'number') {
35-
setStars(formatStars(data.stargazers_count));
36-
}
37-
})
38-
.catch(() => { /* keep fallback on network/CORS/rate-limit errors */ });
39-
}, 1200);
40-
return () => {
41-
cancelled = true;
42-
window.clearTimeout(timer);
43-
};
44-
}, [repo]);
45-
return stars;
46-
}
47-
4822
interface DropdownItem {
4923
label: string;
5024
href: string;
@@ -138,7 +112,6 @@ export function NavbarNext(): JSX.Element {
138112
i18n: { currentLocale, defaultLocale, localeConfigs },
139113
} = useDocusaurusContext();
140114
const { pathname, search, hash } = useLocation();
141-
const stars = useGitHubStars(GITHUB_REPO, FALLBACK_STARS);
142115
const [mobileOpen, setMobileOpen] = useState(false);
143116
const localePrefix = getLocalePrefix(currentLocale, defaultLocale);
144117
const docsHref = `${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`;
@@ -152,7 +125,7 @@ export function NavbarNext(): JSX.Element {
152125
const localeSwitchLabel = currentLocale === 'zh-CN' ? localeConfigs[defaultLocale]?.label ?? 'English' : '中文';
153126
const currentLocalizedPath = normalizePathname(pathname, [defaultLocale, 'zh-CN']);
154127
const buildLocaleHref = (locale: string) =>
155-
`${locale === defaultLocale ? '' : `/${locale}`}${currentLocalizedPath}${search}${hash}`;
128+
`pathname://${locale === defaultLocale ? '' : `/${locale}`}${currentLocalizedPath}${search}${hash}`;
156129
const localeItems = [defaultLocale, 'zh-CN']
157130
.filter((locale, index, arr) => arr.indexOf(locale) === index)
158131
.map(locale => ({
@@ -245,12 +218,12 @@ export function NavbarNext(): JSX.Element {
245218
target="_blank"
246219
rel="noopener noreferrer"
247220
className="navbar-next__star-link"
248-
aria-label={`Star Apache Doris on GitHub (${stars} stars)`}
221+
aria-label={`Star Apache Doris on GitHub (${STAR_DISPLAY} stars)`}
249222
>
250223
<StarIcon />
251224
<span>Star</span>
252225
<span className="navbar-next__star-divider" />
253-
<span className="navbar-next__star-count">{stars}</span>
226+
<span className="navbar-next__star-count">{STAR_DISPLAY}</span>
254227
<span className="navbar-next__star-divider" />
255228
<GitHubIcon />
256229
</a>
@@ -340,12 +313,12 @@ export function NavbarNext(): JSX.Element {
340313
target="_blank"
341314
rel="noopener noreferrer"
342315
className="navbar-next__star-link"
343-
aria-label={`Star Apache Doris on GitHub (${stars} stars)`}
316+
aria-label={`Star Apache Doris on GitHub (${STAR_DISPLAY} stars)`}
344317
>
345318
<StarIcon />
346319
<span>Star</span>
347320
<span className="navbar-next__star-divider" />
348-
<span className="navbar-next__star-count">{stars}</span>
321+
<span className="navbar-next__star-count">{STAR_DISPLAY}</span>
349322
<span className="navbar-next__star-divider" />
350323
<GitHubIcon />
351324
</a>

‎src/components/home-next/PreviewBanner.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.home-next-preview-banner {
2+
position: sticky;
3+
top: 0;
4+
z-index: 110;
5+
width: 100%;
6+
background: #FFD23F;
7+
color: #0F1A14;
8+
text-align: center;
9+
padding: 8px 16px;
10+
font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
11+
font-size: 13px;
12+
font-weight: 500;
13+
line-height: 1.4;
14+
letter-spacing: 0.01em;
15+
border-bottom: 1px solid rgba(15, 26, 20, 0.12);
16+
17+
&__text {
18+
display: inline-block;
19+
max-width: 1180px;
20+
}
21+
22+
&__link {
23+
background: none;
24+
border: none;
25+
padding: 0;
26+
margin: 0;
27+
font: inherit;
28+
color: inherit;
29+
text-decoration: underline;
30+
text-underline-offset: 2px;
31+
cursor: pointer;
32+
33+
&:hover {
34+
text-decoration: none;
35+
}
36+
}
37+
}
38+
39+
@media (max-width: 640px) {
40+
.home-next-preview-banner {
41+
font-size: 12px;
42+
padding: 8px 12px;
43+
}
44+
}

‎src/components/home-next/PreviewBanner.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { JSX, useEffect, useRef } from 'react';
2+
import './PreviewBanner.scss';
3+
4+
interface PreviewBannerProps {
5+
onSwitchBack?: () => void;
6+
}
7+
8+
export function PreviewBanner({ onSwitchBack }: PreviewBannerProps): JSX.Element {
9+
const bannerRef = useRef<HTMLDivElement>(null);
10+
11+
useEffect(() => {
12+
const el = bannerRef.current;
13+
if (!el) return;
14+
const update = () => {
15+
document.documentElement.style.setProperty(
16+
'--home-next-banner-height',
17+
`${el.offsetHeight}px`,
18+
);
19+
};
20+
update();
21+
const ro = new ResizeObserver(update);
22+
ro.observe(el);
23+
return () => {
24+
ro.disconnect();
25+
document.documentElement.style.removeProperty('--home-next-banner-height');
26+
};
27+
}, []);
28+
29+
return (
30+
<div ref={bannerRef} className="home-next-preview-banner" role="status">
31+
<span className="home-next-preview-banner__text">
32+
You're viewing the preview version of this page. For the full experience, please return to the
33+
{' '}
34+
<button
35+
type="button"
36+
className="home-next-preview-banner__link"
37+
onClick={() => {
38+
if (onSwitchBack) {
39+
onSwitchBack();
40+
return;
41+
}
42+
if (typeof window !== 'undefined') {
43+
try {
44+
window.localStorage.removeItem('doris-home-version');
45+
} catch {
46+
// localStorage may be unavailable (private mode / disabled cookies)
47+
}
48+
window.location.assign('/');
49+
}
50+
}}
51+
>
52+
classic homepage
53+
</button>
54+
.
55+
</span>
56+
</div>
57+
);
58+
}

‎src/theme/Layout/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import type { Props } from '@theme/Layout';
1717
import styles from './styles.module.css';
1818
import { useHistory } from '@docusaurus/router';
1919
import { NavbarNext } from '@site/src/components/home-next/NavbarNext';
20+
import { PreviewBanner } from '@site/src/components/home-next/PreviewBanner';
2021
import { isDocsNextPath, isReleasesPath, isEventsPath } from '@site/src/utils/locale';
2122
interface DataType {
2223
showSearchPageMobile: boolean;
@@ -89,6 +90,7 @@ export default function Layout(props: Props): JSX.Element {
8990

9091
<SkipToContent />
9192
<AnnouncementBar />
93+
{useNextNavbar && <PreviewBanner />}
9294
{useNextNavbar ? <NavbarNext /> : <Navbar />}
9395
{!useNextNavbar && showSearchPageMobile ? (
9496
<div ref={searchPageDom}>

0 commit comments

Comments
 (0)