Netlify cms

[hanbyul-here]

related to: NASA-IMPACT/veda-config#87
cms ui is deployed to: https://deploy-preview-224--veda-ui.netlify.app/admin/index.html

The page should show up login window like this:

After registration, the page will show the dashboard like below. A user can access to netlify cms editor by clicking 'new dataset' button.

This is how the editor looks like. We can pre-embed options that a user can choose through dropdown. We can use our api endpoints to show what collections are available too.

This is a dataset file generated through this process: https://github.com/NASA-IMPACT/delta-ui/blob/6785319f70974b2e2877ba2e536b52f07e5d71b7/mock/datasets/see-image.data.mdx

• cannot save through preview link for now with error below.
  

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	778cdbc
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/637ea4fb6e9ff70009c2c58f
😎 Deploy Preview	https://deploy-preview-224--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[hanbyul-here]

To run CMS on local:

1. Uncomment line 2 of config.yml : https://github.com/NASA-IMPACT/delta-ui/pull/224/files#diff-2a71451a3327b5be51d2420abc4a205adb5de8531414203b316bf05f51b0d12dR2
2. run yarn to install dependencies if you haven't after checking out to this branch.
3. run yarn cms to power netlify cms proxy server.
4. Open a new tab, run yarn serve
5. go to https://localhost:9000/admin/index.html
6. If the login button prompts the url to put, use the netlify app url : https://veda-ui.netlify.app/ (I am not sure this is a bug or something I set up wrong, but I had to input this url very fast otherwise the prompt was gone.)
7. Follow the instruction to set up your account

[hanbyul-here]

While looking at how to customize the editor widget on Netlify CMS (to show how the data will look to users), @slesaad gave this great idea to directly link the preview page from the editor. It turned out, Netlify CMS already offers this functionality from v2.4 (We were on 2.0 before, I updated Netlify CMS to 2.10)

Workflow

1. User 'saves' the dataset (Netlify CMS makes a pr with the change.)
2. User will see this 'Check for preview' button while preview is being built

3. When the preview is ready + 'Check for preview' button is pressed, the button will change its text to 'View Preview'

4. The link will take the user to the explorer preview page.

This requires a user some additional clicks and wait time for the preview build. However, the user can see exactly how the data will get rendered. Also, it is a very low effort on our side. I think it is worth at least testing. I would love your opinion @danielfdsilva @aboydnw @nerik (We can go over this feature sometime next week.)

Some caveats make me think we still need to look into customizing Netlify Widgets.

• Netlify Widgets don't allow conditional fields (ex. When the legend is categorical, we require users to put an array of object({label:.., value:..}). When the legend is gradient, we require users to put an array of strings (color value). But there is no out-of-box solution for Netlify Widget to suggest different fields depending on pre-selected values. (There seems to be enough interest in this feature though .)

• I also disabled the preview on the right pane because it doesn't seem to help.

[aboydnw]

I'll let others weigh in, just wanted to put out there that I'd feel comfortable accompanying documentation with a POC like this. I think IMPACT and scientists would see it as an improvement and would be willing to read documentation for things like conditional fields or less-than-optimal workflows. Would allow us to get feedback on whether something like this is useful and then we can go from there.

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	076cffa
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/6386213b07e63f0008589c7a
😎 Deploy Preview	https://deploy-preview-224--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[hanbyul-here]

We decided to move forward with this approach. But this change needs to go in config repo, not here. I will close this PR for now but will open one in config repo.

[hanbyul-here]

Reopening for demo purpose