Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 0 additions & 44 deletions src/components/home-next/HomeNext.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
51 changes: 3 additions & 48 deletions src/components/home-next/LayoutNext.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 />
Expand Down
41 changes: 7 additions & 34 deletions src/components/home-next/NavbarNext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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`;
Expand All @@ -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 => ({
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
44 changes: 44 additions & 0 deletions src/components/home-next/PreviewBanner.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.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;
}
}
58 changes: 58 additions & 0 deletions src/components/home-next/PreviewBanner.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 2 additions & 0 deletions src/theme/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -89,6 +90,7 @@ export default function Layout(props: Props): JSX.Element {

<SkipToContent />
<AnnouncementBar />
{useNextNavbar && <PreviewBanner />}
{useNextNavbar ? <NavbarNext /> : <Navbar />}
{!useNextNavbar && showSearchPageMobile ? (
<div ref={searchPageDom}>
Expand Down
Loading