From f8dd1a6d845c729be0ffff46ee0e87ba36fef2ea Mon Sep 17 00:00:00 2001 From: Hyejin Yoon <0327jane@gmail.com> Date: Fri, 27 Sep 2024 14:54:05 +0900 Subject: [PATCH] feat: add second navbar (#11471) --- docs-website/docusaurus.config.js | 131 ++++++------------ .../components/SecondNavbar/SecondNavbar.js | 55 ++++++++ .../SecondNavbar/styles.module.scss | 64 +++++++++ docs-website/src/styles/global.scss | 5 + docs-website/src/theme/Layout/index.js | 14 ++ .../DocsVersionDropdownNavbarItem.js | 67 +++++++-- 6 files changed, 234 insertions(+), 102 deletions(-) create mode 100644 docs-website/src/components/SecondNavbar/SecondNavbar.js create mode 100644 docs-website/src/components/SecondNavbar/styles.module.scss create mode 100644 docs-website/src/theme/Layout/index.js diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js index c7f93b8a0b00f2..abbec9ece8be54 100644 --- a/docs-website/docusaurus.config.js +++ b/docs-website/docusaurus.config.js @@ -86,22 +86,34 @@ module.exports = { position: "right", }, { - to: "/cloud", - activeBasePath: "cloud", - html: "Cloud", + to: "/integrations", + activeBasePath: "integrations", + label: "Integrations", position: "right", }, { - to: "/learn", + type: "dropdown", activeBasePath: "learn", label: "Learn", position: "right", - }, - { - to: "/integrations", - activeBasePath: "integrations", - label: "Integrations", - position: "right", + items: [ + { + to: "/learn", + label: "Use Cases", + }, + { + to: "/adoption-stories", + label: "Adoption Stories", + }, + { + href: "https://blog.datahubproject.io/", + label: "Blog", + }, + { + href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w", + label: "YouTube", + }, + ], }, { type: "dropdown", @@ -131,87 +143,29 @@ module.exports = { ], }, { - type: "dropdown", - label: "Resources", + href: "/slack", + html: ` + + + `, position: "right", - items: [ - { - href: "https://demo.datahubproject.io/", - label: "Demo", - }, - { - href: "https://blog.datahubproject.io/", - label: "Blog", - }, - { - href: "https://feature-requests.datahubproject.io/roadmap", - label: "Roadmap", - }, - { - href: "https://github.com/datahub-project/datahub", - label: "GitHub", - }, - { - href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w", - label: "YouTube", - }, - { - href: "/adoption-stories", - label: "Adoption Stories", - }, - { - href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvErAXMiqUYH9e63wyDaMBgg", - label: "DataHub Basics", - }, - ], }, { - type: "docsVersionDropdown", - position: "left", - dropdownActiveClassDisabled: true, - dropdownItemsAfter: [ - { - type: 'html', - value: '
', - }, - { - type: 'html', - value: '
Archived versions
', - }, - { - value: ` - 0.13.0 - - - `, - type: "html", - }, - { - value: ` - 0.12.1 - - - `, - type: "html", - }, - { - value: ` - 0.11.0 - - - `, - type: "html", - }, - { - value: ` - 0.10.5 - - - `, - type: "html", - }, - ], - }, + href: "/cloud", + html: ` + +
Try DataHub Cloud Free
+ `, + position: "right", + } ], }, footer: { @@ -335,6 +289,7 @@ module.exports = { require.resolve("./src/styles/global.scss"), require.resolve("./src/styles/sphinx.scss"), require.resolve("./src/styles/config-table.scss"), + require.resolve("./src/components/SecondNavbar/styles.module.scss"), ], }, pages: { diff --git a/docs-website/src/components/SecondNavbar/SecondNavbar.js b/docs-website/src/components/SecondNavbar/SecondNavbar.js new file mode 100644 index 00000000000000..e17a3bceb1d93d --- /dev/null +++ b/docs-website/src/components/SecondNavbar/SecondNavbar.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import clsx from 'clsx'; +import { useColorMode } from '@docusaurus/theme-common'; +import SearchBar from '@theme/SearchBar'; +import ColorModeToggle from '@theme/ColorModeToggle'; +import styles from './styles.module.scss'; +import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem'; + +function SecondNavbarContent() { + const { colorMode, setColorMode } = useColorMode(); + const location = useLocation(); + const isDocsPath = location.pathname.startsWith('/docs'); + if (!isDocsPath) { + return null; + } + + return ( +
+
+
+ +
+
+
+ setColorMode(colorMode === 'dark' ? 'light' : 'dark')} + /> +
+
+ +
+
+
+
+ ); +} + +function SecondNavbar() { + return ( + + ); +} + +export default SecondNavbar; \ No newline at end of file diff --git a/docs-website/src/components/SecondNavbar/styles.module.scss b/docs-website/src/components/SecondNavbar/styles.module.scss new file mode 100644 index 00000000000000..eed10a6f14c2c6 --- /dev/null +++ b/docs-website/src/components/SecondNavbar/styles.module.scss @@ -0,0 +1,64 @@ +.secondNavbar { + background-color: #fff; + border-bottom: 1px solid #eaeaea; + z-index: 10; + color: black; + + &.darkMode { + background-color: #000; + color: #fff; + } +} + +.container, +.coreCloudSwitch, +.docsSwitchButton { + display: flex; + align-items: center; + height: 50px; +} + +.container { + padding: 0rem 1rem; +} + +.coreCloudSwitch { + width: var(--doc-sidebar-width); +} + +.docsSwitchButton { + padding: 0.5rem 1rem; + font-weight: 500; + font-size: 1.1rem; + color: black; + text-decoration: none; + + &:hover { + cursor: pointer; + text-decoration: none; + color: #007bff; + } +} + +.activeButton { + border-bottom: 2px solid #007bff; +} + +.darkMode .docsSwitchButton { + color: white; + + &:hover { + color: #4db5ff; + } +} + +.searchBox, +.colorModeToggle { + padding: 0.5rem 1rem; +} + +.navbarItemsRight { + display: flex; + margin-left: auto; + align-items: center; +} \ No newline at end of file diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss index 374958e096fa61..222f4946b03820 100644 --- a/docs-website/src/styles/global.scss +++ b/docs-website/src/styles/global.scss @@ -344,6 +344,11 @@ div[class^="announcementBar"] { } } +/* Hide Searchbar in Nav */ +.navbar--fixed-top .DocSearch { + display: none; +} + /* Search */ [data-theme="light"] .DocSearch { diff --git a/docs-website/src/theme/Layout/index.js b/docs-website/src/theme/Layout/index.js new file mode 100644 index 00000000000000..4ea66824ad2c15 --- /dev/null +++ b/docs-website/src/theme/Layout/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Layout from '@theme-original/Layout'; +import SecondNavbar from '../../components/SecondNavbar/SecondNavbar'; + +export default function LayoutWrapper(props) { + return ( + <> + + + {props.children} + + + ); +} \ No newline at end of file diff --git a/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js b/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js index 661d64392e67fe..ed083e4e0c3987 100644 --- a/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +++ b/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js @@ -10,12 +10,13 @@ import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem"; import styles from "./styles.module.scss"; const getVersionMainDoc = (version) => version.docs.find((doc) => doc.id === version.mainDocId); + export default function DocsVersionDropdownNavbarItem({ mobile, - docsPluginId, - dropdownActiveClassDisabled, - dropdownItemsBefore, - dropdownItemsAfter, + docsPluginId = 'default', + dropdownActiveClassDisabled = false, + dropdownItemsBefore = [], + dropdownItemsAfter = [], ...props }) { const { search, hash } = useLocation(); @@ -23,20 +24,60 @@ export default function DocsVersionDropdownNavbarItem({ const versions = useVersions(docsPluginId); const { savePreferredVersionName } = useDocsPreferredVersion(docsPluginId); const versionLinks = versions.map((version) => { - // We try to link to the same doc, in another version - // When not possible, fallback to the "main doc" of the version const versionDoc = activeDocContext.alternateDocVersions[version.name] ?? getVersionMainDoc(version); return { label: version.label, - // preserve ?search#hash suffix on version switches to: `${versionDoc.path}${search}${hash}`, isActive: () => version === activeDocContext.activeVersion, onClick: () => savePreferredVersionName(version.name), }; }); - const items = [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter]; + + const archivedVersions = [ + { + type: 'html', + value: '
', + }, + { + type: 'html', + value: '
Archived versions
', + }, + { + value: ` + 0.13.0 + + + `, + type: "html", + }, + { + value: ` + 0.12.1 + + + `, + type: "html", + }, + { + value: ` + 0.11.0 + + + `, + type: "html", + }, + { + value: ` + 0.10.5 + + + `, + type: "html", + }, + ]; + + const items = [...dropdownItemsBefore, ...versionLinks, ...archivedVersions, ...dropdownItemsAfter]; const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0]; - // Mobile dropdown is handled a bit differently const dropdownLabel = mobile && items.length > 1 ? translate({ @@ -46,9 +87,7 @@ export default function DocsVersionDropdownNavbarItem({ }) : dropdownVersion.label; const dropdownTo = mobile && items.length > 1 ? undefined : getVersionMainDoc(dropdownVersion).path; - // We don't want to render a version dropdown with 0 or 1 item. If we build - // the site with a single docs version (onlyIncludeVersions: ['1.0.0']), - // We'd rather render a button instead of a dropdown + if (items.length <= 1) { return ( false : undefined} /> ); -} +} \ No newline at end of file