Docs/new gatsby site

docs/content/configuring-npm/install.md

@@ -0,0 +1,66 @@
+---
+section: configuring-npm
+title: 00 install
+description: Download and install node and npm
+---
+
+# Download and Install npm
+
+To publish and install packages to and from the public npm registry, you must install Node.js and the npm command line interface using either a Node version manager or a Node installer. **We strongly recommend using a Node version manager to install Node.js and npm.** We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.
+
+### Overview
+
+- [Checking your version of npm and Node.js](#checking-your-version-of-npm-and-node-js)
+- [Using a Node version manager to install Node.js and npm](#using-a-node-version-manager-to-install-node-js-and-npm)
+- [Using a Node installer to install Node.js and npm](#using-a-node-installer-to-install-node-js-and-npm)
+
+### Checking your version of npm and Node.js
+
+To see if you already have Node.js and npm installed and check the installed version, run the following commands:
+
+```
+node -v
+npm -v
+```
+
+### Using a Node version manager to install Node.js and npm
+
+Node version managers allow you to install and switch between multiple versions of Node.js and npm on your system so you can test your applications on multiple versions of npm to ensure they work for users on different versions.
+
+#### OSX or Linux Node version managers
+
+* [nvm](https://github.com/creationix/nvm)
+* [n](https://github.com/tj/n)
+
+#### Windows Node version managers
+
+* [nodist](https://github.com/marcelklehr/nodist)
+* [nvm-windows](https://github.com/coreybutler/nvm-windows)
+
+### Using a Node installer to install Node.js and npm
+
+If you are unable to use a Node version manager, you can use a Node installer to install both Node.js and npm on your system.
+
+* [Node.js installer](https://nodejs.org/en/download/)
+* [NodeSource installer](https://github.com/nodesource/distributions). If you use Linux, we recommend that you use a NodeSource installer.
+
+#### OS X or Windows Node installers
+
+If you're using OS X or Windows, use one of the installers from the [Node.js download page](https://nodejs.org/en/download/). Be sure to install the version labeled **LTS**. Other versions have not yet been tested with npm.
+
+#### Linux or other operating systems Node installers
+
+If you're using Linux or another operating system, use one of the following installers:
+
+- [NodeSource installer](https://github.com/nodesource/distributions) (recommended)
+- One of the installers on the [Node.js download page](https://nodejs.org/en/download/)
+
+Or see [this page](https://nodejs.org/en/download/package-manager/) to install npm for Linux in the way many Linux developers prefer.
+
+
+#### Less-common operating systems
+
+For more information on installing Node.js on a variety of operating systems, see [this page][pkg-mgr].
+
+
+[pkg-mgr]: https://nodejs.org/en/download/package-manager/

docs/src/components/home/Features.js

@@ -1,10 +1,12 @@
 import React from 'react'
 import styled from 'styled-components'
 import FeatureCard from './FeatureCard'
-import {Flex} from 'rebass'
+import { FeatureLink } from '../links'
+import { Flex } from 'rebass'
 import rectangles from '../../images/background-rectangles.svg'
 import terminalIcon from '../../images/terminal-icon.svg'
 import networkIcon from '../../images/network-icon.svg'
+import npmIcon from '../../images/npm-icon.png'
 import managerIcon from '../../images/manager-icon.svg'
 
 const ContainerInner = styled(Flex)`
@@ -20,35 +22,58 @@ const ContentWrapper = styled(Flex)`
 `
 
 const featureTexts = {
-  textOne: 'Nunc malesuada suscipit enim at feugiat. Duis id mauris lectus. Donec a sagittis lectus.',
-  textTwo: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod Lorem ipsum dolor sit amet, tetuer adipiscing elit, sed diam nonummy nibmod'
+  textOne: 'Download, install, and configure.',
+  textTwo: 'All available npm commands.',
+  textThree: 'How npm things work.',
+  textFour: 'Publish your own public or private packages to the registry.'
 }
 
 const featureTitles = {
-  titleOne: 'Really Fast',
-  titleTwo: 'Easy to Use'
+  titleOne: 'Getting Started',
+  titleTwo: 'Command Reference',
+  titleThree: 'Using npm',
+  titleFour: 'Publishing'
 }
 
+const aStyle = {
+  color: '#231f20',
+  textDecoration: 'none'
+}
+const productsLink = `https://www.npmjs.com/products`
+
 const Features = () => {
   return (
     <Container>
       <ContainerInner>
         <ContentWrapper m='auto' py={5} flexDirection='column'>
-          <FeatureCard
-            icon={terminalIcon}
-            title={featureTitles.titleOne}
-            text={featureTexts.textOne}
-          />
-          <FeatureCard
-            icon={managerIcon}
-            title={featureTitles.titleTwo}
-            text={featureTexts.textTwo}
-          />
-          <FeatureCard
-            icon={networkIcon}
-            title={featureTitles.titleOne}
-            text={featureTexts.textOne}
-          />
+          <FeatureLink to={'/configuring-npm/install'}>
+            <FeatureCard
+              icon={terminalIcon}
+              title={featureTitles.titleOne}
+              text={featureTexts.textOne}
+            />
+          </FeatureLink>
+          <FeatureLink to={'/cli-commands/npm'}>
+            <FeatureCard
+              icon={managerIcon}
+              title={featureTitles.titleTwo}
+              text={featureTexts.textTwo}
+            />
+          </FeatureLink>
+          <FeatureLink to={'/using-npm/coding-style'}>
+            <FeatureCard
+              icon={networkIcon}
+              title={featureTitles.titleThree}
+              text={featureTexts.textThree}
+            />
+          </FeatureLink>
+          <a href={productsLink} style={aStyle} target={'_blank'}>
+            <FeatureCard
+              icon={npmIcon}
+              title={featureTitles.titleFour}
+              text={featureTexts.textFour}
+            />
+          </a>
         </ContentWrapper>
       </ContainerInner>
     </Container>

docs/src/components/links.js

@@ -7,6 +7,14 @@ const baseLinkStyles = css`
   letter-spacing: .3px;
   font-size: 14px;
 `
+const featureLinkStyles = css`
+  ${baseLinkStyles}
+  color: ${(props) => props.theme.colors.black};
+  transition: opacity .5s
+  &:hover {
+    opacity: .9;
+  }
+`
 
 const navLinkStyles = css`
   ${baseLinkStyles};
@@ -18,6 +26,9 @@ const navLinkStyles = css`
     opacity: .5;
   }
 `
+export const FeatureLink = styled(Link)`
+  ${featureLinkStyles}
+`
 
 export const NavLink = styled(Link)`
   ${navLinkStyles};