From e5f4923b43d0c524a7ebb042828aefc3485ecbec Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Sun, 7 Jul 2024 18:58:27 -0600 Subject: [PATCH 1/7] Fixes small screen nav --- .../src/components/GetStartedLink/index.tsx | 19 ++++ .../site/src/components/ThemeToggle/index.tsx | 15 +++ docs/site/src/css/custom.css | 70 ++++++++++---- docs/site/src/theme/Navbar/Content/index.js | 23 ++--- docs/site/src/theme/Navbar/index.js | 18 +--- .../ColorModeToggle/index.js | 0 .../ColorModeToggle/styles.module.css | 0 .../site/src/theme/NavbarSui/Content/index.js | 95 +++++++++++++++++++ .../Content/styles.module.css | 0 .../{Navbar => NavbarSui}/Layout/index.js | 0 .../Layout/styles.module.css | 0 .../theme/{Navbar => NavbarSui}/Logo/index.js | 0 .../NavbarSui/MobileSidebar/Header/index.js | 31 ++++++ .../NavbarSui/MobileSidebar/Layout/index.js | 22 +++++ .../MobileSidebar/PrimaryMenu/index.js | 27 ++++++ .../MobileSidebar/SecondaryMenu/index.js | 30 ++++++ .../NavbarSui/MobileSidebar/Toggle/index.js | 22 +++++ .../theme/NavbarSui/MobileSidebar/index.js | 23 +++++ .../{Navbar => NavbarSui}/Search/index.js | 0 .../Search/styles.module.css | 0 docs/site/src/theme/NavbarSui/index.js | 13 +++ docs/site/tailwind.config.js | 4 + 22 files changed, 360 insertions(+), 52 deletions(-) create mode 100644 docs/site/src/components/GetStartedLink/index.tsx create mode 100644 docs/site/src/components/ThemeToggle/index.tsx rename docs/site/src/theme/{Navbar => NavbarSui}/ColorModeToggle/index.js (100%) rename docs/site/src/theme/{Navbar => NavbarSui}/ColorModeToggle/styles.module.css (100%) create mode 100644 docs/site/src/theme/NavbarSui/Content/index.js rename docs/site/src/theme/{Navbar => NavbarSui}/Content/styles.module.css (100%) rename docs/site/src/theme/{Navbar => NavbarSui}/Layout/index.js (100%) rename docs/site/src/theme/{Navbar => NavbarSui}/Layout/styles.module.css (100%) rename docs/site/src/theme/{Navbar => NavbarSui}/Logo/index.js (100%) create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js create mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/index.js rename docs/site/src/theme/{Navbar => NavbarSui}/Search/index.js (100%) rename docs/site/src/theme/{Navbar => NavbarSui}/Search/styles.module.css (100%) create mode 100644 docs/site/src/theme/NavbarSui/index.js diff --git a/docs/site/src/components/GetStartedLink/index.tsx b/docs/site/src/components/GetStartedLink/index.tsx new file mode 100644 index 0000000000000..6a518b4609c99 --- /dev/null +++ b/docs/site/src/components/GetStartedLink/index.tsx @@ -0,0 +1,19 @@ +// Copyright (c) Mysten Labs, Inc. +// SPDX-License-Identifier: Apache-2.0 + +import React from "react"; +import Link from "@docusaurus/Link"; +import { useLocation } from "@docusaurus/router"; + +export default function GetStartedLink() { + const location = useLocation(); + return ( + <> + {location.pathname === "/" && ( + + Get started + + )} + + ); +} diff --git a/docs/site/src/components/ThemeToggle/index.tsx b/docs/site/src/components/ThemeToggle/index.tsx new file mode 100644 index 0000000000000..ed23a87d10e77 --- /dev/null +++ b/docs/site/src/components/ThemeToggle/index.tsx @@ -0,0 +1,15 @@ +// Copyright (c) Mysten Labs, Inc. +// SPDX-License-Identifier: Apache-2.0 + +import React from "react"; +import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; +import { useLocation } from "@docusaurus/router"; + +export default function ThemeToggle() { + const location = useLocation(); + return ( +
+ {location.pathname !== "/" && } +
+ ); +} diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css index 85fdbd0546b3b..31943ea81785c 100644 --- a/docs/site/src/css/custom.css +++ b/docs/site/src/css/custom.css @@ -76,7 +76,7 @@ --sui-white: 255 255 255; --sui-card-dark: 13 20 37; --sui-card-darker: 0 23 49; - --sui-blue-primary: #4da2ff; + --sui-blue-primary: 77 162 255; --sui-gray: #ABBDCC; --sui-white: #f7f7f8; --sui-button-hover: #1a88ff; @@ -119,18 +119,20 @@ color: var(--ifm-navbar-sidebar-link-color); } -.navbar-sidebar .menu__link--active { - background-color: var(--sui-blue-primary); - color: var(--sui-gray-100); -} -[data-theme='dark'] .navbar-sidebar .menu__link--active { - background-color: var(--sui-blue-primary); - color: var(--sui-gray-100); +.navbar-sidebar .menu__link--active, .navbar-sidebar .menu__link--active:hover, [data-theme='dark'] .navbar-sidebar .menu__link--active, [data-theme='dark'] .navbar-sidebar .menu__link--active:hover { + @apply !bg-sui-blue-primary text-sui-gray-100 } + html[data-theme=dark] { background-color: var(--ifm-navbar-background-color); } + +.navbar-sidebar button[title^="Switch between dark and light mode"] { + @apply !text-white hover:bg-sui-blue-primary +} + /** setup global style overrides */ + body { font-family: var(--primaryFont); } @@ -143,6 +145,7 @@ h1 { letter-spacing: -0.04em; } + .h1 { letter-spacing: -2.88px; margin-top: 0; @@ -160,6 +163,7 @@ h2 { line-height: 2.125rem; letter-spacing: -0.04em; } + .h2 { letter-spacing: -1.62px; margin-top: 0; @@ -203,27 +207,34 @@ h4 { line-height: 1.75rem; letter-spacing: -2%; } + @media screen and (max-width: 767px) { h1 , .h1{ font-size: 3.5rem; } + h2, .h2 { font-size: 2rem; } + h3, .h3 { font-size: 1.5rem; } + h4, .h4 { font-size: 1.2rem; } } + @media screen and (max-width: 599px) { h2, .h2 { font-size: 1.7rem; } + h3, .h3 { font-size: 1.2rem; } + h4, .h4 { font-size: 1rem; } @@ -231,21 +242,27 @@ h4 { /** Navbar overrides **/ + .navbar { border-bottom: 1px solid var(--sui-line); } + .navbar__title { visibility: hidden; } + .navbar__toggle path { stroke: var(--sui-white); } + .navbar__items { justify-content: space-between; } + .navbar__items .navbar__brand { width: 27%; } + .navbar__items .navbar__item.navbar__link { font-family: var(--headerFont); font-size: .9375rem; @@ -253,17 +270,28 @@ h4 { line-height: 1.125rem; letter-spacing: -0.02em; } + +.darkNavbarColorModeToggle { + @apply text-sui-white; +} + @media screen and (min-width: 767px) { .navbar__items.navbar__items--right { min-width: 325px; } } +.theme-toggle-wrapper button:hover { + @apply !bg-sui-blue-primary +} + /** navbar search field **/ + .DocSearch-Button-Container { width: 100%; justify-content: space-between; } + .DocSearch-Button { width: 12.5rem; height: 2.625rem !important; @@ -277,18 +305,22 @@ h4 { background: linear-gradient(0deg, rgba(247, 247, 248, 0.1), rgba(247, 247, 248, 0.1)), linear-gradient(0deg, rgba(247, 247, 248, 0.05), rgba(247, 247, 248, 0.05)) !important; } + @media screen and (max-width: 599px) { .DocSearch-Button { width: initial; } } + .DocSearch-Search-Icon { order: 2; margin-left: auto; } + .DocSearch-Search-Icon path { stroke: var(--sui-white); } + .DocSearch-Button-Keys { display: none !important; } @@ -297,32 +329,26 @@ h4 { row-gap: 1rem; column-gap: 1rem; } + .markdown h1:first-child { margin-top: 1rem; } +[class^="navbarSearchContainer"] { + @apply min-[997px]:flex min-[997px]:gap-4 +} /** Globals **/ .button-cta { - background-color: var(--sui-blue-primary); - color: var(--sui-white); - letter-spacing: -.3px; - cursor: pointer; - border-style: none; - border-radius: 2.25rem; - padding: .75rem 1.125rem; - font-family: var(--primaryFont); - font-size: 1rem; - font-weight: 500; - line-height: 1.125rem; - transition: background-color .3s; - display: inline-block; + @apply bg-sui-blue-primary font-sans text-sui-white -tracking-[.3px] cursor-pointer border-none rounded-[2.25rem] py-3 px-[1.125rem] text-base font-medium leading-[1.125rem] inline-block transition-colors duration-300 ease-in-out } + .button-cta:hover { background-color: var(--sui-button-hover); color: var(--sui-white); text-decoration: none; } + @media (max-width: 1050px) { .navbar .button-cta { display: none; @@ -330,9 +356,11 @@ h4 { } /** colors **/ + .text-white { color: var(--sui-white); } + .text-gray { color: var(--sui-gray); } \ No newline at end of file diff --git a/docs/site/src/theme/Navbar/Content/index.js b/docs/site/src/theme/Navbar/Content/index.js index 0d82e2d8b4c96..6eeec96639593 100644 --- a/docs/site/src/theme/Navbar/Content/index.js +++ b/docs/site/src/theme/Navbar/Content/index.js @@ -1,20 +1,19 @@ // Copyright (c) Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 import React from "react"; -import Link from "@docusaurus/Link"; 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 ThemeToggle from "@site/src/components/ThemeToggle"; +//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"; -import { useLocation } from "@docusaurus/router"; +import GetStartedLink from "@site/src/components/GetStartedLink"; function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved @@ -22,7 +21,7 @@ function useNavbarItems() { } function NavbarItems({ items }) { return ( -
+
{items.map((item, i) => ( item.type === "search"); const isHomePage = location.pathname === "/"; @@ -72,20 +70,11 @@ export default function NavbarContent() { // Ask the user to add the respective navbar items => more flexible <> - {!isHomePage && ( - - )} + {!searchBarItem && ( - {isHomePage && ( - - Get started - - )} + )} diff --git a/docs/site/src/theme/Navbar/index.js b/docs/site/src/theme/Navbar/index.js index 98eb1c547a9d0..a077709b6fc79 100644 --- a/docs/site/src/theme/Navbar/index.js +++ b/docs/site/src/theme/Navbar/index.js @@ -3,21 +3,11 @@ import React from "react"; import NavbarLayout from "@theme/Navbar/Layout"; import NavbarContent from "@theme/Navbar/Content"; -import { - NavbarProvider, - ScrollControllerProvider, - ColorModeProvider, -} from "@docusaurus/theme-common/internal"; + export default function Navbar() { return ( - - - - - - - - - + + + ); } diff --git a/docs/site/src/theme/Navbar/ColorModeToggle/index.js b/docs/site/src/theme/NavbarSui/ColorModeToggle/index.js similarity index 100% rename from docs/site/src/theme/Navbar/ColorModeToggle/index.js rename to docs/site/src/theme/NavbarSui/ColorModeToggle/index.js diff --git a/docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css b/docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css similarity index 100% rename from docs/site/src/theme/Navbar/ColorModeToggle/styles.module.css rename to docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css diff --git a/docs/site/src/theme/NavbarSui/Content/index.js b/docs/site/src/theme/NavbarSui/Content/index.js new file mode 100644 index 0000000000000..0d82e2d8b4c96 --- /dev/null +++ b/docs/site/src/theme/NavbarSui/Content/index.js @@ -0,0 +1,95 @@ +// Copyright (c) Mysten Labs, Inc. +// SPDX-License-Identifier: Apache-2.0 +import React from "react"; +import Link from "@docusaurus/Link"; +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"; +import { useLocation } from "@docusaurus/router"; + +function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items; +} +function NavbarItems({ items }) { + return ( +
+ {items.map((item, i) => ( + + 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 }, + ) + } + > + + + ))} +
+ ); +} +function NavbarContentLayout({ left, right }) { + return ( +
+
{left}
+
{right}
+
+ ); +} +export default function NavbarContent() { + const mobileSidebar = useNavbarMobileSidebar(); + const items = useNavbarItems(); + const location = useLocation(); + const [leftItems, rightItems] = splitNavbarItems(items); + const searchBarItem = items.find((item) => item.type === "search"); + const isHomePage = location.pathname === "/"; + + return ( + + {!mobileSidebar.disabled && } + + + + } + right={ + // TODO stop hardcoding items? + // Ask the user to add the respective navbar items => more flexible + <> + + {!isHomePage && ( + + )} + {!searchBarItem && ( + + + {isHomePage && ( + + Get started + + )} + + )} + + } + /> + ); +} diff --git a/docs/site/src/theme/Navbar/Content/styles.module.css b/docs/site/src/theme/NavbarSui/Content/styles.module.css similarity index 100% rename from docs/site/src/theme/Navbar/Content/styles.module.css rename to docs/site/src/theme/NavbarSui/Content/styles.module.css diff --git a/docs/site/src/theme/Navbar/Layout/index.js b/docs/site/src/theme/NavbarSui/Layout/index.js similarity index 100% rename from docs/site/src/theme/Navbar/Layout/index.js rename to docs/site/src/theme/NavbarSui/Layout/index.js diff --git a/docs/site/src/theme/Navbar/Layout/styles.module.css b/docs/site/src/theme/NavbarSui/Layout/styles.module.css similarity index 100% rename from docs/site/src/theme/Navbar/Layout/styles.module.css rename to docs/site/src/theme/NavbarSui/Layout/styles.module.css diff --git a/docs/site/src/theme/Navbar/Logo/index.js b/docs/site/src/theme/NavbarSui/Logo/index.js similarity index 100% rename from docs/site/src/theme/Navbar/Logo/index.js rename to docs/site/src/theme/NavbarSui/Logo/index.js diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js new file mode 100644 index 0000000000000..67e9e4431d9ab --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal'; +import {translate} from '@docusaurus/Translate'; +import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; +import IconClose from '@theme/Icon/Close'; +import NavbarLogo from '@theme/Navbar/Logo'; +function CloseButton() { + const mobileSidebar = useNavbarMobileSidebar(); + return ( + + ); +} +export default function NavbarMobileSidebarHeader() { + return ( +
+ + + +
+ ); +} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js new file mode 100644 index 0000000000000..b19eb2f962acc --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; +export default function NavbarMobileSidebarLayout({ + header, + primaryMenu, + secondaryMenu, +}) { + const {shown: secondaryMenuShown} = useNavbarSecondaryMenu(); + return ( +
+ {header} +
+
{primaryMenu}
+
{secondaryMenu}
+
+
+ ); +} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js new file mode 100644 index 0000000000000..9c5d0ec067458 --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal'; +import NavbarItem from '@theme/NavbarItem'; +function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items; +} +// The primary menu displays the navbar items +export default function NavbarMobilePrimaryMenu() { + const mobileSidebar = useNavbarMobileSidebar(); + // TODO how can the order be defined for mobile? + // Should we allow providing a different list of items? + const items = useNavbarItems(); + return ( +
    + {items.map((item, i) => ( + mobileSidebar.toggle()} + key={i} + /> + ))} +
+ ); +} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js new file mode 100644 index 0000000000000..dd71af856aedc --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js @@ -0,0 +1,30 @@ +import React from 'react'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; +import Translate from '@docusaurus/Translate'; +function SecondaryMenuBackButton(props) { + return ( + + ); +} +// The secondary menu slides from the right and shows contextual information +// such as the docs sidebar +export default function NavbarMobileSidebarSecondaryMenu() { + const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0; + const secondaryMenu = useNavbarSecondaryMenu(); + return ( + <> + {/* edge-case: prevent returning to the primaryMenu when it's empty */} + {!isPrimaryMenuEmpty && ( + secondaryMenu.hide()} /> + )} + {secondaryMenu.content} + + ); +} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js new file mode 100644 index 0000000000000..bfe298891b97c --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js @@ -0,0 +1,22 @@ +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() { + const {toggle, shown} = useNavbarMobileSidebar(); + return ( + + ); +} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/index.js new file mode 100644 index 0000000000000..5db3cc7a28cd2 --- /dev/null +++ b/docs/site/src/theme/NavbarSui/MobileSidebar/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { + useLockBodyScroll, + useNavbarMobileSidebar, +} from '@docusaurus/theme-common/internal'; +import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout'; +import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header'; +import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu'; +import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu'; +export default function NavbarMobileSidebar() { + const mobileSidebar = useNavbarMobileSidebar(); + useLockBodyScroll(mobileSidebar.shown); + if (!mobileSidebar.shouldRender) { + return null; + } + return ( + } + primaryMenu={} + secondaryMenu={} + /> + ); +} diff --git a/docs/site/src/theme/Navbar/Search/index.js b/docs/site/src/theme/NavbarSui/Search/index.js similarity index 100% rename from docs/site/src/theme/Navbar/Search/index.js rename to docs/site/src/theme/NavbarSui/Search/index.js diff --git a/docs/site/src/theme/Navbar/Search/styles.module.css b/docs/site/src/theme/NavbarSui/Search/styles.module.css similarity index 100% rename from docs/site/src/theme/Navbar/Search/styles.module.css rename to docs/site/src/theme/NavbarSui/Search/styles.module.css diff --git a/docs/site/src/theme/NavbarSui/index.js b/docs/site/src/theme/NavbarSui/index.js new file mode 100644 index 0000000000000..a077709b6fc79 --- /dev/null +++ b/docs/site/src/theme/NavbarSui/index.js @@ -0,0 +1,13 @@ +// Copyright (c) Mysten Labs, Inc. +// SPDX-License-Identifier: Apache-2.0 +import React from "react"; +import NavbarLayout from "@theme/Navbar/Layout"; +import NavbarContent from "@theme/Navbar/Content"; + +export default function Navbar() { + return ( + + + + ); +} diff --git a/docs/site/tailwind.config.js b/docs/site/tailwind.config.js index 4f7335b83e53a..f74bd3040f283 100644 --- a/docs/site/tailwind.config.js +++ b/docs/site/tailwind.config.js @@ -1,6 +1,8 @@ // Copyright (c) Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 +const defaultTheme = require("tailwindcss/defaultTheme"); + module.exports = { corePlugins: { preflight: false, // disable Tailwind's reset @@ -10,10 +12,12 @@ module.exports = { theme: { extend: { fontFamily: { + sans: ["Inter", ...defaultTheme.fontFamily.sans], twkeverett: ["Twkeverett"], }, colors: { "sui-black": "var(--sui-black)", + "sui-blue-primary": "rgb(var(--sui-blue-primary)/)", "sui-blue": "var(--sui-blue)", "sui-blue-bright": "var(--sui-blue-bright)", "sui-blue-light": "var(--sui-blue-light)", From 0e34330bd204cc09489b0d406f0d0015be081c3c Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Sun, 7 Jul 2024 19:01:56 -0600 Subject: [PATCH 2/7] Deleted backup files --- .../theme/NavbarSui/ColorModeToggle/index.js | 21 ---- .../ColorModeToggle/styles.module.css | 6 -- .../site/src/theme/NavbarSui/Content/index.js | 95 ------------------- .../theme/NavbarSui/Content/styles.module.css | 21 ---- docs/site/src/theme/NavbarSui/Layout/index.js | 55 ----------- .../theme/NavbarSui/Layout/styles.module.css | 7 -- docs/site/src/theme/NavbarSui/Logo/index.js | 13 --- .../NavbarSui/MobileSidebar/Header/index.js | 31 ------ .../NavbarSui/MobileSidebar/Layout/index.js | 22 ----- .../MobileSidebar/PrimaryMenu/index.js | 27 ------ .../MobileSidebar/SecondaryMenu/index.js | 30 ------ .../NavbarSui/MobileSidebar/Toggle/index.js | 22 ----- .../theme/NavbarSui/MobileSidebar/index.js | 23 ----- docs/site/src/theme/NavbarSui/Search/index.js | 8 -- .../theme/NavbarSui/Search/styles.module.css | 30 ------ docs/site/src/theme/NavbarSui/index.js | 13 --- 16 files changed, 424 deletions(-) delete mode 100644 docs/site/src/theme/NavbarSui/ColorModeToggle/index.js delete mode 100644 docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css delete mode 100644 docs/site/src/theme/NavbarSui/Content/index.js delete mode 100644 docs/site/src/theme/NavbarSui/Content/styles.module.css delete mode 100644 docs/site/src/theme/NavbarSui/Layout/index.js delete mode 100644 docs/site/src/theme/NavbarSui/Layout/styles.module.css delete mode 100644 docs/site/src/theme/NavbarSui/Logo/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js delete mode 100644 docs/site/src/theme/NavbarSui/MobileSidebar/index.js delete mode 100644 docs/site/src/theme/NavbarSui/Search/index.js delete mode 100644 docs/site/src/theme/NavbarSui/Search/styles.module.css delete mode 100644 docs/site/src/theme/NavbarSui/index.js diff --git a/docs/site/src/theme/NavbarSui/ColorModeToggle/index.js b/docs/site/src/theme/NavbarSui/ColorModeToggle/index.js deleted file mode 100644 index 02102acceb3f8..0000000000000 --- a/docs/site/src/theme/NavbarSui/ColorModeToggle/index.js +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import { useColorMode, useThemeConfig } from "@docusaurus/theme-common"; -import ColorModeToggle from "@theme/ColorModeToggle"; -import styles from "./styles.module.css"; -export default function NavbarColorModeToggle({ className }) { - const disabled = useThemeConfig().colorMode.disableSwitch; - const { colorMode, setColorMode } = useColorMode(); - if (disabled) { - return null; - } - return ( - - ); -} diff --git a/docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css b/docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css deleted file mode 100644 index 0c8234785218b..0000000000000 --- a/docs/site/src/theme/NavbarSui/ColorModeToggle/styles.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.darkNavbarColorModeToggle { - color: var(--sui-white); -} -.darkNavbarColorModeToggle:hover { - background: var(--ifm-color-gray-800); -} \ No newline at end of file diff --git a/docs/site/src/theme/NavbarSui/Content/index.js b/docs/site/src/theme/NavbarSui/Content/index.js deleted file mode 100644 index 0d82e2d8b4c96..0000000000000 --- a/docs/site/src/theme/NavbarSui/Content/index.js +++ /dev/null @@ -1,95 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import Link from "@docusaurus/Link"; -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"; -import { useLocation } from "@docusaurus/router"; - -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items; -} -function NavbarItems({ items }) { - return ( -
- {items.map((item, i) => ( - - 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 }, - ) - } - > - - - ))} -
- ); -} -function NavbarContentLayout({ left, right }) { - return ( -
-
{left}
-
{right}
-
- ); -} -export default function NavbarContent() { - const mobileSidebar = useNavbarMobileSidebar(); - const items = useNavbarItems(); - const location = useLocation(); - const [leftItems, rightItems] = splitNavbarItems(items); - const searchBarItem = items.find((item) => item.type === "search"); - const isHomePage = location.pathname === "/"; - - return ( - - {!mobileSidebar.disabled && } - - - - } - right={ - // TODO stop hardcoding items? - // Ask the user to add the respective navbar items => more flexible - <> - - {!isHomePage && ( - - )} - {!searchBarItem && ( - - - {isHomePage && ( - - Get started - - )} - - )} - - } - /> - ); -} diff --git a/docs/site/src/theme/NavbarSui/Content/styles.module.css b/docs/site/src/theme/NavbarSui/Content/styles.module.css deleted file mode 100644 index 7b8c08a742777..0000000000000 --- a/docs/site/src/theme/NavbarSui/Content/styles.module.css +++ /dev/null @@ -1,21 +0,0 @@ -/* -Hide color mode toggle in small viewports - */ -.navbar__items_wrapper { - display: flex; - align-items: center; - justify-content: flex-start; - flex: 8; - column-gap: 4rem; -} -@media (max-width: 1100px) { - .navbar__items_wrapper { - column-gap: 2rem; - } -} - -@media (max-width: 996px) { - .colorModeToggle { - display: none; - } -} diff --git a/docs/site/src/theme/NavbarSui/Layout/index.js b/docs/site/src/theme/NavbarSui/Layout/index.js deleted file mode 100644 index 26889a8ad872c..0000000000000 --- a/docs/site/src/theme/NavbarSui/Layout/index.js +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import clsx from "clsx"; -import { useThemeConfig } from "@docusaurus/theme-common"; -import { - useHideableNavbar, - useNavbarMobileSidebar, -} from "@docusaurus/theme-common/internal"; -import { translate } from "@docusaurus/Translate"; -import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar"; -import styles from "./styles.module.css"; -function NavbarBackdrop(props) { - return ( -
- ); -} -export default function NavbarLayout({ children }) { - const { - navbar: { hideOnScroll, style }, - } = useThemeConfig(); - const mobileSidebar = useNavbarMobileSidebar(); - const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); - return ( - - ); -} diff --git a/docs/site/src/theme/NavbarSui/Layout/styles.module.css b/docs/site/src/theme/NavbarSui/Layout/styles.module.css deleted file mode 100644 index e72891a44ff40..0000000000000 --- a/docs/site/src/theme/NavbarSui/Layout/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.navbarHideable { - transition: transform var(--ifm-transition-fast) ease; -} - -.navbarHidden { - transform: translate3d(0, calc(-100% - 2px), 0); -} diff --git a/docs/site/src/theme/NavbarSui/Logo/index.js b/docs/site/src/theme/NavbarSui/Logo/index.js deleted file mode 100644 index 734449bd26722..0000000000000 --- a/docs/site/src/theme/NavbarSui/Logo/index.js +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import Logo from "@theme/Logo"; -export default function NavbarLogo() { - return ( - - ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js deleted file mode 100644 index 67e9e4431d9ab..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/Header/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal'; -import {translate} from '@docusaurus/Translate'; -import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; -import IconClose from '@theme/Icon/Close'; -import NavbarLogo from '@theme/Navbar/Logo'; -function CloseButton() { - const mobileSidebar = useNavbarMobileSidebar(); - return ( - - ); -} -export default function NavbarMobileSidebarHeader() { - return ( -
- - - -
- ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js deleted file mode 100644 index b19eb2f962acc..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/Layout/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; -export default function NavbarMobileSidebarLayout({ - header, - primaryMenu, - secondaryMenu, -}) { - const {shown: secondaryMenuShown} = useNavbarSecondaryMenu(); - return ( -
- {header} -
-
{primaryMenu}
-
{secondaryMenu}
-
-
- ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js deleted file mode 100644 index 9c5d0ec067458..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/PrimaryMenu/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import {useThemeConfig} from '@docusaurus/theme-common'; -import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal'; -import NavbarItem from '@theme/NavbarItem'; -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items; -} -// The primary menu displays the navbar items -export default function NavbarMobilePrimaryMenu() { - const mobileSidebar = useNavbarMobileSidebar(); - // TODO how can the order be defined for mobile? - // Should we allow providing a different list of items? - const items = useNavbarItems(); - return ( -
    - {items.map((item, i) => ( - mobileSidebar.toggle()} - key={i} - /> - ))} -
- ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js deleted file mode 100644 index dd71af856aedc..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/SecondaryMenu/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import {useThemeConfig} from '@docusaurus/theme-common'; -import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; -import Translate from '@docusaurus/Translate'; -function SecondaryMenuBackButton(props) { - return ( - - ); -} -// The secondary menu slides from the right and shows contextual information -// such as the docs sidebar -export default function NavbarMobileSidebarSecondaryMenu() { - const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0; - const secondaryMenu = useNavbarSecondaryMenu(); - return ( - <> - {/* edge-case: prevent returning to the primaryMenu when it's empty */} - {!isPrimaryMenuEmpty && ( - secondaryMenu.hide()} /> - )} - {secondaryMenu.content} - - ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js deleted file mode 100644 index bfe298891b97c..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/Toggle/index.js +++ /dev/null @@ -1,22 +0,0 @@ -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() { - const {toggle, shown} = useNavbarMobileSidebar(); - return ( - - ); -} diff --git a/docs/site/src/theme/NavbarSui/MobileSidebar/index.js b/docs/site/src/theme/NavbarSui/MobileSidebar/index.js deleted file mode 100644 index 5db3cc7a28cd2..0000000000000 --- a/docs/site/src/theme/NavbarSui/MobileSidebar/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { - useLockBodyScroll, - useNavbarMobileSidebar, -} from '@docusaurus/theme-common/internal'; -import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout'; -import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header'; -import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu'; -import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu'; -export default function NavbarMobileSidebar() { - const mobileSidebar = useNavbarMobileSidebar(); - useLockBodyScroll(mobileSidebar.shown); - if (!mobileSidebar.shouldRender) { - return null; - } - return ( - } - primaryMenu={} - secondaryMenu={} - /> - ); -} diff --git a/docs/site/src/theme/NavbarSui/Search/index.js b/docs/site/src/theme/NavbarSui/Search/index.js deleted file mode 100644 index d2cb4f8c5467c..0000000000000 --- a/docs/site/src/theme/NavbarSui/Search/index.js +++ /dev/null @@ -1,8 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import clsx from "clsx"; -import styles from "./styles.module.css"; -export default function NavbarSearch({ children, className }) { - return
{children}
; -} diff --git a/docs/site/src/theme/NavbarSui/Search/styles.module.css b/docs/site/src/theme/NavbarSui/Search/styles.module.css deleted file mode 100644 index 52797ee25bf53..0000000000000 --- a/docs/site/src/theme/NavbarSui/Search/styles.module.css +++ /dev/null @@ -1,30 +0,0 @@ -/* -Workaround to avoid rendering empty search container -See https://github.com/facebook/docusaurus/pull/9385 -*/ -/* -TODO temporary @supports check, remove before 2025 -only needed for Firefox < 121 -see https://github.com/facebook/docusaurus/issues/9527#issuecomment-1805272379 - */ -@supports selector(:has(*)) { - .navbarSearchContainer:not(:has(> *)) { - display: none; - } -} - -@media (max-width: 996px) { - .searchBox { - position: absolute; - right: var(--ifm-navbar-padding-horizontal); - } -} - -@media (min-width: 997px) { - .searchBox { - padding: var(--ifm-navbar-item-padding-vertical) - var(--ifm-navbar-item-padding-horizontal); - display: flex; - column-gap: 1rem; - } -} \ No newline at end of file diff --git a/docs/site/src/theme/NavbarSui/index.js b/docs/site/src/theme/NavbarSui/index.js deleted file mode 100644 index a077709b6fc79..0000000000000 --- a/docs/site/src/theme/NavbarSui/index.js +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import NavbarLayout from "@theme/Navbar/Layout"; -import NavbarContent from "@theme/Navbar/Content"; - -export default function Navbar() { - return ( - - - - ); -} From 790746c83c1ea7e1307dc214e9cca3fe61a9232c Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Sun, 7 Jul 2024 19:11:19 -0600 Subject: [PATCH 3/7] Oops --- docs/site/src/theme/Navbar/Content/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/site/src/theme/Navbar/Content/index.js b/docs/site/src/theme/Navbar/Content/index.js index 6eeec96639593..961ba88a0fa8e 100644 --- a/docs/site/src/theme/Navbar/Content/index.js +++ b/docs/site/src/theme/Navbar/Content/index.js @@ -53,7 +53,6 @@ export default function NavbarContent() { const items = useNavbarItems(); const [leftItems, rightItems] = splitNavbarItems(items); const searchBarItem = items.find((item) => item.type === "search"); - const isHomePage = location.pathname === "/"; return ( Date: Sun, 7 Jul 2024 20:12:40 -0600 Subject: [PATCH 4/7] Didnt know there were chevrons... --- docs/site/src/css/custom.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css index 31943ea81785c..a2149fbcee07c 100644 --- a/docs/site/src/css/custom.css +++ b/docs/site/src/css/custom.css @@ -127,10 +127,14 @@ html[data-theme=dark] { background-color: var(--ifm-navbar-background-color); } -.navbar-sidebar button[title^="Switch between dark and light mode"] { +button[title^="Switch between dark and light mode"] { @apply !text-white hover:bg-sui-blue-primary } +html[data-theme=light] .navbar-sidebar button.clean-btn.menu__caret { + @apply bg-sui-gray-65 +} + /** setup global style overrides */ body { From 9c29fbeabe0e90ce74d46a932adac65a32af367b Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Mon, 8 Jul 2024 09:03:55 -0600 Subject: [PATCH 5/7] Removed comment --- docs/site/src/theme/Navbar/Content/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/site/src/theme/Navbar/Content/index.js b/docs/site/src/theme/Navbar/Content/index.js index 961ba88a0fa8e..61b9a0333d83d 100644 --- a/docs/site/src/theme/Navbar/Content/index.js +++ b/docs/site/src/theme/Navbar/Content/index.js @@ -8,7 +8,6 @@ import { } from "@docusaurus/theme-common/internal"; import NavbarItem from "@theme/NavbarItem"; import ThemeToggle from "@site/src/components/ThemeToggle"; -//import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; import SearchBar from "@theme/SearchBar"; import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; import NavbarLogo from "@theme/Navbar/Logo"; From 865be380f45346cfb772b16380073a109fde1ce5 Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Mon, 8 Jul 2024 09:41:49 -0600 Subject: [PATCH 6/7] Navbar component doesnt need ejecting --- docs/site/src/theme/Navbar/index.js | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 docs/site/src/theme/Navbar/index.js diff --git a/docs/site/src/theme/Navbar/index.js b/docs/site/src/theme/Navbar/index.js deleted file mode 100644 index a077709b6fc79..0000000000000 --- a/docs/site/src/theme/Navbar/index.js +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 -import React from "react"; -import NavbarLayout from "@theme/Navbar/Layout"; -import NavbarContent from "@theme/Navbar/Content"; - -export default function Navbar() { - return ( - - - - ); -} From a78a0ab08a3a58b15b841009b07d081331b7703b Mon Sep 17 00:00:00 2001 From: Ronny Roland Date: Mon, 8 Jul 2024 09:57:23 -0600 Subject: [PATCH 7/7] added some comments --- docs/site/src/css/custom.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/site/src/css/custom.css b/docs/site/src/css/custom.css index a2149fbcee07c..165ed525273b2 100644 --- a/docs/site/src/css/custom.css +++ b/docs/site/src/css/custom.css @@ -127,6 +127,7 @@ html[data-theme=dark] { background-color: var(--ifm-navbar-background-color); } +/* Targeting the docusaurus theme switch */ button[title^="Switch between dark and light mode"] { @apply !text-white hover:bg-sui-blue-primary } @@ -338,6 +339,7 @@ h4 { margin-top: 1rem; } +/*Targeting the search container so that the "start here" button displays alongside the search bar*/ [class^="navbarSearchContainer"] { @apply min-[997px]:flex min-[997px]:gap-4 }