diff --git a/.prettierignore b/.prettierignore index 2cfd2d58..a87efc11 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,2 @@ dist/ -bin/ -CHANGELOG.md \ No newline at end of file +bin/ \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 73b70570..2867c8a7 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -14,21 +14,21 @@ orientation. Examples of behavior that contributes to creating a positive environment include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members Examples of unacceptable behavior by participants include: -- The use of sexualized language or imagery and unwelcome sexual attention or - advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a +* Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities diff --git a/README.md b/README.md index 802eb4d3..17a3db8a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ # Netlify CMS - [![All Contributors](https://img.shields.io/badge/all_contributors-113-orange.svg)](#contributors) [![Open Source Helpers](https://www.codetriage.com/netlify/netlify-cms/badges/users.svg)](https://www.codetriage.com/netlify/netlify-cms) [![](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/netlify/netlifycms) @@ -25,9 +24,9 @@ Read more about Netlify CMS [Core Concepts](https://www.netlifycms.org/docs/intr The Netlify CMS can be used in two different ways. -- A Quick and easy install, that just requires you to create a single HTML file and a configuration file. All the CMS Javascript and CSS are loaded from a CDN. +* A Quick and easy install, that just requires you to create a single HTML file and a configuration file. All the CMS Javascript and CSS are loaded from a CDN. To learn more about this installation method, refer to the [Quick Start Guide](https://www.netlifycms.org/docs/quick-start/) -- A complete, more complex install, that gives you more flexibility but requires that you use a static site builder with a build system that supports npm packages. +* A complete, more complex install, that gives you more flexibility but requires that you use a static site builder with a build system that supports npm packages. # Community @@ -46,9 +45,7 @@ Please make sure you understand its [implications and guarantees](https://writin # Thanks ## Services - These services support Netlify CMS development by providing free infrastructure. -

@@ -60,10 +57,8 @@ These services support Netlify CMS development by providing free infrastructure.

