Merge pull request #14 from storybooks/5-gatsby-static-site

New, static site starting from Gatsby starter kit

.gatsby-context.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/*  weak */
+// This file is auto-written and used by Gatsby to require
+// files from your pages directory.
+module.exports = function (callback) {
+  var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
+  if (module.hot) {
+    module.hot.accept(context.id, function () {
+      context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
+      return callback(context);
+    });
+  }
+  return callback(context);
+};

.gitignore

@@ -9,3 +9,4 @@ dist
 build
 packages/examples/automated-*
 yarn.lock
+public

.storybook/addons.js

@@ -1,3 +1 @@
-import { register } from './notes_addon';
-register();
 require('@kadira/storybook/addons');

.storybook/config.js

@@ -1,9 +1,10 @@
 import { configure } from '@kadira/storybook';
+
 import 'bootstrap/dist/css/bootstrap.css';
-import '../src/index.css';
+import '../css/main.css';
 
 function loadStories() {
-  require('../src/stories');
+  require('../stories')
 }
 
 configure(loadStories, module);

components/Breakpoint.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './breakpoints.css'
+
+class Breakpoint extends Component {
+  render () {
+    const { mobile, children } = this.props
+
+    if (mobile) {
+      return (
+        <div className="breakpoint-min-width-700">
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <div className="breakpoint-max-width-700">
+        {children}
+      </div>
+    )
+  }
+}
+
+Breakpoint.propTypes = {
+  children: PropTypes.array,
+  mobile: PropTypes.bool,
+}
+
+export default Breakpoint

src/components/Docs/Container/index.js → components/Docs/Container/index.js

@@ -6,17 +6,6 @@ import Content from '../Content';
 import './style.css';
 
 class Container extends React.Component {
-  renderTopNav(cat) {
-    const { selectedCatId } = this.props;
-    const path = `/docs/${cat.id}`;
-
-    if (selectedCatId === cat.id) {
-      return <li className="selected" key={cat.id}>{cat.title}</li>;
-    }
-
-    return <a key={cat.id} href={path}><li>{cat.title}</li></a>;
-  }
-
   render() {
     const {
       categories,
@@ -29,18 +18,10 @@ class Container extends React.Component {
 
     const gitHubRepoUrl = 'https://github.com/storybooks/storybooks.github.io';
     const docPath = `${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
-    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/src/docs/${docPath}.js`;
+    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/pages/docs/${docPath}/index.md`;
 
     return (
       <div id="docs-container" className="row">
-        <div className="row">
-          <div className="col-xs-12">
-            <ul className="top-nav">
-              {categories.map(this.renderTopNav.bind(this))}
-            </ul>
-          </div>
-        </div>
-
         <div className="nav col-sm-3 col-md-3 hidden-xs">
           <Nav
             selectedCatId={selectedCatId}

src/components/Docs/Content/index.js → components/Docs/Content/index.js

@@ -1,21 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Highlight from '../../../lib/highlight.js';
-import marked from 'marked';
+import Highlight from '../../Highlight';
 import 'highlight.js/styles/github-gist.css';
 import './style.css';
 
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  gfm: true,
-  tables: true,
-  breaks: true,
-  pedantic: false,
-  sanitize: false,
-  smartLists: true,
-  smartypants: false,
-});
-
 const DocsContent = ({ title, content, editUrl }) => (
   <div id="docs-content">
     <div className="content">
@@ -24,7 +12,7 @@ const DocsContent = ({ title, content, editUrl }) => (
 
       <div className="markdown">
         <Highlight>
-          {marked(content)}
+          {content}
         </Highlight>
       </div>
     </div>

src/components/Docs/Nav/dropdown.js → components/Docs/Nav/dropdown.js

@@ -13,13 +13,16 @@ class Nav extends React.Component {
   }
 
   changeRoute(selectedCatId, selectedSectionId, selectedItemId) {
-    const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
+    const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}/`;
     browserHistory.push(url);
   }
 
   handleHeadingChange(evt) {
-    const { selectedCatId } = this.props;
-    this.changeRoute(selectedCatId, evt.target.value, '');
+    const { selectedCatId, sections } = this.props;
+    const selectedSectionId = evt.target.value
+    const section = sections.find(section => section.id === selectedSectionId)
+    const itemId = section.items[0].id
+    this.changeRoute(selectedCatId, selectedSectionId, itemId);
   }
 
   handleNavChange(evt) {

src/components/Docs/Nav/index.js → components/Docs/Nav/index.js

@@ -9,7 +9,7 @@ class Nav extends React.Component {
       ? 'selected'
       : '';
 
-    const url = `/docs/${selectedCatId}/${section.id}/${item.id}`;
+    const url = `/docs/${selectedCatId}/${section.id}/${item.id}/`;
 
     return (
       <li key={item.id}>

src/components/Docs/index.js → components/Docs/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
-import Header from '../Homepage/Header';
+import Header from '../Header';
 import Container from './Container';
-import Footer from '../Homepage/Footer';
+import Footer from '../Footer';
 import './style.css';
 
 class Docs extends React.Component {

src/components/Homepage/Footer/index.js → components/Footer/index.js

@@ -26,10 +26,6 @@ const Footer = () => (
           </center>
         </div>
       </div>
-
-      <div id="copyright" className="row">
-        <p>Built by Kadira</p>
-      </div>
     </div>
   </div>
 );

src/components/Homepage/Header/index.js → components/Header/index.js

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import './style.css';
 
-import storybookLogo from '../../../design/homepage/storybook-logo.png';
+import storybookLogo from '../../design/homepage/storybook-logo.png';
 
 const sections = [
   { id: 'home', caption: 'Home', href: '/' },
-  { id: 'docs', caption: 'Docs', href: '/docs' },
+  { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' },
 ];
 
 class Header extends React.Component {

src/components/Homepage/index.js → components/Homepage/index.js

@@ -2,13 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import './style.css';
-import Header from './Header';
+import Header from '../Header';
 import Heading from './Heading';
 import Demo from './Demo';
 import Platforms from './Platforms';
 import MainLinks from './MainLinks';
 import Featured from './Featured';
-import Footer from './Footer';
+import Footer from '../Footer';
 
 const featuredStorybooks = [
   {

components/breakpoints.css

@@ -0,0 +1,16 @@
+@media only screen and (min-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: block;
+  }
+  .breakpoint-max-width-700 {
+    display: none;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: none;
+  }
+  .breakpoint-max-width-700 {
+    display: block;
+  }
+}