feat: navbar redesign

docusaurus.config.js

@@ -14,7 +14,8 @@ import { themes as prismThemes } from "prism-react-renderer";
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "RunPod Documentation",
-  tagline: "Globally distributed GPU cloud built for production. Develop, train, and scale AI applications.",
+  tagline:
+    "Globally distributed GPU cloud built for production. Develop, train, and scale AI applications.",
   favicon: "img/favicon.ico",
   url: "https://docs.runpod.io",
   baseUrl: "/",
@@ -100,11 +101,14 @@ const config = {
     },
     image: "img/docusaurus-social-card.png",
     navbar: {
-      title: "RunPod",
+      title: "Docs Home",
 
       logo: {
         alt: "RunPod Logo",
-        src: "img/logo.svg",
+        src: "img/logoLightMode.svg",
+        srcDark: "img/logoDarkMode.svg",
+        target: "_self",
+        href: "https://www.runpod.io",
       },
       items: [
         {
@@ -123,7 +127,11 @@ const config = {
         },
 
         { href: "https://blog.runpod.io", label: "Blog", position: "left" },
-        { href: "https://www.runpod.io/console/signup", label: "Sign up", position: "left" },
+        {
+          href: "https://www.runpod.io/console/signup",
+          label: "Sign up",
+          position: "left",
+        },
         {
           href: "https://github.com/runpod",
           label: "GitHub",
@@ -214,7 +222,8 @@ const config = {
       "data-website-id": "d8e25089-cadd-4c1c-9010-7e83cd99a2a5",
       "data-project-name": "RunPod",
       "data-project-color": "#070D27",
-      "data-project-logo": "https://avatars.githubusercontent.com/u/95939477?s=200&v=4",
+      "data-project-logo":
+        "https://avatars.githubusercontent.com/u/95939477?s=200&v=4",
       async: true,
     },
     {

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
+    "dev": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

src/css/custom.css

@@ -15,16 +15,61 @@
   --ifm-color-primary-lightest: #a87deb; /* Lightest tint */
   --ifm-code-font-size: 95%; /* Adjusted code font size */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); /* Highlighted code line background in light mode */
+  --ifm-font-family-base: 'Inter', sans-serif; /* Base font family */
+  font-family: var(--ifm-font-family-base) !important;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #a382ec; /* Primary color for dark mode */
-  --ifm-color-primary-dark: #9775e3; /* Dark shade for dark mode */
-  --ifm-color-primary-darker: #8c68db; /* Darker shade for dark mode */
-  --ifm-color-primary-darkest: #7a59c9; /* Darkest shade for dark mode */
-  --ifm-color-primary-light: #ab8eed; /* Light tint for dark mode */
-  --ifm-color-primary-lighter: #b39bf0; /* Lighter tint for dark mode */
-  --ifm-color-primary-lightest: #beb0f3; /* Lightest tint for dark mode */
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); /* Highlighted code line background in dark mode */
+/* dark mode */
+[data-theme='dark']:root { 
+    --ifm-color-primary: #a382ec; /* Primary color for dark mode */
+    --ifm-color-primary-dark: #9775e3; /* Dark shade for dark mode */
+    --ifm-color-primary-darker: #8c68db; /* Darker shade for dark mode */
+    --ifm-color-primary-darkest: #7a59c9; /* Darkest shade for dark mode */
+    --ifm-color-primary-light: #ab8eed; /* Light tint for dark mode */
+    --ifm-color-primary-lighter: #b39bf0; /* Lighter tint for dark mode */
+    --ifm-color-primary-lightest: #beb0f3; /* Lightest tint for dark mode */
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); /* Highlighted code line background in dark mode */
+    --ifm-navbar-background-color: #000;
+    --docsearch-searchbox-background: #1d1d1d; 
 }
+
+body {
+  font-family: var(--ifm-font-family-base) !important;
+}
+
+.navbar--fixed-top {
+  padding-left: 36px;
+  padding-right: 36px;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  box-shadow: none;
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+}
+
+.navbar__brand:has(.navbar__title) {
+  margin-left: 30px;
+}
+
+.navbar__items {
+  --ifm-navbar-item-padding-horizontal: 20px;
+}
+
+@media (max-width: 1200px) {
+  .navbar--fixed-top {
+    padding-left: 15px;
+    padding-right: 20px;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  a[href*="github.com"] {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  a[href*="github.com"] {
+    display: inline; /* or whatever display property you want */
+  }
+}

src/pages/index.module.css

@@ -1,6 +1,6 @@
 /* General Styles */
 body {
-  font-family: 'Arial', sans-serif; 
+  font-family: 'Inter', sans-serif; 
   margin: 0;
 }
 

src/theme/Layout.js

@@ -0,0 +1,21 @@
+import React from "react";
+import OriginalLayout from "@theme-original/Layout";
+import Head from "@docusaurus/Head";
+import { useLocation } from "@docusaurus/router";
+
+export default function Layout(props) {
+  const location = useLocation();
+  return (
+    <>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <OriginalLayout {...props} />
+    </>
+  );
+}

src/theme/Logo/index.js

@@ -0,0 +1,71 @@
+import React, { useLayoutEffect } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import ThemedImage from "@theme/ThemedImage";
+function LogoThemedImage({ logo, alt, imageClassName }) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  );
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props) {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext();
+  const {
+    navbar: { title: navbarTitle, logo },
+  } = useThemeConfig();
+  const { imageClassName, titleClassName, ...propsRest } = props;
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? "" : title;
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
+  const [logoLink, setLogoLink] = React.useState(logo?.href || "/");
+  useLayoutEffect(() => {
+    setLogoLink(window.location.origin);
+  }, []);
+
+  return (
+    <>
+      {logo && (
+        <Link
+          to={logoLink}
+          {...propsRest}
+          {...(logo?.target && { target: logo.target })}
+        >
+          <LogoThemedImage
+            logo={logo}
+            alt={alt}
+            imageClassName={imageClassName}
+          />
+        </Link>
+      )}
+      <Link to={"/"} {...propsRest} target="_self">
+        {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+      </Link>
+    </>
+  );
+}

src/theme/Navbar/Content/index.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from "@docusaurus/theme-common/internal";
+import NavbarItem 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 styles from "./styles.module.css";
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+function NavbarItems({ items }) {
+  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 }) {
+  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() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const searchBarItem = items.find((item) => item.type === "search");
+  return (
+    <NavbarContentLayout
+      left={
+        // TODO stop hardcoding items?
+        <>
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        // TODO stop hardcoding items?
+        // Ask the user to add the respective navbar items => more flexible
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          {!searchBarItem && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+        </>
+      }
+    />
+  );
+}

src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 768px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import IconMenu from '@theme/Icon/Menu';
+
+export default function MobileSidebarToggle(): JSX.Element {
+  const {toggle, shown} = useNavbarMobileSidebar();
+  return (
+    <button
+      onClick={toggle}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+        message: 'Toggle navigation bar',
+        description:
+          'The ARIA label for hamburger menu button of mobile navigation',
+      })}
+      aria-expanded={shown}
+      className="navbar__toggle clean-btn"
+      type="button">
+      <IconMenu />
+    </button>
+  );
+}

src/theme/Navbar/Search/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+export default function NavbarSearch({children, className}) {
+  return (
+    <div className={clsx(className, styles.navbarSearchContainer)}>
+      {children}
+    </div>
+  );
+}

src/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,18 @@
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:empty {
+  display: none;
+}
+
+@media (max-width: 996px) {
+  .navbarSearchContainer {
+    position: relative;
+    margin-right: 20px;
+  }
+}
+
+.navbarSearchContainer {
+  margin-left: 20px;
+}

src/theme/NavbarItem/ComponentTypes.tsx

@@ -0,0 +1,25 @@
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+import type {ComponentTypesObject} from '@theme/NavbarItem/ComponentTypes';
+
+const ComponentTypes: ComponentTypesObject = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+
+export default ComponentTypes;