diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 351f7dd20ee..babacfe43d8 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -885,10 +885,8 @@ const config: Config = { ], }, { - href: '/user-docs/', + type: 'custom-getStartedSplit', position: 'right', - className: 'default-button-theme get-started-button', - label: 'Get Started', }, { href: 'https://github.com/apache/superset', diff --git a/docs/src/components/GetStartedSplitButton.tsx b/docs/src/components/GetStartedSplitButton.tsx new file mode 100644 index 00000000000..9f4a541884c --- /dev/null +++ b/docs/src/components/GetStartedSplitButton.tsx @@ -0,0 +1,155 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { DownOutlined } from '@ant-design/icons'; +import Link from '@docusaurus/Link'; +import { Dropdown } from 'antd'; +import type { MenuProps } from 'antd'; +import styled from '@emotion/styled'; +import { mq } from '../utils.js'; + +const getStartedMenuItems: MenuProps['items'] = [ + { key: 'users', label: Users }, + { key: 'admins', label: Admins }, + { key: 'developers', label: Developers }, +]; + +const Root = styled.div<{ $variant: 'hero' | 'navbar' }>` + display: flex; + align-items: stretch; + border-radius: 10px; + overflow: hidden; + position: relative; + z-index: 2; + font-weight: bold; + + ${({ $variant }) => + $variant === 'hero' + ? ` + width: 208px; + margin: 15px auto 0; + font-size: 20px; + ${mq[1]} { + font-size: 19px; + width: 214px; + } + ` + : ` + width: 176px; + margin-right: 20px; + font-size: 18px; + `} + + .split-main { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + text-decoration: none; + min-width: 0; + ${({ $variant }) => + $variant === 'hero' + ? `padding: 10px 10px;` + : `padding: 7px 8px;`} + } + + .split-main:hover { + color: #ffffff; + } + + .split-divider { + width: 1px; + flex-shrink: 0; + align-self: stretch; + background: rgba(255, 255, 255, 0.38); + ${({ $variant }) => + $variant === 'hero' + ? `margin: 8px 0;` + : `margin: 6px 0;`} + } + + .split-dropdown-trigger { + flex-shrink: 0; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + color: #ffffff; + ${({ $variant }) => + $variant === 'hero' + ? ` + width: 44px; + font-size: 11px; + ${mq[1]} { + width: 46px; + } + ` + : ` + width: 38px; + font-size: 10px; + `} + } + + .split-dropdown-trigger:hover { + color: #ffffff; + } +`; + +export type GetStartedSplitButtonProps = { + variant: 'hero' | 'navbar'; + /** Classes for the outer control (include default-button-theme get-started-split) */ + rootClassName: string; +}; + +export default function GetStartedSplitButton({ + variant, + rootClassName, +}: GetStartedSplitButtonProps) { + const menuClassName = `get-started-split-dropdown-menu get-started-split-dropdown-menu--${variant}`; + + return ( + + + Get Started + + + + + + + ); +} diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 75c9c57daa5..04f8c89789b 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -28,6 +28,7 @@ import databaseData from '../data/databases.json'; import BlurredSection from '../components/BlurredSection'; import DataSet from '../../../RESOURCES/INTHEWILD.yaml'; import type { DatabaseData } from '../components/databases/types'; +import GetStartedSplitButton from '../components/GetStartedSplitButton'; import '../styles/main.css'; // Build database list from databases.json (databases with logos) @@ -191,20 +192,6 @@ const StyledTitleContainer = styled('div')` } `; -const StyledButton = styled(Link)` - border-radius: 10px; - font-size: 20px; - font-weight: bold; - width: 170px; - padding: 10px 0; - margin: 15px auto 0; - ${mq[1]} { - font-size: 19px; - width: 175px; - padding: 10px 0; - } -`; - const StyledScreenshotContainer = styled('div')` position: relative; display: inline-block; @@ -717,9 +704,10 @@ export default function Home(): JSX.Element { line - - Get Started - + span > svg { opacity: 1; } +/* Homepage split "Get started": gradient button + chevron column */ +.default-button-theme.get-started-split { + display: flex; + padding: 0; +} + +.get-started-split-dropdown-menu.ant-dropdown-menu { + background: linear-gradient(180deg, #20a7c9 0%, #0c8fae 100%) !important; + border: 1px solid rgba(255, 255, 255, 0.22); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important; +} + +.get-started-split-dropdown-menu--hero.ant-dropdown-menu { + min-width: 208px; +} + +@media (max-width: 768px) { + .get-started-split-dropdown-menu--hero.ant-dropdown-menu { + min-width: 214px; + } +} + +.get-started-split-dropdown-menu--navbar.ant-dropdown-menu { + min-width: 176px; +} + +.get-started-split-dropdown-menu .ant-dropdown-menu-item { + color: #ffffff !important; +} + +.get-started-split-dropdown-menu .ant-dropdown-menu-item:hover, +.get-started-split-dropdown-menu .ant-dropdown-menu-item-active { + background: rgba(255, 255, 255, 0.15) !important; +} + +.get-started-split-dropdown-menu .ant-dropdown-menu-item a { + color: inherit !important; +} + /* Navbar */ .navbar { @@ -117,11 +156,14 @@ a > span > svg { border-radius: 10px; font-size: 18px; font-weight: bold; - width: 142px; - padding: 7px 0; margin-right: 20px; } +.navbar .get-started-button.get-started-split { + width: 176px; + padding: 0; +} + .navbar .github-button { background-image: url('/img/github.png'); background-size: contain; diff --git a/docs/src/theme/NavbarItem/ComponentTypes.tsx b/docs/src/theme/NavbarItem/ComponentTypes.tsx new file mode 100644 index 00000000000..4b7ebe63a13 --- /dev/null +++ b/docs/src/theme/NavbarItem/ComponentTypes.tsx @@ -0,0 +1,41 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import DocNavbarItem from '@theme-original/NavbarItem/DocNavbarItem'; +import DocSidebarNavbarItem from '@theme-original/NavbarItem/DocSidebarNavbarItem'; +import DocsVersionDropdownNavbarItem from '@theme-original/NavbarItem/DocsVersionDropdownNavbarItem'; +import DocsVersionNavbarItem from '@theme-original/NavbarItem/DocsVersionNavbarItem'; +import DropdownNavbarItem from '@theme-original/NavbarItem/DropdownNavbarItem'; +import DefaultNavbarItem from '@theme-original/NavbarItem/DefaultNavbarItem'; +import HtmlNavbarItem from '@theme-original/NavbarItem/HtmlNavbarItem'; +import LocaleDropdownNavbarItem from '@theme-original/NavbarItem/LocaleDropdownNavbarItem'; +import SearchNavbarItem from '@theme-original/NavbarItem/SearchNavbarItem'; +import GetStartedSplitNavbarItem from './GetStartedSplitNavbarItem'; + +export default { + default: DefaultNavbarItem, + localeDropdown: LocaleDropdownNavbarItem, + search: SearchNavbarItem, + dropdown: DropdownNavbarItem, + html: HtmlNavbarItem, + doc: DocNavbarItem, + docSidebar: DocSidebarNavbarItem, + docsVersion: DocsVersionNavbarItem, + docsVersionDropdown: DocsVersionDropdownNavbarItem, + 'custom-getStartedSplit': GetStartedSplitNavbarItem, +}; diff --git a/docs/src/theme/NavbarItem/GetStartedSplitNavbarItem.tsx b/docs/src/theme/NavbarItem/GetStartedSplitNavbarItem.tsx new file mode 100644 index 00000000000..7c7b202b7e6 --- /dev/null +++ b/docs/src/theme/NavbarItem/GetStartedSplitNavbarItem.tsx @@ -0,0 +1,29 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import GetStartedSplitButton from '../../components/GetStartedSplitButton'; +import '../../styles/main.css'; + +export default function GetStartedSplitNavbarItem() { + return ( + + ); +} diff --git a/docs/src/theme/Root.js b/docs/src/theme/Root.js index 10538df6970..677531ff905 100644 --- a/docs/src/theme/Root.js +++ b/docs/src/theme/Root.js @@ -147,7 +147,9 @@ export default function Root({ children }) { const button = event.target.closest('.get-started-button, .default-button-theme'); if (button) { const buttonText = button.textContent?.trim() || 'Unknown'; - const href = button.getAttribute('href') || ''; + const clickedLink = event.target.closest?.('a'); + const href = + clickedLink?.getAttribute('href') || button.getAttribute('href') || ''; trackEvent('CTA', 'Click', `${buttonText} - ${href}`); } };