Simplifies styleguidist config

.gitignore

@@ -5,6 +5,7 @@
 ## docs
 /website/i18n
 /website/build
+/styleguide
 
 # production
 /dist
@@ -15,4 +16,3 @@
 # misc
 .DS_Store
 .env
-

docs/examples.md

@@ -0,0 +1,10 @@
+---
+id: examples
+title: Live Examples
+---
+
+You can edit code for any of these examples __and see changes live__. Open your browser's console to see how RDU manages file metadata and the upload lifecycle.
+
+<div id="rsg-root"></div>
+<script type="text/javascript" src="./assets/build/bundle.dd836d1d.js"></script>
+<script type="text/javascript" src="./assets/build/1.ad386d66.js"></script>

examples/CustomLayout.md

@@ -1,8 +1,6 @@
 Custom `LayoutComponent`. Renders file previews above dropzone, and submit button below it. Uses `defaultClassNames` and `classNames` prop to ensure input label style doesn't change when dropzone contains files.
 
 ~~~js
-const { defaultClassNames } = require('../src/Dropzone')
-
 const Layout = ({ input, previews, submitButton, dropzoneProps, files, extra: { maxFiles } }) => {
   return (
     <div>

package.json

@@ -71,8 +71,8 @@
     "dev": "webpack-dev-server --config webpack.config.js --mode development --open",
     "lint": "eslint src",
     "test": "jest --coverage",
-    "start": "styleguidist server",
-    "styleguide": "styleguidist build"
+    "styleguide": "styleguidist server",
+    "build-styleguide": "styleguidist build"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2"

styleguide.config.js

@@ -9,6 +9,7 @@ module.exports = {
   require: [
     path.join(__dirname, 'src', 'styles.css'),
     path.join(__dirname, 'examples', 'styles.css'),
+    path.resolve(__dirname, 'styleguide.setup.js'),
   ],
   exampleMode: 'expand',
   usageMode: 'expand',
@@ -18,47 +19,50 @@ module.exports = {
     transforms: { dangerousTaggedTemplateString: true },
     objectAssign: 'Object.assign',
   },
+  styles: {
+    StyleGuide: {
+      content: {
+        padding: [[16, 0]],
+      },
+    },
+    Heading: {
+      heading1: {
+        fontSize: 32,
+      },
+    },
+  },
   sections: [
     {
-      name: 'Live Examples',
-      components: ['./src/Dropzone.js'],
+      name: 'Standard',
+      content: 'examples/Standard.md',
+    },
+    {
+      name: 'Only Image, Audio, Video',
+      content: 'examples/Accept.md',
+    },
+    {
+      name: 'No Upload',
+      content: 'examples/NoUpload.md',
+    },
+    {
+      name: 'Single File, Auto Submit',
+      content: 'examples/SingleFile.md',
+    },
+    {
+      name: 'Custom Preview',
+      content: 'examples/CustomPreview.md',
+    },
+    {
+      name: 'Custom Layout',
+      content: 'examples/CustomLayout.md',
+    },
+    {
+      name: 'Dropzone With No Input',
+      content: 'examples/NoInput.md',
     },
     {
-      name: 'Examples',
-      sections: [
-        {
-          name: 'Standard',
-          content: 'examples/Standard.md',
-        },
-        {
-          name: 'Only Image, Audio, Video',
-          content: 'examples/Accept.md',
-        },
-        {
-          name: 'No Upload',
-          content: 'examples/NoUpload.md',
-        },
-        {
-          name: 'Single File, Auto Submit',
-          content: 'examples/SingleFile.md',
-        },
-        {
-          name: 'Custom Preview',
-          content: 'examples/CustomPreview.md',
-        },
-        {
-          name: 'Custom Layout',
-          content: 'examples/CustomLayout.md',
-        },
-        {
-          name: 'Dropzone With No Input',
-          content: 'examples/NoInput.md',
-        },
-        {
-          name: 'Input With No Dropzone',
-          content: 'examples/NoDropzone.md',
-        },
-      ],
+      name: 'Input With No Dropzone',
+      content: 'examples/NoDropzone.md',
     },
   ],
 }

styleguide.setup.js

@@ -0,0 +1,4 @@
+import Dropzone, { defaultClassNames } from './src/Dropzone'
+
+global.Dropzone = Dropzone
+global.defaultClassNames = defaultClassNames

website/pages/en/index.js

@@ -118,9 +118,10 @@ class Index extends React.Component {
         <Features />
 
         <img
-          style={{ maxWidth: '60%', marginTop: 48, display: 'block', marginLeft: 'auto', marginRight: 'auto' }}
-          src="https://raw.githubusercontent.com/fortana-co/react-dropzone-uploader/master/dropzone.gif"
-          alt="dropzone.gif"
+          className="gif"
+          style={{ marginTop: 48, display: 'block', marginLeft: 'auto', marginRight: 'auto' }}
+          src="https://raw.githubusercontent.com/fortana-co/react-dropzone-uploader/master/rdu.gif"
+          alt="rdu.gif"
         />
 
         <div className="mainContainer">

website/static/css/custom.css

@@ -1,9 +1,15 @@
 /* your custom css */
 
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+@media (max-width: 767px) {
+  .gif {
+    max-width: 80%;
+  }
 }
 
-@media only screen and (min-width: 1024px) {
+@media (min-width: 768px) {
+  .gif {
+    max-width: 450px;
+  }
 }
 
 @media only screen and (max-width: 1023px) {
@@ -13,4 +19,4 @@
 }
 
 @media only screen and (min-width: 1500px) {
-}
+}