Frontmatter Fields in GitCMS

Hey fellow developers! 👋 Let’s talk about something that’s probably been on your mind if you’re working with static site generators - frontmatter fields and content collections.

What are Collections and Frontmatter? 🤔

Before we dive into the cool stuff GitCMS offers, let’s get on the same page about collections and frontmatter in static site generators (SSGs).

Collections are like organized buckets of content in your static site. Think of them as:

• Blog posts in your /content/posts/ directory
• Team members in your /content/team/ folder
• Products in your /content/products/ section
• Documentation pages in your /content/docs/ area

Each file in these collections typically starts with something called “frontmatter” - that YAML-like metadata at the top of your markdown files between those triple dashes (---). It’s where you define structured data about your content.

For example, a typical blog post might look like this:

---
title: "My Awesome Post"
date: 2024-03-15
author: "Jane Dev"
tags: ["coding", "tutorial"]
---

Your actual content goes here...

Introducing GitCMS’s Field Types 🎨

Now, here’s where GitCMS makes your life easier! Instead of manually typing out frontmatter, we give you a beautiful interface with various field types that map perfectly to your collection schema. Let’s explore what you can use:

1. Title Field 📝

Perfect for your content’s main heading. It’s like having a dedicated space for that perfect title that’ll grab attention.

2. Multiline Field 📄

Need to write a longer description or excerpt? The multiline field gives you the space you need without overwhelming your frontmatter.

3. Date Field 📅

No more manually formatting dates! Our date picker ensures your dates are consistent and valid across all content.

4. Singleline Field ➡️

Great for simple metadata like author names, slugs, or any short text content.

5. FileInput Field 🖼️

Upload file like images, videos, pdfs etc and use them in your content. GitCMS suggest the file path based on the collection name.

6. Boolean Field ✅

Perfect for toggles like draft: true/false or featured: true/false. Simple switches for binary choices.

7. MultiSelect Field 🏷️

Tags, categories, or any array of values - select multiple items with ease.

How to Map Your Collection Schema 🗺️

Using GitCMS configuration, mapping your collection schema is very simple. Here’s how it works:

1. For each collection, you can define which fields you need
2. Choose the appropriate field type for each frontmatter property
3. Save your schema, and voilà! Every new content piece will use your custom form

For example, if you’re using Astro.js and have a blog collection, you might map it like this:

// Your typical Astro collection schema
export interface BlogSchema {
  title: string;         // → Title Field
  description: string;   // → Multiline Field
  pubDate: Date;         // → Date Field
  authors: string[];     // → MultiSelect Field
  image: string;         // → Image Field
  featured: boolean;     // → Boolean Field
  tags: string[];        // → MultiSelect Field
}

Pro Tips for Field Usage 💡

1. Use Title fields for SEO-important headings
2. Leverage MultiSelect for taxonomies like categories and tags
3. Boolean fields are perfect for content visibility control
4. Image fields automatically handle your media directory structure and let you preview the image in the editor
5. Date fields ensure consistent datetime formats across your site

What’s Next? 🚀

We’re constantly adding new field types and improvements to make your content management even smoother. Stay tuned for upcoming features like:

• Custom component fields
• Rich text editor improvements
• Advanced media management
• And much more!

Remember, the goal is to make your content management as smooth as possible while maintaining the power and flexibility of Git-based workflows. No more wrestling with YAML syntax or remembering frontmatter schemas - GitCMS has got you covered!

Have questions or need help setting up your collection schema? DM me on X or email me at [email protected] 🙌