Netlify fields config and markdowning #50

mateoclarke · 2017-09-28T02:09:51Z

Ok, this PR is a WIP, but I wanted to start a conversation about some of the first real limitations I'm starting to see based on Netlify CMS.

CMS UI Bugs 🐛

First, the CMS UI is kinda buggy. The cool thing is that its open source so we can write fixes and push upstream, but that's not my focus right now. Remember, I just running the CMS SPA from a CDN. This was one small hint that things still aren't very stable.
Here is how you would reproduce: Starting with an existing Project collection open to be edited. Went to the top nav, plus sign to create a new Project. The page seemed to transition, seemingly ready to create a new Project, but the old state of the markdown WSIWYG box still had the text from the previous page. Small thing, but telling on the maturity of this thing.

Poor Docs

Also, documentation needs improvement. I was reading the docs on the out-of-the box widgets trying to learn how to create the select options for a field with a the dropdown select widget. This was hard to Google. I eventually found this issue (8 days old), which led me to this example. Another small thing. And this one even easier for us to make a PR and improve for the community. In general, there is more code diving to get to understanding on how things work, what the defaults are (for example, all fields are required by default), etc.

Markdown

Last thing, some of the code in my last PR was around setting up Gatsby to read markdown files and transform them into GraphQL queries. I really like that feature of Gatsby, though it is very different at first. The confusion for me is this. When you are normally writing markdown files, you have your yml frontmatter with a body section below. In the body is where the markdown formatted texts goes. (As far as I can see so far, again hard because of bad docs) When Netlify generates its markdown files as PRs in the content editing workflow, it doesn't put anything in the body section of the .md file. Everything gets put into the frontmatter. This makes sense in some ways. We could have a multiple markdown widgets for a Collection Item and we can't have two separated bodies under the frontmatter.

But this means, I need to rewire or find a different solution for transforming data in the markdown files into html instead using the markdownRemark plugin the way Gatsby recommended in their docs. https://www.npmjs.com/package/gatsby-transformer-remark

I'll point to some lines below

…of-things Automatically generated. Merged on Netlify CMS.

Automatically generated. Merged on Netlify CMS.

mateoclarke · 2017-09-28T02:12:25Z

src/pages/project/test-big-project.md

@@ -0,0 +1,28 @@
+---
+title: '[Test] Big Project'
+summary: >-


Pointing out here the default way that markdown widget fields get generated from Netlify CMS to .md.

mateoclarke · 2017-09-28T02:12:50Z

src/pages/project/test-big-project.md

+goals: null
+type: project
+---
+


Note, no body text below the frontmatter.

mateoclarke · 2017-09-28T02:14:29Z

src/templates/project.js

+          beneath the frontmatter. There are cases where we might need more than
+          one markdown field. Otherwise, we have to look into how Netlify CMS
+          creates md files.
+      */}


For project .md files that have text beneath the frontmatter, the gatsby-remark plugin nicely add the html to the GraphQL node. But now, I need to solve how the transform frontmatter values to html

mateoclarke · 2017-09-28T02:15:13Z

static/admin/config.yml

  - name: "project"
    label: "Project"
    folder: "src/pages/project"
    create: "true"
    slug: "{{title}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
-      - {label: "Body", name: "body", widget: "markdown"}
+      - {label: "Summary Description", name: "summary", widget: "markdown"}
+      - {label: "Stage", name: "stage", widget: "select", options: ["Proposed", "Planning", "Implementing", "Live"]}


Here is where I spun some cycles trying to learn how to create options from select dropdown.

mateoclarke · 2017-09-28T02:17:39Z

static/admin/config.yml

+      - {label: "Contact Person", name: "contact_name", widget: "string", required: false}
+      - {label: "Contact Email", name: "contact_email", widget: "string", required: false}
+      - {label: "Related City Goals", name: "goals", widget: "string", required: false}
+      - {label: "Collection Type", name: "type", widget: "hidden", default: "project"}


It was useful to create a hidden field so that I could have a consistent value to filter on to display the projects in a list on the landing page. But I was surprised there wasn't already some Collection Type available. This seems like exactly the type of thing the hidden widget was made for but also feels hacky.

