How to add frontmatter fields to an existing Markdown file

Hi,

I’m wondering if it is possible to edit a Markdown file by adding new frontmatter fields. I’m not interested in creating a completely new Markdown file, but rather editing the existing one by adding new frontmatter fields. Right now I can edit a single field, but I can’t add a new field on top of it. The reason for this is because I have a navbar menu where every menu item is a frontmatter property. I want to be able to extend my navbar menu by adding a new property. Is this possible?

Hello @Yamo93 thanks for the question. You can see an example of doing this with nextjs here.

Let us know if you run into any more issues.

1 Like

Thank you @logan for the quick reply :smiley: I will try it out!

I’m stuck. I tried to run the examples shown, but I think the documentation is very vague and doesn’t tell me much about how I can configure it to fit my needs. A more concrete example would be appreciated.

Right now I have an issue where I can’t use the “useStaticProps” method, I get the following Webpack error:
ERROR #98123 WEBPACK

    Generating development JavaScript bundle failed

    Assigning to rvalue (1:2)

    File: src\data\sections\header.md:1:2
1 Like

If your using nextjs you can follow our guide here as well as you can take a look at the tinacms.org repo (it also uses nextjs)

This just made more confused. Seems like TinaCMS has some big limitations. Anyway, thanks for your help!

Also, I’m using Gatsby and not NextJS, so this means I have to rewrite the project in NextJS to make this work. I definitely don’t have the time for that. This was quite disappointing I have to say.

No need to rewrite your project. Everything that that works in Nextjs will work in Gatsby. If you’re using Gatsby you can check out our grande starter it’s written using Gatsby.

How can I use a “starter” when I have an existing project?

@Yamo93 Sorry for the troubles. After thinking about your problem the group or group list may be useful. You can use them to store a single object or is list of objects (in JSON or nested front matter).The setup would be something like this.

const formOptions = {
//..(other form values)

{
      label: 'List Items',
      name: 'rawFrontmatter.title',
      component: 'group-list',
      description: 'Authors List',
      itemProps: item => ({
        key: item.id,
        label: item.name,
      }),
      defaultItem: () => ({
        name: 'new list item',
        id: Math.random()
          .toString(36)
          .substr(2, 9),
      }),
      fields: [
        {
          label: 'Name',
          name: 'name',
          component: 'text',
        },
        {
          label: 'Other field',
          name: 'other',
          component: 'text',
        },
      ],
    },
}
const [data, form] = useLocalRemarkForm(page, formOptions)

Now you will have the list of ‘Items’ available in data.

1 Like

@Yamo93 — Yep, group-list is the field you probably want since all of your nav items will likely have a similar shape. Fields are no different in Gatsby versus Next.js. You can see an example of the group-list field being used here, and this is the data source.

So instead of ‘Authors’ in that reference example, you’ll register a form to edit ‘NavItems’. And you can hold that array of nav items in your frontmatter:

nav:
  - link: /info
    text: Info
  - link: /home
    text: Home

---

// markdown body...

And the form config object might look like this:

export const NavFormConfig = {
  label: "Navivation",
  fields: [
    {
      label: "Nav Items",
      name: "rawFrontmatter.nav",
      component: "group-list",
      fields: [
        {
          label: "Link",
          name: "link",
          component: "text",
        },
        {
          label: "Nav Item Text",
          name: "text",
          component: "text",
        },
      ],
    },
  ],
}

Then new Nav Items can be edited, added, removed or reordered via the form within this group-list field.

If you wanted to add new / delete / reorder items that have different shapes (in terms of their data structure), you could use blocks :blush:. Don’t hesitate to reach out with more questions / clarifications!

1 Like

It worked! :grin: Thank you so much @logan and @kendall! I was about to lose hope, but this was a great solution.

1 Like

I have another related question. I don’t know if TinaCMS was intended for these usecases, like adjusting and controlling the layout of a site through the forms and fields, but one nice feature to have would be the ability to add new page sections on a single page. Should I use the same mechanism, “group-list”, to achieve this, or is there a smoother way to make it work?

It’s basically a landing page with subsections, like “About”, “Our services”, and so on, and the client wants to be able to add new sections with pre-defined layouts through the TinaCMS panel.

Any suggestions? :grinning:

Yes! That would be a perfect usecase for blocks or inline blocks if you want to enable editing on the page itself.

That same Tina Grande starter uses blocks to dynamically build the non-blog pages in this template. And the block components are defined in this directory.

This demo gives you an idea of what inline editing with page-component type blocks is like. Here is the guide that shows you how to build that demo. And here is another example inline blocks project that demonstrates blocks that can control grid layout on the page. While neither of those examples are Gatsby-specific, the same (or similar) approach will work with Gatsby.

With either approach, you’ll define a set of components (blocks) to render and templates for how those blocks should handle data etc. Those block options get passed to the blocks field, which handles ordering & connects the fields to the source data, among other things. Then an editor can add, remove, manage those page blocks either in the sidebar or via the inline editing UI, depending on the approach.

Those demos and the documentation should give you a good start to dig into the blocks API. I would recommend starting with regular blocks in the sidebar first, to get a solid mental model, before diving into inline blocks. And this blog gives some context as to what blocks are. Feel free to open a new forum topic if you have questions or problems with blocks!

Thanks a lot again. This was very useful. I got the blocks showing up in the sidebar, but I will have to work on redefining the structure of my page, so it fits in with the blocks setup. Again, thank you so much! I will open a new topic if I get stuck again. :grinning:

1 Like