feat(docs): add UI state to docs website

Author: claudiahdz

docs/gatsby-browser.js

@@ -1,10 +1,8 @@
+import React from 'react'
+import Layout from './src/components/layout'
 require('prismjs/themes/prism-tomorrow.css')
 require('./src/main.css')
 
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
-
-// You can delete this file if you're not using it
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props} >{element}</Layout>
+}

docs/gatsby-ssr.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import Layout from './src/components/layout'
+
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props} >{element}</Layout>
+}

docs/src/components/FoundTypo.js

@@ -10,7 +10,7 @@ const Container = styled.div`
 const FoundTypo = () => {
   return (
     <Container>
-      <p>👀 Found a typo? <a href='https://github.com/npm/cli/'>Let us know!</a></p>
+      <p><span role='img' aria-label='eyes-emoji'>👀</span> Found a typo? <a href='https://github.com/npm/cli/'>Let us know!</a></p>
       <p>The current stable version of npm is <a href='https://github.com/npm/cli/'>here</a>. To upgrade, run: <code className='language-text'>npm install npm@latest -g</code></p>
       <p>
         To report bugs or submit feature requests for the docs, please post <a href='https://npm.community/c/support/docs-needed'>here</a>.

docs/src/components/home/DarkBlock.js

@@ -30,7 +30,6 @@ const DarkBlock = () => {
         <Text>
           <p>The current stable version of npm is <a href={'https://github.com/npm/cli/releases/latest'} style={aStyle}>available on GitHub.</a></p>
           <p>To upgrade, run: <code className={'language-text'} style={{color: 'white'}}>npm install npm@latest -g</code></p>
-          <p>To report bugs or submit feature requests, <a href={'#'} style={aStyle}>please XXX.</a></p>
         </Text>
         <Box pt={4}><LinkButton to='cli-commands/npm' w={'120px'}>read docs</LinkButton></Box>
       </ContentWrapper>

docs/src/components/home/Terminal.js

@@ -78,7 +78,7 @@ const Bracket = styled.span`
   margin-top: 10px;
 `
 
-const Text = styled.strong`
+const Text = styled.span`
   font-size: 15px;
   font-weight: 400;
   letter-spacing: 1px;

docs/src/components/layout.js

@@ -2,16 +2,22 @@ import React from 'react'
 import Navbar from './Navbar'
 import Sidebar from './Sidebar'
 import {Flex, Box} from 'rebass'
+import { theme } from 'src/theme'
+import { ThemeProvider } from 'styled-components'
+
+const IS_STATIC = process.env.GATSBY_IS_STATIC
+
+const Layout = ({children, path}) => {
+  const showSidebar = IS_STATIC || path.match(/cli-commands|configuring-npm|using-npm/)
 
-const Layout = ({children, showSidebar}) => {
   return (
-    <React.Fragment>
+    <ThemeProvider theme={theme}>
       <Navbar />
       <Flex w={1}>
         {showSidebar && <Sidebar />}
         <Box width={1}>{children}</Box>
       </Flex>
-    </React.Fragment>
+    </ThemeProvider>
   )
 }
 

docs/src/pages/404.js

@@ -1,19 +1,12 @@
 import React from 'react'
-
-import Layout from 'src/components/Layout'
 import SEO from 'src/components/seo'
 
-import {ThemeProvider} from 'styled-components'
-import {theme} from 'src/theme'
-
 const NotFoundPage = () => (
-  <ThemeProvider theme={theme}>
-    <Layout>
-      <SEO title='404: Not found' />
-      <h1>NOT FOUND</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
-  </ThemeProvider>
+  <React.Fragment>
+    <SEO title='404: Not found' />
+    <h1>NOT FOUND</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </React.Fragment>
 )
 
 export default NotFoundPage

docs/src/pages/index.js

@@ -1,23 +1,16 @@
 import React from 'react'
-import Layout from 'src/components/Layout'
 import Features from 'src/components/home/Features'
 import SEO from 'src/components/seo'
 import Hero from 'src/components/home/Hero'
 import DarkBlock from 'src/components/home/DarkBlock'
-import Footer from 'src/components/home/footer'
-import {ThemeProvider} from 'styled-components'
-import {theme} from 'src/theme'
 
 const IndexPage = () => (
-  <ThemeProvider theme={theme}>
-    <Layout showSidebar={false}>
-      <SEO title='npm cli' />
-      <Hero />
-      <Features />
-      <DarkBlock />
-      <Footer />
-    </Layout>
-  </ThemeProvider>
+  <React.Fragment>
+    <SEO title='npm cli' />
+    <Hero />
+    <Features />
+    <DarkBlock />
+  </React.Fragment>
 )
 
 export default IndexPage

docs/src/templates/Page.js

@@ -1,8 +1,6 @@
 import React from 'react'
-import Layout from 'src/components/Layout'
 import {graphql} from 'gatsby'
-import styled, { ThemeProvider } from 'styled-components'
-import {theme} from 'src/theme'
+import styled from 'styled-components'
 import FoundTypo from 'src/components/FoundTypo'
 import Scripts from 'src/components/Scripts'
 const version = require('../../../package.json').version
@@ -20,15 +18,11 @@ const Page = ({data}) => {
     .replace(/([a-zA-Z\\.-]*)(\((1|5|7)\))<\/h1>/, '$1</h1>')
 
   return (
-    <ThemeProvider theme={theme}>
-      <Layout showSidebar>
-        <Content className='documentation'>
-          <div dangerouslySetInnerHTML={{ __html: html }} />
-          <FoundTypo />
-          <Scripts />
-        </Content>
-      </Layout>
-    </ThemeProvider>
+    <Content className='documentation'>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <FoundTypo />
+      <Scripts />
+    </Content>
   )
 }