This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new d9ed68d26c8 [fix] fix banner and docs (#3618)
d9ed68d26c8 is described below
commit d9ed68d26c80561bc0ee3a79b7ab24ffec4deefd
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Wed May 6 10:18:50 2026 -0700
[fix] fix banner and docs (#3618)
---
src/components/home-next/HomeNext.scss | 44 ----------------
src/components/home-next/LayoutNext.tsx | 51 ++-----------------
src/components/home-next/NavbarNext.tsx | 41 +++------------
.../{HomeNext.scss => PreviewBanner.scss} | 25 ----------
src/components/home-next/PreviewBanner.tsx | 58 ++++++++++++++++++++++
src/theme/Layout/index.tsx | 2 +
6 files changed, 70 insertions(+), 151 deletions(-)
diff --git a/src/components/home-next/HomeNext.scss
b/src/components/home-next/HomeNext.scss
index 1627a0451a7..4e9ed5807f0 100644
--- a/src/components/home-next/HomeNext.scss
+++ b/src/components/home-next/HomeNext.scss
@@ -23,47 +23,3 @@
overflow-x: clip;
}
-.home-next-preview-banner {
- position: sticky;
- top: 0;
- z-index: 110;
- width: 100%;
- background: #FFD23F;
- color: #0F1A14;
- text-align: center;
- padding: 8px 16px;
- font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace,
SFMono-Regular, Menlo, monospace;
- font-size: 13px;
- font-weight: 500;
- line-height: 1.4;
- letter-spacing: 0.01em;
- border-bottom: 1px solid rgba(15, 26, 20, 0.12);
-
- &__text {
- display: inline-block;
- max-width: 1180px;
- }
-
- &__link {
- background: none;
- border: none;
- padding: 0;
- margin: 0;
- font: inherit;
- color: inherit;
- text-decoration: underline;
- text-underline-offset: 2px;
- cursor: pointer;
-
- &:hover {
- text-decoration: none;
- }
- }
-}
-
-@media (max-width: 640px) {
- .home-next-preview-banner {
- font-size: 12px;
- padding: 8px 12px;
- }
-}
diff --git a/src/components/home-next/LayoutNext.tsx
b/src/components/home-next/LayoutNext.tsx
index 158b53400b6..fe125b3fb72 100644
--- a/src/components/home-next/LayoutNext.tsx
+++ b/src/components/home-next/LayoutNext.tsx
@@ -1,9 +1,10 @@
-import React, { JSX, useEffect, useRef } from 'react';
+import React, { JSX } from 'react';
import { PageMetadata } from '@docusaurus/theme-common';
import LayoutProvider from '@theme/Layout/Provider';
import Footer from '@theme/Footer';
import AnnouncementBar from '@theme/AnnouncementBar';
import { NavbarNext } from './NavbarNext';
+import { PreviewBanner } from './PreviewBanner';
interface LayoutNextProps {
title?: string;
@@ -14,57 +15,11 @@ interface LayoutNextProps {
}
export function LayoutNext({ title, description, onSwitchBack, children }:
LayoutNextProps): JSX.Element {
- const bannerRef = useRef<HTMLDivElement>(null);
-
- useEffect(() => {
- const el = bannerRef.current;
- if (!el) return;
- const update = () => {
- document.documentElement.style.setProperty(
- '--home-next-banner-height',
- `${el.offsetHeight}px`,
- );
- };
- update();
- const ro = new ResizeObserver(update);
- ro.observe(el);
- return () => {
- ro.disconnect();
-
document.documentElement.style.removeProperty('--home-next-banner-height');
- };
- }, []);
-
return (
<LayoutProvider>
<PageMetadata title={title} description={description} />
<AnnouncementBar />
- <div ref={bannerRef} className="home-next-preview-banner"
role="status">
- <span className="home-next-preview-banner__text">
- You're viewing the preview version of this page. For the
full experience, please return to the
- {' '}
- <button
- type="button"
- className="home-next-preview-banner__link"
- onClick={() => {
- if (onSwitchBack) {
- onSwitchBack();
- return;
- }
- if (typeof window !== 'undefined') {
- try {
-
window.localStorage.removeItem('doris-home-version');
- } catch {
- // localStorage may be unavailable
(private mode / disabled cookies)
- }
- window.location.assign('/');
- }
- }}
- >
- classic homepage
- </button>
- .
- </span>
- </div>
+ <PreviewBanner onSwitchBack={onSwitchBack} />
<NavbarNext />
<main className="home-next-main">{children}</main>
<Footer />
diff --git a/src/components/home-next/NavbarNext.tsx
b/src/components/home-next/NavbarNext.tsx
index 7d34f7eae4e..8d758908c63 100644
--- a/src/components/home-next/NavbarNext.tsx
+++ b/src/components/home-next/NavbarNext.tsx
@@ -4,11 +4,12 @@ import { useLocation } from '@docusaurus/router';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname }
from '@site/src/utils/locale';
+import { STAR_COUNT } from '@site/src/constant/github.data';
import './NavbarNext.scss';
const GITHUB_REPO = 'apache/doris';
-const FALLBACK_STARS = '-';
const HOME_VERSION_KEY = 'doris-home-version';
+const STAR_DISPLAY = `${STAR_COUNT}k`;
function safeSetLocalStorage(key: string, value: string): void {
try {
@@ -18,33 +19,6 @@ function safeSetLocalStorage(key: string, value: string):
void {
}
}
-function formatStars(n: number): string {
- if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
- return String(n);
-}
-
-function useGitHubStars(repo: string, fallback: string): string {
- const [stars, setStars] = useState(fallback);
- useEffect(() => {
- let cancelled = false;
- const timer = window.setTimeout(() => {
- fetch(`https://api.github.com/repos/${repo}`)
- .then(r => (r.ok ? r.json() : null))
- .then(data => {
- if (!cancelled && data && typeof data.stargazers_count ===
'number') {
- setStars(formatStars(data.stargazers_count));
- }
- })
- .catch(() => { /* keep fallback on network/CORS/rate-limit
errors */ });
- }, 1200);
- return () => {
- cancelled = true;
- window.clearTimeout(timer);
- };
- }, [repo]);
- return stars;
-}
-
interface DropdownItem {
label: string;
href: string;
@@ -138,7 +112,6 @@ export function NavbarNext(): JSX.Element {
i18n: { currentLocale, defaultLocale, localeConfigs },
} = useDocusaurusContext();
const { pathname, search, hash } = useLocation();
- const stars = useGitHubStars(GITHUB_REPO, FALLBACK_STARS);
const [mobileOpen, setMobileOpen] = useState(false);
const localePrefix = getLocalePrefix(currentLocale, defaultLocale);
const docsHref =
`${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`;
@@ -152,7 +125,7 @@ export function NavbarNext(): JSX.Element {
const localeSwitchLabel = currentLocale === 'zh-CN' ?
localeConfigs[defaultLocale]?.label ?? 'English' : '中文';
const currentLocalizedPath = normalizePathname(pathname, [defaultLocale,
'zh-CN']);
const buildLocaleHref = (locale: string) =>
- `${locale === defaultLocale ? '' :
`/${locale}`}${currentLocalizedPath}${search}${hash}`;
+ `pathname://${locale === defaultLocale ? '' :
`/${locale}`}${currentLocalizedPath}${search}${hash}`;
const localeItems = [defaultLocale, 'zh-CN']
.filter((locale, index, arr) => arr.indexOf(locale) === index)
.map(locale => ({
@@ -245,12 +218,12 @@ export function NavbarNext(): JSX.Element {
target="_blank"
rel="noopener noreferrer"
className="navbar-next__star-link"
- aria-label={`Star Apache Doris on GitHub (${stars}
stars)`}
+ aria-label={`Star Apache Doris on GitHub
(${STAR_DISPLAY} stars)`}
>
<StarIcon />
<span>Star</span>
<span className="navbar-next__star-divider" />
- <span
className="navbar-next__star-count">{stars}</span>
+ <span
className="navbar-next__star-count">{STAR_DISPLAY}</span>
<span className="navbar-next__star-divider" />
<GitHubIcon />
</a>
@@ -340,12 +313,12 @@ export function NavbarNext(): JSX.Element {
target="_blank"
rel="noopener noreferrer"
className="navbar-next__star-link"
- aria-label={`Star Apache Doris on GitHub (${stars}
stars)`}
+ aria-label={`Star Apache Doris on GitHub
(${STAR_DISPLAY} stars)`}
>
<StarIcon />
<span>Star</span>
<span className="navbar-next__star-divider" />
- <span
className="navbar-next__star-count">{stars}</span>
+ <span
className="navbar-next__star-count">{STAR_DISPLAY}</span>
<span className="navbar-next__star-divider" />
<GitHubIcon />
</a>
diff --git a/src/components/home-next/HomeNext.scss
b/src/components/home-next/PreviewBanner.scss
similarity index 69%
copy from src/components/home-next/HomeNext.scss
copy to src/components/home-next/PreviewBanner.scss
index 1627a0451a7..7ba599a987e 100644
--- a/src/components/home-next/HomeNext.scss
+++ b/src/components/home-next/PreviewBanner.scss
@@ -1,28 +1,3 @@
-// Home Next — global layout
-
-.home-next-container {
- width: min(1180px, calc(100vw - 112px));
- margin: 0 auto;
- box-sizing: border-box;
-}
-
-@media (max-width: 820px) {
- .home-next-container {
- width: calc(100vw - 48px);
- }
-}
-
-@media (max-width: 640px) {
- .home-next-container {
- width: calc(100vw - 40px);
- }
-}
-
-.home-next-main {
- min-width: 0;
- overflow-x: clip;
-}
-
.home-next-preview-banner {
position: sticky;
top: 0;
diff --git a/src/components/home-next/PreviewBanner.tsx
b/src/components/home-next/PreviewBanner.tsx
new file mode 100644
index 00000000000..208cde8413b
--- /dev/null
+++ b/src/components/home-next/PreviewBanner.tsx
@@ -0,0 +1,58 @@
+import React, { JSX, useEffect, useRef } from 'react';
+import './PreviewBanner.scss';
+
+interface PreviewBannerProps {
+ onSwitchBack?: () => void;
+}
+
+export function PreviewBanner({ onSwitchBack }: PreviewBannerProps):
JSX.Element {
+ const bannerRef = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ const el = bannerRef.current;
+ if (!el) return;
+ const update = () => {
+ document.documentElement.style.setProperty(
+ '--home-next-banner-height',
+ `${el.offsetHeight}px`,
+ );
+ };
+ update();
+ const ro = new ResizeObserver(update);
+ ro.observe(el);
+ return () => {
+ ro.disconnect();
+
document.documentElement.style.removeProperty('--home-next-banner-height');
+ };
+ }, []);
+
+ return (
+ <div ref={bannerRef} className="home-next-preview-banner"
role="status">
+ <span className="home-next-preview-banner__text">
+ You're viewing the preview version of this page. For the full
experience, please return to the
+ {' '}
+ <button
+ type="button"
+ className="home-next-preview-banner__link"
+ onClick={() => {
+ if (onSwitchBack) {
+ onSwitchBack();
+ return;
+ }
+ if (typeof window !== 'undefined') {
+ try {
+
window.localStorage.removeItem('doris-home-version');
+ } catch {
+ // localStorage may be unavailable (private
mode / disabled cookies)
+ }
+ window.location.assign('/');
+ }
+ }}
+ >
+ classic homepage
+ </button>
+ .
+ </span>
+ </div>
+ );
+}
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index 1c900fed9be..2aa123c2558 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -17,6 +17,7 @@ import type { Props } from '@theme/Layout';
import styles from './styles.module.css';
import { useHistory } from '@docusaurus/router';
import { NavbarNext } from '@site/src/components/home-next/NavbarNext';
+import { PreviewBanner } from '@site/src/components/home-next/PreviewBanner';
import { isDocsNextPath, isReleasesPath, isEventsPath } from
'@site/src/utils/locale';
interface DataType {
showSearchPageMobile: boolean;
@@ -89,6 +90,7 @@ export default function Layout(props: Props): JSX.Element {
<SkipToContent />
<AnnouncementBar />
+ {useNextNavbar && <PreviewBanner />}
{useNextNavbar ? <NavbarNext /> : <Navbar />}
{!useNextNavbar && showSearchPageMobile ? (
<div ref={searchPageDom}>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
