fix(docs): add split Get Started button to main docs page with audience links (#39467)

2026-05-12 19:35:17 +00:00 · 2026-04-28 20:05:26 +05:30
parent 3aa99c577e
commit ef50b688ee
7 changed files with 278 additions and 23 deletions
--- a/docs/src/components/GetStartedSplitButton.tsx
+++ 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: <Link to="/user-docs/">Users</Link> },
+  { key: 'admins', label: <Link to="/admin-docs/">Admins</Link> },
+  { key: 'developers', label: <Link to="/developer-docs/">Developers</Link> },
+];
+
+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 (
+    <Root $variant={variant} className={rootClassName}>
+      <Link to="/user-docs/" className="split-main">
+        Get Started
+      </Link>
+      <span className="split-divider" aria-hidden />
+      <Dropdown
+        menu={{
+          items: getStartedMenuItems,
+          className: menuClassName,
+        }}
+        trigger={['click']}
+        placement="bottomRight"
+      >
+        <button
+          type="button"
+          className="split-dropdown-trigger"
+          aria-haspopup="menu"
+          aria-label="Choose documentation: Users, Admins, or Developers"
+        >
+          <DownOutlined />
+        </button>
+      </Dropdown>
+    </Root>
+  );
+}
--- 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 {
              </span>
            </div>
            <img src="/img/community/line.png" alt="line" />
-            <StyledButton className="default-button-theme" href="/user-docs/intro">
-              Get Started
-            </StyledButton>
+            <GetStartedSplitButton
+              variant="hero"
+              rootClassName="default-button-theme get-started-split"
+            />
          </div>
          <StyledScreenshotContainer>
            <img
--- a/docs/src/styles/main.css
+++ b/docs/src/styles/main.css
@@ -105,6 +105,45 @@ a > 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;
--- a/docs/src/theme/NavbarItem/ComponentTypes.tsx
+++ 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,
+};
--- a/docs/src/theme/NavbarItem/GetStartedSplitNavbarItem.tsx
+++ 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 (
+    <GetStartedSplitButton
+      variant="navbar"
+      rootClassName="default-button-theme get-started-split get-started-button"
+    />
+  );
+}
--- 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}`);
        }
      };