mirror of
https://github.com/datahub-project/datahub.git
synced 2025-09-01 21:33:11 +00:00
docs: remove navbar overwrite (#14494)
This commit is contained in:
Hyejin Yoon
GitHub
parent
4a1bab6015
commit
4a283a07bd
@ -132,87 +132,6 @@ module.exports = {
|
|||||||
label: "Integrations",
|
label: "Integrations",
|
||||||
position: "right",
|
position: "right",
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// type: "dropdown",
|
|
||||||
// activeBasePath: "learn",
|
|
||||||
// label: "Learn",
|
|
||||||
// position: "right",
|
|
||||||
// items: [
|
|
||||||
// {
|
|
||||||
// to: "https://pages.acryl.io/webinar-governance-ai-5",
|
|
||||||
// label: "Weekly Demo",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// to: "/learn",
|
|
||||||
// label: "Use Cases",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// to: "/adoption-stories",
|
|
||||||
// label: "Adoption Stories",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// href: "https://medium.com/datahub-project",
|
|
||||||
// label: "Blog",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
|
|
||||||
// label: "YouTube",
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// type: "dropdown",
|
|
||||||
// label: "Community",
|
|
||||||
// position: "right",
|
|
||||||
// items: [
|
|
||||||
// {
|
|
||||||
// href: "https://datahub.com/slack?utm_source=docs&utm_medium=header&utm_campaign=docs_header",
|
|
||||||
// label: "Join Slack",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// to: "/events",
|
|
||||||
// label: "Events",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// to: "/champions",
|
|
||||||
// label: "Champions",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: "Share Your Journey",
|
|
||||||
// href: "/customer-stories-survey",
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
href: "https://datahub.com/products/why-datahub-cloud/",
|
|
||||||
html: `
|
|
||||||
<style>
|
|
||||||
.cloud-cta {
|
|
||||||
color: var(--ifm-menu-color-active);
|
|
||||||
font-weight: 600;
|
|
||||||
background: linear-gradient(40deg, var(--ifm-menu-color-active), var(--ifm-menu-color-active));
|
|
||||||
background-size: 200% 100%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
transition: background-image 0.3s ease;
|
|
||||||
}
|
|
||||||
.cloud-cta:hover {
|
|
||||||
color: transparent;
|
|
||||||
background: linear-gradient(40deg, var(--ifm-menu-color-active), #ff1493);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
animation: gradientShift 3s ease infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradientShift {
|
|
||||||
0%, 100% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class='cloud-cta'>Get Cloud</div>
|
|
||||||
`,
|
|
||||||
position: "right",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: "docsVersionDropdown",
|
type: "docsVersionDropdown",
|
||||||
position: "left",
|
position: "left",
|
||||||
@ -312,6 +231,18 @@ module.exports = {
|
|||||||
`,
|
`,
|
||||||
position: "right",
|
position: "right",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: "https://github.com/datahub-project/datahub",
|
||||||
|
html: `
|
||||||
|
<style>
|
||||||
|
.github-logo:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<img class='github-logo' src='https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', alt='slack', height='20px' style='margin: 10px 0 0 0;'/>
|
||||||
|
`,
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
|
|||||||
@ -1,116 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, {type ReactNode} from 'react';
|
|
||||||
import {useThemeConfig, ErrorCauseBoundary} from '@docusaurus/theme-common';
|
|
||||||
import {
|
|
||||||
splitNavbarItems,
|
|
||||||
useNavbarMobileSidebar,
|
|
||||||
} from '@docusaurus/theme-common/internal';
|
|
||||||
import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
|
|
||||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
|
||||||
import SearchBar from '@theme/SearchBar';
|
|
||||||
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
|
|
||||||
import NavbarLogo from '@theme/Navbar/Logo';
|
|
||||||
import NavbarSearch from '@theme/Navbar/Search';
|
|
||||||
import CardDropdown from '../../../components/CardDropdown/CardDropdown';
|
|
||||||
import learnCardDropdownContent from '../learnCardDropdownContent';
|
|
||||||
import communityCardDropdownContent from '../communityCardDropdownContent';
|
|
||||||
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
|
|
||||||
function useNavbarItems() {
|
|
||||||
// TODO temporary casting until ThemeConfig type is improved
|
|
||||||
return useThemeConfig().navbar.items as NavbarItemConfig[];
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavbarItems({items}: {items: NavbarItemConfig[]}): JSX.Element {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{items.map((item, i) => (
|
|
||||||
<ErrorCauseBoundary
|
|
||||||
key={i}
|
|
||||||
onError={(error) =>
|
|
||||||
new Error(
|
|
||||||
`A theme navbar item failed to render.
|
|
||||||
Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
|
|
||||||
${JSON.stringify(item, null, 2)}`,
|
|
||||||
{cause: error},
|
|
||||||
)
|
|
||||||
}>
|
|
||||||
<NavbarItem {...item} />
|
|
||||||
</ErrorCauseBoundary>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavbarContentLayout({
|
|
||||||
left,
|
|
||||||
right,
|
|
||||||
}: {
|
|
||||||
left: ReactNode;
|
|
||||||
right: ReactNode;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="navbar__inner">
|
|
||||||
<div className="navbar__items">{left}</div>
|
|
||||||
<div className="navbar__items navbar__items--right">{right}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NavbarContent(): JSX.Element {
|
|
||||||
const mobileSidebar = useNavbarMobileSidebar();
|
|
||||||
|
|
||||||
const items = useNavbarItems();
|
|
||||||
const [leftItems, rightItems] = splitNavbarItems(items);
|
|
||||||
|
|
||||||
// among the right items, pick items except "Solution", "Learn", "Community"
|
|
||||||
const rightItemsDropdown = rightItems.filter(
|
|
||||||
(item) =>
|
|
||||||
item.label == 'Integrations' ||
|
|
||||||
item.label == 'Docs'
|
|
||||||
);
|
|
||||||
|
|
||||||
// pick items without labels
|
|
||||||
const rightItemsCTA = rightItems.filter(
|
|
||||||
(item) =>
|
|
||||||
item.label == undefined
|
|
||||||
);
|
|
||||||
|
|
||||||
const searchBarItem = items.find((item) => item.type === 'search');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NavbarContentLayout
|
|
||||||
left={
|
|
||||||
// TODO stop hardcoding items?
|
|
||||||
<>
|
|
||||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
|
||||||
<NavbarLogo />
|
|
||||||
<NavbarItems items={leftItems} />
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
right={
|
|
||||||
// TODO stop hardcoding items?
|
|
||||||
// Ask the user to add the respective navbar items => more flexible
|
|
||||||
<>
|
|
||||||
<NavbarItems items={rightItemsDropdown} />
|
|
||||||
<CardDropdown label="Learn" items={learnCardDropdownContent} />
|
|
||||||
<CardDropdown label= "Community" items={communityCardDropdownContent} />
|
|
||||||
<NavbarItems items={rightItemsCTA} />
|
|
||||||
<NavbarColorModeToggle className={styles.colorModeToggle} />
|
|
||||||
{!searchBarItem && (
|
|
||||||
<NavbarSearch>
|
|
||||||
<SearchBar />
|
|
||||||
</NavbarSearch>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
/*
|
|
||||||
Hide color mode toggle in small viewports
|
|
||||||
*/
|
|
||||||
@media (max-width: 996px) {
|
|
||||||
.colorModeToggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
const communityCardDropdownContent = [
|
|
||||||
{
|
|
||||||
title: "Join Slack",
|
|
||||||
iconImage: "/img/icon-join-slack.png",
|
|
||||||
href: "https://datahub.com/slack/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Events",
|
|
||||||
iconImage: "/img/icon-events.png",
|
|
||||||
href: "https://datahub.com/events/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Champions",
|
|
||||||
iconImage: "/img/icon-champions.png",
|
|
||||||
href: "https://datahub.com/champions/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Share Your Journey",
|
|
||||||
iconImage: "/img/icon-share-your-journey.png",
|
|
||||||
href: "https://datahub.com/share-your-journey/",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default communityCardDropdownContent
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
const learnCardDropdownContent = [
|
|
||||||
{
|
|
||||||
title: "Weekly Demo",
|
|
||||||
iconImage: "/img/icon-join-slack.png",
|
|
||||||
href: "https://datahub.com/weekly-demo/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Use Cases",
|
|
||||||
iconImage: "/img/icon-forum.png",
|
|
||||||
href: "https://datahub.com/use-cases/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Adoption Stories",
|
|
||||||
iconImage: "/img/icon-events.png",
|
|
||||||
href: "https://datahub.com/resources/?2004611554=dh-stories",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Blog",
|
|
||||||
iconImage: "/img/icon-champions.png",
|
|
||||||
href: "https://datahub.com/resources/?2004611554=post",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Youtube",
|
|
||||||
iconImage: "/img/icon-share-your-journey.png",
|
|
||||||
href: "http://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default learnCardDropdownContent
|
|
||||||
Loading…
x
Reference in New Issue
Block a user