docs(pages): add navigation footer (#3577)

* docs(Shorthand|Theming): rework docs to be more actual

* remove extension

* docs(pages): aff navigation footer

docs/src/components/DocumentationPage/DocumentationPage.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { withRouteData, withSiteData } from 'react-static'
-import { Container, Divider } from 'semantic-ui-react'
+import { Container, Divider, Header } from 'semantic-ui-react'
 
 import DocsLayout from 'docs/src/components/DocsLayout'
 import * as components from './components'
+import DocumentationPageFooter from './DocumentationPageFooter'
 
 const DocumentationPage = ({ pageName, ...rest }) => {
   const { default: MarkdownComponent, meta } = require(`docs/src/pages/${pageName}`)
@@ -13,7 +14,9 @@ const DocumentationPage = ({ pageName, ...rest }) => {
     <DocsLayout additionalTitle={meta.title}>
       <Container text>
         <Divider hidden />
+        <Header as='h1' content={meta.title} textAlign='center' />
         <MarkdownComponent {...rest} components={components} />
+        <DocumentationPageFooter prevPage={meta.prevPage} nextPage={meta.nextPage} />
         <Divider hidden section />
       </Container>
     </DocsLayout>

docs/src/components/DocumentationPage/DocumentationPageFooter.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+import { Link } from 'react-static'
+import { Divider, Grid, Header } from 'semantic-ui-react'
+
+const DocumentationPageFooter = ({ nextPage, prevPage }) =>
+  nextPage || prevPage ? (
+    <Fragment>
+      <Divider />
+
+      <Grid columns={2}>
+        <Grid.Column>
+          {prevPage && (
+            <Header
+              as={Link}
+              content={prevPage.title}
+              subheader='Previous page'
+              to={prevPage.href}
+            />
+          )}
+        </Grid.Column>
+        <Grid.Column textAlign='right'>
+          {nextPage && (
+            <Header as={Link} content={nextPage.title} subheader='Next page' to={nextPage.href} />
+          )}
+        </Grid.Column>
+      </Grid>
+    </Fragment>
+  ) : null
+
+DocumentationPageFooter.propTypes = {
+  nextPage: PropTypes.shape({ title: PropTypes.string, href: PropTypes.string }),
+  prevPage: PropTypes.shape({ title: PropTypes.string, href: PropTypes.string }),
+}
+
+export default DocumentationPageFooter

docs/src/pages/Augmentation.mdx

@@ -1,11 +1,11 @@
-import { Header, Message } from 'semantic-ui-react'
+import { Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Augmentation',
+  prevPage: { title: 'Get Started', href: '/usage' },
+  nextPage: { title: 'Shorthand Props', href: '/shorthand-props' },
 }
 
-<Header as='h1' content='Augmentation' textAlign='center' />
-
 React components are inherently composable. Semantic UI React makes them even more so with the `as` prop feature: you can control the rendered HTML tag, or render one component as another component.
 
 ```jsx
@@ -25,7 +25,6 @@ Augmentation is powerful. You can compose component features and props without a
 
 ```jsx
 import { Link } from 'react-router-dom'
-
 ;<Menu>
   // 💡 `to` does not belong to `Menu.Item` props and will be passed to `Link`
   <Menu.Item as={Link} to='/home'>

docs/src/pages/Layouts.mdx

@@ -3,10 +3,10 @@ import { Card, Header } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Layout examples',
+  prevPage: { title: 'Theming', href: '/theming' },
+  nextPage: { title: 'Prototypes', href: '/prototypes' },
 }
 
-<Header as='h1' content='Layout examples' textAlign='center' />
-
 <Header as='h2' content='Starter' subheader='Examples to introduce components and their function' />
 
 <Card.Group stackable itemsPerRow='2'>

docs/src/pages/Prototypes.mdx

@@ -2,10 +2,9 @@ import { Button, Card, Header, Image } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Prototypes',
+  prevPage: { title: 'Layout examples', href: '/layouts' },
 }
 
-<Header as='h1' content='Prototypes' textAlign='center' />
-
 <Header as='h2' content='Integrations' subheader='Examples of integrations with other libraries' />
 
 <Card.Group stackable itemsPerRow='2'>

docs/src/pages/ShorthandProps.mdx

@@ -1,11 +1,11 @@
-import { Header, Icon, Message } from 'semantic-ui-react'
+import { Icon, Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Shorthand Props',
+  prevPage: { title: 'Augmentation', href: '/augmentation' },
+  nextPage: { title: 'Theming', href: '/theming' },
 }
 
-<Header as='h1' content='Shorthand Props' textAlign='center' />
-
 It is quite common for Semantic UI React component to have "shorthands" which accept shorthand values. For example, `Button` component has an `icon` shorthand which value defines the icon that will be rendered.
 
 ```jsx

docs/src/pages/Theming.mdx

@@ -1,17 +1,17 @@
-import { Button, Header, Message } from 'semantic-ui-react'
+import { Button, Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Theming',
+  prevPage: { title: 'Shorthand Props', href: '/shorthand-props' },
+  nextPage: { title: 'Layout examples', href: '/layouts' },
 }
 
-<Header as='h1' content='Theming' textAlign='center' />
-
 ## Preface
 
 Semantic UI React does not have own styling system and fully relies on the theming of
 Semantic UI. It's really powerful, you don't need to know LESS or CSS you can simply
 update values of variables or use styles from predefined themes.
-  
+
 In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.
 
 <Button
@@ -32,7 +32,7 @@ In fact, all you know about theming and styling of Semantic UI is fully applicab
 ## Quick start
 
 Semantic UI offers its own build system that uses Gulp and produces prepared CSS files.
-  
+
 In all cases we recommend to use the LESS package and tune it into your build system with Webpack. The LESS package also does not depend on Gulp and other cruft things.
 However, this package is not friendly for Webpack and requires additional configuration.
 

docs/src/pages/Usage.mdx

@@ -6,10 +6,9 @@ import { semanticUIDocsURL, semanticUIRepoURL, semanticUICSSRepoURL } from 'docs
 
 export const meta = {
   title: 'Get Started',
+  nextPage: { title: 'Augmentation', href: '/augmentation' },
 }
 
-# Get Started
-
 ## Install
 
 Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets.

static.webpack.js

@@ -9,22 +9,22 @@ export default (webpackConfig, { stage }) => ({
   entry:
     stage === 'prod'
       ? {
-        main: [config.paths.docsSrc('index.js'), config.paths.src('index.js')],
-      }
+          main: [config.paths.docsSrc('index.js'), config.paths.src('index.js')],
+        }
       : webpackConfig.entry,
   externals:
     stage === 'node'
       ? webpackConfig.externals
       : {
-        'anchor-js': 'AnchorJS',
-        '@babel/standalone': 'Babel',
-        faker: 'faker',
-        'prettier/standalone': 'prettier',
-        'prop-types': 'PropTypes',
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        'react-dom/server': 'ReactDOMServer',
-      },
+          'anchor-js': 'AnchorJS',
+          '@babel/standalone': 'Babel',
+          faker: 'faker',
+          'prettier/standalone': 'prettier',
+          'prop-types': 'PropTypes',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-dom/server': 'ReactDOMServer',
+        },
   module: {
     ...webpackConfig.module,
     rules: [