[WIP] docs(generator): use NextJS to generate prerendered pages

.babelrc

@@ -1,33 +1,11 @@
 {
   "presets": [
-    "./build/preset-env",
-    "@babel/react"
+    "next/babel"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-export-default-from",
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-syntax-dynamic-import",
-    "lodash",
-    "transform-react-handled-props",
-    ["transform-react-remove-prop-types", {
-      "mode": "wrap"
-    }],
-    ["@babel/transform-runtime", {
-      "polyfill": false,
-      "regenerator": false
-    }]
-  ],
-  "env": {
-    "development": {
-      "plugins": [
-        "react-hot-loader/babel"
-      ]
-    },
-    "test": {
-      "plugins": [
-        ["istanbul", { "include": ["src"] }]
-      ]
-    }
-  }
+    "transform-react-handled-props"
+  ]
 }

.eslintignore

@@ -3,3 +3,4 @@ dist/*
 docs/dist/*
 examples/webpack3/scripts/*
 dll/*
+out/*

.gitignore

@@ -13,3 +13,4 @@ docs/src/exampleMenus
 docs/dist/
 dll/
 node_modules/
+out/

.prettierignore

@@ -14,4 +14,6 @@ docs/src/componentMenu.json
 docs/src/exampleMenus
 docs/dist/
 
+out/
+
 package.json

config.js

@@ -1,4 +1,4 @@
-import path from 'path'
+const path = require('path')
 
 // ------------------------------------
 // Environment vars
@@ -36,7 +36,7 @@ const paths = {
   docsSrc: base.bind(null, envConfig.dir_docs_src),
 }
 
-const config = {
+module.exports = {
   ...envConfig,
   paths,
 
@@ -96,5 +96,3 @@ const config = {
     'react-dom',
   ],
 }
-
-export default config

docs/src/components/CarbonAd/index.js

@@ -0,0 +1 @@
+export default from './CarbonAd'

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -14,7 +14,7 @@ import {
   repoURL,
   scrollToAnchor,
 } from 'docs/src/utils'
-import { Divider, Grid, Menu, Visibility } from 'src'
+import { Divider, Grid, Menu, Visibility } from 'semantic-ui-react'
 import Editor from 'docs/src/components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'

docs/src/components/ComponentDoc/ContributionPrompt.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { repoURL } from 'docs/src/utils'
-import { Message, Icon } from 'src'
+import { Message, Icon } from 'semantic-ui-react'
 
 const ContributionPrompt = ({ children }) => (
   <Message info icon>

docs/src/components/ComponentDoc/ExampleSection.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { Grid, Header } from 'src'
+import { Grid, Header } from 'semantic-ui-react'
 
 const headerStyle = { marginBottom: '1.5em' }
 const sectionStyle = {

docs/src/components/DocsLayout.js

@@ -1,25 +1,23 @@
 import AnchorJS from 'anchor-js'
+import { withRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { withRouter } from 'react-router'
-import { Route } from 'react-router-dom'
 
+import PageLayout from 'docs/src/components/PageLayout'
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import style from 'docs/src/Style'
 import { scrollToAnchor } from 'docs/src/utils'
-import { getUnhandledProps } from 'src/lib'
 
 const anchors = new AnchorJS({
   icon: '#',
 })
 
 class DocsLayout extends Component {
   static propTypes = {
-    component: PropTypes.func,
-    history: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
-    match: PropTypes.object.isRequired,
-    render: PropTypes.func,
+    children: PropTypes.node,
+    router: PropTypes.shape({
+      pathname: PropTypes.string.isRequired,
+    }).isRequired,
     sidebar: PropTypes.bool,
   }
 
@@ -36,9 +34,12 @@ class DocsLayout extends Component {
   }
 
   resetPage = () => {
-    const { location } = this.props
+    const {
+      router: { pathname },
+    } = this.props
+
     // only reset the page when changing routes
-    if (this.pathname === location.pathname) return
+    if (this.pathname === pathname) return
 
     clearTimeout(this.scrollStartTimeout)
 
@@ -49,29 +50,22 @@ class DocsLayout extends Component {
     anchors.remove('.no-anchor')
 
     this.scrollStartTimeout = setTimeout(scrollToAnchor, 500)
-    this.pathname = location.pathname
+    this.pathname = pathname
   }
 
-  renderChildren = (props) => {
-    const { component: Children, render, sidebar } = this.props
+  render() {
+    const { children, router, sidebar, ...rest } = this.props
     const mainStyle = sidebar ? style.sidebarMain : style.main
 
-    if (render) return render()
     return (
-      <div style={style.container}>
-        <Sidebar style={style.menu} />
-        <div style={mainStyle}>
-          <Children {...props} />
+      <PageLayout {...rest}>
+        <div style={style.container}>
+          <Sidebar router={router} style={style.menu} />
+          <div style={mainStyle}>{children}</div>
         </div>
-      </div>
+      </PageLayout>
     )
   }
-
-  render() {
-    const rest = getUnhandledProps(DocsLayout, this.props)
-
-    return <Route {...rest} render={this.renderChildren} />
-  }
 }
 
 export default withRouter(DocsLayout)

docs/src/components/IconSearch/IconSearch.js

@@ -2,9 +2,9 @@ import copyToClipboard from 'copy-to-clipboard'
 import _ from 'lodash/fp'
 import leven from 'leven'
 import React, { Component } from 'react'
+import { Form, Grid, Header, Icon, Message, Popup } from 'semantic-ui-react'
 
 import { SUI } from 'src/lib'
-import { Form, Grid, Header, Icon, Message, Popup } from 'src'
 
 const gridStyle = {
   background: '#fff',

docs/src/components/LayoutsLayout.js

@@ -2,8 +2,8 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { NavLink, Route } from 'react-router-dom'
+import { Button } from 'semantic-ui-react'
 
-import { Button } from 'src'
 import { getUnhandledProps } from 'src/lib'
 import { repoURL } from 'docs/src/utils'
 

docs/src/components/Logo/Logo.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Image } from 'src'
+import { Image } from 'semantic-ui-react'
 
-const Logo = props => <Image {...props} src='/logo.png' />
+const Logo = props => <Image {...props} src='/static/images/logo.png' />
 
 Logo.propTypes = Image.propTypes
 

docs/src/components/Logo/index.js

@@ -0,0 +1 @@
+export default from './Logo'

docs/src/components/NavLink.js

@@ -0,0 +1,41 @@
+import cx from 'classnames'
+import { withRouter } from 'next/router'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+class ActiveLink extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    href: PropTypes.string.isRequired,
+    router: PropTypes.shape({
+      pathname: PropTypes.string,
+    }).isRequired,
+  }
+
+  handleClick = (e) => {
+    const { router } = this.props
+
+    e.preventDefault()
+    router.push(href)
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      href,
+      router: { pathname },
+      ...rest
+    } = this.props
+    const classes = cx(pathname === href && 'active', className)
+
+    return (
+      <a {...rest} className={classes} href={href}>
+        {children}
+      </a>
+    )
+  }
+}
+
+export default withRouter(ActiveLink)

docs/src/components/PageLayout.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import Head from 'next/head'
+import { Fragment } from 'react'
+
+const PageLayout = ({ children, title }) => (
+  <Fragment>
+    <Head>
+      <title>Semantic UI React - {title}</title>
+
+      <meta charSet='UTF-8' />
+      <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
+
+      <link rel='shortcut icon' type='image/x-icon' href='/static/images/logo.png' />
+      <link
+        rel='stylesheet'
+        href='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css'
+      />
+
+      <script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' />
+    </Head>
+
+    {children}
+  </Fragment>
+)
+
+PageLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+}
+
+export default PageLayout