Skip to content

Commit 5370a11

Browse files
alexandratranalexandratran
committed
Add product banner
1 parent b352c5a commit 5370a11

File tree

16 files changed

+234
-19
lines changed

16 files changed

+234
-19
lines changed

‎delegation-toolkit/index.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
2-
title: Introduction to the MetaMask Delegation Toolkit
3-
sidebar_label: Delegation Toolkit introduction
2+
title: Delegation Toolkit introduction
3+
sidebar_label: Introduction
44
description: High-level overview of the Delegation Toolkit, its benefits, and where to start in the documentation.
55
sidebar_position: 1
66
---
77

88
import CardList from "@site/src/components/CardList"
99

10-
# MetaMask Delegation Toolkit
10+
# Embed new web3 experiences using the Delegation Toolkit
1111

1212
The MetaMask Delegation Toolkit is a [Viem](https://viem.sh/)-based collection of tools for integrating
1313
embedded smart contract wallets, known as [MetaMask smart accounts](concepts/smart-accounts.md),

‎developer-tools/dashboard/index.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
---
2-
sidebar_label: Developer dashboard introduction
2+
sidebar_label: Introduction
3+
title: Developer dashboard introduction
34
description: Documentation for using the MetaMask Developer dashboard
45
sidebar_position: 1
56
---
67

78
import CardList from '@site/src/components/CardList'
89
import Banner from '@site/src/components/Banner'
910

10-
# Developer dashboard documentation
11+
# Introduction
1112

1213
The [MetaMask Developer dashboard](https://developer.metamask.io/) provides developers with a
1314
comprehensive overview and control of their Infura service.

‎docusaurus.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const config = {
9696
routeBasePath: 'snaps',
9797
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
9898
sidebarPath: require.resolve('./snaps-sidebar.js'),
99-
breadcrumbs: true,
99+
breadcrumbs: false,
100100
admonitions: {
101101
keywords: [
102102
'info',
@@ -121,7 +121,7 @@ const config = {
121121
routeBasePath: 'delegation-toolkit',
122122
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
123123
sidebarPath: require.resolve('./gator-sidebar.js'),
124-
breadcrumbs: true,
124+
breadcrumbs: false,
125125
sidebarCollapsed: false,
126126
includeCurrentVersion: true,
127127
// Set to the latest release.
@@ -148,7 +148,7 @@ const config = {
148148
routeBasePath: 'services',
149149
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
150150
sidebarPath: require.resolve('./services-sidebar.js'),
151-
breadcrumbs: true,
151+
breadcrumbs: false,
152152
},
153153
],
154154
[
@@ -159,7 +159,7 @@ const config = {
159159
routeBasePath: 'developer-tools/dashboard',
160160
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
161161
sidebarPath: require.resolve('./dashboard-sidebar.js'),
162-
breadcrumbs: true,
162+
breadcrumbs: false,
163163
},
164164
],
165165
[
@@ -170,7 +170,7 @@ const config = {
170170
routeBasePath: 'wallet',
171171
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
172172
sidebarPath: require.resolve('./wallet-sidebar.js'),
173-
breadcrumbs: true,
173+
breadcrumbs: false,
174174
sidebarItemsGenerator: async function ({ defaultSidebarItemsGenerator, ...args }) {
175175
const sidebarItems = await defaultSidebarItemsGenerator(args)
176176
const dynamicItems = await fetchAndGenerateDynamicSidebarItems(
@@ -193,7 +193,7 @@ const config = {
193193
routeBasePath: 'sdk',
194194
editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
195195
sidebarPath: require.resolve('./sdk-sidebar.js'),
196-
breadcrumbs: true,
196+
breadcrumbs: false,
197197
},
198198
],
199199
'./src/plugins/plugin-json-rpc.ts',

‎sdk-sidebar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const sidebar = {
55
sdkSidebar: [
66
{
77
type: 'doc',
8-
label: 'MetaMask SDK introduction',
8+
label: 'Introduction',
99
id: "index",
1010
},
1111
{

‎sdk/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
slug: /
3+
title: SDK introduction
34
description: Introduction page for MetaMask SDK documentation.
45
keywords: [connect, MetaMask, SDK, integrate, dapp]
56
---

‎services/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
sidebar_label: Services introduction
2+
title: Services introduction
3+
sidebar_label: Introduction
34
sidebar_position: 1
45
---
56

‎snaps/index.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
sidebar_label: Snaps introduction
2+
sidebar_label: Introduction
3+
title: Snaps introduction
34
description: Introduction page for the MetaMask Snaps documentation.
45
---
56

‎src/components/NavDropdown/ConnectMetaMask.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</span>
88
<div>
99
<h2>MetaMask SDK</h2>
10-
<p>Easily integrate your dapp with the MetaMask extension and MetaMask Mobile.</p>
10+
<p>Seamlessly connect to the MetaMask extension and MetaMask Mobile.</p>
1111
</div>
1212
</a>
1313
</li>

‎src/components/ProductBanner/index.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, {type ReactNode} from 'react';
2+
import {useLocation} from '@docusaurus/router';
3+
import {useThemeConfig} from '@docusaurus/theme-common';
4+
import clsx from 'clsx';
5+
import styles from './styles.module.scss';
6+
7+
interface ProductConfig {
8+
name: string;
9+
description: string;
10+
}
11+
12+
const PRODUCT_CONFIGS: Record<string, ProductConfig> = {
13+
'/sdk/': {
14+
name: 'MetaMask SDK documentation',
15+
description: 'Seamlessly connect to the MetaMask extension and MetaMask Mobile using the SDK.',
16+
},
17+
'/wallet/': {
18+
name: 'Wallet API documentation',
19+
description: 'Directly integrate your dapp with the MetaMask extension using the Wallet API.',
20+
},
21+
'/delegation-toolkit/': {
22+
name: 'MetaMask Delegation Toolkit documentation',
23+
description: 'Embed MetaMask smart accounts with new web3 experiences into your dapp.',
24+
},
25+
'/snaps/': {
26+
name: 'Snaps documentation',
27+
description: 'Create a custom Snap to extend the functionality of MetaMask.',
28+
},
29+
'/services/': {
30+
name: 'Services documentation',
31+
description: 'Use services provided by MetaMask and Infura to optimize essential development tasks and scale your dapp or Snap.',
32+
},
33+
'/developer-tools/dashboard/': {
34+
name: 'Developer dashboard documentation',
35+
description: 'Manage Infura API keys, monitor usage, and access account details in the developer dashboard.',
36+
},
37+
};
38+
39+
function getProductConfig(pathname: string): ProductConfig | null {
40+
for (const [path, config] of Object.entries(PRODUCT_CONFIGS)) {
41+
if (pathname.startsWith(path)) {
42+
return config;
43+
}
44+
}
45+
return null;
46+
}
47+
48+
export default function ProductBanner(): ReactNode | null {
49+
const location = useLocation();
50+
const productConfig = getProductConfig(location.pathname);
51+
const {navbar} = useThemeConfig();
52+
53+
if (!productConfig) {
54+
return null;
55+
}
56+
57+
return (
58+
<div className={clsx(styles.productBanner)}>
59+
<div className={styles.productBannerContent}>
60+
<h2 className={styles.productName}>{productConfig.name}</h2>
61+
<p className={styles.productDescription}>{productConfig.description}</p>
62+
</div>
63+
</div>
64+
);
65+
}

‎src/components/ProductBanner/styles.module.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.productBanner {
2+
background-color: var(--ifm-navbar-background-color);
3+
padding: 1rem 0;
4+
border-bottom: 1px solid var(--ifm-toc-border-color);
5+
position: sticky;
6+
top: var(--ifm-navbar-height);
7+
z-index: 9;
8+
}
9+
10+
.productBannerContent {
11+
font-family: var(--ifm-font-family-base);
12+
color: var(--ifm-navbar-color);
13+
padding: 0.6rem 2.4rem;
14+
position: relative;
15+
text-align: left;
16+
}
17+
18+
.productName {
19+
margin-bottom: 0.5rem;
20+
font-size: 2.2rem;
21+
font-weight: 500;
22+
}
23+
24+
.productDescription {
25+
margin: 0;
26+
font-size: 1.6rem;
27+
}
28+
29+
/* Hide in mobile view */
30+
@media (max-width: 768px) {
31+
.productBanner {
32+
display: none;
33+
}
34+
}

0 commit comments

Comments
 (0)