## Contributors - These wonderful folks are responsible for developing and maintaining Netlify CMS. ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)) - | [
CΓ‘ssio Souza](https://twitter.com/cassiozen)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=cassiozen "Code") | [
Shawn Erquhart](https://erquh.art)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=erquhart "Code") | [
Andrey Okonetchnikov](http://okonet.ru)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=okonet "Code") | [
Mathias Biilmann](https://www.netlify.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=biilmann "Code") | [
Benaiah Mischenko](http://benaiah.me)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=Benaiah "Code") | [
Rafael Conde](http://rafaelconde.net)
[🎨](#design-rafaelconde "Design") [πŸ’»](https://github.com/netlify/netlify-cms/commits?author=rafaelconde "Code") | [
Joseph Earl](http://josephearl.co.uk)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=josephearl "Code") | @@ -85,6 +80,5 @@ These wonderful folks are responsible for developing and maintaining Netlify CMS | [
Taylor D. Edmiston](http://blog.tedmiston.com/)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=tedmiston "Documentation") | [
Daniel Mahon](https://www.mahonstudios.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=danielmahon "Code") | [
Evan Hennessy](https://www.hennessyevan.com)
[πŸ”Œ](#plugin-hennessyevan "Plugin/utility libraries") | [
Hasan Azizul Haque](https://hasanavi.me)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Code") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Documentation") [πŸ€”](#ideas-hasanavi "Ideas, Planning, & Feedback") | [
Robert Karlsson](https://github.com/robertkarlsson)
[πŸ›](https://github.com/netlify/netlify-cms/issues?q=author%3Arobertkarlsson "Bug reports") | [
Gil Greenberg](http://gilgreenberg.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=gil-- "Code") | [
Tyler Ipson](http://loremipson.com)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=loremipson "Documentation") | | [
Jake Rayson](https://www.growdigital.org/)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=growdigital "Code") [πŸ“](#blog-growdigital "Blogposts") [πŸ’‘](#example-growdigital "Examples") | - This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! diff --git a/package.json b/package.json index b6e2c652..f8973948 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "dryrun": "lerna publish --skip-npm --skip-git", "publish": "run-s bootstrap dryrun build && git checkout . && lerna publish", "format": "run-s \"lint:css -- --fix --quiet\" \"lint:js -- --fix --quiet\" \"format:prettier -- --write\"", - "format:prettier": "prettier \"{{packages,scripts,website}/**/,}*.{js,css,json,yml,yaml}\"", + "format:prettier": "prettier \"{{packages,scripts,website}/**/,}*.{js,css}\"", "lint": "run-p -c --aggregate-output lint:*", "lint-quiet": "run-p -c --aggregate-output \"lint:* -- --quiet\"", "lint:css": "stylelint --ignore-path .gitignore \"{packages/**/*.{css,js},website/**/*.css}\"", diff --git a/packages/netlify-cms/README.md b/packages/netlify-cms/README.md index 92504005..17a3db8a 100644 --- a/packages/netlify-cms/README.md +++ b/packages/netlify-cms/README.md @@ -1,6 +1,5 @@ # Netlify CMS - -[![All Contributors](https://img.shields.io/badge/all_contributors-110-orange.svg)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-113-orange.svg)](#contributors) [![Open Source Helpers](https://www.codetriage.com/netlify/netlify-cms/badges/users.svg)](https://www.codetriage.com/netlify/netlify-cms) [![](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/netlify/netlifycms) @@ -25,9 +24,9 @@ Read more about Netlify CMS [Core Concepts](https://www.netlifycms.org/docs/intr The Netlify CMS can be used in two different ways. -- A Quick and easy install, that just requires you to create a single HTML file and a configuration file. All the CMS Javascript and CSS are loaded from a CDN. +* A Quick and easy install, that just requires you to create a single HTML file and a configuration file. All the CMS Javascript and CSS are loaded from a CDN. To learn more about this installation method, refer to the [Quick Start Guide](https://www.netlifycms.org/docs/quick-start/) -- A complete, more complex install, that gives you more flexibility but requires that you use a static site builder with a build system that supports npm packages. +* A complete, more complex install, that gives you more flexibility but requires that you use a static site builder with a build system that supports npm packages. # Community @@ -46,9 +45,7 @@ Please make sure you understand its [implications and guarantees](https://writin # Thanks ## Services - These services support Netlify CMS development by providing free infrastructure. -

@@ -60,10 +57,8 @@ These services support Netlify CMS development by providing free infrastructure.

## Contributors - These wonderful folks are responsible for developing and maintaining Netlify CMS. ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)) - | [
CΓ‘ssio Souza](https://twitter.com/cassiozen)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=cassiozen "Code") | [
Shawn Erquhart](https://erquh.art)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=erquhart "Code") | [
Andrey Okonetchnikov](http://okonet.ru)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=okonet "Code") | [
Mathias Biilmann](https://www.netlify.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=biilmann "Code") | [
Benaiah Mischenko](http://benaiah.me)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=Benaiah "Code") | [
Rafael Conde](http://rafaelconde.net)
[🎨](#design-rafaelconde "Design") [πŸ’»](https://github.com/netlify/netlify-cms/commits?author=rafaelconde "Code") | [
Joseph Earl](http://josephearl.co.uk)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=josephearl "Code") | @@ -82,8 +77,8 @@ These wonderful folks are responsible for developing and maintaining Netlify CMS | [
Tim Carry](http://www.pixelastic.com/)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Code") [🎨](#design-pixelastic "Design") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Documentation") | [
Sol Park](https://github.com/solpark)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=solpark "Code") | [
Michael Romani](https://github.com/MichaelRomani)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=MichaelRomani "Code") | [
Xifeng Jin](http://linkedin/in/xifengjin88)
[πŸ›](https://github.com/netlify/netlify-cms/issues?q=author%3Axifengjin88 "Bug reports") [πŸ’»](https://github.com/netlify/netlify-cms/commits?author=xifengjin88 "Code") | [
Pedro Duarte](http://pedroduarte.me)
[πŸ›](https://github.com/netlify/netlify-cms/issues?q=author%3Apeduarte "Bug reports") [πŸ’»](https://github.com/netlify/netlify-cms/commits?author=peduarte "Code") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=peduarte "Documentation") | [
Antonio Argote](http://antonioargote.com)
[🎨](#design-Strangehill "Design") | [
Kristaps Taube](https://www.ktaube.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=ktaube "Code") | | [
David Ko](https://github.com/daveyko)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=daveyko "Code") | [
IΓ±aki GarcΓ­a](http://www.txorua.com)
[🎨](#design-igarbla "Design") | [
Sam](https://github.com/gazebosx3)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=gazebosx3 "Code") | [
Josh Dzielak](https://dzello.com)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=dzello "Documentation") | [
Jeremy Bise](http://thosegeeks.com)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=jeremybise "Documentation") | [
terrierscript](https://terrierscript.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=terrierscript "Code") | [
Christopher Geary](https://twitter.com/crgeary)
[πŸ”Œ](#plugin-crgeary "Plugin/utility libraries") | | [
Brian Macdonald](https://github.com/brianlmacdonald)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=brianlmacdonald "Code") | [
John Vandenberg](https://jayvdb.github.io/)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=jayvdb "Documentation") | [
MarkZither](https://github.com/MarkZither)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=MarkZither "Documentation") | [
Rob Phoenix](https://www.robphoenix.com)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=robphoenix "Documentation") | [
Steve Lathrop](https://www.SteLa.io)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=slathrop "Code") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=slathrop "Documentation") [πŸ’‘](#example-slathrop "Examples") | [
Maciej Matuszewski](https://github.com/maciejmatu)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=maciejmatu "Code") | [
Eko Eryanto](https://github.com/ekoeryanto)
[πŸ”Œ](#plugin-ekoeryanto "Plugin/utility libraries") | -| [
Taylor D. Edmiston](http://blog.tedmiston.com/)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=tedmiston "Documentation") | [
Daniel Mahon](https://www.mahonstudios.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=danielmahon "Code") | [
Evan Hennessy](https://www.hennessyevan.com)
[πŸ”Œ](#plugin-hennessyevan "Plugin/utility libraries") | [
Hasan Azizul Haque](https://hasanavi.me)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Code") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Documentation") [πŸ€”](#ideas-hasanavi "Ideas, Planning, & Feedback") | [
Robert Karlsson](https://github.com/robertkarlsson)
[πŸ›](https://github.com/netlify/netlify-cms/issues?q=author%3Arobertkarlsson "Bug reports") | [
Gil Greenberg](http://gilgreenberg.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=gil-- "Code") | - +| [
Taylor D. Edmiston](http://blog.tedmiston.com/)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=tedmiston "Documentation") | [
Daniel Mahon](https://www.mahonstudios.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=danielmahon "Code") | [
Evan Hennessy](https://www.hennessyevan.com)
[πŸ”Œ](#plugin-hennessyevan "Plugin/utility libraries") | [
Hasan Azizul Haque](https://hasanavi.me)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Code") [πŸ“–](https://github.com/netlify/netlify-cms/commits?author=hasanavi "Documentation") [πŸ€”](#ideas-hasanavi "Ideas, Planning, & Feedback") | [
Robert Karlsson](https://github.com/robertkarlsson)
[πŸ›](https://github.com/netlify/netlify-cms/issues?q=author%3Arobertkarlsson "Bug reports") | [
Gil Greenberg](http://gilgreenberg.com)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=gil-- "Code") | [
Tyler Ipson](http://loremipson.com)
[πŸ“–](https://github.com/netlify/netlify-cms/commits?author=loremipson "Documentation") | +| [
Jake Rayson](https://www.growdigital.org/)
[πŸ’»](https://github.com/netlify/netlify-cms/commits?author=growdigital "Code") [πŸ“](#blog-growdigital "Blogposts") [πŸ’‘](#example-growdigital "Examples") | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! diff --git a/website/content/blog/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture.md b/website/content/blog/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture.md index 5fa5ce2b..62be4d37 100644 --- a/website/content/blog/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture.md +++ b/website/content/blog/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture.md @@ -9,20 +9,19 @@ description: >- of features. date: '2018-07-26' --- +Today we’re releasing Netlify CMS 2.0, which adds support for using Bitbucket as a backend. -Today we’re releasing Netlify CMS 2.0, which adds support for using Bitbucket as a backend. +With this release, [Netlify CMS](https://www.netlifycms.org/) now supports all major Git collaboration providers, adding Bitbucket to the list of supported providers which already includes GitLab and GitHub. -With this release, [Netlify CMS](https://www.netlifycms.org/) now supports all major Git collaboration providers, adding Bitbucket to the list of supported providers which already includes GitLab and GitHub. - -While you could already use Netlify CMS with most static site generators, our long-term vision is to be tool-agnostic so you can use whatever tool helps you work best. The latest release brings us one step closer by giving the option of an open source, Git-centric CMS to tens of thousands of businesses that depend on Bitbucket, including 60 of the Fortune 100. +While you could already use Netlify CMS with most static site generators, our long-term vision is to be tool-agnostic so you can use whatever tool helps you work best. The latest release brings us one step closer by giving the option of an open source, Git-centric CMS to tens of thousands of businesses that depend on Bitbucket, including 60 of the Fortune 100. ## Becoming a Monorepo The other big change with 2.0 is the migration from a single codebase to a collection of interdependent packages called a β€œmonorepo”. Netlify CMS still lives in a [single repository on GitHub](https://github.com/netlify/netlify-cms), but the many extensions that were kept within Netlify CMS itself are now completely separate from the application core. This brings a few benefits: -- Extension authors can easily copy an existing extension from the Netlify CMS repo and create a custom version. -- Your custom extensions can now do anything the β€œofficial” extensions can do (because official extensions are no longer taking advantage of privileged internal code). -- The monorepo approach provides a foundation that will encourage a more modular CMS, with shared parts that make extension authoring easier. +* Extension authors can easily copy an existing extension from the Netlify CMS repo and create a custom version. +* Your custom extensions can now do anything the β€œofficial” extensions can do (because official extensions are no longer taking advantage of privileged internal code). +* The monorepo approach provides a foundation that will encourage a more modular CMS, with shared parts that make extension authoring easier. ## What’s next diff --git a/website/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md b/website/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md index 519acb75..2a81ec70 100644 --- a/website/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md +++ b/website/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md @@ -7,7 +7,6 @@ description: >- GitHub. date: '2018-06-13' --- - Netlify CMS is releasing support for GitLab as a backend, creating the world's first completely open source stack for Git-based content editing. @@ -22,7 +21,7 @@ Adding support for GitLab means that millions more developers can now use Netlif Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflow. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your GitLab repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git. -In case you want an even easier way to get started, or just want to poke around in the code, you can use the button below to automatically deploy a starter site that uses the Hugo static site generator along with Netlify CMS. +In case you want an even easier way to get started, or just want to poke around in the code, you can use the button below to automatically deploy a starter site that uses the Hugo static site generator along with Netlify CMS. Deploy to Netlify diff --git a/website/content/docs/add-to-your-site.md b/website/content/docs/add-to-your-site.md index 40352e3b..e7905622 100755 --- a/website/content/docs/add-to-your-site.md +++ b/website/content/docs/add-to-your-site.md @@ -60,15 +60,15 @@ npm install netlify-cms --save Then import it (assuming your project has tooling for imports): ```js -import CMS from 'netlify-cms'; +import CMS from 'netlify-cms' // Now the registry is available via the CMS object. -CMS.registerPreviewTemplate('my-template', MyTemplate); +CMS.registerPreviewTemplate('my-template', MyTemplate) ``` ## Configuration -Configuration will be different for every site, so we'll break it down into parts. All code snippets in this section will be added to your `admin/config.yml` file. +Configuration will be different for every site, so we'll break it down into parts. All code snippets in this section will be added to your `admin/config.yml` file. ### Backend @@ -103,7 +103,7 @@ Netlify CMS allows users to upload images directly within the editor. For this t ```yaml # This line should *not* be indented -media_folder: 'images/uploads' # Media files will be stored in the repo under images/uploads +media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads ``` If you're creating a new folder for uploaded media, you'll need to know where your static site generator expects static files. You can refer to the paths outlined above in [App File Structure](#app-file-structure), and put your media folder in the same location where you put the `admin` folder. @@ -112,8 +112,8 @@ Note that the`media_folder` file path is relative to the project root, so the ex ```yaml # These lines should *not* be indented -media_folder: 'static/images/uploads' # Media files will be stored in the repo under static/images/uploads -public_folder: '/images/uploads' # The src attribute for uploaded media will begin with /images/uploads +media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads +public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads ``` The configuration above adds a new setting, `public_folder`. While `media_folder` specifies where uploaded files will be saved in the repo, `public_folder` indicates where they can be found in the published site. This path is used in image `src` attributes and is relative to the file where it's called. For this reason, we usually start the path at the site root, using the opening `/`. @@ -127,12 +127,14 @@ Collections define the structure for the different content types on your static Let's say your site has a blog, with the posts stored in `_posts/blog`, and files saved in a date-title format, like `1999-12-31-lets-party.md`. Each post begins with settings in yaml-formatted front matter, like so: ```yaml +--- layout: blog title: "Let's Party" date: 1999-12-31 11:59:59 -0800 -thumbnail: '/images/prince.jpg' +thumbnail: "/images/prince.jpg" rating: 5 -... +--- + This is the post body, where I write about our last chance to party before the Y2K bug destroys us all. ``` @@ -140,18 +142,18 @@ Given this example, our `collections` settings would look like this in your Netl ```yaml collections: - - name: 'blog' # Used in routes, e.g., /admin/collections/blog - label: 'Blog' # Used in the UI - folder: '_posts/blog' # The path to the folder where the documents are stored + - name: "blog" # Used in routes, e.g., /admin/collections/blog + label: "Blog" # Used in the UI + folder: "_posts/blog" # The path to the folder where the documents are stored create: true # Allow users to create new documents in this collection - slug: '{{year}}-{{month}}-{{day}}-{{slug}}' # Filename template, e.g., YYYY-MM-DD-title.md + slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md fields: # The fields for each document, usually in front matter - - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' } - - { label: 'Title', name: 'title', widget: 'string' } - - { label: 'Publish Date', name: 'date', widget: 'datetime' } - - { label: 'Featured Image', name: 'thumbnail', widget: 'image' } - - { label: 'Rating (scale of 1-5)', name: 'rating', widget: 'number' } - - { label: 'Body', name: 'body', widget: 'markdown' } + - {label: "Layout", name: "layout", widget: "hidden", default: "blog"} + - {label: "Title", name: "title", widget: "string"} + - {label: "Publish Date", name: "date", widget: "datetime"} + - {label: "Featured Image", name: "thumbnail", widget: "image"} + - {label: "Rating (scale of 1-5)", name: "rating", widget: "number"} + - {label: "Body", name: "body", widget: "markdown"} ``` Let's break that down: @@ -202,14 +204,14 @@ The entries for any collection can be filtered based on the value of a single fi ```yaml collections: - - name: 'posts' - label: 'Post' - folder: '_posts' + - name: "posts" + label: "Post" + folder: "_posts" filter: field: language value: en fields: - - { label: 'Language', name: 'language' } + - {label: "Language", name: "language"} ``` ## Authentication diff --git a/website/content/docs/architecture.md b/website/content/docs/architecture.md index 05715d32..c0cea65a 100755 --- a/website/content/docs/architecture.md +++ b/website/content/docs/architecture.md @@ -14,10 +14,9 @@ The structure of an entry is defined as a series of fields, each with a `name`, The `widget` determines the UI widget that the content editor will use when editing this field of an entry, as well as how the content of the field is presented in the editing preview. -Entries are loaded and persisted through a `backend` that will typically represent a `git` repository. +Entries are loaded and persisted through a `backend` that will typically represent a `git` repository. ## State shape / reducers - **Auth:** Keeps track of the logged state and the current user. **Config:** Holds the environment configuration (backend type, available collections and fields). @@ -29,7 +28,6 @@ Entries are loaded and persisted through a `backend` that will typically represe **EntryDraft:** Reused for each entry that is edited or created. It holds the entry's temporary data until it's persisted on the backend. ## Selectors - Selectors are functions defined within reducers used to compute derived data from the Redux store. The available selectors are: **selectEntry:** Selects a single entry, given the collection and a slug. @@ -39,7 +37,6 @@ Selectors are functions defined within reducers used to compute derived data fro **getAsset:** Selects a single AssetProxy object for the given URI. ## Value Objects - **AssetProxy:** AssetProxy is a Value Object that holds information regarding an asset file (such as an image, for example), whether it's persisted online or held locally in cache. For a file persisted online, the AssetProxy only keeps information about its URI. For local files, the AssetProxy will keep a reference to the actual File object while generating the expected final URIs and on-demand blobs for local preview. @@ -47,28 +44,26 @@ For a file persisted online, the AssetProxy only keeps information about its URI The AssetProxy object can be used directly inside a media tag (such as ``), as it will always return something that can be used by the media tag to render correctly (either the URI for the online file or a single-use blob). ## Components structure and Workflows - Components are separated into two main categories: Container components and Presentational components. ### Entry Editing - For either updating an existing entry or creating a new one, the `EntryEditor` is used and the flow is the same: -- When mounted, the `EntryPage` container component dispatches the `createDraft` action, setting the `entryDraft` state to a blank state (in case of a new entry) or to a copy of the selected entry (in case of an edit). -- The `EntryPage` will also render widgets for each field type in the given entry. -- Widgets are used for editing entry fields. There are different widgets for different field types, and they are always defined in a pair containing a `control` and a `preview` component. The control component is responsible for presenting the user with the appropriate interface for manipulating the current field value, while the preview component is responsible for displaying the value with the appropriate styling. +* When mounted, the `EntryPage` container component dispatches the `createDraft` action, setting the `entryDraft` state to a blank state (in case of a new entry) or to a copy of the selected entry (in case of an edit). +* The `EntryPage` will also render widgets for each field type in the given entry. +* Widgets are used for editing entry fields. There are different widgets for different field types, and they are always defined in a pair containing a `control` and a `preview` component. The control component is responsible for presenting the user with the appropriate interface for manipulating the current field value, while the preview component is responsible for displaying the value with the appropriate styling. #### Widget components implementation - The control component receives one (1) callback as a prop: `onChange`. -- onChange (required): Should be called when the users changes the current value. It will ultimately end up updating the EntryDraft object in the Redux Store, thus updating the preview component. -- onAddAsset & onRemoveAsset (optionals): If the field accepts file uploads for media (images, for example), these callbacks should be invoked with a `AssetProxy` value object. `onAddAsset` will get the current media stored in the Redux state tree while `onRemoveAsset` will remove it. AssetProxy objects are stored in the `Medias` object and referenced in the `EntryDraft` object on the state tree. +* onChange (required): Should be called when the users changes the current value. It will ultimately end up updating the EntryDraft object in the Redux Store, thus updating the preview component. +* onAddAsset & onRemoveAsset (optionals): If the field accepts file uploads for media (images, for example), these callbacks should be invoked with a `AssetProxy` value object. `onAddAsset` will get the current media stored in the Redux state tree while `onRemoveAsset` will remove it. AssetProxy objects are stored in the `Medias` object and referenced in the `EntryDraft` object on the state tree. 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. + ## Editorial Workflow implementation Instead of adding logic to `CollectionPage` and `EntryPage`, the Editorial Workflow is implemented as Higher Order Components, adding UI and dispatching additional actions. diff --git a/website/content/docs/authentication-backends.md b/website/content/docs/authentication-backends.md index f44fc8f0..a4b1eb77 100644 --- a/website/content/docs/authentication-backends.md +++ b/website/content/docs/authentication-backends.md @@ -18,13 +18,13 @@ To use it in your own project stored on GitHub or GitLab, follow these steps: steps to get started. 2. Add the following lines to your Netlify CMS `config.yml` file: - ```yaml - backend: - name: git-gateway - accept_roles: #optional - accepts all users if left out - - admin - - editor - ``` + ```yaml + backend: + name: git-gateway + accept_roles: #optional - accepts all users if left out + - admin + - editor + ``` 3. Optionally, you can assign roles to users in your Netlify dashboard, and then limit which roles can access the CMS by defining the `accept_roles` field as shown in the example above. @@ -50,11 +50,11 @@ To enable it: docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider). 2. Add the following lines to your Netlify CMS `config.yml` file: - ```yaml - backend: - name: github - repo: owner-name/repo-name # Path to your GitHub repository - ``` + ```yaml + backend: + name: github + repo: owner-name/repo-name # Path to your GitHub repository + ``` If you prefer to run your own authentication server, check out the section on [external OAuth clients](#external-oauth-clients). @@ -72,14 +72,14 @@ To enable it: 1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Netlify CMS instance as an OAuth application. For the **Redirect URI**, enter `https://api.netlify.com/auth/done`, and check the box for `api` scope. 2. Follow the [Netlify - docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider) to add your new GitLab Application ID and Secret to your Netlify site dashboard. -3. In your repository, add the following lines to your Netlify CMS `config.yml` file: + docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider) to add your new GitLab Application ID and Secret to your Netlify site dashboard. +2. In your repository, add the following lines to your Netlify CMS `config.yml` file: - ```yaml - backend: - name: gitlab - repo: owner-name/repo-name # Path to your GitLab repository - ``` + ```yaml + backend: + name: gitlab + repo: owner-name/repo-name # Path to your GitLab repository + ``` ### Client-Side Implicit Grant @@ -88,26 +88,26 @@ With GitLab's Implicit Grant, users can authenticate with GitLab directly from t 1. Follow the [GitLab docs](https://docs.gitlab.com/ee/integration/oauth_provider.html#adding-an-application-through-the-profile) to add your Netlify CMS instance as an OAuth application. For the **Redirect URI**, enter the address where you access Netlify CMS, for example, `https://www.mysite.com/admin/`. For scope, select `api`. 2. GitLab will give you an **Application ID**. Copy this and enter it in your Netlify CMS `config.yml` file, along with the following settings: - ```yaml - backend: - name: gitlab - repo: owner-name/repo-name # Path to your GitLab repository - auth_type: implicit # Required for implicit grant - app_id: your-app-id # Application ID from your GitLab settings - ``` + ```yaml + backend: + name: gitlab + repo: owner-name/repo-name # Path to your GitLab repository + auth_type: implicit # Required for implicit grant + app_id: your-app-id # Application ID from your GitLab settings + ``` - You can also use Implicit Grant with a self-hosted GitLab instance. This requires adding `api_root`, `base_url`, and `auth_endpoint` fields: + You can also use Implicit Grant with a self-hosted GitLab instance. This requires adding `api_root`, `base_url`, and `auth_endpoint` fields: - ```yaml - backend: - name: gitlab - repo: owner-name/repo-name # Path to your GitLab repository - auth_type: implicit # Required for implicit grant - app_id: your-app-id # Application ID from your GitLab settings - api_root: https://my-hosted-gitlab-instance.com/api/v4 - base_url: https://my-hosted-gitlab-instance.com - auth_endpoint: oauth/authorize - ``` + ```yaml + backend: + name: gitlab + repo: owner-name/repo-name # Path to your GitLab repository + auth_type: implicit # Required for implicit grant + app_id: your-app-id # Application ID from your GitLab settings + api_root: https://my-hosted-gitlab-instance.com/api/v4 + base_url: https://my-hosted-gitlab-instance.com + auth_endpoint: oauth/authorize + ``` Note that in both cases, GitLab will also provide you with a client secret. You should _never_ store this in your repo or reveal it in the client. @@ -121,11 +121,11 @@ To enable it: docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider). 2. Add the following lines to your Netlify CMS `config.yml` file: - ```yaml - backend: - name: bitbucket - repo: owner-name/repo-name # Path to your Bitbucket repository - ``` + ```yaml + backend: + name: bitbucket + repo: owner-name/repo-name # Path to your Bitbucket repository + ``` ## External OAuth Clients @@ -145,12 +145,12 @@ Check each project's documentation for instructions on how to configure it. Netlify CMS backends allow some additional fields for certain use cases. A full reference is below. Note that these are properties of the `backend` field, and should be nested under that field. -| Field | Default | Description | -| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| `repo` | none | **Required** for `github`, `gitlab`, and `bitbucket` backends; ignored by `git-gateway`. Follows the pattern `[org-or-username]/[repo-name]`. | -| `accept_roles` | none | `git-gateway` only. Limits CMS access to your defined array of user roles. Omitting this field gives access to all registered users. | -| `branch` | `master` | The branch where published content is stored. All CMS commits and PRs are made to this branch. | -| `api_root` | `https://api.github.com` (GitHub), `https://gitlab.com/api/v4` (GitLab), or `https://api.bitbucket.org/2.0` (Bitbucket) | The API endpoint. Only necessary in certain cases, like with GitHub Enterprise or self-hosted GitLab. | -| `site_domain` | `location.hostname` (or `cms.netlify.com` when on `localhost`) | Sets the `site_id` query param sent to the API endpoint. Non-Netlify auth setups will often need to set this for local development to work properly. | -| `base_url` | `https://api.netlify.com` (GitHub, Bitbucket) or `https://gitlab.com` (GitLab) | OAuth client URL. **Required** when using an external OAuth server or self-hosted GitLab. | -| `auth_endpoint` | `auth` (GitHub, Bitbucket) or `oauth/authorize` (GitLab) | Path to append to `base_url` for authentication requests. Optional. | +| Field | Default | Description | +| --------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| `repo` | none | **Required** for `github`, `gitlab`, and `bitbucket` backends; ignored by `git-gateway`. Follows the pattern `[org-or-username]/[repo-name]`. | +| `accept_roles` | none | `git-gateway` only. Limits CMS access to your defined array of user roles. Omitting this field gives access to all registered users. | +| `branch` | `master` | The branch where published content is stored. All CMS commits and PRs are made to this branch. | +| `api_root` | `https://api.github.com` (GitHub), `https://gitlab.com/api/v4` (GitLab), or `https://api.bitbucket.org/2.0` (Bitbucket) | The API endpoint. Only necessary in certain cases, like with GitHub Enterprise or self-hosted GitLab. | +| `site_domain` | `location.hostname` (or `cms.netlify.com` when on `localhost`) | Sets the `site_id` query param sent to the API endpoint. Non-Netlify auth setups will often need to set this for local development to work properly. | +| `base_url` | `https://api.netlify.com` (GitHub, Bitbucket) or `https://gitlab.com` (GitLab) | OAuth client URL. **Required** when using an external OAuth server or self-hosted GitLab. | +| `auth_endpoint` | `auth` (GitHub, Bitbucket) or `oauth/authorize` (GitLab) | Path to append to `base_url` for authentication requests. Optional. | diff --git a/website/content/docs/beta-features.md b/website/content/docs/beta-features.md index 3775dde8..8b276448 100644 --- a/website/content/docs/beta-features.md +++ b/website/content/docs/beta-features.md @@ -9,7 +9,6 @@ We run new functionality in an open beta format from time to time. That means th **Use these features at your own risk.** ## Custom Mount Element - Netlify CMS always creates it's own DOM element for mounting the application, which means it always takes over the entire page, and is generally inflexible if you're trying to do something creative, like injecting it into a shared context. @@ -19,7 +18,6 @@ as `nc-root`. If Netlify CMS finds an element with this ID during initialization within that element instead of creating it's own. ## Manual Initialization - Netlify CMS can now be manually initialized, rather than automatically loading up the moment you import it. The whole point of this at the moment is to inject configuration into Netlify CMS before it loads, bypassing need for an actual Netlify CMS `config.yml`. This is important, for example, when creating tight integrations with static site generators. Injecting config is technically already possible by setting `window.CMS_CONFIG` before importing/requiring/running Netlify CMS, but most projects are modular and don't want to use globals, plus `window.CMS_CONFIG` is an internal, not technically supported, and provides no validation. @@ -67,7 +65,6 @@ CMS.registerPreviewTemplate(...); ``` ## Raw CSS in `registerPreviewStyle` - `registerPreviewStyle` can now accept a CSS string, in addition to accepting a url. The feature is activated by passing in an object as the second argument, with `raw` set to a truthy value.This is critical for integrating with modern build tooling. Here's an example using webpack: ```js @@ -76,13 +73,12 @@ CMS.registerPreviewTemplate(...); * Takes advantage of the `toString` method in the return value of `css-loader`. */ import CMS from 'netlify-cms'; -import styles from '!css-loader!sass-loader!../main.scss'; +import styles from '!css-loader!sass-loader!../main.scss' -CMS.registerPreviewStyle(styles.toString(), { raw: true }); +CMS.registerPreviewStyle(styles.toString(), { raw: true }) ``` ## Squash merge GitHub pull requests - When using the [Editorial Workflow](/docs/configuration-options/#publish-mode) with the `github` or GitHub-connected `git-gateway` backends, Netlify CMS creates a pull request for each unpublished entry. Every time the unpublished entry is changed and saved, a new commit is added to the pull request. When the entry is published, the pull request is merged, and all of those commits are added to your project commit history in a merge commit. The squash merge option causes all commits to be "squashed" into a single commit when the pull request is merged, and the resulting commit is rebased onto the target branch, avoiding the merge commit altogether. @@ -95,7 +91,6 @@ backend: ``` ## Commit Message Templates - You can customize the templates used by Netlify CMS to generate commit messages by setting the `commit_messages` option under `backend` in your Netlify CMS `config.yml`. Template tags wrapped in curly braces will be expanded to include information about the file changed by the commit. For example, `{{path}}` will include the full path to the file changed. @@ -114,13 +109,13 @@ backend: Netlify CMS generates the following commit types: -| Commit type | When is it triggered? | Available template tags | -| ------------- | ---------------------------- | ---------------------------- | -| `create` | A new entry is created | `slug`, `path`, `collection` | -| `update` | An existing entry is changed | `slug`, `path`, `collection` | -| `delete` | An exising entry is deleted | `slug`, `path`, `collection` | -| `uploadMedia` | A media file is uploaded | `path` | -| `deleteMedia` | A media file is deleted | `path` | +Commit type | When is it triggered? | Available template tags +--------------|------------------------------|----------------------------- +`create` | A new entry is created | `slug`, `path`, `collection` +`update` | An existing entry is changed | `slug`, `path`, `collection` +`delete` | An exising entry is deleted | `slug`, `path`, `collection` +`uploadMedia` | A media file is uploaded | `path` +`deleteMedia` | A media file is deleted | `path` Template tags produce the following output: diff --git a/website/content/docs/collection-types.md b/website/content/docs/collection-types.md index 412b7319..839d226e 100644 --- a/website/content/docs/collection-types.md +++ b/website/content/docs/collection-types.md @@ -20,15 +20,15 @@ Example: ```yaml collections: - - label: 'Blog' - name: 'blog' - folder: '_posts/blog' + - label: "Blog" + name: "blog" + folder: "_posts/blog" create: true fields: - - { label: 'Title', name: 'title', widget: 'string' } - - { label: 'Publish Date', name: 'date', widget: 'datetime' } - - { label: 'Featured Image', name: 'thumbnail', widget: 'image' } - - { label: 'Body', name: 'body', widget: 'markdown' } + - {label: "Title", name: "title", widget: "string"} + - {label: "Publish Date", name: "date", widget: "datetime"} + - {label: "Featured Image", name: "thumbnail", widget: "image"} + - {label: "Body", name: "body", widget: "markdown"} ``` ### Filtered folder collections @@ -37,29 +37,29 @@ The entries for any folder collection can be filtered based on the value of a si The `filter` option requires two fields: -- `field`: the name of the collection field to filter on -- `value`: the desired field value +* `field`: the name of the collection field to filter on +* `value`: the desired field value The example below creates two collections in the same folder, filtered by the `language` field. The first collection includes posts with `language: en`, and the second, with `language: es`. ```yaml collections: - - label: 'Blog in English' - name: 'english_posts' - folder: '_posts' - filter: { field: 'language', value: 'en' } + - label: "Blog in English" + name: "english_posts" + folder: "_posts" + filter: {field: "language", value: "en"} fields: - - { label: 'Language', name: 'language', widget: 'select', options: ['en', 'es'] } - - { label: 'Title', name: 'title', widget: 'string' } - - { label: 'Content', name: 'body', widget: 'markdown' } - - label: 'Blog en EspaΓ±ol' - name: 'spanish_posts' - folder: '_posts' - filter: { field: 'language', value: 'es' } + - {label: "Language", name: "language", widget: "select", options: ["en", "es"]} + - {label: "Title", name: "title", widget: "string"} + - {label: "Content", name: "body", widget: "markdown"} + - label: "Blog en EspaΓ±ol" + name: "spanish_posts" + folder: "_posts" + filter: {field: "language", value: "es"} fields: - - { label: 'Lenguaje', name: 'language', widget: 'select', options: ['en', 'es'] } - - { label: 'Titulo', name: 'title', widget: 'string' } - - { label: 'Contenido', name: 'body', widget: 'markdown' } + - {label: "Lenguaje", name: "language", widget: "select", options: ["en", "es"]} + - {label: "Titulo", name: "title", widget: "string"} + - {label: "Contenido", name: "body", widget: "markdown"} ``` ## File collections @@ -74,32 +74,32 @@ Example: ```yaml collections: - - label: 'Pages' - name: 'pages' + - label: "Pages" + name: "pages" files: - - label: 'About Page' - name: 'about' - file: 'site/content/about.yml' + - label: "About Page" + name: "about" + file: "site/content/about.yml" fields: - - { label: Title, name: title, widget: string } - - { label: Intro, name: intro, widget: markdown } + - {label: Title, name: title, widget: string} + - {label: Intro, name: intro, widget: markdown} - label: Team name: team widget: list fields: - - { label: Name, name: name, widget: string } - - { label: Position, name: position, widget: string } - - { label: Photo, name: photo, widget: image } - - label: 'Locations Page' - name: 'locations' - file: 'site/content/locations.yml' + - {label: Name, name: name, widget: string} + - {label: Position, name: position, widget: string} + - {label: Photo, name: photo, widget: image} + - label: "Locations Page" + name: "locations" + file: "site/content/locations.yml" fields: - - { label: Title, name: title, widget: string } - - { label: Intro, name: intro, widget: markdown } + - {label: Title, name: title, widget: string} + - {label: Intro, name: intro, widget: markdown} - label: Locations name: locations widget: list fields: - - { label: Name, name: name, widget: string } - - { label: Address, name: address, widget: string } + - {label: Name, name: name, widget: string} + - {label: Address, name: address, widget: string} ``` diff --git a/website/content/docs/configuration-options.md b/website/content/docs/configuration-options.md index 23a5a138..0d68a610 100644 --- a/website/content/docs/configuration-options.md +++ b/website/content/docs/configuration-options.md @@ -18,9 +18,10 @@ To see working configuration examples, you can [start from a template](https://w You can find details about all configuration options below. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both. + ## Backend -_This setting is required._ +*This setting is required.* The `backend` option specifies how to access the content for your site, including authentication. Full details and code samples can be found in [Authentication & Backends](https://www.netlifycms.org/docs/authentication-backends). @@ -42,15 +43,16 @@ publish_mode: editorial_workflow From a technical perspective, the workflow translates editor UI actions into common Git commands: -| Actions in Netlify UI ... | Perform these Git actions | -| ------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| Save draft | Commits to a new branch (named according to the pattern `cms/collectionName-entrySlug`), and opens a pull request | -| Edit draft | Pushes another commit to the draft branch/pull request | -| Approve and publish draft | Merges pull request and deletes branch | +Actions in Netlify UI ... | Perform these Git actions +--- | --- +Save draft | Commits to a new branch (named according to the pattern `cms/collectionName-entrySlug`), and opens a pull request +Edit draft | Pushes another commit to the draft branch/pull request +Approve and publish draft | Merges pull request and deletes branch + ## Media and Public Folders -_This setting is required._ +*This setting is required.* Netlify CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site. @@ -61,9 +63,9 @@ Netlify CMS users can upload files to your repository using the Media Gallery. T **Example** -```yaml -media_folder: 'static/images/uploads' -public_folder: '/images/uploads' +``` yaml +media_folder: "static/images/uploads" +public_folder: "/images/uploads" ``` Based on the settings above, if a user used an image widget field called `avatar` to upload and select an image called `philosoraptor.png`, the image would be saved to the repository at `/static/images/uploads/philosoraptor.png`, and the `avatar` field for the file would be set to `/images/uploads/philosoraptor.png`. @@ -91,15 +93,15 @@ The `slug` option allows you to change how filenames for entries are created and **Example** -```yaml +``` yaml slug: - encoding: 'ascii' + encoding: "ascii" clean_accents: true ``` ## Collections -_This setting is required._ +*This setting is required.* The `collections` setting is the heart of your Netlify CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Netlify CMS `config.yml` file. @@ -135,12 +137,13 @@ You may also specify a custom `extension` not included in the list above, as lon - `toml`: parses and saves files as TOML-formatted data files; saves with `toml` extension by default - `json`: parses and saves files as JSON-formatted data files; saves with `json` extension by default - `frontmatter`: parses files and saves files with data frontmatter followed by an unparsed body text (edited using a `body` field); saves with `md` extension by default; default for collections that can't be inferred. Collections with `frontmatter` format (either inferred or explicitly set) can parse files with frontmatter in YAML, TOML, or JSON format. However, they will be saved with YAML frontmatter. -- `yaml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is `---`. -- `toml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is `+++`. -- `json-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is `{` `}`. +- `yaml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is `---`. +- `toml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is `+++`. +- `json-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is `{` `}`. `frontmatter_delimiter`: if you have an explicit frontmatter format declared, this option allows you to specify a custom delimiter like `~~~`. If you need different beginning and ending delimiters, you can use an array like `["(", ")"]`. + ### `slug` For folder collections where users can create new items, the `slug` option specifies a template for generating new filenames based on a file's creation date and `title` field. (This means that all collections with `create: true` must have a `title` field.) @@ -158,7 +161,7 @@ For folder collections where users can create new items, the `slug` option speci **Example:** ```yaml -slug: '{{year}}-{{month}}-{{day}}_{{slug}}' +slug: "{{year}}-{{month}}-{{day}}_{{slug}}" ``` ### `fields` @@ -180,13 +183,13 @@ In files with frontmatter, one field should be named `body`. This special field ```yaml fields: - - label: 'Title' - name: 'title' - widget: 'string' - pattern: ['.{20,}', 'Must have at least 20 characters'] - - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' } - - { label: 'Featured Image', name: 'thumbnail', widget: 'image', required: false } - - { label: 'Body', name: 'body', widget: 'markdown' } + - label: "Title" + name: "title" + widget: "string" + pattern: ['.{20,}', "Must have at least 20 characters"] + - {label: "Layout", name: "layout", widget: "hidden", default: "blog"} + - {label: "Featured Image", name: "thumbnail", widget: "image", required: false} + - {label: "Body", name: "body", widget: "markdown"} ``` ### `editor` @@ -198,6 +201,6 @@ This setting changes options for the editor view of the collection. It has one o **Example:** ```yaml -editor: - preview: false + editor: + preview: false ``` diff --git a/website/content/docs/contributor-guide.md b/website/content/docs/contributor-guide.md index 6e076c3e..56f54851 100644 --- a/website/content/docs/contributor-guide.md +++ b/website/content/docs/contributor-guide.md @@ -8,8 +8,8 @@ We're hoping that Netlify CMS will do for the [JAMstack](https://www.jamstack.or While we work on building this page (and you can help!), here are some links with more information about getting involved: -- [Setup instructions and Contribution Guidelines](https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md) -- [Join us on Gitter](https://gitter.im/netlify/NetlifyCMS) -- [Code of Conduct](https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md) -- [Project Milestones](https://github.com/netlify/netlify-cms/milestones) -- [Good First Issues](https://github.com/netlify/netlify-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22+-label%3Aclaimed) +* [Setup instructions and Contribution Guidelines](https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md) +* [Join us on Gitter](https://gitter.im/netlify/NetlifyCMS) +* [Code of Conduct](https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md) +* [Project Milestones](https://github.com/netlify/netlify-cms/milestones) +* [Good First Issues](https://github.com/netlify/netlify-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22+-label%3Aclaimed) diff --git a/website/content/docs/custom-widgets.md b/website/content/docs/custom-widgets.md index 8e4507a7..b13ebeea 100644 --- a/website/content/docs/custom-widgets.md +++ b/website/content/docs/custom-widgets.md @@ -6,8 +6,8 @@ group: guides The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Netify CMS as an npm module. The available widget extension methods are: -- **registerWidget:** lets you register a custom widget. -- **registerEditorComponent:** lets you add a block component to the Markdown editor. +* **registerWidget:** lets you register a custom widget. +* **registerEditorComponent:** lets you add a block component to the Markdown editor. ### Writing React Components inline @@ -30,17 +30,17 @@ CMS.registerWidget(name, control, [preview]); **Params:** -| Param | Type | Description | -| ----------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config | -| `control` | `React.Component` or `string` | | -| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: | +| Param | Type | Description | +| ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config | +| `control` | `React.Component` or `string`| | +| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: | -- **field:** The field type that this widget will be used for. -- **control:** A React component that renders the editing interface for this field. Two props will be passed: - - **value:** The current value for this field. - - **onChange:** Callback function to update the field value. -- **preview (optional):** A React component that renders the preview of how the content will look. A `value` prop will be passed to this component. +* **field:** The field type that this widget will be used for. +* **control:** A React component that renders the editing interface for this field. Two props will be passed: + * **value:** The current value for this field. + * **onChange:** Callback function to update the field value. +* **preview (optional):** A React component that renders the preview of how the content will look. A `value` prop will be passed to this component. **Example:** @@ -77,12 +77,12 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview); Register a block level component for the Markdown editor: ```js -CMS.registerEditorComponent(definition); +CMS.registerEditorComponent(definition) ``` **Params** -- **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview +* **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview **Example:** @@ -133,38 +133,38 @@ With custom widgets, the widget control can also optionally implement an `isVali No errors: ```javascript -isValid = () => { - // Do internal validation - return true; -}; + isValid = () => { + // Do internal validation + return true; + }; ``` Existing error: ```javascript -isValid = () => { - // Do internal validation - return false; -}; + isValid = () => { + // Do internal validation + return false; + }; ``` **Object with `error` (useful for returning custom error messages)** Existing error: ```javascript -isValid = () => { - // Do internal validation - return { error: 'Your error message.' }; -}; + isValid = () => { + // Do internal validation + return { error: 'Your error message.' }; + }; ``` **Promise** You can also return a promise from `isValid`. While the promise is pending, the widget will be marked as "in error". When the promise resolves, the error is automatically cleared. ```javascript -isValid = () => { - return this.existingPromise; -}; + isValid = () => { + return this.existingPromise; + }; ``` Note: Do not create a promise inside `isValid` - `isValid` is called right before trying to persist. This means that even if a previous promise was already resolved, when the user hits 'save', `isValid` will be called again. If it returns a new promise, it will be immediately marked as "in error" until the new promise resolves. diff --git a/website/content/docs/customization.md b/website/content/docs/customization.md index 6cb87e1d..0d7a1176 100644 --- a/website/content/docs/customization.md +++ b/website/content/docs/customization.md @@ -6,8 +6,8 @@ group: guides 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: -- **registerPreviewStyle:** Register a custom stylesheet to use on the preview pane. -- **registerPreviewTemplate:** Registers a template for a collection. +* **registerPreviewStyle:** Register a custom stylesheet to use on the preview pane. +* **registerPreviewTemplate:** Registers a template for a collection. Explore the [NetlifyCMS GitHub example](https://github.com/netlify/netlify-cms/blob/9ced3f16c8bcc3d1a36773b126842d023c589eaf/example/index.html#L90-L91), a working example you can review on GitHub. @@ -25,7 +25,7 @@ CMS.registerPreviewStyle(file); **Params:** -- **file:** css file path +* **file:** css file path **Example:** @@ -60,13 +60,12 @@ Registers a template for a collection. **Params:** -- collection: The name of the collection which this preview component will be used for. -- react_component: A React component that renders the collection data. Four 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. +* collection: The name of the collection which this preview component will be used for. +* react_component: A React component that renders the collection data. Four 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 @@ -88,9 +87,7 @@ Registers a template for a collection. CMS.registerPreviewTemplate("posts", PostPreview); ``` - ### 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 @@ -99,7 +96,6 @@ Registers a template for a collection. 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 ``` - **Object Example:** - ```html ``` - ### Accessing Metadata - - Preview Components also receive an additional prop: `fieldsMetaData`. It contains aditional information (besides the plain plain textual value of each field) that can be useful for preview purposes. + Preview Components also receive an additional prop: `fieldsMetaData`. It contains aditional information (besides the plain plain textual value of each field) that can be useful for preview purposes. For example, the Relation widget passes the whole selected relation data in `fieldsMetaData`. - ```js export default class ArticlePreview extends React.Component { render() { - const { entry, fieldsMetaData } = this.props; + const {entry, fieldsMetaData} = this.props; const author = fieldsMetaData.getIn(['authors', data.author]); - return ( -
-

{entry.getIn(['data', 'title'])}

- {author && } -
- ); + return

{ entry.getIn(['data', 'title']) }

+ {author &&} +
} } ``` diff --git a/website/content/docs/examples.md b/website/content/docs/examples.md index 9a05dceb..bf47c32f 100644 --- a/website/content/docs/examples.md +++ b/website/content/docs/examples.md @@ -6,10 +6,10 @@ group: start Do you have a great, open source example? Submit a pull request to this page! -| Example | Tools | Type | Source | More info | -| ------------------------------------------------------ | ----------- | ---- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| [This Developing Journey](https://briandouglas.me) | middleman | blog | [bdougie/blog](https://github.com/bdougie/blog) | [blog post](https://www.netlify.com/blog/2017/04/20/creating-a-blog-with-middleman-and-netlify-cms/) | -| [JAMstack Recipes](https://jamstack-cms.netlify.com) | Hugo, Azure | demo | [hlaueriksson/jamstack-cms](https://github.com/hlaueriksson/jamstack-cms) | [blog post](http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/) | -| [The Ragasirtahk Blog](https://www.ragasirtahk.tk/) | Hugo | blog | [ragasirtahk/the-ragasirtahk-blog](https://github.com/ragasirtahk/the-ragasirtahk-blog) | [blog post](https://www.ragasirtahk.tk/2018/01/setting-up-netlify-cms-on-hugo/) | -| [Forest Garden Wales](https://www.forestgarden.wales/) | Hugo | blog | [forestgardenwales/forestgarden.wales](https://github.com/forestgardenwales/forestgarden.wales) | [blog post](https://www.forestgarden.wales/blog/now-using-netlify-cms/) | -| [Cup of Data](https://www.cupofdata.com/blog) | Gatsby | blog | [cupofdata/cupofdata.com](https://github.com/cupofdata/cupofdata.com) | - | +Example | Tools | Type | Source | More info | +--- | --- | --- | --- | --- +[This Developing Journey](https://briandouglas.me) | middleman | blog | [bdougie/blog](https://github.com/bdougie/blog) | [blog post](https://www.netlify.com/blog/2017/04/20/creating-a-blog-with-middleman-and-netlify-cms/) +[JAMstack Recipes](https://jamstack-cms.netlify.com) | Hugo, Azure | demo | [hlaueriksson/jamstack-cms](https://github.com/hlaueriksson/jamstack-cms) | [blog post](http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/) +[The Ragasirtahk Blog](https://www.ragasirtahk.tk/) | Hugo | blog | [ragasirtahk/the-ragasirtahk-blog](https://github.com/ragasirtahk/the-ragasirtahk-blog) | [blog post](https://www.ragasirtahk.tk/2018/01/setting-up-netlify-cms-on-hugo/) +[Forest Garden Wales](https://www.forestgarden.wales/) | Hugo | blog | [forestgardenwales/forestgarden.wales](https://github.com/forestgardenwales/forestgarden.wales) | [blog post](https://www.forestgarden.wales/blog/now-using-netlify-cms/) +[Cup of Data](https://www.cupofdata.com/blog) | Gatsby | blog | [cupofdata/cupofdata.com](https://github.com/cupofdata/cupofdata.com) | - diff --git a/website/content/docs/intro.md b/website/content/docs/intro.md index e9bc8068..e6efc807 100755 --- a/website/content/docs/intro.md +++ b/website/content/docs/intro.md @@ -8,12 +8,13 @@ Netlify CMS is an open source content management system for your Git workflow th At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including: -- **Fast, web-based UI:** with rich-text editing, real-time preview, and drag-and-drop media uploads. -- **Platform agnostic:** works with most static site generators. -- **Easy installation:** add two files to your site and hook up the backend by including in your build process or linking to our CDN. -- **Modern authentication:** using GitHub, GitLab, or Bitbucket and JSON web tokens. -- **Flexible content types:** specify an unlimited number of content types with custom fields. -- **Fully extensible:** create custom-styled previews, UI widgets, and editor plugins. +* **Fast, web-based UI:** with rich-text editing, real-time preview, and drag-and-drop media uploads. +* **Platform agnostic:** works with most static site generators. +* **Easy installation:** add two files to your site and hook up the backend by including in your build process or linking to our CDN. +* **Modern authentication:** using GitHub, GitLab, or Bitbucket and JSON web tokens. +* **Flexible content types:** specify an unlimited number of content types with custom fields. +* **Fully extensible:** create custom-styled previews, UI widgets, and editor plugins. + ## Find out more diff --git a/website/content/docs/start-with-a-template.md b/website/content/docs/start-with-a-template.md index f172b304..7f971d33 100644 --- a/website/content/docs/start-with-a-template.md +++ b/website/content/docs/start-with-a-template.md @@ -25,11 +25,11 @@ After clicking one of those buttons, you’ll authenticate with GitHub or GitLab 1. The template deploy process will send you an invitation to your new site, sent from `no-reply@netlify.com`. - ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](https://www.netlifycms.org/img/email-subject.png?raw=true) + ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](https://www.netlifycms.org/img/email-subject.png?raw=true) 2. Click the link to accept the invite, and you’ll be directed to your site, with a prompt to create a password. - !["Complete your signup" modal on the Kaldi coffee site](https://www.netlifycms.org/img/create-password.png?raw=true) + !["Complete your signup" modal on the Kaldi coffee site](https://www.netlifycms.org/img/create-password.png?raw=true) 3. Enter a password, sign in, and you’ll be directed straight to the CMS. (For future visits, you can go straight to `/admin/`.) diff --git a/website/content/docs/update-the-cms-version.md b/website/content/docs/update-the-cms-version.md index cd35917c..b6650ae9 100644 --- a/website/content/docs/update-the-cms-version.md +++ b/website/content/docs/update-the-cms-version.md @@ -15,12 +15,11 @@ If you are using a package manager like Yarn or NPM, you will use their standard If you are using the CMS through a CDN like Unpkg, then that depends on the version tag you are using. You can find the version tag you are using in the `/admin/index.html` file of your site. - (Recommended) If you use `^2.0.0`, the CMS will do all updates except major versions automatically. - - - It will upgrade to `2.0.1`, `2.1.0`, `2.1.2`. - - It will not upgrade to `3.0.0` or higher. - - It will not upgrade to beta versions. + - It will upgrade to `2.0.1`, `2.1.0`, `2.1.2`. + - It will not upgrade to `3.0.0` or higher. + - It will not upgrade to beta versions. - If you use `~2.0.0`, the CMS will do only patch updates automatically. - - It will upgrade `2.0.1`, `2.0.2`. - - It will not upgrade to `2.1.0` or higher. - - It will not upgrade beta versions. + - It will upgrade `2.0.1`, `2.0.2`. + - It will not upgrade to `2.1.0` or higher. + - It will not upgrade beta versions. diff --git a/website/content/docs/widgets/boolean.md b/website/content/docs/widgets/boolean.md index 464fb2f7..6065277f 100644 --- a/website/content/docs/widgets/boolean.md +++ b/website/content/docs/widgets/boolean.md @@ -1,5 +1,5 @@ --- -label: 'Boolean' +label: "Boolean" target: boolean --- @@ -12,5 +12,5 @@ The boolean widget translates a toggle switch input to a true/false value. - `default`: accepts `true` or `false`; defaults to `false` - **Example:** ```yaml - - { label: 'Draft', name: 'draft', widget: 'boolean', default: true } + - {label: "Draft", name: "draft", widget: "boolean", default: true} ``` diff --git a/website/content/docs/widgets/date.md b/website/content/docs/widgets/date.md index c4a71896..8d0a0c21 100644 --- a/website/content/docs/widgets/date.md +++ b/website/content/docs/widgets/date.md @@ -1,5 +1,5 @@ --- -label: 'Date' +label: "Date" target: date --- @@ -13,9 +13,9 @@ The date widget translates a date picker input to a date string. For saving date - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format) - **Example:** ```yaml - - label: 'Birthdate' - name: 'birthdate' - widget: 'date' - default: '' - format: 'MMM Do YY' + - label: "Birthdate" + name: "birthdate" + widget: "date" + default: "" + format: "MMM Do YY" ``` diff --git a/website/content/docs/widgets/datetime.md b/website/content/docs/widgets/datetime.md index 2bac64c1..dec92641 100644 --- a/website/content/docs/widgets/datetime.md +++ b/website/content/docs/widgets/datetime.md @@ -1,5 +1,5 @@ --- -label: 'DateTime' +label: "DateTime" target: datetime --- @@ -13,9 +13,9 @@ The datetime widget translates a datetime picker to a datetime string. For savin - `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format) - **Example:** ```yaml - - label: 'Start time' - name: 'start' - widget: 'datetime' - default: '' - format: 'LLL' + - label: "Start time" + name: "start" + widget: "datetime" + default: "" + format: "LLL" ``` diff --git a/website/content/docs/widgets/file.md b/website/content/docs/widgets/file.md index 49aa4a23..71b1df18 100644 --- a/website/content/docs/widgets/file.md +++ b/website/content/docs/widgets/file.md @@ -1,5 +1,5 @@ --- -label: 'File' +label: "File" target: file --- @@ -12,8 +12,8 @@ The file widget allows editors to upload a file or select an existing one from t - `default`: accepts a file path string; defaults to null - **Example:** ```yaml - - label: 'Manual PDF' - name: 'manual_pdf' - widget: 'file' - default: '/uploads/general-manual.pdf' + - label: "Manual PDF" + name: "manual_pdf" + widget: "file" + default: "/uploads/general-manual.pdf" ``` diff --git a/website/content/docs/widgets/hidden.md b/website/content/docs/widgets/hidden.md index 53e71315..4f4c0129 100644 --- a/website/content/docs/widgets/hidden.md +++ b/website/content/docs/widgets/hidden.md @@ -1,5 +1,5 @@ --- -label: 'Hidden' +label: "Hidden" target: hidden --- @@ -8,9 +8,9 @@ Hidden widgets do not display in the UI. In folder collections that allow users - **Name:** `hidden` - **UI:** none - **Data type:** any valid data type -- **Options:** +- **Options:** - `default`: accepts any valid data type; recommended for collections that allow adding new items - **Example:** ```yaml - - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' } + - {label: "Layout", name: "layout", widget: "hidden", default: "blog"} ``` diff --git a/website/content/docs/widgets/image.md b/website/content/docs/widgets/image.md index 9d04784c..b97510aa 100644 --- a/website/content/docs/widgets/image.md +++ b/website/content/docs/widgets/image.md @@ -1,5 +1,5 @@ --- -label: 'Image' +label: "Image" target: image --- @@ -12,8 +12,8 @@ The image widget allows editors to upload an image or select an existing one fro - `default`: accepts a file path string; defaults to null - **Example:** ```yaml - - label: 'Featured Image' - name: 'thumbnail' - widget: 'image' - default: '/uploads/chocolate-dogecoin.jpg' + - label: "Featured Image" + name: "thumbnail" + widget: "image" + default: "/uploads/chocolate-dogecoin.jpg" ``` diff --git a/website/content/docs/widgets/index.md b/website/content/docs/widgets/index.md index 10bcefc9..6a5be93b 100644 --- a/website/content/docs/widgets/index.md +++ b/website/content/docs/widgets/index.md @@ -10,19 +10,19 @@ Widgets are specified as collection fields in the Netlify CMS `config.yml` file. To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/netlify/netlify-cms/blob/master/packages/netlify-cms/example/config.yml) to see how each field was configured. + ## Common widget options The following options are available on all fields: - `required`: specify as `false` to make a field optional; defaults to `true` - `pattern`: add field validation by specifying a list with a [regex pattern](https://regexr.com/) and an error message; more extensive validation can be achieved with [custom widgets](https://www.netlifycms.org/docs/custom-widgets/#advanced-field-validation) - - **Example:** ```yaml - - label: 'Title' - name: 'title' - widget: 'string' - pattern: ['.{12,}', 'Must have at least 12 characters'] + - label: "Title" + name: "title" + widget: "string" + pattern: [".{12,}", "Must have at least 12 characters"] ``` ## Default widgets diff --git a/website/content/docs/widgets/list.md b/website/content/docs/widgets/list.md index a35ef072..500a4da9 100644 --- a/website/content/docs/widgets/list.md +++ b/website/content/docs/widgets/list.md @@ -1,5 +1,5 @@ --- -label: 'List' +label: "List" target: list --- @@ -15,38 +15,38 @@ The list widget allows you to create a repeatable item in the UI which saves as - `fields`: a nested list of multiple widget fields to be included in each repeatable iteration - **Example** (`field`/`fields` not specified): ```yaml - - label: 'Tags' - name: 'tags' - widget: 'list' - default: ['news'] + - label: "Tags" + name: "tags" + widget: "list" + default: ["news"] ``` - **Example** (`allow_add` marked `false`): ```yaml - - label: 'Tags' - name: 'tags' - widget: 'list' + - label: "Tags" + name: "tags" + widget: "list" allow_add: false - default: ['news'] + default: ["news"] ``` - **Example** (with `field`): ```yaml - - label: 'Gallery' - name: 'galleryImages' - widget: 'list' + - label: "Gallery" + name: "galleryImages" + widget: "list" field: - - { label: Image, name: image, widget: image } + - {label: Image, name: image, widget: image} ``` - **Example** (with `fields`): ```yaml - - label: 'Testimonials' - name: 'testimonials' - widget: 'list' + - label: "Testimonials" + name: "testimonials" + widget: "list" fields: - - { label: Quote, name: quote, widget: string, default: 'Everything is awesome!' } + - {label: Quote, name: quote, widget: string, default: "Everything is awesome!"} - label: Author name: author widget: object fields: - - { label: Name, name: name, widget: string, default: 'Emmet' } - - { label: Avatar, name: avatar, widget: image, default: '/img/emmet.jpg' } + - {label: Name, name: name, widget: string, default: "Emmet"} + - {label: Avatar, name: avatar, widget: image, default: "/img/emmet.jpg"} ``` diff --git a/website/content/docs/widgets/markdown.md b/website/content/docs/widgets/markdown.md index b0734dc6..23692b02 100644 --- a/website/content/docs/widgets/markdown.md +++ b/website/content/docs/widgets/markdown.md @@ -1,11 +1,11 @@ --- -label: 'Markdown' +label: "Markdown" target: markdown --- The markdown widget provides a full fledged text editor - which is based on [slate](https://github.com/ianstormtaylor/slate) - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch. -_Please note:_ in case you want to use your markdown editor to fill a markdown's file content after the frontmatter, you'll have name the field as `body` so then the CMS can recognize it and save the file accordingly. +*Please note:* in case you want to use your markdown editor to fill a markdown's file content after the frontmatter, you'll have name the field as `body` so then the CMS can recognize it and save the file accordingly. - **Name:** `markdown` - **UI:** full text editor @@ -15,7 +15,7 @@ _Please note:_ in case you want to use your markdown editor to fill a markdown's - `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`. - **Example:** ```yaml - - { label: 'Blog post content', name: 'body', widget: 'markdown' } + - {label: "Blog post content", name: "body", widget: "markdown"} ``` This would render as: ![Markdown widget example](/img/widgets-markdown.png) diff --git a/website/content/docs/widgets/number.md b/website/content/docs/widgets/number.md index 10984ff1..7436b007 100644 --- a/website/content/docs/widgets/number.md +++ b/website/content/docs/widgets/number.md @@ -1,5 +1,5 @@ --- -label: 'Number' +label: "Number" target: number --- @@ -15,11 +15,11 @@ The number widget uses an HTML number input, saving the value as a string, integ - `max`: accepts a number for maximum value accepted; unset by default - **Example:** ```yaml - - label: 'Puppy Count' - name: 'puppies' - widget: 'number' + - label: "Puppy Count" + name: "puppies" + widget: "number" default: 2 - valueType: 'int' + valueType: "int" min: 1 max: 101 ``` diff --git a/website/content/docs/widgets/object.md b/website/content/docs/widgets/object.md index 8852dad7..bfef0453 100644 --- a/website/content/docs/widgets/object.md +++ b/website/content/docs/widgets/object.md @@ -1,5 +1,5 @@ --- -label: 'Object' +label: "Object" target: object --- @@ -13,22 +13,22 @@ The object widget allows you to group multiple widgets together, nested under a - `fields`: (**required**) a nested list of widget fields to include in your widget - **Example:** ```yaml - - label: 'Profile' - name: 'profile' - widget: 'object' + - label: "Profile" + name: "profile" + widget: "object" fields: - - { label: 'Public', name: 'public', widget: 'boolean', default: true } - - { label: 'Name', name: 'name', widget: 'string' } - - label: 'Birthdate' - name: 'birthdate' - widget: 'date' - default: '' - format: 'MM/DD/YYYY' - - label: 'Address' - name: 'address' - widget: 'object' - fields: - - { label: 'Street Address', name: 'street', widget: 'string' } - - { label: 'City', name: 'city', widget: 'string' } - - { label: 'Postal Code', name: 'post-code', widget: 'string' } + - {label: "Public", name: "public", widget: "boolean", default: true} + - {label: "Name", name: "name", widget: "string"} + - label: "Birthdate" + name: "birthdate" + widget: "date" + default: "" + format: "MM/DD/YYYY" + - label: "Address" + name: "address" + widget: "object" + fields: + - {label: "Street Address", name: "street", widget: "string"} + - {label: "City", name: "city", widget: "string"} + - {label: "Postal Code", name: "post-code", widget: "string"} ``` diff --git a/website/content/docs/widgets/relation.md b/website/content/docs/widgets/relation.md index 6715e595..20fe303d 100644 --- a/website/content/docs/widgets/relation.md +++ b/website/content/docs/widgets/relation.md @@ -1,5 +1,5 @@ --- -label: 'Relation' +label: "Relation" target: relation --- @@ -16,12 +16,12 @@ The relation widget allows you to reference items from another collection. It pr - `valueField`: (**required**) name of the field from the referenced collection whose value will be stored for the relation - **Example** (assuming a separate "authors" collection with "name" and "twitterHandle" fields): ```yaml - - label: 'Post Author' - name: 'author' - widget: 'relation' - collection: 'authors' - searchFields: ['name', 'twitterHandle'] - valueField: 'name' - displayFields: ['twitterHandle', 'followerCount'] + - label: "Post Author" + name: "author" + widget: "relation" + collection: "authors" + searchFields: ["name", "twitterHandle"] + valueField: "name" + displayFields: ["twitterHandle", "followerCount"] ``` The generated UI input will search the authors collection by name and twitterHandle, and display each author's handle and follower count. On selection, the author name will be saved for the field. diff --git a/website/content/docs/widgets/select.md b/website/content/docs/widgets/select.md index e9d3e1ac..208d1257 100644 --- a/website/content/docs/widgets/select.md +++ b/website/content/docs/widgets/select.md @@ -1,5 +1,5 @@ --- -label: 'Select' +label: "Select" target: select --- @@ -11,22 +11,23 @@ The select widget allows you to pick a single string value from a dropdown menu. - **Options:** - `default`: accepts a string; defaults to an empty string - `options`: (**required**) a list of options for the dropdown menu; can be listed in two ways: - - string values: the label displayed in the dropdown is the value saved in the file - - object with `label` and `value` fields: the label displays in the dropdown; the value is saved in the file + - string values: the label displayed in the dropdown is the value saved in the file + - object with `label` and `value` fields: the label displays in the dropdown; the value is saved in the file - **Example** (options as strings): ```yaml - - label: 'Align Content' - name: 'align' - widget: 'select' - options: ['left', 'center', 'right'] + - label: "Align Content" + name: "align" + widget: "select" + options: ["left", "center", "right"] ``` - **Example** (options as objects): ```yaml - - label: 'City' - name: 'airport-code' - widget: 'select' + - label: "City" + name: "airport-code" + widget: "select" options: - - { label: 'Chicago', value: 'ORD' } - - { label: 'Paris', value: 'CDG' } - - { label: 'Tokyo', value: 'HND' } + - { label: "Chicago", value: "ORD" } + - { label: "Paris", value: "CDG" } + - { label: "Tokyo", value: "HND" } ``` + diff --git a/website/content/docs/widgets/string.md b/website/content/docs/widgets/string.md index 93e2002c..dd47838f 100644 --- a/website/content/docs/widgets/string.md +++ b/website/content/docs/widgets/string.md @@ -1,5 +1,5 @@ --- -label: 'String' +label: "String" target: string --- @@ -12,5 +12,5 @@ The string widget translates a basic text input to a string value. For larger te - `default`: accepts a string; defaults to an empty string - **Example:** ```yaml - - { label: 'Title', name: 'title', widget: 'string' } + - {label: "Title", name: "title", widget: "string"} ``` diff --git a/website/content/docs/widgets/text.md b/website/content/docs/widgets/text.md index c7715ca6..fc89707a 100644 --- a/website/content/docs/widgets/text.md +++ b/website/content/docs/widgets/text.md @@ -1,5 +1,5 @@ --- -label: 'Text' +label: "Text" target: text --- @@ -12,5 +12,5 @@ The text widget takes a multiline text field and saves it as a string. For short - `default`: accepts a string; defaults to an empty string - **Example:** ```yaml - - { label: 'Description', name: 'description', widget: 'text' } + - {label: "Description", name: "description", widget: "text"} ``` diff --git a/website/content/pages/community.md b/website/content/pages/community.md index 1d75a9f8..3561904b 100644 --- a/website/content/pages/community.md +++ b/website/content/pages/community.md @@ -2,16 +2,13 @@ title: Community headline: Be a part of building the CMS of the future. -subhead: - We’re serious about being community driven, so everyone is welcome to join the [community chat](https://gitter.im/netlify/NetlifyCMS), and to be a part of our bi-weekly planning sessions (details below). -primarycta: - '[Register on Eventbrite β†’](https://www.eventbrite.com/e/netlify-cms-planning-session-bi-weekly-tickets-35794058994)' +subhead: We’re serious about being community driven, so everyone is welcome to join the [community chat](https://gitter.im/netlify/NetlifyCMS), and to be a part of our bi-weekly planning sessions (details below). +primarycta: "[Register on Eventbrite β†’](https://www.eventbrite.com/e/netlify-cms-planning-session-bi-weekly-tickets-35794058994)" upcomingevent: hook: The next development planning session is on -howitworks: - Every other week we have public development planning sessions. They're web based, last about an hour, and are geared toward contributors and those interested in contributing. Sessions currently take place every other Wednesday, 9am - 10am PT. +howitworks: Every other week we have public development planning sessions. They're web based, last about an hour, and are geared toward contributors and those interested in contributing. Sessions currently take place every other Wednesday, 9am - 10am PT. howtojoin: | **On the web:** diff --git a/website/data/global.yaml b/website/data/global.yaml index 9ce2adc4..e5addedc 100644 --- a/website/data/global.yaml +++ b/website/data/global.yaml @@ -1,6 +1,6 @@ footer: buttons: - - name: 'Twitter' - url: 'https://twitter.com/netlifycms' - - name: 'GitHub' - url: 'https://github.com/netlify/netlify-cms' + - name: "Twitter" + url: "https://twitter.com/netlifycms" + - name: "GitHub" + url: "https://github.com/netlify/netlify-cms" diff --git a/website/data/landing.yaml b/website/data/landing.yaml index 8bcac2ca..460899c2 100644 --- a/website/data/landing.yaml +++ b/website/data/landing.yaml @@ -1,52 +1,41 @@ hero: - headline: 'Open source content management for your Git workflow' - subhead: - 'Use Netlify CMS with any static site generator for a faster and more flexible web project' + headline: "Open source content management for your Git workflow" + subhead: "Use Netlify CMS with any static site generator for a faster and more flexible web project" devfeatures: - - feature: 'Static + content management = β™₯' - description: - 'Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.' - - feature: 'An integrated part of your Git workflow' - description: - 'Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.' - - feature: 'An extensible CMS built on React' - description: - 'Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs.' + - feature: "Static + content management = β™₯" + description: "Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content." + - feature: "An integrated part of your Git workflow" + description: "Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git." + - feature: "An extensible CMS built on React" + description: "Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs." cta: - primaryhook: 'Getting started is simple and free.' - primary: - 'Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click.' - button: '[Get started](/docs/start-with-a-template/)' + primaryhook: "Getting started is simple and free." + primary: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click." + button: "[Get started](/docs/start-with-a-template/)" editors: - hook: 'A CMS that developers and content editors can agree on' - intro: - 'You get to implement modern front end tools to deliver a faster, safer, and more scalable site. Editors get a friendly UI and intuitive workflow that meets their content management requirements.' + hook: "A CMS that developers and content editors can agree on" + intro: "You get to implement modern front end tools to deliver a faster, safer, and more scalable site. Editors get a friendly UI and intuitive workflow that meets their content management requirements." features: - - feature: 'Editor-friendly user interface' - description: - 'The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads.' - imgpath: 'feature-editor.svg' - - feature: 'Intuitive workflow for content teams' - description: - 'Writers and editors can easily manage content from draft to review to publish across any number of custom content types.' - imgpath: 'feature-workflow.svg' - - feature: 'Instant access without GitHub account' - description: - 'With [Git Gateway](/docs/authentication-backends/#git-gateway-with-netlify-identity), you can add CMS access for any team member β€” even if they don’t have a GitHub account. ' - imgpath: 'feature-access.svg' + - feature: "Editor-friendly user interface" + description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads." + imgpath: "feature-editor.svg" + - feature: "Intuitive workflow for content teams" + description: "Writers and editors can easily manage content from draft to review to publish across any number of custom content types." + imgpath: "feature-workflow.svg" + - feature: "Instant access without GitHub account" + description: "With [Git Gateway](/docs/authentication-backends/#git-gateway-with-netlify-identity), you can add CMS access for any team member β€” even if they don’t have a GitHub account. " + imgpath: "feature-access.svg" community: - hook: 'Supported by a growing community' + hook: "Supported by a growing community" features: - - feature: 'Built on the JAMstack' - description: - 'Netlify CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the JAMstack on [jamstack.org](https://jamstack.org).' - - feature: 'Support when you need it' - description: - 'Get up and running with comprehensive [documentation](/docs) and templates or work through difficult problems with help from the community on [Gitter](https://gitter.im/netlify/NetlifyCMS).' - - feature: 'A community-driven project you can help evolve' - description: - 'Netlify CMS is built by a community of more than 100 contributors β€” and you can help. Join our [bi-weekly planning sessions](/community) or read the [contributing guide](/docs/contributor-guide) to join in.' - contributors: 'Made possible by awesome contributors' + - feature: "Built on the JAMstack" + description: "Netlify CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the JAMstack on [jamstack.org](https://jamstack.org)." + - feature: "Support when you need it" + description: "Get up and running with comprehensive [documentation](/docs) and templates or work through difficult problems with help from the community on [Gitter](https://gitter.im/netlify/NetlifyCMS)." + - feature: "A community-driven project you can help evolve" + description: "Netlify CMS is built by a community of more than 100 contributors β€” and you can help. Join our [bi-weekly planning sessions](/community) or read the [contributing guide](/docs/contributor-guide) to join in." + contributors: "Made possible by awesome contributors" + diff --git a/website/data/notifications.yml b/website/data/notifications.yml index 3811d56e..8b54ffb9 100644 --- a/website/data/notifications.yml +++ b/website/data/notifications.yml @@ -1,29 +1,28 @@ notifications: - - loud: true - message: >- - Register to join us online for our next community dev meeting, every other - Wednesday at 9am-10am PT! - published: false - title: Netlify CMS Development Planning Sessions Promo - url: >- - https://www.eventbrite.com/e/netlify-cms-planning-session-bi-weekly-tickets-35794058994 - - loud: true - message: >- - We have a community on Gitter - join now to ask questions and discuss the - project with other devs! - published: false - title: Gitter shoutout - url: 'https://gitter.im/netlify/netlifycms' - - loud: true - message: >- - Netlify CMS now supports GitLab! - published: false - title: GitLab announcement - url: '/blog/2018/06/netlify-cms-now-supports-gitlab-as-a-backend/' - - loud: true - message: >- - Announcing 2.0 - Bitbucket support and monorepo architecture! - published: true - title: 2.0 announcement - url: - '/blog/2018/07/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture' +- loud: true + message: >- + Register to join us online for our next community dev meeting, every other + Wednesday at 9am-10am PT! + published: false + title: Netlify CMS Development Planning Sessions Promo + url: >- + https://www.eventbrite.com/e/netlify-cms-planning-session-bi-weekly-tickets-35794058994 +- loud: true + message: >- + We have a community on Gitter - join now to ask questions and discuss the + project with other devs! + published: false + title: Gitter shoutout + url: 'https://gitter.im/netlify/netlifycms' +- loud: true + message: >- + Netlify CMS now supports GitLab! + published: false + title: GitLab announcement + url: '/blog/2018/06/netlify-cms-now-supports-gitlab-as-a-backend/' +- loud: true + message: >- + Announcing 2.0 - Bitbucket support and monorepo architecture! + published: true + title: 2.0 announcement + url: '/blog/2018/07/netlify-cms-2-0-launches-with-bitbucket-support-and-a-new-monorepo-architecture' diff --git a/website/static/admin/config.yml b/website/static/admin/config.yml index 8896bcdc..622aa6c3 100644 --- a/website/static/admin/config.yml +++ b/website/static/admin/config.yml @@ -6,36 +6,31 @@ backend: publish_mode: editorial_workflow -media_folder: 'website/static/img' # Folder where user uploaded files should go -public_folder: 'img' +media_folder: "website/static/img" # Folder where user uploaded files should go +public_folder: "img" collections: # A list of collections the CMS should be able to edit - - name: 'docs' # Used in routes, ie.: /admin/collections/:slug/edit - label: 'Docs' # Used in the UI, ie.: "New Post" - folder: 'website/content/docs' # The path to the folder where the documents are stored + - name: "docs" # Used in routes, ie.: /admin/collections/:slug/edit + label: "Docs" # Used in the UI, ie.: "New Post" + folder: "website/content/docs" # The path to the folder where the documents are stored create: true # Allow users to create new documents in this collection fields: # The fields each document in this collection have - - { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' } - - { label: 'Group', name: 'group', widget: 'string' } - - { label: 'Weight', name: 'weight', widget: 'number' } - - { label: 'Body', name: 'body', widget: 'markdown' } - - name: 'blog' - label: 'Blog' - label_singular: 'Post' - folder: 'website/site/content/blog' + - {label: "Title", name: "title", widget: "string", tagname: "h1"} + - {label: "Group", name: "group", widget: "string"} + - {label: "Weight", name: "weight", widget: "number"} + - {label: "Body", name: "body", widget: "markdown"} + - name: "blog" + label: "Blog" + label_singular: "Post" + folder: "website/site/content/blog" create: true fields: - - { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' } - - { label: 'Author', name: 'author', widget: 'string' } - - { label: 'Description (for blog list)', name: 'description', widget: 'text' } - - { - label: 'Meta Description (defaults to Description)', - name: 'meta_description', - widget: 'text', - required: false, - } - - { label: 'Date', name: 'date', widget: 'date' } - - { label: 'Body', name: 'body', widget: 'markdown' } + - {label: "Title", name: "title", widget: "string", tagname: "h1"} + - {label: "Author", name: "author", widget: "string"} + - {label: "Description (for blog list)", name: "description", widget: "text"} + - {label: "Meta Description (defaults to Description)", name: "meta_description", widget: "text", required: false} + - {label: "Date", name: "date", widget: "date"} + - {label: "Body", name: "body", widget: "markdown"} - name: updates label: Updates files: @@ -47,9 +42,9 @@ collections: # A list of collections the CMS should be able to edit label: Releases widget: list fields: - - { name: version, label: Version } - - { name: date, label: Date, widget: date } - - { name: description, label: Description } + - {name: version, label: Version} + - {name: date, label: Date, widget: date} + - {name: description, label: Description} - name: notifications label: Notifications file: website/data/notifications.yml @@ -59,8 +54,8 @@ collections: # A list of collections the CMS should be able to edit label: Notifications widget: list fields: - - { label: Title, name: title, widget: string, tagname: h1 } - - { label: Published, name: published, widget: boolean } - - { label: Loud, name: loud, widget: boolean } - - { label: Message, name: message, widget: text } - - { label: URL, name: url } + - {label: Title, name: title, widget: string, tagname: h1} + - {label: Published, name: published, widget: boolean} + - {label: Loud, name: loud, widget: boolean} + - {label: Message, name: message, widget: text} + - {label: URL, name: url}