From 2b6797fb2fb0454f94e356be624b4d736e6a8f08 Mon Sep 17 00:00:00 2001 From: Ben Halverson <7907232+benhalverson@users.noreply.github.com> Date: Sat, 21 Mar 2020 09:41:36 -0700 Subject: [PATCH 01/18] test --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 13eb273232..9184aced53 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +hi


From 68bd5d2949450418dc2d7ba89e647d61170f1f1e Mon Sep 17 00:00:00 2001 From: Ben Halverson <7907232+benhalverson@users.noreply.github.com> Date: Sat, 21 Mar 2020 09:52:19 -0700 Subject: [PATCH 02/18] Update README.md (#3) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9184aced53..9e24b0a86a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -hi +test 2


From 845a7718d811949b2b9245d83f1a2030756476b2 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 26 Apr 2020 19:01:22 -0700 Subject: [PATCH 03/18] feat(homepage): Added how to isntall tabs --- package-lock.json | 22 ++++++++++ package.json | 4 +- src/components/installTabs.tsx | 73 ++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 6 ++- src/styles/install-tabs.scss | 56 ++++++++++++++++++++++++++ 5 files changed, 159 insertions(+), 2 deletions(-) create mode 100644 src/components/installTabs.tsx create mode 100644 src/styles/install-tabs.scss diff --git a/package-lock.json b/package-lock.json index 8e576a17c1..4ea729caa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5522,6 +5522,14 @@ "@types/react": "*" } }, + "@types/react-tabs": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.1.tgz", + "integrity": "sha512-4SZXSF8ibQAtHUqqfoYLO+8Rn4F7Hj/IX3CJf1712dWeFvRxYY1HjjwSoN4MgUB0SB0dY4GrdlZwNhhIKuRoNQ==", + "requires": { + "@types/react": "*" + } + }, "@types/react-test-renderer": { "version": "16.9.2", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz", @@ -8229,6 +8237,11 @@ "static-extend": "^0.1.1" } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -25138,6 +25151,15 @@ "shallowequal": "^1.0.1" } }, + "react-tabs": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.0.tgz", + "integrity": "sha512-9RKc77HCPsjQDVPyZEw37g3JPtg26oSQ9o4mtaVXjJuLedDX5+TQcE+MRNKR+4aO3GMAY4YslCePGG1//MQ3Jg==", + "requires": { + "classnames": "^2.2.0", + "prop-types": "^15.5.0" + } + }, "react-test-renderer": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", diff --git a/package.json b/package.json index 61a7749d58..8cf2b85ff1 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@emotion/core": "^10.0.7", "@smotaal.io/dark-mode-controller": "<0.5", "@types/react-helmet": "^5.0.15", + "@types/react-tabs": "2.3.1", "dotenv": "^8.2.0", "emotion": "^10.0.27", "emotion-server": "^10.0.27", @@ -33,7 +34,8 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-emotion": "^10.0.0", - "react-helmet": "^5.2.0" + "react-helmet": "^5.2.0", + "react-tabs": "3.1.0" }, "keywords": [ "gatsby", diff --git a/src/components/installTabs.tsx b/src/components/installTabs.tsx new file mode 100644 index 0000000000..01c8accacb --- /dev/null +++ b/src/components/installTabs.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +// import 'react-tabs/style/react-tabs.scss'; +import '../styles/install-tabs.scss'; +import { Link } from 'gatsby'; + +const InstallTabs = (): JSX.Element => { + return ( + + + Mac OS + Windows + Ubuntu / Debian + + + +

+ Download the macOS Installer directly from + the nodejs.org web site. +

Alternatives

+

+ Using + + Homebrew + +

+ brew install node +

+ Using + + Macports + +

+ port install nodejs14 +
+ + +
+

+ Download the Windows Installer directly + from the nodejs.org web site. +

+

Alternatives

+

Using Chocolatey:

+ + cinst nodejs # or for full install with npm cinst nodejs.install + Using Scoop: scoop install nodejs + +
+ + +
+

+ Debian and Ubuntu based Linux distributions, Enterprise Linux/Fedora + and Snap packages +

+

+ + Node.js binary distributions + + are available from NodeSource. +

