FM / home

/usr/lib/node_modules/npm/docs/src/components/home/

/usr/lib/node_modules/npm/docs/src/components/home

Name	Size	Mode	Actions
cubes.js	2342	0644	edit dl rm
DarkBlock.js	1098	0644	edit dl rm
FeatureCard.js	861	0644	edit dl rm
Features.js	2469	0644	edit dl rm
Footer.js	672	0644	edit dl rm
hero.js	616	0644	edit dl rm
Terminal.js	2803	0644	edit dl rm
Windows.js	1584	0644	edit dl rm

Edit: /usr/lib/node_modules/npm/docs/src/components/home/Features.js (2469B)

const ContainerInner = styled(Flex)`
  background: linear-gradient(84deg, #fb881799, #ff4b0199, #c1212799, #e02aff99);
`

const Container = styled.div`
  background: top / cover no-repeat url(${rectangles});
`

const ContentWrapper = styled(Flex)`
  max-width: 640px;
`

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 with a free or paid account on npmjs.com from npm, Inc.'
}

const featureTitles = {
  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'>
          <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/developers'}>
            <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>
  )
}

export default Features

import React from 'react' import styled from 'styled-components' import FeatureCard from './FeatureCard' 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)` background: linear-gradient(84deg, #fb881799, #ff4b0199, #c1212799, #e02aff99); ` const Container = styled.div` background: top / cover no-repeat url(${rectangles}); ` const ContentWrapper = styled(Flex)` max-width: 640px; ` 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 with a free or paid account on npmjs.com from npm, Inc.' } const featureTitles = { 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 ( ) } export default Features