Feature/website overhaul (#49)

* Reorganize repo
* Overhaul website design and rewrite in NextJS and Typescript
* Delete website-publish.yml

website/content/docs/customization.mdx

@@ -0,0 +1,147 @@
+---
+group: Customization
+title: Creating Custom Previews
+weight: 50
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
+
+- **registerPreviewTemplate:** Registers a template for a collection.
+
+### React Components inline interaction
+
+Static CMS is a collection of React components and exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
+
+## `registerPreviewTemplate`
+
+Registers a template for a folder collection or an individual file in a file collection.
+
+`CMS.registerPreviewTemplate(name, react_component);`
+
+**Params:**
+
+- title: The name of the collection (or file for file collections) which this preview component will be used for.
+  - Folder collections: Use the name of the collection
+  - File collections: Use the name of the file
+- react_component: A React component that renders the collection data. Six props will be passed to your component during render:
+
+  - entry: Immutable collection containing the entry data.
+  - widgetFor: Returns the appropriate widget preview component for a given field.
+  - [widgetsFor](#lists-and-objects): Returns an array of objects with widgets and associated field data. For use with list and object type entries.
+  - getAsset: Returns the correct filePath or in-memory preview for uploaded images.
+    **Example:**
+
+    ```html
+    <script src="https://unpkg.com/@staticcms/core@%5E0.1.0/dist/static-cms-core.js"></script>
+    <script>
+      var PostPreview = createClass({
+        render: function () {
+          var entry = this.props.entry;
+          var image = entry.data.image;
+          var bg = this.props.getAsset(image);
+          return h(
+            'div',
+            {},
+            h('h1', {}, entry.data.title),
+            h('img', { src: bg.toString() }),
+            h('div', { classtitle: 'text' }, this.props.widgetFor('body')),
+          );
+        },
+      });
+
+      CMS.registerPreviewTemplate('posts', PostPreview);
+    </script>
+    ```
+
+  - document: The preview pane iframe's [document instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
+  - window: The preview pane iframe's [window instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
+
+  ### Lists and Objects
+
+  The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render.
+  **Note**: as is often the case with the Static CMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.
+  **List Example:**
+
+  ```html
+  <script>
+    var AuthorsPreview = createClass({
+      // For list fields, the widgetFor function returns an array of objects
+      // that you can map over in your template. If our field is a list of
+      // authors containing two entries, with fields `name` and `description`,
+      // the return value of `widgetsFor` would look like this:
+      //
+      // [{
+      //   data: { title: 'Mathias', description: 'Co-Founder'},
+      //   widgets: { title: (<WidgetComponent>), description: (WidgetComponent>)}
+      // },
+      // {
+      //   data: { title: 'Chris', description: 'Co-Founder'},
+      //   widgets: { title: (<WidgetComponent>), description: (WidgetComponent>)}
+      // }]
+      //
+      // Templating would look something like this:
+
+      render: function () {
+        return h(
+          'div',
+          {},
+
+          // This is a static header that would only be rendered once for the entire list
+          h('h1', {}, 'Authors'),
+
+          // Here we provide a simple mapping function that will be applied to each
+          // object in the array of authors
+          this.props.widgetsFor('authors').map(function (author, index) {
+            return h(
+              'div',
+              { key: index },
+              h('hr', {}),
+              h('strong', {}, author.data.name),
+              author.widgets.description,
+            );
+          }),
+        );
+      },
+    });
+    CMS.registerPreviewTemplate('authors', AuthorsPreview);
+  </script>
+  ```
+
+  **Object Example:**
+
+  ```html
+  <script>
+    var GeneralPreview = createClass({
+      // Object fields are simpler than lists - instead of `widgetsFor` returning
+      // an array of objects, it returns a single object. Accessing the shape of
+      // that object is the same as the shape of objects returned for list fields:
+      //
+      // {
+      //   data: { front_limit: 0, author: 'Chris' },
+      //   widgets: { front_limit: (<WidgetComponent>), author: (WidgetComponent>)}
+      // }
+      render: function () {
+        var entry = this.props.entry;
+        var title = entry.data.site_title;
+        var posts = entry.data.posts;
+
+        return h(
+          'div',
+          {},
+          h('h1', {}, title),
+          h(
+            'dl',
+            {},
+            h('dt', {}, 'Posts on Frontpage'),
+            h('dd', {}, this.props.widgetsFor('posts').widgets.front_limit || 0),
+
+            h('dt', {}, 'Default Author'),
+            h('dd', {}, this.props.widgetsFor('posts').data.author || 'None'),
+          ),
+        );
+      },
+    });
+
+    CMS.registerPreviewTemplate('general', GeneralPreview);
+  </script>
+  ```