+
+ + + ); +}; + +export default InstallTabs; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 107c64e139..7b5b8cda01 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Link } from 'gatsby'; + import Hero from '../components/hero'; import Layout from '../components/layout'; import '../util/konami'; @@ -24,6 +25,7 @@ import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg'; import leafsIllustrationBack from '../images/illustrations/leafs-back.svg'; import dotsIllustration from '../images/illustrations/dots.svg'; import Banner from '../components/banner'; +import InstallTabs from '../components/installTabs'; const nodeFeature1 = 'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. '; @@ -54,7 +56,9 @@ export default function Index(): JSX.Element {
-
+
+ +
diff --git a/src/styles/install-tabs.scss b/src/styles/install-tabs.scss new file mode 100644 index 0000000000..f2582cb93d --- /dev/null +++ b/src/styles/install-tabs.scss @@ -0,0 +1,56 @@ +.react-tabs { + -webkit-tap-highlight-color: transparent; + + &__tab-list { + margin: 0 0 10px; + padding: 0; + } + + &__tab { + display: inline-block; + border: 1px solid transparent; + border-bottom: none; + bottom: -1px; + position: relative; + list-style: none; + padding: 6px 12px; + background: lighten($color: #2c3437, $amount: 20); + cursor: pointer; + + &--selected { + background: #2c3437; + border-color: #aaa; + color: #fff; + border-radius: 5px 5px 0 0; + } + + &--disabled { + color: #ccc; + cursor: default; + } + + &:focus { + box-shadow: 0 0 5px hsl(208, 99%, 50%); + border-color: hsl(208, 99%, 50%); + outline: none; + + &:after { + content: ''; + position: absolute; + height: 5px; + left: -4px; + right: -4px; + bottom: -5px; + background: #fff; + } + } + } + + &__tab-panel { + display: none; + + &--selected { + display: block; + } + } +} From 943c9742592fadf512dcdd2e195b412db0e957f3 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 26 Apr 2020 19:42:27 -0700 Subject: [PATCH 04/18] refactor(homepage): Refactored some styling for the install tabs --- src/components/installTabs.tsx | 7 +++---- src/styles/install-tabs.scss | 11 +++-------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/installTabs.tsx b/src/components/installTabs.tsx index 01c8accacb..567bf74f27 100644 --- a/src/components/installTabs.tsx +++ b/src/components/installTabs.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; -// import 'react-tabs/style/react-tabs.scss'; import '../styles/install-tabs.scss'; import { Link } from 'gatsby'; @@ -19,14 +18,14 @@ const InstallTabs = (): JSX.Element => { the nodejs.org web site.

Alternatives

- Using + Using{' '} Homebrew

brew install node

- Using + Using{' '} {

Node.js binary distributions - + {' '} are available from NodeSource.

diff --git a/src/styles/install-tabs.scss b/src/styles/install-tabs.scss index f2582cb93d..b917b1baef 100644 --- a/src/styles/install-tabs.scss +++ b/src/styles/install-tabs.scss @@ -18,17 +18,12 @@ cursor: pointer; &--selected { - background: #2c3437; - border-color: #aaa; + background: var(--black9); + border-color: var(--color-border-primary); color: #fff; border-radius: 5px 5px 0 0; } - &--disabled { - color: #ccc; - cursor: default; - } - &:focus { box-shadow: 0 0 5px hsl(208, 99%, 50%); border-color: hsl(208, 99%, 50%); @@ -41,7 +36,7 @@ left: -4px; right: -4px; bottom: -5px; - background: #fff; + background: var(--black0); } } } From a1560ded7269531a96aad554d601428ba3a22a78 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 26 Apr 2020 19:43:15 -0700 Subject: [PATCH 05/18] test(install tabs): Added a snapshot for a the installTabs component --- .../__snapshots__/installTabs.test.tsx.snap | 108 ++++++++++++++++++ test/components/installTabs.test.tsx | 11 ++ 2 files changed, 119 insertions(+) create mode 100644 test/components/__snapshots__/installTabs.test.tsx.snap create mode 100644 test/components/installTabs.test.tsx diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap new file mode 100644 index 0000000000..50fa3e0161 --- /dev/null +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tests for InstallTabs component renders correctly 1`] = ` +
+
    + + + +
+
+
+ Download the + + macOS Installer + + directly from the nodejs.org web site. +

+ Alternatives +

+

+ Using + + + Homebrew + +

+ + brew install node + +

+ Using + + + Macports + +

+ + port install nodejs14 + +
+
+
+
+
+`; diff --git a/test/components/installTabs.test.tsx b/test/components/installTabs.test.tsx new file mode 100644 index 0000000000..f7acc9c084 --- /dev/null +++ b/test/components/installTabs.test.tsx @@ -0,0 +1,11 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import React from 'react'; +import renderer from 'react-test-renderer'; +import InstallTabs from '../../src/components/installTabs'; + +describe('Tests for InstallTabs component', () => { + it('renders correctly', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); From d67417c9580ea025083c8fc09d4bd0aa1207073c Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 26 Apr 2020 20:22:30 -0700 Subject: [PATCH 06/18] refactor(install tabs): More styling for the install text --- src/components/installTabs.tsx | 17 ++++++------- src/styles/install-tabs.scss | 7 ++++++ .../__snapshots__/installTabs.test.tsx.snap | 24 ++++++++++++------- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/installTabs.tsx b/src/components/installTabs.tsx index 567bf74f27..80e6a8e0dc 100644 --- a/src/components/installTabs.tsx +++ b/src/components/installTabs.tsx @@ -14,8 +14,10 @@ const InstallTabs = (): JSX.Element => {
- Download the macOS Installer directly from - the nodejs.org web site. +

+ Download the macOS Installer directly + from the nodejs.org web site. +

Alternatives

Using{' '} @@ -23,7 +25,7 @@ const InstallTabs = (): JSX.Element => { Homebrew

- brew install node + brew install node

Using{' '} { Macports

- port install nodejs14 + port install nodejs14
@@ -45,10 +47,9 @@ const InstallTabs = (): JSX.Element => {

Alternatives

Using Chocolatey:

- - cinst nodejs # or for full install with npm cinst nodejs.install - Using Scoop: scoop install nodejs - + cinst nodejs +

Using Scoop:

+ scoop install nodejs
diff --git a/src/styles/install-tabs.scss b/src/styles/install-tabs.scss index b917b1baef..c5c6ef3d47 100644 --- a/src/styles/install-tabs.scss +++ b/src/styles/install-tabs.scss @@ -48,4 +48,11 @@ display: block; } } + + p { + margin-bottom: 5px; + } + .install__text { + color: var(--pink6); + } } diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap index 50fa3e0161..308d0a0018 100644 --- a/test/components/__snapshots__/installTabs.test.tsx.snap +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -52,13 +52,15 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` role="tabpanel" >
- Download the - - macOS Installer - - directly from the nodejs.org web site. +

+ Download the + + macOS Installer + + directly from the nodejs.org web site. +

Alternatives

@@ -73,7 +75,9 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` Homebrew

- + brew install node

@@ -87,7 +91,9 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` Macports

- + port install nodejs14
From c9b815fc02ad6b6439a61d8dfa68bdd56dfdfcb7 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sun, 26 Apr 2020 20:34:55 -0700 Subject: [PATCH 07/18] docs(readme): Remove random test2 text from readme --- README.md | 179 +++++++++++++++++++++++++++--------------------------- 1 file changed, 89 insertions(+), 90 deletions(-) diff --git a/README.md b/README.md index 2c40faee5f..3ec973f6d5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -test 2


@@ -29,23 +28,23 @@ test 2 1. **Install dependencies.** - ```sh - # install the dependencies - npm install - ``` + ```sh + # install the dependencies + npm install + ``` 1. **Start developing.** - ```sh - # "start": "gatsby develop" - npm start - ``` + ```sh + # "start": "gatsby develop" + npm start + ``` 1. **Open the source code and start editing!** - Your site is now running at `http://localhost:8000`! + Your site is now running at `http://localhost:8000`! - *Note: You'll also see a second link: `http://localhost:8000___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://next.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).* + _Note: You'll also see a second link: `http://localhost:8000___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://next.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ ## 🧐 What's inside? @@ -86,25 +85,25 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje 7. **`gatsby-browser.tsx`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://next.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. -6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc. (Check out the [config docs](https://next.gatsbyjs.org/docs/gatsby-config/) for more detail). +8. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc. (Check out the [config docs](https://next.gatsbyjs.org/docs/gatsby-config/) for more detail). -8. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby node APIs](https://next.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. +9. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby node APIs](https://next.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -9. **`gatsby-ssr.tsx`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://next.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. +10. **`gatsby-ssr.tsx`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://next.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. -10. **`LICENSE`**: Gatsby is licensed under the MIT license. +11. **`LICENSE`**: Gatsby is licensed under the MIT license. -11. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won't change this file directly). +12. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won't change this file directly). -12. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc.). This manifest is how npm knows which packages to install for your project. +13. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc.). This manifest is how npm knows which packages to install for your project. -13. **`README.md`**: A text file containing useful reference information about your project. +14. **`README.md`**: A text file containing useful reference information about your project. -14. **`tsconfig.json`**: Config file for TypeScript +15. **`tsconfig.json`**: Config file for TypeScript -15. **`tslint.json`**: TS Lint configuration file +16. **`tslint.json`**: TS Lint configuration file -16. **`yarn.lock`**: [Yarn](https://yarnpkg.com/) is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as `package-lock.json`, just for a different package management system. +17. **`yarn.lock`**: [Yarn](https://yarnpkg.com/) is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as `package-lock.json`, just for a different package management system. ## 📝 Data Sources @@ -118,9 +117,9 @@ The `src/documentation` directory currently contains all the getting started con Looking for more guidance? Full documentation for Gatsby lives [on the website](https://next.gatsbyjs.org/). Here are some places to start: -* **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://next.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. +- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://next.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. -* **To dive straight into code samples head [to our documentation](https://next.gatsbyjs.org/docs/).** In particular, check out the "Guides", API reference, and "Advanced Tutorials" sections in the sidebar. +- **To dive straight into code samples head [to our documentation](https://next.gatsbyjs.org/docs/).** In particular, check out the "Guides", API reference, and "Advanced Tutorials" sections in the sidebar. ## 🏛 Governance @@ -150,87 +149,87 @@ Any member of the website-redesign initiative who prefers to begin contributing at a specific future phase is welcome to make a PR adding their handle to that phase. -* [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller**, CommComm +- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller**, CommComm Co-champion -* [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury**, CommComm +- [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury**, CommComm Co-champion #### Information Gathering -* [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** -* [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** -* [@darcyclarke](https://github.com/darcyclarke) - **Darcy Clarke** -* [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** -* [@fhemberger](https://github.com/fhemberger) - **Frederic Hemberger** -* [@JonahMoses](https://github.com/JonahMoses) - **Jonah Moses** -* [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** -* [@oe](https://github.com/oe) - **Olivia Hugger** -* [@bnb](https://github.com/bnb) - **Tierney Cyren** -* [@timothyis](https://github.com/timothyis) - **Timothy** +- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** +- [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** +- [@darcyclarke](https://github.com/darcyclarke) - **Darcy Clarke** +- [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** +- [@fhemberger](https://github.com/fhemberger) - **Frederic Hemberger** +- [@JonahMoses](https://github.com/JonahMoses) - **Jonah Moses** +- [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** +- [@oe](https://github.com/oe) - **Olivia Hugger** +- [@bnb](https://github.com/bnb) - **Tierney Cyren** +- [@timothyis](https://github.com/timothyis) - **Timothy** #### IA / UX Planning -* [@oe](https://github.com/oe) - **Olivia Hugger** -* [@fhemberger](https://github.com/fhemberger) - **Frederic Hemberger** -* [@bnb](https://github.com/bnb) - **Tierney Cyren** -* [@timothyis](https://github.com/timothyis) - **Timothy** -* [@JonahMoses](https://github.com/JonahMoses) - **Jonah Moses** -* [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** -* [@emilypmendez](https://github.com/emilypmendez) - **Emily Mendez** -* [@darcyclarke](https://github.com/darcyclarke) - **Darcy Clarke** -* [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** -* [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** -* [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** -* [@add1sun](https://github.com/add1sun) - **Addison Berry** -* [@Qard](https://github.com/Qard) - **Stephen Belanger** -* [@watilde](https://github.com/watilde) - **Daijiro Wachi** -* [@tolmasky](https://github.com/tolmasky) - **Francisco Ryan Tolmasky I** -* [@milapbhojak](https://github.com/milapbhojak) - **Milap Bhojak** -* [@devamaz](https://github.com/devamaz) - **Ahmad Abdul-Aziz** +- [@oe](https://github.com/oe) - **Olivia Hugger** +- [@fhemberger](https://github.com/fhemberger) - **Frederic Hemberger** +- [@bnb](https://github.com/bnb) - **Tierney Cyren** +- [@timothyis](https://github.com/timothyis) - **Timothy** +- [@JonahMoses](https://github.com/JonahMoses) - **Jonah Moses** +- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** +- [@emilypmendez](https://github.com/emilypmendez) - **Emily Mendez** +- [@darcyclarke](https://github.com/darcyclarke) - **Darcy Clarke** +- [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** +- [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** +- [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** +- [@add1sun](https://github.com/add1sun) - **Addison Berry** +- [@Qard](https://github.com/Qard) - **Stephen Belanger** +- [@watilde](https://github.com/watilde) - **Daijiro Wachi** +- [@tolmasky](https://github.com/tolmasky) - **Francisco Ryan Tolmasky I** +- [@milapbhojak](https://github.com/milapbhojak) - **Milap Bhojak** +- [@devamaz](https://github.com/devamaz) - **Ahmad Abdul-Aziz** #### UI Design and Content Creation -* [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** -* [@bnb](https://github.com/bnb) - **Tierney Cyren** -* [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** -* [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** -* [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** -* [@milapbhojak](https://github.com/milapbhojak) - **Milap Bhojak** -* [@tolmasky](https://github.com/tolmasky) - **Francisco Ryan Tolmasky I** -* [@iNidAName](https://github.com/inidaname) - **Hassaan Sani** -* [@abedzantout](https://github.com/abedzantout) - **Abdul Rahman Zantout** -* [@AliObaji](https://github.com/AliObaji) - **Ali Obaji** -* [@AhmadAwais](https://github.com/AhmadAwais) - **AhmadAwais** +- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller** +- [@bnb](https://github.com/bnb) - **Tierney Cyren** +- [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR** +- [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury** +- [@maddhruv](https://github.com/maddhruv) - **Dhruv Jain** +- [@milapbhojak](https://github.com/milapbhojak) - **Milap Bhojak** +- [@tolmasky](https://github.com/tolmasky) - **Francisco Ryan Tolmasky I** +- [@iNidAName](https://github.com/inidaname) - **Hassaan Sani** +- [@abedzantout](https://github.com/abedzantout) - **Abdul Rahman Zantout** +- [@AliObaji](https://github.com/AliObaji) - **Ali Obaji** +- [@AhmadAwais](https://github.com/AhmadAwais) - **AhmadAwais** #### Site Development _<-- current phase_ -* [@abiclub23](https://github.com/abiclub23) - **Abhi Tondepu** -* [@ajay2507](https://github.com/ajay2507) - **Ajaykumar** -* [@connorholyday](https://github.com/connorholyday) - **Connor Holyday** -* [@iceagency-jakecruse](https://github.com/iceagency-jakecruse) - **Jake Cruse** -* [@iceagency-lukehopkins](https://github.com/iceagency-lukehopkins) - **Luke Hopkins** -* [@jestho](https://github.com/jestho) - **Jesper Thøgersen** -* [@jonahmoses](https://github.com/jonahmoses) - **Jonah Moses** -* [@sagirk](https://github.com/sagirk) - **Sagir Khan** -* [@ollelauribostrom](https://github.com/ollelauribostrom) - **Olle Lauri Boström** -* [@belar](https://github.com/Belar) - **Paweł** -* [@erichodges](https://github.com/erichodges) - **Eric Hodges** -* [@utkarshbhimte](https://github.com/utkarshbhimte) - **Utkarsh Bhimte** -* [@lidoravitan](https://github.com/lidoravitan) - **Lidor Avitan** -* [@mbj36](https://github.com/mbj36) - **Mohit Bajoria** -* [@zanmarolt](https://github.com/zanmarolt) - **Zan Marolt** -* [@imbhargav5](https://github.com/imbhargav5) - **Bhargav Ponnapalli** -* [@mikeattara](https://github.com/mikeattara) - **Mike Perry Y Attara** -* [@ZYSzys](https://github.com/ZYSzys) - **ZYSzys** -* [@mrjam2](https://github.com/mrjam2) - **Jamie Burton** -* [@jamesgeorge007](https://github.com/jamesgeorge007) - **James George** -* [@Yash-Handa](https://github.com/Yash-Handa) - **Yash Handa** -* [@iNidAName](https://github.com/inidaname) - **Hassaan Sani** -* [@abedzantout](https://github.com/abedzantout) - **Abdul Rahman Zantout** -* [@LaRuaNa](https://github.com/LaRuaNa) - **Onur Laru** -* [@AhmadAwais](https://github.com/AhmadAwais) - **AhmadAwais** -* [@BeniCheni](https://github.com/BeniCheni) - **Benjamin Chen** -* [@kevjin](https://github.com/kevjin) - **Kevin Jin** +- [@abiclub23](https://github.com/abiclub23) - **Abhi Tondepu** +- [@ajay2507](https://github.com/ajay2507) - **Ajaykumar** +- [@connorholyday](https://github.com/connorholyday) - **Connor Holyday** +- [@iceagency-jakecruse](https://github.com/iceagency-jakecruse) - **Jake Cruse** +- [@iceagency-lukehopkins](https://github.com/iceagency-lukehopkins) - **Luke Hopkins** +- [@jestho](https://github.com/jestho) - **Jesper Thøgersen** +- [@jonahmoses](https://github.com/jonahmoses) - **Jonah Moses** +- [@sagirk](https://github.com/sagirk) - **Sagir Khan** +- [@ollelauribostrom](https://github.com/ollelauribostrom) - **Olle Lauri Boström** +- [@belar](https://github.com/Belar) - **Paweł** +- [@erichodges](https://github.com/erichodges) - **Eric Hodges** +- [@utkarshbhimte](https://github.com/utkarshbhimte) - **Utkarsh Bhimte** +- [@lidoravitan](https://github.com/lidoravitan) - **Lidor Avitan** +- [@mbj36](https://github.com/mbj36) - **Mohit Bajoria** +- [@zanmarolt](https://github.com/zanmarolt) - **Zan Marolt** +- [@imbhargav5](https://github.com/imbhargav5) - **Bhargav Ponnapalli** +- [@mikeattara](https://github.com/mikeattara) - **Mike Perry Y Attara** +- [@ZYSzys](https://github.com/ZYSzys) - **ZYSzys** +- [@mrjam2](https://github.com/mrjam2) - **Jamie Burton** +- [@jamesgeorge007](https://github.com/jamesgeorge007) - **James George** +- [@Yash-Handa](https://github.com/Yash-Handa) - **Yash Handa** +- [@iNidAName](https://github.com/inidaname) - **Hassaan Sani** +- [@abedzantout](https://github.com/abedzantout) - **Abdul Rahman Zantout** +- [@LaRuaNa](https://github.com/LaRuaNa) - **Onur Laru** +- [@AhmadAwais](https://github.com/AhmadAwais) - **AhmadAwais** +- [@BeniCheni](https://github.com/BeniCheni) - **Benjamin Chen** +- [@kevjin](https://github.com/kevjin) - **Kevin Jin** ## Links From 049e50741b1997be1eb91a9693b6b504e5aaf497 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Wed, 6 May 2020 16:46:17 -0700 Subject: [PATCH 08/18] feat(install-tabs): Styling the tabs --- src/components/installTabs.tsx | 37 +++++++++++++++++++ src/pages/index.tsx | 1 + src/styles/install-tabs.scss | 20 ++++++++++ .../__snapshots__/installTabs.test.tsx.snap | 28 ++++++++++++++ 4 files changed, 86 insertions(+) diff --git a/src/components/installTabs.tsx b/src/components/installTabs.tsx index 80e6a8e0dc..f8e16f4b82 100644 --- a/src/components/installTabs.tsx +++ b/src/components/installTabs.tsx @@ -36,7 +36,34 @@ const InstallTabs = (): JSX.Element => { Macports

+ port install nodejs14 +

+ Using{' '} + + nvm + +

+ + curl -o- + https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | + bash + + {/* TODO when the new docs page is ready link to that page. */} +
@@ -50,6 +77,16 @@ const InstallTabs = (): JSX.Element => { cinst nodejs

Using Scoop:

scoop install nodejs + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c233875e13..112e1f85b9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -17,6 +17,7 @@ import logoImg2 from '../images/logos/linkedin-logo.svg'; import logoImg3 from '../images/logos/microsoft-logo.svg'; import logoImg4 from '../images/logos/netflix-logo.svg'; import logoImg5 from '../images/logos/paypal-logo.svg'; +import InstallTabs from '../components/installTabs'; export default function Index(): JSX.Element { const title = 'Run JavaScript Everywhere.'; diff --git a/src/styles/install-tabs.scss b/src/styles/install-tabs.scss index c5c6ef3d47..de79f0319e 100644 --- a/src/styles/install-tabs.scss +++ b/src/styles/install-tabs.scss @@ -4,6 +4,7 @@ &__tab-list { margin: 0 0 10px; padding: 0; + text-align: center; } &__tab { @@ -16,6 +17,9 @@ padding: 6px 12px; background: lighten($color: #2c3437, $amount: 20); cursor: pointer; + height: 32px; + width: 167px; + text-align: center; &--selected { background: var(--black9); @@ -51,8 +55,24 @@ p { margin-bottom: 5px; + padding-left: 10px; + padding-top: 3px; } .install__text { color: var(--pink6); + padding-left: 6px; + } + .install__docs-button, + .install__docs-button:hover { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + box-sizing: border-box; + width: 17rem; + height: 4rem; + color: var(--black6); + margin: 0 var(--space-16); + font-weight: var(--font-weight-semibold); } } diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap index 308d0a0018..aba359a682 100644 --- a/test/components/__snapshots__/installTabs.test.tsx.snap +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -96,6 +96,34 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` > port install nodejs14 +

+ Using + + + nvm + +

+ + curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash + +
Date: Wed, 6 May 2020 16:50:26 -0700 Subject: [PATCH 09/18] test(snapshot): Updated snapshot for install-tabs component --- test/components/__snapshots__/installTabs.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap index aba359a682..3d8912dbd9 100644 --- a/test/components/__snapshots__/installTabs.test.tsx.snap +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -113,11 +113,11 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
@@ -50,6 +77,16 @@ const InstallTabs = (): JSX.Element => { cinst nodejs

Using Scoop:

scoop install nodejs + diff --git a/src/styles/install-tabs.scss b/src/styles/install-tabs.scss index c5c6ef3d47..de79f0319e 100644 --- a/src/styles/install-tabs.scss +++ b/src/styles/install-tabs.scss @@ -4,6 +4,7 @@ &__tab-list { margin: 0 0 10px; padding: 0; + text-align: center; } &__tab { @@ -16,6 +17,9 @@ padding: 6px 12px; background: lighten($color: #2c3437, $amount: 20); cursor: pointer; + height: 32px; + width: 167px; + text-align: center; &--selected { background: var(--black9); @@ -51,8 +55,24 @@ p { margin-bottom: 5px; + padding-left: 10px; + padding-top: 3px; } .install__text { color: var(--pink6); + padding-left: 6px; + } + .install__docs-button, + .install__docs-button:hover { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + box-sizing: border-box; + width: 17rem; + height: 4rem; + color: var(--black6); + margin: 0 var(--space-16); + font-weight: var(--font-weight-semibold); } } diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap index 308d0a0018..aba359a682 100644 --- a/test/components/__snapshots__/installTabs.test.tsx.snap +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -96,6 +96,34 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` > port install nodejs14 +

+ Using + + + nvm + +

+ + curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash + +
Date: Wed, 6 May 2020 16:50:26 -0700 Subject: [PATCH 18/18] test(snapshot): Updated snapshot for install-tabs component --- test/components/__snapshots__/installTabs.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/__snapshots__/installTabs.test.tsx.snap b/test/components/__snapshots__/installTabs.test.tsx.snap index aba359a682..3d8912dbd9 100644 --- a/test/components/__snapshots__/installTabs.test.tsx.snap +++ b/test/components/__snapshots__/installTabs.test.tsx.snap @@ -113,11 +113,11 @@ exports[`Tests for InstallTabs component renders correctly 1`] = ` curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash