Workflow (Netlify CMS)

Content on digital.gov can be added/edited in a visual editor using the digital.gov Workflow tool. This is built as an implementation of Netlify CMS with authentication managed by Cloud.gov.

About

Netlify CMS is an open source content management system used by digital.gov to provide editors with a friendly UI and intuitive workflow.

Learn more about Netlify CMS:

• https://www.netlifycms.org/docs/intro/
• https://github.com/netlify/netlify-cms

Actions

The following actions can be taken within the Netlify CMS UI when adding or updating content:

Save

• Creates/updates a pull request in GitHub

Delete unpublished entry

• Removes pull request from GitHub

Set status

• Draft - Adds the netlify-cms/draft tag to the open pull request and move the entry to the corresponding workflow column in the UI
• In review - Adds the netlify-cms/pending_review tag to the open pull request and move the entry to the corresponding workflow column in the UI
• Ready - Adds the netlify-cms/pending_publish tag to the open pull request and move the entry to the corresponding workflow column in the UI

Preview

• Provides a link to the Federalist/live preview

Developers

All files related to the Netlify CMS can be found in the themes/digital.gov/static/workflow folder. Within that folder there are several important files:

• config.yml - this contains all of the global and collection-specific configuration options. Refer to the Netlify CMS docs for more information on what the various options control.
• styles.css - this stylesheet has a handful of visual customizations that could not be achieved with config.yml
• index.html - this is the main entry point for the CMS, it imports Netlify CMS via script. It also contains several event listeners that:
  • Adds the slug value to the generated markdown file (Netlify CMS does not do this out of the box)
  • Integrates custom Hugo shortcode widgets for use with the Netlify CMS markdown editor. The configuration files for each shortcode widget can be found in the js/editorComponents folder.

This page has a good overview of the different configuration options: https://www.netlifycms.org/docs/add-to-your-site/ For Netlify CMS support/questions, check out their community page: https://www.netlifycms.org/community/

Custom Widget

Our Netlify CMS config uses the async-select custom widget to display the Topic tags. Documentation for this package can be found at: https://github.com/chrisboustead/netlify-cms-widget-async-select. The package is imported into the Workflow tool index.html file and the custom widget is declared in the same file.