Skip to content

Commit 28eebfa

Browse files
ericcrosson-bitgoericcrosson-bitgo
authored
Merge pull request #1010 from BitGo/navigation
feat: ui changes
2 parents da24709 + 7dfc179 commit 28eebfa

14 files changed

+645
-79
lines changed

‎website/docusaurus.config.js

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ const { remarkCodeHike } = require('@code-hike/mdx');
99

1010
/** @type {import('@docusaurus/types').Config} */
1111
const config = {
12-
title: 'api-ts home',
12+
title: 'api-ts',
1313
tagline: 'Type- and runtime- safe TypeScript APIs',
1414
url: 'https://bitgo.github.io/api-ts/',
1515
baseUrl: '/api-ts/',
1616
onBrokenLinks: 'throw',
1717
onBrokenMarkdownLinks: 'warn',
18-
favicon: 'img/favicon.ico',
18+
favicon: 'img/Shield_Logo_Blue-Dark.svg',
1919

2020
// GitHub pages deployment config.
2121
// If you aren't using GitHub pages, you don't need these.
@@ -64,15 +64,21 @@ const config = {
6464
navbar: {
6565
title: 'api-ts',
6666
logo: {
67-
alt: 'api-ts Logo',
68-
src: 'img/logo.svg',
67+
alt: 'BitGo Logo',
68+
src: 'img/Shield_Logo_Blue-Dark.svg',
69+
srcDark: 'img/Shield_Logo_Blue-Dark.svg',
6970
},
7071
items: [
7172
{
7273
type: 'doc',
7374
docId: 'intro',
7475
position: 'left',
75-
label: 'Tutorial',
76+
label: 'Documentation',
77+
},
78+
{
79+
to: '/docs/how-to-guides/parsing.json-strings',
80+
label: 'How-to Guides',
81+
position: 'left',
7682
},
7783
{
7884
href: 'https://github.com/BitGo/api-ts',
@@ -88,9 +94,17 @@ const config = {
8894
title: 'Docs',
8995
items: [
9096
{
91-
label: 'Tutorial',
97+
label: 'Documentation',
9298
to: '/docs/intro',
9399
},
100+
{
101+
label: 'Tutorials',
102+
to: '/docs/tutorial-basics/render-an-open-api-spec',
103+
},
104+
{
105+
label: 'How-to Guides',
106+
to: '/docs/how-to-guides/parsing.json-strings',
107+
},
94108
],
95109
},
96110
{
@@ -100,6 +114,10 @@ const config = {
100114
label: 'Stack Overflow',
101115
href: 'https://stackoverflow.com/questions/tagged/api-ts',
102116
},
117+
{
118+
label: 'Twitter',
119+
href: 'https://twitter.com/BitGo',
120+
},
103121
],
104122
},
105123
{
@@ -109,15 +127,24 @@ const config = {
109127
label: 'GitHub',
110128
href: 'https://github.com/BitGo/api-ts',
111129
},
130+
{
131+
label: 'BitGo',
132+
href: 'https://www.bitgo.com/',
133+
},
112134
],
113135
},
114136
],
115-
copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc.`,
137+
copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc. All rights reserved.`,
116138
},
117139
prism: {
118140
theme: lightCodeTheme,
119141
darkTheme: darkCodeTheme,
120142
},
143+
colorMode: {
144+
defaultMode: 'light',
145+
disableSwitch: false,
146+
respectPrefersColorScheme: true,
147+
},
121148
}),
122149
};
123150

‎website/src/components/HomepageFeatures/index.js

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,68 @@
11
import React from 'react';
22
import clsx from 'clsx';
33
import styles from './styles.module.css';
4+
import { useColorMode } from '@docusaurus/theme-common';
45

