diff --git a/delegation-toolkit/index.md b/delegation-toolkit/index.md index 4f5f232255b..774ab09ef62 100644 --- a/delegation-toolkit/index.md +++ b/delegation-toolkit/index.md @@ -1,5 +1,5 @@ --- -title: Introduction to the MetaMask Delegation Toolkit +title: Delegation Toolkit introduction sidebar_label: Introduction description: High-level overview of the Delegation Toolkit, its benefits, and where to start in the documentation. sidebar_position: 1 @@ -7,7 +7,7 @@ sidebar_position: 1 import CardList from "@site/src/components/CardList" -# MetaMask Delegation Toolkit +# Embed smart accounts using the Delegation Toolkit The MetaMask Delegation Toolkit is a [Viem](https://viem.sh/)-based collection of tools for integrating embedded smart contract wallets, known as [MetaMask smart accounts](concepts/smart-accounts.md), diff --git a/developer-tools/dashboard/index.md b/developer-tools/dashboard/index.md index b7524323ba3..cb29790cd17 100644 --- a/developer-tools/dashboard/index.md +++ b/developer-tools/dashboard/index.md @@ -1,5 +1,6 @@ --- sidebar_label: Introduction +title: Developer dashboard introduction description: Documentation for using the MetaMask Developer dashboard sidebar_position: 1 --- @@ -7,7 +8,7 @@ sidebar_position: 1 import CardList from '@site/src/components/CardList' import Banner from '@site/src/components/Banner' -# Developer dashboard documentation +# Introduction The [MetaMask Developer dashboard](https://developer.metamask.io/) provides developers with a comprehensive overview and control of their Infura service. diff --git a/docusaurus.config.js b/docusaurus.config.js index 87ce6abb005..02c28ee45a5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -15,6 +15,9 @@ const codeTheme = themes.dracula const remarkCodesandbox = require('remark-codesandbox') const isProd = process.env.NODE_ENV === 'production' const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTools.html", "utf-8"); +const connectDropdown = fs.readFileSync("./src/components/NavDropdown/ConnectMetaMask.html", "utf-8"); +const embedDropdown = fs.readFileSync("./src/components/NavDropdown/EmbedMetaMask.html", "utf-8"); +const extendDropdown = fs.readFileSync("./src/components/NavDropdown/ExtendScale.html", "utf-8"); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'MetaMask developer documentation', @@ -225,33 +228,43 @@ const config = { respectPrefersColorScheme: true, }, navbar: { - title: ' │ ‎ Documentation', logo: { alt: 'MetaMask logo', src: 'img/metamask-logo.svg', srcDark: 'img/metamask-logo-dark.svg', width: 150, }, + hideOnScroll: true, items: [ { - to: 'sdk', - label: 'SDK', - }, - { - to: 'wallet', - label: 'Wallet API', - }, - { - to: 'delegation-toolkit', - label: 'Delegation Toolkit', + type: 'dropdown', + label: 'Connect to MetaMask', + items: [ + { + type: "html", + value: connectDropdown, + }, + ], }, { - to: 'snaps', - label: 'Snaps', + type: 'dropdown', + label: 'Embed MetaMask', + items: [ + { + type: "html", + value: embedDropdown, + }, + ], }, { - to: 'services', - label: 'Services', + type: 'dropdown', + label: 'Extend and scale', + items: [ + { + type: "html", + value: extendDropdown, + }, + ], }, { type: 'dropdown', @@ -333,7 +346,7 @@ const config = { href: 'https://github.com/MetaMask/metamask-docs', }, { - label: 'MetaMask wallet GitHub', + label: 'MetaMask extension GitHub', href: 'https://github.com/MetaMask/metamask-extension/', }, { @@ -341,7 +354,7 @@ const config = { href: 'https://github.com/MetaMask/metamask-sdk/', }, { - label: 'MetaMask Mobile GitHub', + label: 'MetaMask mobile GitHub', href: 'https://github.com/MetaMask/metamask-mobile', }, { diff --git a/sdk/connect/javascript-dynamic.md b/sdk/connect/javascript-dynamic.md index 8421f03af0b..b229ac81f87 100644 --- a/sdk/connect/javascript-dynamic.md +++ b/sdk/connect/javascript-dynamic.md @@ -271,4 +271,4 @@ Common issues and solutions include: - **Mobile experience issues:** - Test on actual mobile devices. - Verify redirect URLs. - - Check MetaMask Mobile installation. + - Check MetaMask mobile app installation. diff --git a/sdk/guides/use-deeplinks.md b/sdk/guides/use-deeplinks.md index 79acd455211..c88af6e7cdb 100644 --- a/sdk/guides/use-deeplinks.md +++ b/sdk/guides/use-deeplinks.md @@ -8,13 +8,13 @@ import TabItem from "@theme/TabItem"; # Use deeplinks -You can use deeplinks to directly route your users to specific, pre-configured functions inside the MetaMask Mobile app. +You can use deeplinks to directly route your users to specific, pre-configured functions inside the MetaMask mobile app. For example, you can create a deeplink that lets users make one-click payments with a preset token, recipient, and amount. You can also convert deeplinks to QR codes, so users can scan them with a mobile device. -If a user doesn't have MetaMask Mobile installed, deeplinks route the user to a landing page where they can download the app. +If a user doesn't have the mobile app installed, deeplinks route the user to a landing page where they can download the app. -This page highlights deeplinks available for MetaMask Mobile. +This page highlights deeplinks available for the MetaMask mobile app. ## Open a dapp inside the in-app browser @@ -36,7 +36,7 @@ https://metamask.app.link/dapp/app.uniswap.org -This deeplink takes the user directly to the dapp URL in the MetaMask Mobile in-app browser. +This deeplink takes the user directly to the dapp URL in the MetaMask mobile in-app browser. The example navigates to `app.uniswap.org` in the in-app browser. @@ -64,7 +64,7 @@ https://metamask.app.link/send/0x0000000@137?value=1e16 This deeplink starts the process of sending a transaction in the native currency. -If the chain ID is specified, MetaMask Mobile automatically switches to the correct network. +If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network. The example displays the confirmation screen to send 0.01 POL (`1e16` wei) in Polygon (chain ID `137`) to recipient address `0x0000000`. @@ -97,7 +97,7 @@ https://metamask.app.link/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/ This deeplink starts the process of sending a transaction in an ERC-20 token. -If the chain ID is specified, MetaMask Mobile automatically switches to the correct network. +If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network. The example displays the confirmation screen to send 1 USDC (`1e6` units, contract address `0x176211869cA2b568f2A7D4EE941E073a821EE1ff`) on Linea (chain ID `59144`) to recipient address `0x0000000`. @@ -131,7 +131,7 @@ https://metamask.app.link/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE94 This deeplink starts the on-ramp process to buy native currency or ERC-20 tokens. -If the chain ID is specified, MetaMask Mobile automatically switches to the correct network. +If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network. The example starts the on-ramp process to buy $100 (`amount=100`) of USDC (contract address `0x176211869cA2b568f2A7D4EE941E073a821EE1ff`) on Linea (chain ID `59144`). The fiat currency depends on the onboarding status of the user and the region they select. @@ -167,7 +167,7 @@ https://metamask.app.link/sell?chainId=59144&amount=125 This deeplink starts the off-ramp process to sell native currency. -If the chain ID is specified, MetaMask Mobile automatically switches to the correct network. +If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network. The example starts the off-ramp process to sell 125 ETH (`amount=125`) on Linea (chain ID `59144`). diff --git a/sdk/index.md b/sdk/index.md index 0507cae7b20..a2ee0c96981 100644 --- a/sdk/index.md +++ b/sdk/index.md @@ -1,5 +1,6 @@ --- slug: / +title: SDK introduction description: Introduction page for MetaMask SDK documentation. keywords: [connect, MetaMask, SDK, integrate, dapp] --- @@ -9,7 +10,7 @@ import CardList from '@site/src/components/CardList' # Seamlessly connect to MetaMask using the SDK -MetaMask SDK enables a fast, reliable, and seamless connection from your dapp to the MetaMask extension and MetaMask Mobile. +MetaMask SDK enables a fast, reliable, and seamless connection from your dapp to the MetaMask extension and MetaMask mobile app. With the SDK, you can easily onboard users and interact with their accounts on desktop or mobile, across all EVM networks.

