From 66a047c1329aa27269b1641282c2d16ae95a5f8d Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Fri, 3 Jun 2022 16:10:42 -0400 Subject: [PATCH 01/43] DX-2631 Redo Landing Page --- site/docusaurus.config.js | 6 +- site/src/components/AnimatedGlobe.js | 617 ++++++++++++++++++ site/src/components/HomepageProducts.js | 55 +- .../components/HomepageProducts.module.css | 22 +- site/src/css/custom.css | 33 + site/src/pages/index.js | 33 +- site/src/pages/index.module.css | 81 +++ site/static/img/bw-icon-dark.svg | 8 + site/static/img/bw-icon.svg | 8 + 9 files changed, 796 insertions(+), 67 deletions(-) create mode 100644 site/src/components/AnimatedGlobe.js create mode 100644 site/static/img/bw-icon-dark.svg create mode 100644 site/static/img/bw-icon.svg diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index 3dade575f..95ba49e60 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -67,10 +67,14 @@ module.exports = { href: 'https://github.com/Bandwidth-Samples', label: 'Samples', position: 'left', - },{ + }, { href: 'https://github.com/Bandwidth', position: 'right', className: 'header-github-link' + }, { + href: 'https://dashboard.bandwidth.com/portal/r/', + position: 'right', + className: 'header-dashboard-link' }] }, footer: { diff --git a/site/src/components/AnimatedGlobe.js b/site/src/components/AnimatedGlobe.js new file mode 100644 index 000000000..84f3d5fc2 --- /dev/null +++ b/site/src/components/AnimatedGlobe.js @@ -0,0 +1,617 @@ +import React from 'react'; +import styles from '../../src/pages/index.module.css' + +export default function AnimatedGlobe() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/site/src/components/HomepageProducts.js b/site/src/components/HomepageProducts.js index 3c48121e7..1e175b3be 100644 --- a/site/src/components/HomepageProducts.js +++ b/site/src/components/HomepageProducts.js @@ -7,75 +7,44 @@ const ProductList = [ title: 'Numbers', Svg: require('../../static/img/icon-numbers.svg').default, link: '/docs/numbers', - description: ( - <> - We’ve got your number. In fact, we have as many of them as you want. - - ), }, { title: 'Voice', Svg: require('../../static/img/icon-voice.svg').default, link: '/docs/voice', - description: ( - <> - Need to make a call? Placing and receiving phone calls is fast and easy with Bandwidth Voice. - - ), }, { title: 'Messaging', Svg: require('../../static/img/icon-messaging.svg').default, link: '/docs/messaging', - description: ( - <> - Communication at its most basic. Adding SMS or MMS is a snap. - - ), }, { title: 'Emergency', Svg: require('../../static/img/icon-emergency.svg').default, link: '/docs/emergency', - description: ( - <> - Connect your users to emergency services with fast, reliable, accurate E911 services. - - ), }, { title: 'Multi-Factor Authentication', Svg: require('../../static/img/icon-mfa.svg').default, link: '/docs/mfa/about', - description: ( - <> - Easily add multi-factor authentication to your software, website, or application. - - ), }, { title: 'WebRTC', Svg: require('../../static/img/icon-WebRTC.svg').default, link: '/docs/webrtc', - description: ( - <> - Quickly add voice calling to your web-based applications without the need for any telecom infrastructure. - - ), }, ]; function Product({Svg, title, description, link}) { return ( -
-
- - - -
+
+ {/*
*/} + + + + {/*
*/}
-

{title}

-

{description}

+

{title}

); @@ -84,12 +53,10 @@ function Product({Svg, title, description, link}) { export default function HomepageProducts() { return (
-
-
- {ProductList.map((props, idx) => ( - - ))} -
+
+ {ProductList.map((props, idx) => ( + + ))}
); diff --git a/site/src/components/HomepageProducts.module.css b/site/src/components/HomepageProducts.module.css index 73cce2ff8..763d1e830 100644 --- a/site/src/components/HomepageProducts.module.css +++ b/site/src/components/HomepageProducts.module.css @@ -3,11 +3,31 @@ .products { display: flex; align-items: center; - padding: 2rem 0; width: 100%; } +.product { + width: 33%; + height: 15rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +@media screen and (max-width: 600px) { + .product { + width: 50%; + } +} + .productSvg { height: 150px; width: 150px; } + +.productContainer{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 61fd9b263..c6d531b01 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -117,6 +117,30 @@ html[data-theme='dark'] { no-repeat; } +.header-dashboard-link::before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background: url(../../static/img/bw-icon.svg)no-repeat; +} + +[data-theme='dark'] .header-dashboard-link::before { + background: url(../../static/img/bw-icon-dark.svg)no-repeat; +} + +.main-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding-top: 5rem; +} + +@media screen and (max-width: 1152px) { + .main-wrapper { + flex-direction: row; + } +} /* Algolia DocSearch CSS Settings */ html[data-theme='light'] .DocSearch { @@ -305,11 +329,20 @@ div[class^='announcementBarContent'] a:hover { top: 50%; } +/* mask for globe svg on landing page */ +.globeMask { + fill: var(--ifm-background-color); +} + /* shows full logo name on mobile */ .navbar .navbar__items { flex: auto; } +.navbar { + box-shadow: none; +} + .navbar__link { font-family: 'Overpass Bold'; } diff --git a/site/src/pages/index.js b/site/src/pages/index.js index 71c7cc98c..db94cb18b 100644 --- a/site/src/pages/index.js +++ b/site/src/pages/index.js @@ -5,25 +5,8 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import styles from './index.module.css'; import HomepageProducts from '../components/HomepageProducts'; +import AnimatedGlobe from '../components/AnimatedGlobe'; -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Dashboard Login - -
-
-
- ); -} export default function Home() { const {siteConfig} = useDocusaurusContext(); @@ -32,10 +15,18 @@ export default function Home() { title={`Home`} description="Bandwidth API Reference, documentation, SDKs, guides, examples and more. Get everything you need to build with Bandwidth." keywords="Bandwidth,API,documentation,SDK,guide"> - -
+
+
+

Bandwidth API Documentation

+

Learn about Bandwidth's product APIs

+
+
+ +
+
+
-
+
); } diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css index b9888e753..dea594a43 100644 --- a/site/src/pages/index.module.css +++ b/site/src/pages/index.module.css @@ -18,6 +18,87 @@ } } +.globeSvg { + width: 100%; + height: 100%; +} + +.left { + width: 50%; + height: 100%; + display: flex; + flex-direction: column; +} +@media screen and (max-width: 1152px) { + .left { + width: 100%; + height: 10rem; + } +} + +.title { + margin-left: 10rem; +} +@media screen and (max-width: 1152px) { + .title { + width: 100%; + height: 5rem; + margin-left: 0; + } +} + +.title h1 { + font-size: 56px; + font-weight: 200; + line-height: 56px; +} +@media screen and (max-width: 1152px) { + .title h1 { + font-size: 36px; + line-height: 36px; + text-align: center; + } +} + +.title h2 { + font-size: 36px; + font-family: 'Overpass Bold'; + line-height: 36px; +} +@media screen and (max-width: 1152px) { + .title h2 { + font-size: 24px; + line-height: 24px; + text-align: center; + } +} + +.globe { + width: 100%; + height: 50%; +} +@media screen and (max-width: 1152px) { + .globe { + display: none; + } +} + +.right { + width: 50%; + height: inherit; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +@media screen and (max-width: 1152px) { + .right { + width: 100%; + padding-top: 0; + } +} + .buttons { display: flex; align-items: center; diff --git a/site/static/img/bw-icon-dark.svg b/site/static/img/bw-icon-dark.svg new file mode 100644 index 000000000..686b412c0 --- /dev/null +++ b/site/static/img/bw-icon-dark.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/site/static/img/bw-icon.svg b/site/static/img/bw-icon.svg new file mode 100644 index 000000000..5ade07d40 --- /dev/null +++ b/site/static/img/bw-icon.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file From 2939925880f4d4b5fce950f39526bbda46ac2fcf Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Mon, 6 Jun 2022 14:00:23 -0400 Subject: [PATCH 02/43] lots of changes and refactoring --- site/docusaurus.config.js | 11 +- site/src/components/AnimatedGlobe.js | 723 +++++++++--------- site/src/components/ApiReference.js | 3 +- site/src/components/GitHubLink.js | 2 +- site/src/components/HomepageProducts.js | 63 -- site/src/components/NumbersIframe.js | 14 - site/src/components/ProductGrid.js | 25 + site/src/components/RunInPostman.js | 8 - .../components/css/AnimatedGlobe.module.css | 24 + site/src/components/css/GitHubLink.module.css | 12 + .../ProductGrid.module.css} | 19 +- site/src/components/gridItem.js | 31 - site/src/css/apis.module.css | 22 - site/src/css/custom.css | 79 +- site/src/css/home.module.css | 10 + site/src/css/sdks.module.css | 48 +- site/src/css/twoColumn.module.css | 100 +++ site/src/pages/apis/index.tsx | 43 +- site/src/pages/index.js | 61 +- site/src/pages/index.module.css | 136 ---- site/src/pages/sdks/index.tsx | 124 ++- site/static/img/postman-dark.png | Bin 0 -> 31959 bytes site/static/img/postman.png | Bin 0 -> 30983 bytes 23 files changed, 688 insertions(+), 870 deletions(-) delete mode 100644 site/src/components/HomepageProducts.js delete mode 100644 site/src/components/NumbersIframe.js create mode 100644 site/src/components/ProductGrid.js delete mode 100644 site/src/components/RunInPostman.js create mode 100644 site/src/components/css/AnimatedGlobe.module.css create mode 100644 site/src/components/css/GitHubLink.module.css rename site/src/components/{HomepageProducts.module.css => css/ProductGrid.module.css} (72%) delete mode 100644 site/src/components/gridItem.js create mode 100644 site/src/css/home.module.css create mode 100644 site/src/css/twoColumn.module.css delete mode 100644 site/src/pages/index.module.css create mode 100644 site/static/img/postman-dark.png create mode 100644 site/static/img/postman.png diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index 95ba49e60..a6e2d3c11 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -70,11 +70,18 @@ module.exports = { }, { href: 'https://github.com/Bandwidth', position: 'right', - className: 'header-github-link' + className: 'header-github-link bw-link', + title: 'Github Organization' + }, { + href: 'https://github.com/Bandwidth/postman', + position: 'right', + className: 'header-postman-link bw-link', + title: 'Postman Collection' }, { href: 'https://dashboard.bandwidth.com/portal/r/', position: 'right', - className: 'header-dashboard-link' + className: 'header-dashboard-link bw-link', + title: 'Dashboard Login' }] }, footer: { diff --git a/site/src/components/AnimatedGlobe.js b/site/src/components/AnimatedGlobe.js index 84f3d5fc2..e411fe1fa 100644 --- a/site/src/components/AnimatedGlobe.js +++ b/site/src/components/AnimatedGlobe.js @@ -1,375 +1,375 @@ import React from 'react'; -import styles from '../../src/pages/index.module.css' +import styles from './css/AnimatedGlobe.module.css'; export default function AnimatedGlobe() { return ( + xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="791" height="618" viewBox="100 100 718 470" className={styles.globeSvg}> - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -393,9 +393,6 @@ export default function AnimatedGlobe() { - - - @@ -494,6 +491,10 @@ export default function AnimatedGlobe() { + + + + diff --git a/site/src/components/ApiReference.js b/site/src/components/ApiReference.js index 3bb3cb93d..9be9cdcf1 100644 --- a/site/src/components/ApiReference.js +++ b/site/src/components/ApiReference.js @@ -1,5 +1,4 @@ import React from 'react'; -import Layout from '@theme/Layout'; import { useColorMode } from '@docusaurus/theme-common'; import { RedocStandalone } from 'redoc'; import { lightTheme, darkTheme } from '../css/redocTheme'; @@ -7,7 +6,7 @@ import { lightTheme, darkTheme } from '../css/redocTheme'; const RedocConfig = (props) => { const {colorMode, setColorMode} = useColorMode(); return - {/*
*/} - - - - {/*
*/} -
-

{title}

-
- - ); -} - -export default function HomepageProducts() { - return ( -
-
- {ProductList.map((props, idx) => ( - - ))} -
-
- ); -} diff --git a/site/src/components/NumbersIframe.js b/site/src/components/NumbersIframe.js deleted file mode 100644 index c94358408..000000000 --- a/site/src/components/NumbersIframe.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react'; - -export default class NumbersIframe extends Component { - - render() { - return ( -