Migrate netlify-cms-www site into this repo (#860)

* Add frontmatter to docs files (prep to move)

* Move docs into position for website migration

* Migrate website from netlify-cms-www

Some modifications, including most of the changes in netlify/netlify-cms-www#58 (previously reverted).

Also updated the readme and added hugo-bin for quicker onboarding of new docs contributors.

* Remove netlify.toml

This allows separate build commands for cms-demo and netlifycms.org.

* Remove website/netlify.toml

May re-add later, but it's not doing anything for now.

* Remove unused content file

website/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": ["es2015"],
+  "plugins": [
+    "syntax-object-rest-spread",
+    "transform-object-rest-spread"
+  ]
+}

website/.nvmrc

@@ -0,0 +1 @@
+node

website/README.md

@@ -0,0 +1,19 @@
+# Netlify CMS Website & Docs
+
+This directory builds netlifycms.org. If you'd like to propose changes to the site or docs, you'll find the source files in here.
+
+## Local development
+
+The site is built with [Hugo](https://gohugo.io/), managed as an npm dependency via [hugo-bin](https://www.npmjs.com/package/hugo-bin). 
+
+To run the site locally, you'll need to have [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com/en/) installed on your computer.
+
+From your terminal window, `cd` into the `website` directory of the repo, and run
+
+```bash
+yarn
+yarn start
+```
+
+Then visit http://localhost:3000/ - BrowserSync will automatically reload CSS or
+refresh the page when stylesheets or content changes.

website/config/variables.js

@@ -0,0 +1,45 @@
+// if you change these you must restart the server
+
+module.exports = {
+
+  // colors
+  lightestGrey: '#E6E6E6',
+  lighterGrey: '#F7F8F8',
+  lightGrey: '#F6F6F6',
+  grey: '#313D3E',
+  darkGrey: '#2F3132',
+  darkerGrey: '#1C1E1E',
+  lightGreen: '#97bf2f',
+  green: '#C9FA4B',
+  darkGreen: '#7CA511',
+
+  // typography
+  thin: 100,
+  light: 300,
+  regular: 400,
+  semibold: 500,
+  bold: 700,
+  black: 900,
+
+  // fonts
+  roboto: "'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+
+  // padding
+  micro: '8px',
+  tiny: '16px',
+  small: '24px',
+  medium: '40px',
+  large: '64px',
+  xl: '104px',
+  xxl: '168px',
+
+  // border radius
+  borderRadius: '4px',
+  largeBorderRadius: '10px',
+
+  // responsive breakpoints
+  mobile: '480px',
+  tablet: '768px',
+  desktop: '960px',
+  display: '1200px'
+}

website/gulpfile.babel.js

@@ -0,0 +1,94 @@
+import gulp from "gulp";
+import cp from "child_process";
+import hugoBin from "hugo-bin"
+import gutil from "gulp-util";
+import postcss from "gulp-postcss";
+import cssImport from "postcss-import";
+import neatgrid from "postcss-neat";
+import nestedcss from "postcss-nested";
+import colorfunctions from "postcss-colour-functions";
+import hdBackgrounds from "postcss-at2x";
+import cssvars from "postcss-simple-vars-async";
+import cssextend from "postcss-simple-extend";
+import styleVariables from "./config/variables";
+import BrowserSync from "browser-sync";
+import webpack from "webpack";
+import webpackConfig from "./webpack.conf";
+
+const browserSync = BrowserSync.create();
+const defaultArgs = ["-d", "../dist", "-s", "site", "-v"];
+
+gulp.task("hugo", (cb) => buildSite(cb));
+gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"]));
+
+gulp.task("build", ["css", "js", "fonts", "images", "hugo"]);
+gulp.task("build-preview", ["css", "js", "fonts", "images", "hugo-preview"]);
+
+gulp.task("css", () => (
+  gulp.src("./src/css/**/*.css")
+    .pipe(postcss([
+      cssImport({from: "./src/css/main.css"}),
+      neatgrid(),
+      nestedcss(),
+      colorfunctions(),
+      hdBackgrounds(),
+      cssextend(),
+      cssvars({variables: styleVariables})]))
+    .pipe(gulp.dest("./dist/css"))
+    .pipe(browserSync.stream())
+));
+
+gulp.task("js", (cb) => {
+  const myConfig = Object.assign({}, webpackConfig);
+
+  webpack(myConfig, (err, stats) => {
+    if (err) throw new gutil.PluginError("webpack", err);
+    gutil.log("[webpack]", stats.toString({
+      colors: true,
+      progress: true
+    }));
+    browserSync.reload();
+    cb();
+  });
+});
+
+gulp.task("fonts", () => (
+  gulp.src("./src/fonts/**/*")
+    .pipe(gulp.dest("./dist/fonts"))
+    .pipe(browserSync.stream())
+));
+
+gulp.task("images", () => (
+  gulp.src("./src/img/**/*")
+    .pipe(gulp.dest("./dist/img"))
+    .pipe(browserSync.stream())
+));
+
+gulp.task("server", ["hugo", "css", "js", "fonts", "images"], () => {
+  browserSync.init({
+    server: {
+      baseDir: "./dist"
+    },
+    notify: false
+  });
+  gulp.watch("./src/js/**/*.js", ["js"]);
+  gulp.watch("./src/css/**/*.css", ["css"]);
+  gulp.watch("./src/img/**/*", ["images"]);
+  gulp.watch("./src/fonts/**/*", ["fonts"]);
+  gulp.watch("./site/**/*", ["hugo"]);
+});
+
+function buildSite(cb, options) {
+  const args = options ? defaultArgs.concat(options) : defaultArgs;
+
+  return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => {
+    if (code === 0) {
+      browserSync.reload();
+      cb();
+    } else {
+      browserSync.notify("Hugo build failed :(");
+      cb("Hugo build failed");
+    }
+  });
+}
+