@@ -29,9 +30,9 @@ With the SDK, you can easily onboard users and interact with their accounts on d MetaMask SDK gives your dapp a powerful upgrade: -- **Cross-platform, cross-browser support** - One integration covers both desktop and mobile, all major browsers, and the MetaMask Mobile app—streamlining your user onboarding and eliminating edge cases. +- **Cross-platform, cross-browser support** - One integration covers both desktop and mobile, all major browsers, and the MetaMask mobile app—streamlining your user onboarding and eliminating edge cases. - **Mobile connection that just works** - Say goodbye to clunky "open in in-app browser" flows. - The SDK enables a native connection from any mobile browser (Safari, Chrome, etc.) directly to MetaMask Mobile, using secure deeplinking and session management. + The SDK enables a native connection from any mobile browser (Safari, Chrome, etc.) directly to the MetaMask mobile app, using secure deeplinking and session management. - **Production-ready, battle-tested** - MetaMask SDK is used in high-volume dapps across DeFi, NFTs, gaming, and more—ensuring stability, speed, and a smooth developer experience. - **Multichain-ready by design** - Today, the SDK supports all EVM networks. Coming soon: Seamless connection to non-EVM chains like Solana and Bitcoin. diff --git a/sdk/reference/sdk-options.md b/sdk/reference/sdk-options.md index 5012b2ceef8..9bb01de276a 100644 --- a/sdk/reference/sdk-options.md +++ b/sdk/reference/sdk-options.md @@ -114,9 +114,9 @@ The metadata options are: - `iconUrl` - URL of the dapp's icon :::tip important -Setting `dappMetaData` creates a clear and trustworthy user experience when connecting your dapp to -MetaMask Mobile. -MetaMask Mobile displays this metadata in the connection modal to help users identify and verify the +Setting `dappMetaData` creates a clear and trustworthy user experience when connecting your dapp to the +MetaMask mobile app. +MetaMask displays this metadata in the connection modal to help users identify and verify the connection request. ::: @@ -262,7 +262,7 @@ openDeeplink: (link: string) => { -A function that is called to open a deeplink to the MetaMask Mobile app. +A function that is called to open a deeplink to the MetaMask mobile app. ### `readonlyRPCMap` diff --git a/sdk/reference/supported-platforms.md b/sdk/reference/supported-platforms.md index ddfc399cae4..b639484d4ad 100644 --- a/sdk/reference/supported-platforms.md +++ b/sdk/reference/supported-platforms.md @@ -6,9 +6,9 @@ description: Supported dapp platforms for MetaMask SDK. With MetaMask SDK, you can connect your dapp to MetaMask in the following ways: -- **Desktop web dapps** - Automatically connect to the MetaMask wallet extension, or connect to MetaMask Mobile using a QR code. +- **Desktop web dapps** - Automatically connect to the MetaMask extension, or connect to the MetaMask mobile app using a QR code. -- **Mobile dapps** - The SDK generates a deeplink that takes users directly to MetaMask Mobile. +- **Mobile dapps** - The SDK generates a deeplink that takes users directly to the MetaMask mobile app. The following table expands on the SDK's connection methods: diff --git a/services/index.md b/services/index.md index ae76d01748b..9b156369c20 100644 --- a/services/index.md +++ b/services/index.md @@ -1,4 +1,5 @@ --- +title: Services introduction sidebar_label: Introduction sidebar_position: 1 --- diff --git a/snaps/index.mdx b/snaps/index.mdx index 9c667d9a3c3..f3ea01d572c 100644 --- a/snaps/index.mdx +++ b/snaps/index.mdx @@ -1,14 +1,17 @@ --- sidebar_label: Introduction +title: Snaps introduction description: Introduction page for the MetaMask Snaps documentation. --- import CardList from '@site/src/components/CardList' import YoutubeEmbed from '@site/src/components/YoutubeEmbed' -# Extend the functionality of MetaMask using Snaps +# Create a custom mini app using Snaps -Snaps is an open source system that allows anyone to safely extend the functionality of [MetaMask](https://metamask.io/), creating new web3 end user experiences. Get started building your own Snaps by [installing MetaMask Flask](get-started/install-flask.md). +Snaps is an open source system that allows anyone to safely create a mini app that runs inside the MetaMask extension, +enabling new web3 end user experiences. +Get started building your own Snaps by [installing MetaMask Flask](get-started/install-flask.md). ## What can you do with a Snap? diff --git a/snaps/learn/about-snaps/index.md b/snaps/learn/about-snaps/index.md index 0e1240cc1c2..2bac953cb3e 100644 --- a/snaps/learn/about-snaps/index.md +++ b/snaps/learn/about-snaps/index.md @@ -5,8 +5,8 @@ sidebar_position: 1 # About Snaps -MetaMask Snaps is an open source system that allows anyone to safely extend the functionality of -MetaMask, creating new web3 end user experiences. +MetaMask Snaps is an open source system that allows anyone to safely create a mini app that runs inside the MetaMask extension, +enabling new web3 end user experiences. For example, a Snap can add support for different blockchain networks, add custom account types, or provide additional functionality using its own APIs. This allows MetaMask to be used with a far more diverse set of protocols, dapps, and services. diff --git a/src/components/CallToAction/CallToAction.module.scss b/src/components/CallToAction/CallToAction.module.scss index 02748789ccf..bdaf63fcf63 100644 --- a/src/components/CallToAction/CallToAction.module.scss +++ b/src/components/CallToAction/CallToAction.module.scss @@ -1,14 +1,14 @@ .call-to-action { position: relative; - padding: 1.5rem 0 6.4rem; + padding: 2rem 0 6.4rem; overflow: hidden; @include bp(tablet) { - padding-top: 2rem; + padding-top: 4rem; } @include bp(desktop) { - padding: 3rem 0 8rem; + padding: 5rem 0 8rem; } } diff --git a/src/components/Card.tsx b/src/components/Card.tsx index ed29cfa90a4..26845a4d69e 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -15,13 +15,14 @@ export type CardItem = { href: string description?: string | ReactNode theme?: string + buttonIcon?: 'arrow-right' | 'external-arrow' } -export default function Card({ title, href, description, theme }: CardItem) { +export default function Card({ title, href, description, theme, buttonIcon = "arrow-right" }: CardItem) { const [isHovered, setIsHovered] = useState(false) return ( -

  • +
    -
    • + ) } diff --git a/src/components/CardSection.module.scss b/src/components/CardSection.module.scss index 975efb3fac5..ddb32ab5e51 100644 --- a/src/components/CardSection.module.scss +++ b/src/components/CardSection.module.scss @@ -1,14 +1,14 @@ .wrapper { position: relative; - padding: 2rem 0 0; - overflow: hidden; + padding: 2rem 0 2rem; + overflow: visible; @include bp(tablet) { - padding-top: 3rem; + padding-top: 3rem 0 3rem; } @include bp(desktop) { - padding: 4rem 0 0; + padding: 4rem 0 4rem; } } @@ -35,7 +35,25 @@ } } -.grid { +.section-grid { + display: flex; + flex-direction: column; + gap: 2rem; + + @include bp('desktop') { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 4rem; + align-items: start; + } +} + +.content-column { + display: flex; + flex-direction: column; +} + +.cards-wrapper { display: grid; grid-template-columns: 1fr; gap: 2rem; @@ -45,8 +63,42 @@ } } -.grid > li { - &:last-child { - margin-bottom: 1.6rem; +.card-column { + display: flex; +} + +.header { + margin-bottom: 0; + + h2 { + font-size: 2.4rem; + font-weight: 500; + margin: 0 0 2rem 0; + color: var(--color-text-heading); + line-height: 1.2; + + @include bp(tablet) { + font-size: 2.8rem; + } + + @include bp(desktop) { + font-size: 3.2rem; + } + } + + p { + font-size: 1.6rem; + font-weight: 400; + margin: 0; + color: var(--color-text-paragraph); + line-height: 1.5; + + @include bp(tablet) { + font-size: 1.7rem; + } + + @include bp(desktop) { + font-size: 1.8rem; + } } } diff --git a/src/components/CardSection.tsx b/src/components/CardSection.tsx index 9a6d30be9a4..00f71ca0977 100644 --- a/src/components/CardSection.tsx +++ b/src/components/CardSection.tsx @@ -1,17 +1,23 @@ import clsx from 'clsx' import { CSSProperties, JSX, useState, useEffect } from 'react' import { useColorMode } from '@docusaurus/theme-common' -import Heading from '@theme/Heading' import Card, { CardItem } from '@site/src/components/Card' import styles from './CardSection.module.scss' type CardSectionProps = { + title?: string + description?: string cards: CardItem[] - colorPalette: string + colorPalette?: string } -export default function CardSection({ cards, colorPalette }: CardSectionProps): JSX.Element { +export default function CardSection({ + title, + description, + cards, + colorPalette, +}: CardSectionProps): JSX.Element { const { colorMode } = useColorMode() const [theme, setTheme] = useState('') @@ -20,12 +26,12 @@ export default function CardSection({ cards, colorPalette }: CardSectionProps): }, [colorMode]) return ( -
    +
    -
      - {cards?.length > 0 && - cards.map(({ title, description, href }: CardItem, cardIndex: number) => ( - + {/* Title and Description Column */} + {(title || description) && ( +
      +
      + {title &&

      {title}

      } + {description &&

      {description}

      } +
      +
      + )} + + {/* Cards Columns */} +
      + {cards.map(({ title, description, href, buttonIcon }, index) => ( +
      + +
      ))} -
    +
    +
    diff --git a/src/components/NavDropdown/ConnectMetaMask.html b/src/components/NavDropdown/ConnectMetaMask.html new file mode 100644 index 00000000000..0476aba2472 --- /dev/null +++ b/src/components/NavDropdown/ConnectMetaMask.html @@ -0,0 +1,35 @@ + + + diff --git a/src/components/NavDropdown/DeveloperTools.html b/src/components/NavDropdown/DeveloperTools.html index 2914769b58d..18c9c77a15d 100644 --- a/src/components/NavDropdown/DeveloperTools.html +++ b/src/components/NavDropdown/DeveloperTools.html @@ -1,4 +1,4 @@ - +
    • diff --git a/src/components/NavDropdown/EmbedMetaMask.html b/src/components/NavDropdown/EmbedMetaMask.html new file mode 100644 index 00000000000..6e42c2a0042 --- /dev/null +++ b/src/components/NavDropdown/EmbedMetaMask.html @@ -0,0 +1,38 @@ + + + diff --git a/src/components/NavDropdown/ExtendScale.html b/src/components/NavDropdown/ExtendScale.html new file mode 100644 index 00000000000..29e4596148c --- /dev/null +++ b/src/components/NavDropdown/ExtendScale.html @@ -0,0 +1,38 @@ + + + diff --git a/src/components/ProductBanner/index.tsx b/src/components/ProductBanner/index.tsx new file mode 100644 index 00000000000..bde751c323f --- /dev/null +++ b/src/components/ProductBanner/index.tsx @@ -0,0 +1,86 @@ +import React, {type ReactNode, useEffect, useState} from 'react'; +import {useLocation} from '@docusaurus/router'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import clsx from 'clsx'; +import styles from './styles.module.scss'; + +interface ProductConfig { + name: string; + description: string; +} + +const PRODUCT_CONFIGS: Record = { + '/sdk/': { + name: 'MetaMask SDK documentation', + description: 'Seamlessly connect to the MetaMask extension and mobile app.', + }, + '/wallet/': { + name: 'Wallet API documentation', + description: 'Directly integrate your dapp with the MetaMask extension.', + }, + '/delegation-toolkit/': { + name: 'Delegation Toolkit documentation', + description: 'Embed MetaMask smart accounts with new capabilities into your dapp.', + }, + '/snaps/': { + name: 'Snaps documentation', + description: 'Create a custom mini app that runs inside the MetaMask extension.', + }, + '/services/': { + name: 'Services documentation', + description: 'Use high performance APIs provided by Infura to scale your dapp or Snap.', + }, + '/developer-tools/dashboard/': { + name: 'Developer dashboard documentation', + description: 'Manage Infura API keys, monitor usage, and access account details.', + }, +}; + +function getProductConfig(pathname: string): ProductConfig | null { + for (const [path, config] of Object.entries(PRODUCT_CONFIGS)) { + if (pathname.startsWith(path)) { + return config; + } + } + return null; +} + +export default function ProductBanner(): ReactNode | null { + const location = useLocation(); + const productConfig = getProductConfig(location.pathname); + const {navbar} = useThemeConfig(); + const [isNavbarPresent, setIsNavbarPresent] = useState(true); + + useEffect(() => { + if (!navbar.hideOnScroll) return; + + const checkNavbarPresence = () => { + const navbarElement = document.querySelector('.navbar'); + setIsNavbarPresent(!!navbarElement); + }; + + checkNavbarPresence(); + const intervalId = setInterval(checkNavbarPresence, 100); + + return () => clearInterval(intervalId); + }, [navbar.hideOnScroll]); + + + if (!productConfig) { + return null; + } + + return ( +
      +
      +

      {productConfig.name}

      +

      {productConfig.description}

      +
      +
      + ); +} \ No newline at end of file diff --git a/src/components/ProductBanner/styles.module.scss b/src/components/ProductBanner/styles.module.scss new file mode 100644 index 00000000000..a66eaf493b7 --- /dev/null +++ b/src/components/ProductBanner/styles.module.scss @@ -0,0 +1,39 @@ +.productBanner { + background-color: var(--ifm-navbar-background-color); + padding: 1rem 0; + border-bottom: 1px solid var(--ifm-toc-border-color); + position: sticky; + top: 0; + z-index: 9; +} + +.productBannerNoNavbar { + box-shadow: var(--ifm-navbar-shadow); + z-index: 10; +} + +.productBannerContent { + font-family: var(--ifm-font-family-base); + color: var(--ifm-navbar-color); + padding: 0.6rem 2.4rem; + position: relative; + text-align: left; +} + +.productName { + margin-bottom: 0.5rem; + font-size: 2.2rem; + font-weight: 500; +} + +.productDescription { + margin: 0; + font-size: 1.6rem; +} + +/* Hide in mobile view */ +@media (max-width: 768px) { + .productBanner { + display: none; + } +} diff --git a/src/components/SectionIntro/SectionIntro.module.scss b/src/components/SectionIntro/SectionIntro.module.scss new file mode 100644 index 00000000000..89e5587ceef --- /dev/null +++ b/src/components/SectionIntro/SectionIntro.module.scss @@ -0,0 +1,50 @@ +.wrapper { + position: relative; + padding: 2rem 0 0; + overflow: hidden; + + @include bp(tablet) { + padding-top: 3rem; + } + + @include bp(desktop) { + padding: 4rem 0 0; + } +} + +.grid-wrapper { + @include bp('tablet') { + @include grid; + } +} + +.grid-col-center { + position: relative; + + @include bp('tablet') { + @include grid-column-span(8); + } + + @include bp('desktop') { + @include grid-column-span(14); + @include grid-column-start(2); + } +} + +.header { + margin-bottom: 1rem; + + h2 { + font-size: 1.8rem; + font-weight: 600; + margin: 0; + color: var(--color-text-heading); + } + + p { + font-size: 1.8rem; + font-weight: 500; + margin: 0.5rem 0 0; + color: var(--color-text-paragraph); + } +} diff --git a/src/components/SectionIntro/SectionIntro.tsx b/src/components/SectionIntro/SectionIntro.tsx new file mode 100644 index 00000000000..43e48e03ff7 --- /dev/null +++ b/src/components/SectionIntro/SectionIntro.tsx @@ -0,0 +1,18 @@ +import clsx from 'clsx' +import styles from './SectionIntro.module.scss' + +export default function SectionIntro({ description }: { description: string }) { + return ( +
      +
      +
      +
      +
      +

      {description}

      +
      +
      +
      +
      +
      + ) +} diff --git a/src/hooks/useCustomHideableNavbar.ts b/src/hooks/useCustomHideableNavbar.ts new file mode 100644 index 00000000000..c6ea4da87c6 --- /dev/null +++ b/src/hooks/useCustomHideableNavbar.ts @@ -0,0 +1,58 @@ +import {useCallback, useEffect, useRef, useState} from 'react'; +import {useLocationChange} from '@docusaurus/theme-common/internal'; + +const useCustomHideableNavbar = (hideOnScroll: boolean) => { + const [isNavbarVisible, setIsNavbarVisible] = useState(true); + const navbarRef = useRef(null); + const lastScrollTop = useRef(0); + + const handleScroll = useCallback(() => { + if (!hideOnScroll) { + return; + } + + const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollingUp = currentScrollTop < lastScrollTop.current; + const scrollDifference = Math.abs(currentScrollTop - lastScrollTop.current); + + // Show navbar when at the top or scrolling up + if (currentScrollTop <= 5 || scrollingUp) { + setIsNavbarVisible(true); + } + // Hide only when scrolling down significantly and past a larger threshold + else if (currentScrollTop > 100 && scrollDifference > 20) { + setIsNavbarVisible(false); + } + + lastScrollTop.current = currentScrollTop; + }, [hideOnScroll]); + + useLocationChange((locationChangeEvent) => { + if (!hideOnScroll) { + return; + } + setIsNavbarVisible(true); + lastScrollTop.current = 0; + }); + + useEffect(() => { + if (!hideOnScroll) { + return undefined; + } + + window.addEventListener('scroll', handleScroll, { + passive: true, + }); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [handleScroll, hideOnScroll]); + + return { + navbarRef, + isNavbarVisible, + }; +}; + +export default useCustomHideableNavbar; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 547504ccc0a..c097b46a7a8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,71 +2,93 @@ import Layout from '@theme/Layout' import Hero from '@site/src/components/Hero/Hero' import CardSection from '@site/src/components/CardSection' import CallToAction from '@site/src/components/CallToAction/CallToAction' +import SectionIntro from '@site/src/components/SectionIntro/SectionIntro' import useDocusaurusContext from '@docusaurus/useDocusaurusContext' export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext() + return ( - + + + + + + + summary { @@ -652,7 +667,7 @@ ol { border-left: 3px solid #1aff0080; } -.resources-dropdown-menu { +.nav-dropdown-menu { display: flex; flex-direction: row; align-items: center; @@ -676,7 +691,7 @@ ol { flex-direction: row; justify-content: flex-start; align-items: flex-start; - width: 240px; + width: 350px; padding-left: 0; margin: 0; color: var(--ifm-navbar-link-color); @@ -721,7 +736,7 @@ ol { svg { display: inline-block; vertical-align: top; - width: 24px; + width: 26px; height: 24px; color: var(--w3a-color-icon-gray); transition: color 0.2s ease; @@ -738,14 +753,15 @@ ol { h2 { @extend .dropdown__link; + font-size: 1.6rem !important; text-decoration: none !important; margin: 0 0 4px 0; color: inherit; } p { - font-size: 14px; - line-height: 18px; + font-size: 1.4rem; + line-height: 1.8rem; font-weight: 400 !important; color: var(--w3a-color-icon-gray); text-decoration: none !important; @@ -754,17 +770,17 @@ ol { } } -.resources-dropdown-menu a:hover h2 { +.nav-dropdown-menu a:hover h2 { color: inherit !important; } @include bp-max('tablet') { - .resources-dropdown-menu ul { - gap: 16px; // More spacing between items on mobile + .nav-dropdown-menu ul { + gap: 15px; } - .resources-dropdown-menu a { - width: 100%; // Makes each box take full width of dropdown + .nav-dropdown-menu a { + width: 80%; } } @@ -800,3 +816,28 @@ div[class^='announcementBar_'] { } } } + +/* Removes "What's new?" on small viewports to make room for left navbar labels */ +@media (max-width: 1196px) { + .navbar__items--right .navbar__item { + display: none; + } + + [class*='docMainContainer'], + [class*='mainContainer'] { + padding: 2rem 0 0 2rem; + } +} + +/* Fixes bug: Removes sidebar logo appearing on Wallet RPC reference pages */ +.sidebar_mhZE .sidebarLogo_F_0z { + display: none !important; +} + +.sidebar_mhZE { + padding-top: var(--ifm-navbar-height) !important; +} + +.pageWrapper .sidebar_mhZE { + padding-top: 0 !important; +} \ No newline at end of file diff --git a/src/theme/Layout/Provider/index.tsx b/src/theme/Layout/Provider/index.tsx new file mode 100644 index 00000000000..34b3dfe0f78 --- /dev/null +++ b/src/theme/Layout/Provider/index.tsx @@ -0,0 +1,31 @@ +/** + * 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 {composeProviders} from '@docusaurus/theme-common'; +import { + ColorModeProvider, + AnnouncementBarProvider, + ScrollControllerProvider, + NavbarProvider, + PluginHtmlClassNameProvider, +} from '@docusaurus/theme-common/internal'; +import {DocsPreferredVersionContextProvider} from '@docusaurus/plugin-content-docs/client'; +import type {Props} from '@theme/Layout/Provider'; + +const Provider = composeProviders([ + ColorModeProvider, + AnnouncementBarProvider, + ScrollControllerProvider, + DocsPreferredVersionContextProvider, + PluginHtmlClassNameProvider, + NavbarProvider, +]); + +export default function LayoutProvider({children}: Props): ReactNode { + return {children}; +} \ No newline at end of file diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx new file mode 100644 index 00000000000..54ac83ade15 --- /dev/null +++ b/src/theme/Layout/index.tsx @@ -0,0 +1,59 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import ErrorBoundary from '@docusaurus/ErrorBoundary'; +import { + PageMetadata, + SkipToContentFallbackId, + ThemeClassNames, +} from '@docusaurus/theme-common'; +import {useKeyboardNavigation} from '@docusaurus/theme-common/internal'; +import SkipToContent from '@theme/SkipToContent'; +import AnnouncementBar from '@theme/AnnouncementBar'; +import Navbar from '@theme/Navbar'; +import Footer from '@theme/Footer'; +import LayoutProvider from '@theme/Layout/Provider'; +import ErrorPageContent from '@theme/ErrorPageContent'; +import type {Props} from '@theme/Layout'; +import styles from './styles.module.css'; +import ProductBanner from '@site/src/components/ProductBanner'; + +export default function Layout(props: Props): ReactNode { + const { + children, + noFooter, + wrapperClassName, + // Not really layout-related, but kept for convenience/retro-compatibility + title, + description, + } = props; + + useKeyboardNavigation(); + + return ( + + + + + + + + + + + +
      + }> + {children} + +
      + + {!noFooter &&