From 352ded8d55b470882f9d767fdf958e6340d5481b Mon Sep 17 00:00:00 2001 From: orion Date: Thu, 31 Oct 2019 10:25:44 -0700 Subject: [PATCH 1/2] Added copy to the features page - Added an install page (copied from existing online docs) - Added a FeatureLink component to components/links.js note: external link on features page has a hack for styling; that should probably be fixed, but want to get the copy to the team asap. --- docs/content/configuring-npm/install.md | 66 +++++++++++++++++++++++++ docs/src/components/home/Features.js | 65 ++++++++++++++++-------- docs/src/components/links.js | 11 +++++ 3 files changed, 122 insertions(+), 20 deletions(-) create mode 100644 docs/content/configuring-npm/install.md diff --git a/docs/content/configuring-npm/install.md b/docs/content/configuring-npm/install.md new file mode 100644 index 0000000000000..f800ff228e65f --- /dev/null +++ b/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/ \ No newline at end of file diff --git a/docs/src/components/home/Features.js b/docs/src/components/home/Features.js index f939e6d1d7176..330beca867401 100644 --- a/docs/src/components/home/Features.js +++ b/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 ( - - - + + + + + + + + + + + + diff --git a/docs/src/components/links.js b/docs/src/components/links.js index 4ada0803a5219..b0424c132cc0c 100644 --- a/docs/src/components/links.js +++ b/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}; From d1803ebeff0442d66b59d16a1c26225595c393bb Mon Sep 17 00:00:00 2001 From: orion Date: Thu, 31 Oct 2019 15:16:35 -0700 Subject: [PATCH 2/2] Updated lorem ipsum placeholder with real copy. Modified the copy of the "Publish" card to make the transition to npmjs.com/products less jarring --- docs/src/components/home/DarkBlock.js | 10 ++++++++-- docs/src/components/home/Features.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/src/components/home/DarkBlock.js b/docs/src/components/home/DarkBlock.js index aebebcddcdf71..ebe77533141c1 100644 --- a/docs/src/components/home/DarkBlock.js +++ b/docs/src/components/home/DarkBlock.js @@ -18,13 +18,19 @@ const Text = styled.p` text-align: center; ` +const aStyle = { + color: '#fb3b49', + textDecoration: 'none' +} + const DarkBlock = () => { return ( - 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 - 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 +

The current stable version of npm is available on GitHub.

+

To upgrade, run: npm install npm@latest -g

+

To report bugs or submit feature requests, please XXX.

 read docs diff --git a/docs/src/components/home/Features.js b/docs/src/components/home/Features.js index 330beca867401..0aac994bee029 100644 --- a/docs/src/components/home/Features.js +++ b/docs/src/components/home/Features.js @@ -25,7 +25,7 @@ const featureTexts = { 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.' + textFour: 'Publish your own public or private packages to the registry with a free or paid account on npmjs.com from npm, Inc.' } const featureTitles = {