diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 4bb07246..8af91ddf 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -9,13 +9,13 @@ const { remarkCodeHike } = require('@code-hike/mdx'); /** @type {import('@docusaurus/types').Config} */ const config = { - title: 'api-ts home', + title: 'api-ts', tagline: 'Type- and runtime- safe TypeScript APIs', url: 'https://bitgo.github.io/api-ts/', baseUrl: '/api-ts/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.ico', + favicon: 'img/Shield_Logo_Blue-Dark.svg', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. @@ -64,15 +64,21 @@ const config = { navbar: { title: 'api-ts', logo: { - alt: 'api-ts Logo', - src: 'img/logo.svg', + alt: 'BitGo Logo', + src: 'img/Shield_Logo_Blue-Dark.svg', + srcDark: 'img/Shield_Logo_Blue-Dark.svg', }, items: [ { type: 'doc', docId: 'intro', position: 'left', - label: 'Tutorial', + label: 'Documentation', + }, + { + to: '/docs/how-to-guides/parsing.json-strings', + label: 'How-to Guides', + position: 'left', }, { href: 'https://github.com/BitGo/api-ts', @@ -88,9 +94,17 @@ const config = { title: 'Docs', items: [ { - label: 'Tutorial', + label: 'Documentation', to: '/docs/intro', }, + { + label: 'Tutorials', + to: '/docs/tutorial-basics/render-an-open-api-spec', + }, + { + label: 'How-to Guides', + to: '/docs/how-to-guides/parsing.json-strings', + }, ], }, { @@ -100,6 +114,10 @@ const config = { label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/api-ts', }, + { + label: 'Twitter', + href: 'https://twitter.com/BitGo', + }, ], }, { @@ -109,15 +127,24 @@ const config = { label: 'GitHub', href: 'https://github.com/BitGo/api-ts', }, + { + label: 'BitGo', + href: 'https://www.bitgo.com/', + }, ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc.`, + copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc. All rights reserved.`, }, prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, }, + colorMode: { + defaultMode: 'light', + disableSwitch: false, + respectPrefersColorScheme: true, + }, }), }; diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js index d66afe2b..4ccdb8c2 100644 --- a/website/src/components/HomepageFeatures/index.js +++ b/website/src/components/HomepageFeatures/index.js @@ -1,55 +1,68 @@ import React from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; +import { useColorMode } from '@docusaurus/theme-common'; -const FeatureList = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and used to - get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead - and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can be - extended while reusing the same header and footer. - - ), - }, -]; +function Feature({ lightSvg, darkSvg, title, description }) { + const { colorMode } = useColorMode(); + const isDarkTheme = colorMode === 'dark'; + const Svg = isDarkTheme ? darkSvg : lightSvg; -function Feature({ Svg, title, description }) { return ( -
-
- -
-
-

{title}

-

{description}

+
+
+
+ +
+
+

{title}

+
{description}
+
); } export default function HomepageFeatures() { + const FeatureList = [ + { + title: 'Client', + lightSvg: require('@site/static/img/ui-access-m-light-blue.svg').default, + darkSvg: require('@site/static/img/ui-access-m-dark-blue.svg').default, + description: ( + <> +
Type-safe API requests with compile-time validation
+
Automatic response decoding with proper error handling
+
Seamless integration with Express and Superagent
+ + ), + }, + { + title: 'API definition', + lightSvg: require('@site/static/img/api-m-light-blue.svg').default, + darkSvg: require('@site/static/img/api-m-dark-blue.svg').default, + description: ( + <> +
io-ts powered type definitions with runtime validation
+
OpenAPI specification generation from TypeScript
+
Shared contract between client and server
+ + ), + }, + { + title: 'Server', + lightSvg: require('@site/static/img/view-rewards-m-light-blue.svg').default, + darkSvg: require('@site/static/img/view-rewards-m-dark-blue.svg').default, + description: ( + <> +
End-to-end type safety from request to response
+
Middleware chaining with preserved type information
+
Express-compatible with enhanced error handling
+ + ), + }, + ]; + return (
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index b248eb2e..39da620f 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,67 @@ .features { display: flex; align-items: center; - padding: 2rem 0; + padding: 4rem 0; width: 100%; + background-color: var(--bitgo-gray-100); } .featureSvg { - height: 200px; - width: 200px; + height: 150px; + width: 150px; +} + +.featureCard { + height: 100%; + padding: 2rem; + border-radius: 8px; + background-color: white; + box-shadow: 0 4px 12px rgba(14, 15, 15, 0.05); + transition: all 0.3s ease; +} + +.featureCard:hover { + transform: translateY(-5px); + box-shadow: 0 8px 24px rgba(14, 15, 15, 0.1); +} + +.featureTitle { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--bitgo-gray-900); +} + +.featureDescription { + color: var(--bitgo-gray-700); + line-height: 1.6; +} + +.featureDescription div { + margin-bottom: 0.75rem; + display: flex; + align-items: flex-start; +} + +.featureDescription div::before { + content: '•'; + color: var(--ifm-color-primary); + font-weight: bold; + margin-right: 0.5rem; +} + +[data-theme='dark'] .features { + background-color: #1e1e1e; +} + +[data-theme='dark'] .featureCard { + background-color: #2d2d2d; +} + +[data-theme='dark'] .featureTitle { + color: #ffffff; +} + +[data-theme='dark'] .featureDescription { + color: #e0e0e0; } diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 2bc6a4cf..1fc775f9 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,25 +6,116 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #0052ff; + --ifm-color-primary-dark: #0049e6; + --ifm-color-primary-darker: #0044d9; + --ifm-color-primary-darkest: #0038b3; + --ifm-color-primary-light: #1a65ff; + --ifm-color-primary-lighter: #266bff; + --ifm-color-primary-lightest: #4d85ff; --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --docusaurus-highlighted-code-line-bg: rgba(14, 15, 15, 0.1); + --ifm-font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --ifm-heading-font-weight: 600; + --ifm-navbar-background-color: #ffffff; + --ifm-navbar-height: 80px; + --bitgo-gray-100: #f8f9fa; + --bitgo-gray-200: #e9ecef; + --bitgo-gray-300: #dee2e6; + --bitgo-gray-400: #ced4da; + --bitgo-gray-500: #adb5bd; + --bitgo-gray-600: #6c757d; + --bitgo-gray-700: #495057; + --bitgo-gray-800: #343a40; + --bitgo-gray-900: #0e0f0f; + --bitgo-footer-light: #f0f2f5; + --bitgo-footer-dark: #0a0f23; } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-color-primary: #4d85ff; + --ifm-color-primary-dark: #2f70ff; + --ifm-color-primary-darker: #1f66ff; + --ifm-color-primary-darkest: #0049e6; + --ifm-color-primary-light: #6b9aff; + --ifm-color-primary-lighter: #7ba4ff; + --ifm-color-primary-lightest: #a8c3ff; + --docusaurus-highlighted-code-line-bg: rgba(14, 15, 15, 0.3); + --ifm-navbar-background-color: #1a1a1a; +} + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); + +.navbar { + box-shadow: 0 2px 4px rgba(14, 15, 15, 0.05); +} + +.navbar__logo { + height: 40px; +} + +.navbar__brand { + font-weight: 600; +} + +.footer { + background-color: var(--bitgo-footer-dark); +} + +[data-theme='light'] .footer { + background-color: var(--bitgo-footer-light); + color: var(--bitgo-gray-900); +} + +[data-theme='dark'] .footer { + background-color: var(--bitgo-footer-dark); +} + +[data-theme='light'] .footer .footer__link-item { + color: var(--bitgo-gray-800); +} + +[data-theme='light'] .footer .footer__title { + color: var(--bitgo-gray-900); +} + +.button { + border-radius: 4px; + font-weight: 500; + transition: all 0.2s ease; +} + +.button--primary { + background-color: var(--ifm-color-primary); + color: white; + border: none; +} + +.button--primary:hover { + background-color: var(--ifm-color-primary-dark); + color: white; +} + +.button--outline { + color: white; + border: 1px solid rgba(255, 255, 255, 0.6); +} + +[data-theme='light'] .hero .button--outline { + color: var(--bitgo-gray-900); + border: 1px solid var(--bitgo-gray-900); +} + +[data-theme='light'] .hero .button--outline:hover { + background-color: rgba(14, 15, 15, 0.05); + border-color: var(--bitgo-gray-900); + color: var(--bitgo-gray-900); +} + +.button--outline:hover { + background-color: rgba(255, 255, 255, 0.1); + border-color: white; + color: white; } diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 3ce34fe8..87710084 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -4,20 +4,42 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import { useColorMode } from '@docusaurus/theme-common'; import styles from './index.module.css'; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); + const { colorMode } = useColorMode(); + const isDarkTheme = colorMode === 'dark'; + return ( -
+
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - +
+
+

{siteConfig.title}

+

+ {siteConfig.tagline} +

+
+ + Get Started + + + View on GitHub + +
+
@@ -28,8 +50,8 @@ export default function Home() { const { siteConfig } = useDocusaurusContext(); return (
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 9f71a5da..abd4fbff 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -4,20 +4,73 @@ */ .heroBanner { - padding: 4rem 0; - text-align: center; + padding: 8rem 0; + text-align: left; position: relative; overflow: hidden; + background: linear-gradient(135deg, #0e0f0f 0%, #1a1a1a 100%); + color: white; +} + +.heroBanner h1 { + font-size: 4rem; + font-weight: 700; + margin-bottom: 1.5rem; + background: linear-gradient(90deg, #0052ff 0%, #4d85ff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + display: inline-block; +} + +.heroBanner p { + font-size: 1.5rem; + margin-bottom: 2.5rem; + opacity: 0.9; + max-width: 600px; +} + +[data-theme='light'] .heroBanner { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + color: #0e0f0f; +} + +[data-theme='dark'] .heroBanner { + background: linear-gradient(135deg, #0e0f0f 0%, #1a1a1a 100%); + color: white; } @media screen and (max-width: 996px) { .heroBanner { - padding: 2rem; + padding: 4rem 2rem; + text-align: center; + } + + .heroBanner h1 { + font-size: 2.5rem; + } + + .heroBanner p { + font-size: 1.25rem; + margin-left: auto; + margin-right: auto; } } .buttons { display: flex; align-items: center; - justify-content: center; +} + +.button { + margin: 0 1rem 0 0; + padding: 0.75rem 1.5rem; + font-weight: 600; + border-radius: 4px; + transition: all 0.2s ease; +} + +@media screen and (max-width: 996px) { + .buttons { + justify-content: center; + } } diff --git a/website/static/img/Shield_Logo_Blue-Dark.svg b/website/static/img/Shield_Logo_Blue-Dark.svg new file mode 100644 index 00000000..52a3c0f8 --- /dev/null +++ b/website/static/img/Shield_Logo_Blue-Dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/static/img/api-m-dark-blue.svg b/website/static/img/api-m-dark-blue.svg new file mode 100644 index 00000000..0f46dac8 --- /dev/null +++ b/website/static/img/api-m-dark-blue.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/api-m-light-blue.svg b/website/static/img/api-m-light-blue.svg new file mode 100644 index 00000000..cb18acaa --- /dev/null +++ b/website/static/img/api-m-light-blue.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/developers-m-light-blue.svg b/website/static/img/developers-m-light-blue.svg new file mode 100644 index 00000000..60b5ff86 --- /dev/null +++ b/website/static/img/developers-m-light-blue.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/ui-access-m-dark-blue.svg b/website/static/img/ui-access-m-dark-blue.svg new file mode 100644 index 00000000..0390e59a --- /dev/null +++ b/website/static/img/ui-access-m-dark-blue.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/ui-access-m-light-blue.svg b/website/static/img/ui-access-m-light-blue.svg new file mode 100644 index 00000000..fac45a20 --- /dev/null +++ b/website/static/img/ui-access-m-light-blue.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/view-rewards-m-dark-blue.svg b/website/static/img/view-rewards-m-dark-blue.svg new file mode 100644 index 00000000..21daaeed --- /dev/null +++ b/website/static/img/view-rewards-m-dark-blue.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/view-rewards-m-light-blue.svg b/website/static/img/view-rewards-m-light-blue.svg new file mode 100644 index 00000000..82688b68 --- /dev/null +++ b/website/static/img/view-rewards-m-light-blue.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +