This is an automated email from the ASF dual-hosted git repository.
bhavanisudha pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 6d7a6ade27a docs table horizontal scroll fix (#11845)
6d7a6ade27a is described below
commit 6d7a6ade27ad0c39e5fc2bc706e635281313fd01
Author: pintusoliya <[email protected]>
AuthorDate: Thu Aug 29 05:31:29 2024 +0530
docs table horizontal scroll fix (#11845)
---
website/src/css/custom.css | 13 ++++
website/src/theme/DocRoot/Layout/Main/index.js | 23 +++++++
.../theme/DocRoot/Layout/Main/styles.module.css | 21 +++++++
.../DocRoot/Layout/Sidebar/ExpandButton/index.js | 28 +++++++++
.../Layout/Sidebar/ExpandButton/styles.module.css | 27 +++++++++
website/src/theme/DocRoot/Layout/Sidebar/index.js | 70 ++++++++++++++++++++++
.../theme/DocRoot/Layout/Sidebar/styles.module.css | 32 ++++++++++
website/src/theme/DocRoot/Layout/index.js | 27 +++++++++
website/src/theme/DocRoot/Layout/styles.module.css | 9 +++
website/src/theme/DocRoot/index.js | 30 ++++++++++
.../NavbarItem/LocaleDropdownNavbarItem/index.js | 2 +-
.../LocaleDropdownNavbarItem/styles.module.css | 13 ----
12 files changed, 281 insertions(+), 14 deletions(-)
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 8c2932f5bdf..83bfd618853 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -436,6 +436,19 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
margin-left: 8px;
}
+.locale-dropdown-wrapper {
+ display: flex;
+ align-items: center;
+ &:hover {
+ path {
+ stroke: var(--ifm-navbar-link-hover-color);
+ }
+ }
+ &:after {
+ display: none !important;
+ }
+}
+
@media(max-width:1524px) {
.navbar__item {
padding: var(--ifm-navbar-item-padding-vertical) 7px;
diff --git a/website/src/theme/DocRoot/Layout/Main/index.js
b/website/src/theme/DocRoot/Layout/Main/index.js
new file mode 100644
index 00000000000..dd794ca18d1
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Main/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import styles from './styles.module.css';
+export default function DocRootLayoutMain({hiddenSidebarContainer, children}) {
+ const sidebar = useDocsSidebar();
+ return (
+ <main
+ className={clsx(
+ styles.docMainContainer,
+ (hiddenSidebarContainer || !sidebar) &&
styles.docMainContainerEnhanced,
+ )}>
+ <div
+ className={clsx(
+ 'container padding-top--md padding-bottom--lg',
+ styles.docItemWrapper,
+ hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+ )}>
+ {children}
+ </div>
+ </main>
+ );
+}
diff --git a/website/src/theme/DocRoot/Layout/Main/styles.module.css
b/website/src/theme/DocRoot/Layout/Main/styles.module.css
new file mode 100644
index 00000000000..096eb064902
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -0,0 +1,21 @@
+.docMainContainer {
+ display: flex;
+ width: 100%;
+}
+
+@media (min-width: 997px) {
+ .docMainContainer {
+ flex-grow: 1;
+ max-width: calc(100% - var(--doc-sidebar-width));
+ }
+
+ .docMainContainerEnhanced {
+ max-width: calc(100% - var(--doc-sidebar-hidden-width));
+ }
+
+ .docItemWrapperEnhanced {
+ max-width: calc(
+ var(--ifm-container-width) + var(--doc-sidebar-width)
+ ) !important;
+ }
+}
diff --git a/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js
b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js
new file mode 100644
index 00000000000..c3a354687a6
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function DocRootLayoutSidebarExpandButton({toggleSidebar}) {
+ return (
+ <div
+ className={styles.expandButton}
+ title={translate({
+ id: 'theme.docs.sidebar.expandButtonTitle',
+ message: 'Expand sidebar',
+ description:
+ 'The ARIA label and title attribute for expand button of doc
sidebar',
+ })}
+ aria-label={translate({
+ id: 'theme.docs.sidebar.expandButtonAriaLabel',
+ message: 'Expand sidebar',
+ description:
+ 'The ARIA label and title attribute for expand button of doc
sidebar',
+ })}
+ tabIndex={0}
+ role="button"
+ onKeyDown={toggleSidebar}
+ onClick={toggleSidebar}>
+ <IconArrow className={styles.expandButtonIcon} />
+ </div>
+ );
+}
diff --git
a/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
new file mode 100644
index 00000000000..f4cd944d83c
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
@@ -0,0 +1,27 @@
+@media (min-width: 997px) {
+ .expandButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color var(--ifm-transition-fast) ease;
+ background-color: var(--docusaurus-collapse-button-bg);
+ }
+
+ .expandButton:hover,
+ .expandButton:focus {
+ background-color: var(--docusaurus-collapse-button-bg-hover);
+ }
+
+ .expandButtonIcon {
+ transform: rotate(0);
+ }
+
+ [dir='rtl'] .expandButtonIcon {
+ transform: rotate(180deg);
+ }
+}
diff --git a/website/src/theme/DocRoot/Layout/Sidebar/index.js
b/website/src/theme/DocRoot/Layout/Sidebar/index.js
new file mode 100644
index 00000000000..5c0ff425df9
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Sidebar/index.js
@@ -0,0 +1,70 @@
+import React, {useState, useCallback} from 'react';
+import clsx from 'clsx';
+import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import {useLocation} from '@docusaurus/router';
+import DocSidebar from '@theme/DocSidebar';
+import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
+import styles from './styles.module.css';
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({children}) {
+ const sidebar = useDocsSidebar();
+ return (
+ <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+ {children}
+ </React.Fragment>
+ );
+}
+export default function DocRootLayoutSidebar({
+ sidebar,
+ hiddenSidebarContainer,
+ setHiddenSidebarContainer,
+}) {
+ const {pathname} = useLocation();
+ const [hiddenSidebar, setHiddenSidebar] = useState(false);
+ const toggleSidebar = useCallback(() => {
+ if (hiddenSidebar) {
+ setHiddenSidebar(false);
+ }
+ // onTransitionEnd won't fire when sidebar animation is disabled
+ // fixes https://github.com/facebook/docusaurus/issues/8918
+ if (!hiddenSidebar && prefersReducedMotion()) {
+ setHiddenSidebar(true);
+ }
+ setHiddenSidebarContainer((value) => !value);
+ }, [setHiddenSidebarContainer, hiddenSidebar]);
+ return (
+ <aside
+ className={clsx(
+ ThemeClassNames.docs.docSidebarContainer,
+ styles.docSidebarContainer,
+ hiddenSidebarContainer && styles.docSidebarContainerHidden,
+ )}
+ onTransitionEnd={(e) => {
+ if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
+ return;
+ }
+ if (hiddenSidebarContainer) {
+ setHiddenSidebar(true);
+ }
+ }}>
+ <ResetOnSidebarChange>
+ <div
+ className={clsx(
+ styles.sidebarViewport,
+ hiddenSidebar && styles.sidebarViewportHidden,
+ )}>
+ <DocSidebar
+ sidebar={sidebar}
+ path={pathname}
+ onCollapse={toggleSidebar}
+ isHidden={hiddenSidebar}
+ />
+ {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+ </div>
+ </ResetOnSidebarChange>
+ </aside>
+ );
+}
diff --git a/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css
b/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css
new file mode 100644
index 00000000000..221aabf5642
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -0,0 +1,32 @@
+:root {
+ --doc-sidebar-width: 300px;
+ --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+ display: none;
+}
+
+@media (min-width: 997px) {
+ .docSidebarContainer {
+ display: block;
+ width: var(--doc-sidebar-width);
+ margin-top: calc(-1 * var(--ifm-navbar-height));
+ border-right: 1px solid var(--ifm-toc-border-color);
+ will-change: width;
+ transition: width var(--ifm-transition-fast) ease;
+ clip-path: inset(0);
+ }
+
+ .docSidebarContainerHidden {
+ width: var(--doc-sidebar-hidden-width);
+ cursor: pointer;
+ }
+
+ .sidebarViewport {
+ top: 0;
+ position: sticky;
+ height: 100%;
+ max-height: 100vh;
+ }
+}
diff --git a/website/src/theme/DocRoot/Layout/index.js
b/website/src/theme/DocRoot/Layout/index.js
new file mode 100644
index 00000000000..62b84651981
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/index.js
@@ -0,0 +1,27 @@
+import React, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import BackToTopButton from '@theme/BackToTopButton';
+import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
+import DocRootLayoutMain from '@theme/DocRoot/Layout/Main';
+import styles from './styles.module.css';
+export default function DocRootLayout({children}) {
+ const sidebar = useDocsSidebar();
+ const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+ return (
+ <div className={styles.docsWrapper}>
+ <BackToTopButton />
+ <div className={styles.docRoot}>
+ {sidebar && (
+ <DocRootLayoutSidebar
+ sidebar={sidebar.items}
+ hiddenSidebarContainer={hiddenSidebarContainer}
+ setHiddenSidebarContainer={setHiddenSidebarContainer}
+ />
+ )}
+ <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+ {children}
+ </DocRootLayoutMain>
+ </div>
+ </div>
+ );
+}
diff --git a/website/src/theme/DocRoot/Layout/styles.module.css
b/website/src/theme/DocRoot/Layout/styles.module.css
new file mode 100644
index 00000000000..a77c9758986
--- /dev/null
+++ b/website/src/theme/DocRoot/Layout/styles.module.css
@@ -0,0 +1,9 @@
+.docRoot {
+ display: flex;
+ width: 100%;
+}
+
+.docsWrapper {
+ display: flex;
+ flex: 1 0 auto;
+}
diff --git a/website/src/theme/DocRoot/index.js
b/website/src/theme/DocRoot/index.js
new file mode 100644
index 00000000000..9154864d758
--- /dev/null
+++ b/website/src/theme/DocRoot/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from
'@docusaurus/theme-common';
+import {
+ DocsSidebarProvider,
+ useDocRootMetadata,
+} from '@docusaurus/plugin-content-docs/client';
+import DocRootLayout from '@theme/DocRoot/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+
+const arrayOfPages = (matchPath) => [`${matchPath}/configurations`,
`${matchPath}/basic_configurations`, `${matchPath}/timeline`,
`${matchPath}/table_types`, `${matchPath}/migration_guide`,
`${matchPath}/compaction`, `${matchPath}/clustering`, `${matchPath}/indexing`,
`${matchPath}/metadata`, `${matchPath}/metadata_indexing`,
`${matchPath}/record_payload`, `${matchPath}/file_sizing`,
`${matchPath}/hoodie_cleaner`, `${matchPath}/concurrency_control`, ,
`${matchPath}/write_operations`, `${ [...]
+const showCustomStylesForDocs = (matchPath, pathname) =>
arrayOfPages(matchPath).includes(pathname);
+
+export default function DocRoot(props) {
+ const currentDocRouteMetadata = useDocRootMetadata(props);
+ if (!currentDocRouteMetadata) {
+ // We only render the not found content to avoid a double layout
+ // see
https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692
+ return <NotFoundContent />;
+ }
+ const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+ const addCustomClass = showCustomStylesForDocs(props.match.path,
props.location.pathname)
+ return (
+ <HtmlClassNameProvider className={clsx(ThemeClassNames.page.docsDocPage,
{'docs-custom-styles': addCustomClass })}>
+ <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+ <DocRootLayout>{docElement}</DocRootLayout>
+ </DocsSidebarProvider>
+ </HtmlClassNameProvider>
+ );
+}
diff --git a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
index 9699207c589..baa803b4115 100644
--- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
@@ -57,7 +57,7 @@ export default function LocaleDropdownNavbarItem({
<DropdownNavbarItem
{...props}
mobile={mobile}
- className={styles.wrapper}
+ className='locale-dropdown-wrapper'
label={
<>
<IconLanguage className={styles.iconLaynguage} />
diff --git
a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
index e77b41ecaf6..b7bb8d2f316 100644
--- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -6,16 +6,3 @@
.globeIcon {
margin-left: 5.5px;
}
-
-.wrapper {
- display: flex;
- align-items: center;
- &:hover {
- path {
- stroke: var(--ifm-navbar-link-hover-color);
- }
- }
- &:after {
- display: none !important;
- }
-}
