Wire in next, begin building out components

Author: johno

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.next
 dist
 .DS_STORE
 *.swp

src/App.js renamed to components/App.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default ({
+  className = '',
+  ...props
+}) =>
+  <div
+    className={`mw9 center ${className}`}
+    {...props}
+  />

components/Container.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import classNames from 'classnames'
+
+export default ({
+  is = 'div',
+  wrap = false,
+  auto = false,
+  self,
+  justify,
+  alignItems,
+  children,
+  ...props
+}) => {
+  const className = classNames(props.className || '', 'flex', {
+    'flex-auto': auto,
+    'flex-wrap': wrap,
+    'items-center': alignItems === 'center',
+    'justify-between': justify === 'between'
+  })
+
+  const newProps = Object.assign({}, props, { className })
+
+  return React.createElement(is, newProps, children)
+}

src/Docs.js renamed to components/Docs.js

@@ -1,9 +1,11 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+
+import Container from './Container'
 
 export default () =>
   <footer className='bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10'>
-    <div className='mw9 center'>
+    <Container>
       <div className='mb5 lh-copy'>
         <Link className='black-70 link hover-blue b dib mr3 mb3' to='/' title='Home'>
           Home
@@ -74,5 +76,5 @@ export default () =>
         The word comes from the Greek:
         ταχύς or tachys, meaning 'swift, quick, fast, rapid'
       </small>
-    </div>
+    </Container>
   </footer>

components/Flex.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import Container from './Container'
+import Flex from './Flex'
+import {
+  NavLink,
+  TitleLink
+} from './ui'
+
+export default ({ version }) =>
+  <header className='w-100 pa3 ph5-ns bg-white'>
+    <Container>
+      <Flex
+        justify='between'
+        alignItems='center'
+      >
+        <TitleLink
+          href='/'
+          title='Home'
+          text='Tachyons'
+          subtext={`v${version}`}
+        />
+
+        <Flex is='nav'>
+          <NavLink title='Documentation' href='/docs/'>
+            Docs
+          </NavLink>
+          <NavLink title='Components' href='/components/'>
+            Components
+          </NavLink>
+          <NavLink title='Gallery of sites built with Tachyons' to='/gallery/'>
+            Gallery
+          </NavLink>
+          <NavLink title='Resources' href='/resources/'>
+            Resources
+          </NavLink>
+          <NavLink title='Tachyons on GitHub' href='http://github.com/tachyons-css/tachyons/'>
+            GitHub
+          </NavLink>
+        </Flex>
+      </Flex>
+    </Container>
+  </header>

src/Footer.js renamed to components/Footer.js

@@ -1,11 +1,11 @@
 import React from 'react'
 
+import { version } from '../package.json'
 import Header from './Header'
 import Footer from './Footer'
 
 export default ({
   title = 'TACHYONS - Css Toolkit',
-  version,
   children
 }) =>
   <div className='w-100 sans-serif'>
@@ -16,6 +16,5 @@ export default ({
     />
 
     <Header version={version} />
-    <div>{children}</div>
-    <Footer />
+    <main>{children}</main>
   </div>

src/GettingStarted.js renamed to components/GettingStarted.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default ({
+  href = '#!',
+  ...props
+}) =>
+  <Link href={href}>
+    <a {...props} />
+  </Link>

components/Header.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import Link from 'next/link'
+
+export const NavLink = ({ href = '#!', ...props }) =>
+  <Link href={href}>
+    <a
+      className='f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib'
+      {...props}
+    />
+  </Link>
+
+export const TitleLink = ({
+  href = '#!',
+  subtext,
+  text,
+  ...props
+}) =>
+  <Link href={href}>
+    <a
+      className='dib f5 f4-ns fw6 mt0 mb1 link black-70'
+      {...props}
+    >
+      {text}
+
+      {subtext && (
+        <div className='dib pl1'>
+          <small className='nowrap f6 mt2 mt3-ns pr2 black-70 fw2'>{subtext}</small>
+        </div>
+      )}
+    </a>
+  </Link>

src/Hero.js renamed to components/Hero.js

@@ -0,0 +1,13 @@
+module.exports = {
+  webpack: config => {
+    config.module.rules.push({
+      test: /\.md$/,
+      use: [
+        'babel-loader',
+        '@compositor/markdown-loader'
+      ]
+    })
+
+    return config
+  }
+}