This is a big commit. It adds a lot of styling for external places that we will eventually chip away at and refine into a Zilker-React component style guide. Add Sass library to Gatsby. Pulls in stylesheets from Fellows site. Adds lib files from uswds-react project.

mateoclarke · 2017-10-02T18:26:53Z

The main thing undone here is translating markdown in frontmatter to HTML. Made a separate issue for that... #56

erquhart · 2017-10-23T19:28:21Z

@mateoclarke hey there - Netlify CMS lead here, noticed your PR linked to one of our issues. Great feedback! Thought I'd note a couple of things, hope it's helpful:

You can get the content of a markdown field generated below the frontmatter by naming the field "body". If you think that should be more obvious, I totally agree.
You're right about hidden fields being meant for basically setting static values in frontmatter, and I also agree on it being a bit of a hack.
Using the CMS from a CDN will continue to be possible even as the CMS matures to 1.0 and beyond, but we don't recommend it for bigger or more complex use cases. It's just there so folks can dabble or easily build something small with no build tooling requirements (for the cms, anyway). Pulling from npm is ideal.
We need to do better at making status and progress on the project clear. As of now, a completely rebuilt markdown editor was just released in 0.5.0, and a media library (asset manager UI) is about to drop in 0.6.0, followed by a 1.0 release slated for the beginning of December, which will bring a brand new UI and a lot of bugfixes.

If you run into anymore issues, reach out on Gitter, it's very active, plenty of helpful folks there to assist. Cheers!

mateoclarke added 15 commits September 27, 2017 17:27

Update Netlify collections config

b95e327

Add options for Stage

fe6089e

make some fields optional

168512b

Create Project “test-giga-vr-government-of-things”

40fc41e

Update Project “test-giga-vr-government-of-things”

416ae6c

Merge pull request #48 from cityofaustin/cms/test-giga-vr-government-…

d41f8ae

…of-things Automatically generated. Merged on Netlify CMS.

Merge branch 'master' into auto_page_create

2ea9dc0

Play with config more

2502d92

Play with config more

c3f73e9

Create Project “test-big-project”

babf485

Merge pull request #49 from cityofaustin/cms/test-big-project

4fc9102

Automatically generated. Merged on Netlify CMS.

Merge branch 'master' into auto_page_create

db63e12

redo variable naming

fefdf47

Filte on type == project in the frontmatter

1c33142

Shame: Need to comeback to this, but for now a fallback

59a4d48

mateoclarke requested a review from briaguya September 28, 2017 02:09

mateoclarke added the wip label Sep 28, 2017

mateoclarke commented Sep 28, 2017

View reviewed changes

mateoclarke mentioned this pull request Oct 2, 2017

Convert frontmatter values from Markdown to HTML #56

Closed

mateoclarke removed the wip label Oct 2, 2017

mateoclarke merged commit abd9e86 into auto_page_create Oct 2, 2017

mateoclarke deleted the netlify_fields_frontmatter branch October 2, 2017 18:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Netlify fields config and markdowning #50

Netlify fields config and markdowning #50

mateoclarke commented Sep 28, 2017

mateoclarke Sep 28, 2017

mateoclarke Sep 28, 2017

mateoclarke Sep 28, 2017

mateoclarke Sep 28, 2017

mateoclarke Sep 28, 2017 •

edited

Loading

mateoclarke commented Oct 2, 2017

erquhart commented Oct 23, 2017

Netlify fields config and markdowning #50

Netlify fields config and markdowning #50

Conversation

mateoclarke commented Sep 28, 2017

CMS UI Bugs 🐛

Poor Docs

Markdown

mateoclarke Sep 28, 2017

Choose a reason for hiding this comment

mateoclarke Sep 28, 2017

Choose a reason for hiding this comment

mateoclarke Sep 28, 2017

Choose a reason for hiding this comment

mateoclarke Sep 28, 2017

Choose a reason for hiding this comment

mateoclarke Sep 28, 2017 • edited Loading

Choose a reason for hiding this comment

mateoclarke commented Oct 2, 2017

erquhart commented Oct 23, 2017

mateoclarke Sep 28, 2017 •

edited

Loading