5-
const FeatureList = [
6-
{
7-
title: 'Easy to Use',
8-
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
9-
description: (
10-
<>
11-
Docusaurus was designed from the ground up to be easily installed and used to
12-
get your website up and running quickly.
13-
</>
14-
),
15-
},
16-
{
17-
title: 'Focus on What Matters',
18-
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
19-
description: (
20-
<>
21-
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead
22-
and move your docs into the <code>docs</code> directory.
23-
</>
24-
),
25-
},
26-
{
27-
title: 'Powered by React',
28-
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
29-
description: (
30-
<>
31-
Extend or customize your website layout by reusing React. Docusaurus can be
32-
extended while reusing the same header and footer.
33-
</>
34-
),
35-
},
36-
];
6+
function Feature({ lightSvg, darkSvg, title, description }) {
7+
const { colorMode } = useColorMode();
8+
const isDarkTheme = colorMode === 'dark';
9+
const Svg = isDarkTheme ? darkSvg : lightSvg;
3710

38-
function Feature({ Svg, title, description }) {
3911
return (
40-
<div className={clsx('col col--4')}>
41-
<div className="text--center">
42-
<Svg className={styles.featureSvg} role="img" />
43-
</div>
44-
<div className="text--center padding-horiz--md">
45-
<h3>{title}</h3>
46-
<p>{description}</p>
12+
<div className={clsx('col col--4')} style={{ marginBottom: '2rem' }}>
13+
<div className={styles.featureCard}>
14+
<div className="text--center">
15+
<Svg className={styles.featureSvg} role="img" />
16+
</div>
17+
<div className="text--center padding-horiz--md">
18+
<h3 className={styles.featureTitle}>{title}</h3>
19+
<div className={styles.featureDescription}>{description}</div>
20+
</div>
4721
</div>
4822
</div>
4923
);
5024
}
5125

5226
export default function HomepageFeatures() {
27+
const FeatureList = [
28+
{
29+
title: 'Client',
30+
lightSvg: require('@site/static/img/ui-access-m-light-blue.svg').default,
31+
darkSvg: require('@site/static/img/ui-access-m-dark-blue.svg').default,
32+
description: (
33+
<>
34+
<div>Type-safe API requests with compile-time validation</div>
35+
<div>Automatic response decoding with proper error handling</div>
36+
<div>Seamless integration with Express and Superagent</div>
37+
</>
38+
),
39+
},
40+
{
41+
title: 'API definition',
42+
lightSvg: require('@site/static/img/api-m-light-blue.svg').default,
43+
darkSvg: require('@site/static/img/api-m-dark-blue.svg').default,
44+
description: (
45+
<>
46+
<div>io-ts powered type definitions with runtime validation</div>
47+
<div>OpenAPI specification generation from TypeScript</div>
48+
<div>Shared contract between client and server</div>
49+
</>
50+
),
51+
},
52+
{
53+
title: 'Server',
54+
lightSvg: require('@site/static/img/view-rewards-m-light-blue.svg').default,
55+
darkSvg: require('@site/static/img/view-rewards-m-dark-blue.svg').default,
56+
description: (
57+
<>
58+
<div>End-to-end type safety from request to response</div>
59+
<div>Middleware chaining with preserved type information</div>
60+
<div>Express-compatible with enhanced error handling</div>
61+
</>
62+
),
63+
},
64+
];
65+
5366
return (
5467
<section className={styles.features}>
5568
<div className="container">

‎website/src/components/HomepageFeatures/styles.module.css

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,67 @@
11
.features {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 4rem 0;
55
width: 100%;
6+
background-color: var(--bitgo-gray-100);
67
}
78

89
.featureSvg {
9-
height: 200px;
10-
width: 200px;
10+
height: 150px;
11+
width: 150px;
12+
}
13+
14+
.featureCard {
15+
height: 100%;
16+
padding: 2rem;
17+
border-radius: 8px;
18+
background-color: white;
19+
box-shadow: 0 4px 12px rgba(14, 15, 15, 0.05);
20+
transition: all 0.3s ease;
21+
}
22+
23+
.featureCard:hover {
24+
transform: translateY(-5px);
25+
box-shadow: 0 8px 24px rgba(14, 15, 15, 0.1);
26+
}
27+
28+
.featureTitle {
29+
font-size: 1.5rem;
30+
font-weight: 600;
31+
margin-bottom: 1rem;
32+
color: var(--bitgo-gray-900);
33+
}
34+
35+
.featureDescription {
36+
color: var(--bitgo-gray-700);
37+
line-height: 1.6;
38+
}
39+
40+
.featureDescription div {
41+
margin-bottom: 0.75rem;
42+
display: flex;
43+
align-items: flex-start;
44+
}
45+
46+
.featureDescription div::before {
47+
content: '•';
48+
color: var(--ifm-color-primary);
49+
font-weight: bold;
50+
margin-right: 0.5rem;
51+
}
52+
53+
[data-theme='dark'] .features {
54+
background-color: #1e1e1e;
55+
}
56+
57+
[data-theme='dark'] .featureCard {
58+
background-color: #2d2d2d;
59+
}
60+
61+
[data-theme='dark'] .featureTitle {
62+
color: #ffffff;
63+
}
64+
65+
[data-theme='dark'] .featureDescription {
66+
color: #e0e0e0;
1167
}

0 commit comments

Comments
 (0)