diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js index c7f93b8a0b..abbec9ece8 100644 --- a/docs-website/docusaurus.config.js +++ b/docs-website/docusaurus.config.js @@ -85,24 +85,36 @@ module.exports = { label: "Docs", position: "right", }, - { - to: "/cloud", - activeBasePath: "cloud", - html: "Cloud", - position: "right", - }, - { - to: "/learn", - activeBasePath: "learn", - label: "Learn", - position: "right", - }, { to: "/integrations", activeBasePath: "integrations", label: "Integrations", position: "right", }, + { + type: "dropdown", + activeBasePath: "learn", + label: "Learn", + 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", label: "Community", @@ -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 0000000000..e17a3bceb1 --- /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 0000000000..eed10a6f14 --- /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 374958e096..222f4946b0 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 0000000000..4ea66824ad --- /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 661d64392e..ed083e4e0c 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