Expose contributing docs in online guide

CONTRIBUTING.md

@@ -1,103 +1,3 @@
-# Contributing Guidelines
+Please refer to our:
 
-## CSS Guidelines
-
-The CSS standards followed in this project closely resemble those from [Medium's CSS Guidelines](https://gist.github.com/fat/a47b882eb5f84293c4ed). If it's not mentioned here, follow their guidelines.
-
-### Naming Conventions
-
-This project uses naming conventions adopted from the SUIT CSS framework. 
-[Read about them here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
-
-To quickly summarize:
-
-#### Utilities
-
-Syntax: u-[sm-|md-|lg-]<utilityName>
-
-```css
-.u-utilityName
-.u-floatLeft
-.u-lg-col6
-```
-
-#### Components
-
-Syntax: [<namespace>-]<ComponentName>[-descendentName][--modifierName]
-
-```css
-.twt-Button /* Namespaced component */
-.MyComponent /* Components pascal cased */
-.Button--default /* Modified button style */
-.Button--large
-
-.Tweet
-.Tweet-header /* Descendents */
-.Tweet-bodyText
-
-.Accordion.is-collapsed /* State of component */
-.Accordion.is-expanded
-```
-
-### SASS
-
-This project uses SASS, with some limitations on nesting.  One-level deep nesting is allowed, but nesting may not extend a selector by using the `&` operator.  For example:
-
-```sass
-/* BAD */
-.Button {
-  &--disabled {
-    ...
-  }
-}
-
-/* GOOD */
-.Button {
-  ...
-}
-
-.Button--disabled {
-  ...
-}
-```
-
-### Mobile-first Responsive Approach
-
-Style to the mobile breakpoint with your selectors, then use `min-width` media queries to add any styles to the tablet or desktop breakpoints.
-
-### Selector, Rule Ordering
-
-- All selectors are sorted alphabetically and by type.
-- HTML elements go above classes and IDs in a file.
-- Rules are sorted alphabetically.
-
-```sass
-/* BAD */
-.wrapper {
-  width: 940px;
-  margin: auto;
-}
-
-h1 {
-  color: red;
-}
-
-.article {
-  width: 100%;
-  padding: 32px;
-}
-
-/* GOOD */
-h1 {
-  color: red;
-}
-
-.article {
-  padding: 32px;
-  width: 100%;
-}
-
-.wrapper {
-  margin: auto;
-  width: 940px;
-}
+- Contributor's guide in [`website/src/guide/contributing.md`](https://github.com/transloadit/uppy/blob/master/src/guide/contributing.md)

README.md

@@ -2,7 +2,11 @@
 
 A work in progress - nothing to see here.
 
-Check [open issues](https://github.com/transloadit/uppy/milestones/Minimum%20Viable%20Product) for our Minimum Viable Product. 
+Interesting places if you want to dig in:
+
+ - Architecture in [`website/src/api/index.md`](https://github.com/transloadit/uppy/blob/master/website/src/api/index.md)
+ - Contributor's guide in [`website/src/guide/contributing.md`](https://github.com/transloadit/uppy/blob/master/src/guide/contributing.md)
+ - [Open issues](https://github.com/transloadit/uppy/milestones/Minimum%20Viable%20Product) before having a Minimum Valuable Product. 
 
 ## Uppy Development
 
@@ -14,30 +18,25 @@ cd uppy
 npm install
 ```
 
-Now to get a sandbox environment set up, type:
+Our website's examples section is also our playground. To get it to run locally type:
 
 ```bash
-npm run preview
+make website-preview
 ```
 
-This will `npm run build` the project into `./build`, and then serve that
-directory using a simple static http server.
-
 ## Website Development
 
-We keep the [uppyjs.io](http://uppyjs.io) website in `./website` for so it's easy to keep docs & code in sync as we're still iterating at high velocity. For those reading this and screaming murder, [HashiCorp does this](https://github.com/hashicorp/terraform/tree/master/website) for all their projects, and it working well for them on a scale vastly more impressive than ours.
+We keep the [uppyjs.io](http://uppyjs.io) website in `./website` for so it's easy to keep docs & code in sync as we're still iterating at high velocity. For those reading this screaming murder, [HashiCorp does this](https://github.com/hashicorp/terraform/tree/master/website) for all their projects, and it's working well for them on a scale vastly more impressive than :dog:'s.
 
 The site is built with [Hexo](http://hexo.io/), and Travis automatically deploys this onto GitHub Pages (it overwrites the [`gh-pages`](https://github.com/transloadit/uppy/tree/gh-pages) branch at every deploy).
 
-Content is written in Markdown and located in `./website/src`. Pull requests welcome!
-  
-> The website is currently a clone of Yuxi Evan You's [Vue.js](http://vuejs.org/) website ([view license](website/LICENSE)) - just so we can hit the ground rolling in terms of setting up Haxo etc. Obviously as soon as possible, we should start rolling out our own layout & content.
+Content is written in Markdown and located in [`./website/src`](https://github.com/transloadit/uppy/tree/master/website/src). Feel free to fork & hack!  
 
-`./website/update.js` is called during website builds to inject the Uppy versions & filesizes into the documentation. `website` in an independent folder and so it cannot rely on anything from the root project, without `update.js` explicitly making it available (copying).
+`./website/update.js` is called during website builds to inject the Uppy versions & filesizes into the documentation. `website` in an independent folder (with e.g. its own package.json) and so it cannot rely on anything from the root project directly. `update.js` is the bridge that explicitly makes information available by injecting it into the website.
 
 It's recommended to exclude `./website/public/` from your editor if you want efficient searches.
 
-For local previews on `http://127.0.0.1:4000` type:
+For local previews on http://127.0.0.1:4000 type:
 
 ```bash
 make website-preview
@@ -45,6 +44,10 @@ make website-preview
 
 ## FAQ
 
+### Why does your site look like vuejs.org?
+
+The website is currently a clone of Yuxi Evan You's wonderful [Vue.js](http://vuejs.org/) website ([view license](website/VUEORG_LICENSE)) - just so we can hit the ground running in terms of Haxo boilerplate, etc. Obviously as soon as possible, we'll start rolling out our own layout & content and make this place our own. We'll keep the Vue website MIT license & credit in the footer in tact of course.
+
 ### What does Travis do?
 
 Travis should:

website/src/guide/contributing.md

@@ -0,0 +1,108 @@
+---
+type: guide
+order: 20
+title: "Contributing Guidelines"
+---
+
+## CSS Guidelines
+
+The CSS standards followed in this project closely resemble those from [Medium's CSS Guidelines](https://gist.github.com/fat/a47b882eb5f84293c4ed). If it's not mentioned here, follow their guidelines.
+
+### Naming Conventions
+
+This project uses naming conventions adopted from the SUIT CSS framework. 
+[Read about them here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
+
+To quickly summarize:
+
+#### Utilities
+
+Syntax: u-[sm-|md-|lg-]<utilityName>
+
+```css
+.u-utilityName
+.u-floatLeft
+.u-lg-col6
+```
+
+#### Components
+
+Syntax: [<namespace>-]<ComponentName>[-descendentName][--modifierName]
+
+```css
+.twt-Button /* Namespaced component */
+.MyComponent /* Components pascal cased */
+.Button--default /* Modified button style */
+.Button--large
+
+.Tweet
+.Tweet-header /* Descendents */
+.Tweet-bodyText
+
+.Accordion.is-collapsed /* State of component */
+.Accordion.is-expanded
+```
+
+### SASS
+
+This project uses SASS, with some limitations on nesting.  One-level deep nesting is allowed, but nesting may not extend a selector by using the `&` operator.  For example:
+
+```sass
+/* BAD */
+.Button {
+  &--disabled {
+    ...
+  }
+}
+
+/* GOOD */
+.Button {
+  ...
+}
+
+.Button--disabled {
+  ...
+}
+```
+
+### Mobile-first Responsive Approach
+
+Style to the mobile breakpoint with your selectors, then use `min-width` media queries to add any styles to the tablet or desktop breakpoints.
+
+### Selector, Rule Ordering
+
+- All selectors are sorted alphabetically and by type.
+- HTML elements go above classes and IDs in a file.
+- Rules are sorted alphabetically.
+
+```sass
+/* BAD */
+.wrapper {
+  width: 940px;
+  margin: auto;
+}
+
+h1 {
+  color: red;
+}
+
+.article {
+  width: 100%;
+  padding: 32px;
+}
+
+/* GOOD */
+h1 {
+  color: red;
+}
+
+.article {
+  padding: 32px;
+  width: 100%;
+}
+
+.wrapper {
+  margin: auto;
+  width: 940px;
+}
+```

website/src/index.md

@@ -1,5 +1,2 @@
 index: true
 ---
-
-
-bla bla