website/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "victor-hugo",
+  "version": "1.0.0",
+  "description": "Victor Hugo is a Hugo boilerplate for creating truly epic websites!",
+  "main": "index.js",
+  "scripts": {
+    "hugo": "gulp hugo",
+    "webpack": "gulp webpack",
+    "build": "gulp build",
+    "build-preview": "gulp build-preview",
+    "start": "gulp server",
+    "lint": "eslint src"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "autoprefixer": "^6.3.7",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
+    "babel-plugin-transform-class-properties": "^6.10.2",
+    "babel-plugin-transform-object-assign": "^6.8.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-register": "^6.11.6",
+    "browser-sync": "^2.13.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^3.1.1",
+    "eslint-plugin-import": "^1.11.1",
+    "exports-loader": "^0.6.3",
+    "file-loader": "^0.9.0",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-postcss": "^6.1.1",
+    "gulp-util": "^3.0.7",
+    "hugo-bin": "^0.18.0",
+    "imports-loader": "^0.6.5",
+    "postcss-at2x": "^2.0.0",
+    "postcss-colour-functions": "^1.5.1",
+    "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^8.1.2",
+    "postcss-loader": "^0.9.1",
+    "postcss-neat": "^2.5.2",
+    "postcss-nested": "^1.0.0",
+    "postcss-simple-extend": "^1.0.0",
+    "postcss-simple-vars-async": "^1.2.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "whatwg-fetch": "^1.0.0",
+    "yamljs": "^0.2.8"
+  },
+  "devDependencies": {}
+}

website/site/config.yaml

@@ -0,0 +1,6 @@
+baseurl: "/"
+languageCode: "en-us"
+title: "Netlify CMS | Open-Source Content Management System"
+disable404: true
+pluralizeListTitles: false
+metaDataFormat: "yaml"

docs/architecture.md → website/site/content/docs/architecture.md

@@ -1,3 +1,8 @@
+---
+title: Architecture
+position: 90
+---
+
 # Technical Architecture
 
 Netlify CMS is a React application, using Redux for state management with immutable data structures (immutable.js).
