diff options
author | claudiahdz <cghr1990@gmail.com> | 2019-11-07 21:14:47 +0300 |
---|---|---|
committer | claudiahdz <cghr1990@gmail.com> | 2019-11-14 20:11:49 +0300 |
commit | 30b013ae8eacd04b1b8a41ce2ed0dd50c8ebae25 (patch) | |
tree | f8982d96b9b13849ad329c8d6d485f82c03dcde4 /docs | |
parent | b8c1576a448566397c721655b95fc90bf202b35a (diff) |
feat(docs): add UI state to docs website
Diffstat (limited to 'docs')
-rw-r--r-- | docs/gatsby-browser.js | 12 | ||||
-rw-r--r-- | docs/gatsby-ssr.js | 6 | ||||
-rw-r--r-- | docs/src/components/FoundTypo.js | 2 | ||||
-rw-r--r-- | docs/src/components/home/DarkBlock.js | 1 | ||||
-rw-r--r-- | docs/src/components/home/Terminal.js | 2 | ||||
-rw-r--r-- | docs/src/components/layout.js | 12 | ||||
-rw-r--r-- | docs/src/pages/404.js | 17 | ||||
-rw-r--r-- | docs/src/pages/index.js | 19 | ||||
-rw-r--r-- | docs/src/templates/Page.js | 18 |
9 files changed, 39 insertions, 50 deletions
diff --git a/docs/gatsby-browser.js b/docs/gatsby-browser.js index 035a4dc03..b1425d1fb 100644 --- a/docs/gatsby-browser.js +++ b/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> +} diff --git a/docs/gatsby-ssr.js b/docs/gatsby-ssr.js new file mode 100644 index 000000000..33361c0a3 --- /dev/null +++ b/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> +} diff --git a/docs/src/components/FoundTypo.js b/docs/src/components/FoundTypo.js index b92f9a09c..5aca08949 100644 --- a/docs/src/components/FoundTypo.js +++ b/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>. diff --git a/docs/src/components/home/DarkBlock.js b/docs/src/components/home/DarkBlock.js index ebe775331..bba6a9fc5 100644 --- a/docs/src/components/home/DarkBlock.js +++ b/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> diff --git a/docs/src/components/home/Terminal.js b/docs/src/components/home/Terminal.js index 20ebb0f73..19d890cb9 100644 --- a/docs/src/components/home/Terminal.js +++ b/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; diff --git a/docs/src/components/layout.js b/docs/src/components/layout.js index 5fab7b22a..cc6caa3ef 100644 --- a/docs/src/components/layout.js +++ b/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> ) } diff --git a/docs/src/pages/404.js b/docs/src/pages/404.js index 5acc8fedb..aa06a9d10 100644 --- a/docs/src/pages/404.js +++ b/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'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't exist... the sadness.</p> + </React.Fragment> ) export default NotFoundPage diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 992aee5f0..6e59f79b2 100644 --- a/docs/src/pages/index.js +++ b/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 diff --git a/docs/src/templates/Page.js b/docs/src/templates/Page.js index 0ffb6eeec..e2345c65f 100644 --- a/docs/src/templates/Page.js +++ b/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> ) } |