Enhancement: Editor for data files in the Hugo 'data' folder.

[zivbk1]

Is your feature request related to a problem? Please describe.

I have a site where there are data files (JSON) used to drive the content in tables.
https://gohugo.io/templates/data-templates/

Describe the solution you'd like

I would like to describe the data model in the files like I do now with content types, and then have a UI to edit the information in the files with a GUI.

Describe alternatives you've considered

I can edit the plain text files by hand, but what's the fun in that? Also, asking my editors to write JSON, YAML, TOML, etc. by hand is a bit much.

Additional context

Here is an example of a UI for the JSON content below.

{
  "columns": [
    "Rating",
    "Credit Score"
  ],
  "rows": [
    {
      "cells": [
        "A++",
        "750+"
      ]
    },
    {
      "cells": [
        "A+",
        "710 - 749"
      ]
    },
    {
      "cells": [
        "A",
        "680 - 709"
      ]
    },
    {
      "cells": [
        "B",
        "650 - 679 up to 80% LTV"
      ]
    },
    {
      "cells": [
        "C",
        "620 - 649 up to 70% LTV"
      ]
    }
  ]
}

[estruyf]

Thinking about this one, what if you can define data types via the settings like:

{
  "frontMatter.data.types": [
    {
      "name": "sponsors",
      "file": "[workspace]/data/sponsors.json",
      "schema": {
        "title": "Sponsors",
        "type": "object",
        "required": [
          "url",
          "name",
          "avatar"
        ],
        "properties": {
          "url": {
            "type": "string",
            "title": "URL"
          },
          "name": {
            "type": "string",
            "title": "Name"
          },
          "avatar": {
            "type": "string",
            "title": "Avatar"
          }
        }
      }
    }
  ]
}

If there is data defined like this, the extension would render a new data tab and allow you to start editing the content.

[estruyf]

@zivbk1 been working on a new data dashboard.

What do you think?

Settings

The settings look as follows:

{
	"frontMatter.data.files": [
    {
      "id": "sponsors",
      "title": "Sponsors",
      "file": "[[workspace]]/data/sponsors.json",
      "labelField": "name",
      "schema": {
        "title": "Sponsors",
        "type": "object",
        "required": [
          "url",
          "name",
          "avatar"
        ],
        "properties": {
          "url": {
            "type": "string",
            "title": "URL"
          },
          "name": {
            "type": "string",
            "title": "Name"
          },
          "avatar": {
            "type": "string",
            "title": "Avatar"
          }
        }
      }
    },
    {
      "id": "projects",
      "title": "Projects",
      "file": "[[workspace]]/themes/eliostruyf-v2/data/projects.json",
      "labelField": "title",
      "schema": {
        "title": "Projects",
        "type": "object",
        "required": [
          "title",
          "href"
        ],
        "properties": {
          "title": {
            "type": "string",
            "title": "Title"
          },
          "href": {
            "type": "string",
            "title": "Link"
          }
        }
      }
    }
  ]
}

[zivbk1]

@estruyf can you use wildcards to match all .json files in a particular folder?
Ex. [[workspace]]/data/tables/*.json

Matches all of these files in the tables folder...

[zivbk1]

@estruyf how would I represent this data structure in frontmatter.data.files?

{
  "name": "Credit-HELOC",
  "columns": [
    "Rating",
    "Credit Score"
  ],
  "rows": [
    {
      "cells": [
        "A++",
        "750+"
      ]
    },
    {
      "cells": [
        "A+",
        "710 - 749"
      ]
    },
    {
      "cells": [
        "A",
        "680 - 709"
      ]
    },
    {
      "cells": [
        "B",
        "650 - 679 up to 80% LTV"
      ]
    },
    {
      "cells": [
        "C",
        "620 - 649 up to 70% LTV"
      ]
    }
  ]
}

[estruyf]

@estruyf can you use wildcards to match all .json files in a particular folder? Ex. [[workspace]]/data/tables/*.json

Matches all of these files in the tables folder...

For now, the data files would have to be defined in the settings. The definition is required to correctly render the form.

[estruyf]

@estruyf how would I represent this data structure in frontmatter.data.files?

...

More testing is required and for sure some styling is missing for lists. The schema for your data would looks as follows:

{
  "id": "test",
  "file": "[[workspace]]/data/tests.json",
  "labelField": "title",
  "title": "Test",
  "schema": {
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "columns": {
        "type": "array",
        "items": { "type": "string" }
      },
      "rows": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "cells": {
              "type": "array",
              "items": { "type": "string" }
            }
          }
        }
      }
    }
  }
}

[bwklein]

@estruyf can you use wildcards to match all .json files in a particular folder? Ex. [[workspace]]/data/tables/*.json
Matches all of these files in the tables folder...

For now, the data files would have to be defined in the settings. The definition is required to correctly render the form.

Is it possible to define a structure for a data file once, then for each file in the folder indicate that the same structure is used. Repeating the whole structure in the configuration file for every file doesn't seem practical. I'm thinking of a way to say "Everything in this folder has this data structure."

[estruyf]

That would mean files and types need to be split up. So you can have data types, to define the schema, and data files to specify the location and defined type ID.

[bwklein]

That would mean files and types need to be split up. So you can have data types, to define the schema, and data files to specify the location and defined type ID.

I like that idea. I could also see something like this working with a new Frontmatter field type that lets you define a set of defined data structures to pick from as a template, and add into an array. This concept would resolve the other issue I have for "blocks" (page_sections) stored in Front matter data. #176

[estruyf]

Support for arrays has been added as well:

This allows you to at least use the configuration from above. I'll see what I can do for the type and file splitting.

[estruyf]

@zivbk1 data type support has been added. You can specify the schema on file level or on the type level.

On file level is easy when you'll use it a single time, when defining it on type level, you can reuse it.

"frontMatter.data.files": [
	  {
	    "id": "test",
	    "file": "[[workspace]]/data/tests.json",
	    "labelField": "name",
	    "title": "Test",
	    "type": "genericContent"
	  }
],
"frontMatter.data.types": [
	  {
	    "id": "genericContent",
	    "schema": {
	      "type": "object",
	      "properties": {
	        "name": {
	          "type": "string"
	        },
	        "columns": {
	          "type": "array",
	          "items": { "type": "string" }
	        },
	        "rows": {
	          "type": "array",
	          "items": {
	            "type": "object",
	            "properties": {
	              "cells": {
	                "type": "array",
	                "items": { "type": "string" }
	              }
	            }
	          }
	        }
	      }
	    }
	  }
]

Hope this will make it easier for you.