@@ -57,4 +62,4 @@ The control component receives three (3) callbacks as props: `onChange`, `onAddA
 
 Both control and preview widgets receive a `getAsset` selector via props. Displaying the media (or its URI) for the user should always be done via `getAsset`, as it returns an AssetProxy that can return the correct value for both medias already persisted on the server and cached media not yet uploaded.
 
-The actual persistence of the content and medias inserted into the control component is delegated to the backend implementation. The backend will be called with the updated values and a list of assetProxy objects for each field of the entry, and should return a promise that can resolve into the persisted entry object and the list of the persisted media URIs.
+The actual persistence of the content and medias inserted into the control component is delegated to the backend implementation. The backend will be called with the updated values and a list of assetProxy objects for each field of the entry, and should return a promise that can resolve into the persisted entry object and the list of the persisted media URIs.

docs/authentication-backends.md → website/site/content/docs/authentication-backends.md

@@ -1,3 +1,8 @@
+---
+title: Authentication & Backends
+position: 25
+---
+
 # Authentication & Backends
 
 Netlify CMS stores content in your GitHub repository. (GitLab and Bitbucket coming soon!) In order for this to work, you need to authenticate with GitHub, and that requires a server. We have a few options for handling this.

docs/contributor-guide.md → website/site/content/docs/contributor-guide.md

@@ -1,3 +1,8 @@
+---
+title: Contributing
+position: 100
+---
+
 # Welcome, contributors!
 
 We're hoping that Netlify CMS will do for the [JAMstack](https://www.jamstack.org) what WordPress did for dynamic sites back in the day. We know we can't do that without building a thriving community of contributors and users, and we'd love to have you join us.
@@ -6,4 +11,4 @@ While we work on building this page (and you can help!), here are some links wit
 
 * [Project Milestones](https://github.com/netlify/netlify-cms/milestones)
 * [Code of Conduct](https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md)
-* [Setup instructions and Contribution Guidelines](https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md)
+* [Setup instructions and Contribution Guidelines](https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md)

docs/customization.md → website/site/content/docs/customization.md

@@ -1,3 +1,8 @@
+---
+title: Custom Previews
+position: 50
+---
+
 # Customizing the Preview Pane
 
 The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
@@ -191,4 +196,4 @@ Registers a template for a collection.
         </article>
       }
     }
-    ```
+    ```

docs/editorial-workflow.md → website/site/content/docs/editorial-workflow.md

@@ -1,3 +1,8 @@
+---
+title: Editorial Workflow
+position: 40
+---
+
 # Editorial Workflow
 
 ## Overview
@@ -36,4 +41,4 @@ Actual data are stored in individual `json` files committed to this tree.
 
 Instead of adding logic to `CollectionPage` and `EntryPage`, the Editorial Workflow is implemented as Higher Order Components, adding UI and dispatching additional actions.
 
-Furthermore, all editorial workflow state is managed in Redux - there's an `actions/editorialWorkflow.js` file and a `reducers/editorialWorkflow.js` file.
+Furthermore, all editorial workflow state is managed in Redux - there's an `actions/editorialWorkflow.js` file and a `reducers/editorialWorkflow.js` file.

docs/examples.md → website/site/content/docs/examples.md

@@ -1,8 +1,13 @@
+---
+title: Examples
+position: 110
+---
+
 # Examples
 
 Do you have a great example? Submit a pull request to this page.
 
 Name | Tools | Type | Example | More info |
 --- | --- | --- | --- | ---
 This Developing Journey | middleman | blog | [briandouglas.me](https://briandouglas.me) | [blog post](https://deploy-preview-496--www.netlify.com/blog/2017/04/18/blog-with-middleman-and-the-netlifycms/)
-JAMstack Recipes | Hugo, Azure | demo | [jamstack-cms.netlify.com](http://jamstack-cms.netlify.com) | [blog post](http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/)
+JAMstack Recipes | Hugo, Azure | demo | [jamstack-cms.netlify.com](http://jamstack-cms.netlify.com) | [blog post](http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/)

docs/extending.md → website/site/content/docs/extending.md

@@ -1,3 +1,8 @@
+---
+title: Extending Widgets
+position: 60
+---
+
 # Extending With Widgets
 
 The NetlifyCMS exposes an `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The available widget extension methods are:
@@ -109,5 +114,4 @@ CMS.registerEditorComponent({
 
 **Result:**
 
-![youtube-widget](/img/youtube-widget.png)
-
+![youtube-widget](/img/youtube-widget.png)

docs/intro.md → website/site/content/docs/intro.md

@@ -1,3 +1,8 @@
+---
+title: Introduction
+position: 0
+---
+
 # Introduction
 
 Netlify CMS is a Content Management System for static sites, allowing collaborators to create, edit, review, and publish content without writing code or dealing with version control. It brings the ease of WordPress-style editing to the simplicity and speed of static sites.
@@ -99,5 +104,4 @@ Netlify CMS exposes a `window.CMS` global object that you can use to register cu
 
 * `registerWidget`: registers a custom widget.
 
-* `registerEditorComponent`: adds a block component to the Markdown editor.
-
+* `registerEditorComponent`: adds a block component to the Markdown editor.

docs/quick-start.md → website/site/content/docs/quick-start.md

@@ -1,3 +1,8 @@
+---
+title: Quick Start
+position: 20
+---
+
 # Quick Start
 Netlify CMS is adaptable to a wide variety of projects. The only inflexible requirement is that your site content must be written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/). (If you're partial to another Git hosting service, check out the PRs in progress for [GitLab](https://github.com/netlify/netlify-cms/pull/517) and [Bitbucket](https://github.com/netlify/netlify-cms/pull/525) support.)
 
@@ -227,4 +232,4 @@ If you set your registration preference to "Invite only," you'll need to invite
 
 If you left your site registration open, or for return visits after comfirming an email invitation, you can access your site's CMS at `yoursite.com/admin`.
 
-Happy posting!
+Happy posting!

docs/test-drive.md → website/site/content/docs/test-drive.md

@@ -1,3 +1,8 @@
+---
+title: Test Drive
+position: 10
+---
+
 # Take a test drive
 
 Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Our example here is the [Kaldi coffee company template](https://github.com/netlify-templates/one-click-hugo-cms). Use the button below to build and deploy your own copy of the repository:
@@ -25,4 +30,4 @@ Try adding and editing posts, or changing the content of the Products page. When
 ## More paths to explore
 - If you’d like to learn more about how it all works, check out the [Intro](/docs/intro). 
 - To see how to integrate Netlify CMS into an existing project, go to the [Quick Start](/docs/quick-start).
-- If you’d like to change how users log in to your site, read up on [Netlify Identity service](https://www.netlify.com/docs/identity).
+- If you’d like to change how users log in to your site, read up on [Netlify Identity service](https://www.netlify.com/docs/identity).