Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Dec 5, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions netlify.toml

This file was deleted.

7 changes: 7 additions & 0 deletions website/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": ["es2015"],
"plugins": [
"syntax-object-rest-spread",
"transform-object-rest-spread"
]
}
1 change: 1 addition & 0 deletions website/.nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node
19 changes: 19 additions & 0 deletions website/README.md
Original file line number Diff line number Diff line change
@@ -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.
45 changes: 45 additions & 0 deletions website/config/variables.js
Original file line number Diff line number Diff line change
@@ -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'
}
94 changes: 94 additions & 0 deletions website/gulpfile.babel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import gulp from "gulp";
import cp from "child_process";
import hugoBin from "hugo-bin"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added hugo-bin so contributors don't need to install Hugo for local testing.

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");
}
});
}

53 changes: 53 additions & 0 deletions website/package.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
6 changes: 6 additions & 0 deletions website/site/config.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
baseurl: "/"
languageCode: "en-us"
title: "Netlify CMS | Open-Source Content Management System"
disable404: true
pluralizeListTitles: false
metaDataFormat: "yaml"
Empty file added website/site/content/.keep
Empty file.
Original file line number Diff line number Diff line change
@@ -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).
Expand Down Expand Up @@ -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.
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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)
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -191,4 +196,4 @@ Registers a template for a collection.
</article>
}
}
```
```
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: Editorial Workflow
position: 40
---

# Editorial Workflow

## Overview
Expand Down Expand Up @@ -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.
7 changes: 6 additions & 1 deletion docs/examples.md → website/site/content/docs/examples.md
Original file line number Diff line number Diff line change
@@ -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/)
8 changes: 6 additions & 2 deletions docs/extending.md → website/site/content/docs/extending.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -109,5 +114,4 @@ CMS.registerEditorComponent({

**Result:**

![youtube-widget](/img/youtube-widget.png)

![youtube-widget](/img/youtube-widget.png)
8 changes: 6 additions & 2 deletions docs/intro.md → website/site/content/docs/intro.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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.
Original file line number Diff line number Diff line change
@@ -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.)

Expand Down Expand Up @@ -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!
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -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).
Loading