# Announcing a new documentation generator for the Supabase Kits

> We're excited to announce a new documentation generator for the Supabase Kits. This will make it easier for you to build your own documentation site for your Makerkit SaaS.

*Published: 2023-09-18*
*Canonical: https://makerkit.dev/blog/changelog/documentation-generator-supabase-kits*

---

I am super excited to announce **a new documentation generator for the Supabase Kits**! 🎉

With this new feature, the Remix Supabase, Next.js Supabase and Next.js Supabase Lite kits are now feature complete, like the original kit based on Next.js and Firebase.

In addition, **the Remix kit also gets a new shiny blog generator**, which was already available for the Next.js kits.

{% img src="/assets/images/posts/docs-index.webp" alt="Documentation Index Page" width="2796" height="1668" /%}

## What is a documentation generator?

The documentation generator allows you to self-host your own documentation site for your Makerkit-based SaaS.

Instead of relying on a third-party service, you can write your documentation in Markdown and host it on your own domain - together with your SaaS.

While you may eventually outgrow the documentation generator (which is good!), Makerkit offers a complete solution for your SaaS from day one.

## How does it work?

The documentation (like the blog) is built using the amazing [Contentlayer](https://contentlayer.dev).

Contentlayer helps us greatly simplify the process of organizing Markdown files into a structured content model.

### Content Folder

Every kit now has a `content` folder, which contains the Markdown files for the documentation. The `content` folder is organized into sections, which are then rendered as pages on the documentation site.

Sections can be nested, so you can have a section with sub-sections. The sub-sections are then rendered as sub-pages.

### Initial Section page

Every section page can have an `index.mdx` file, which is the initial page for the section. This is useful if you want to have a landing page for the section, which then links to the sub-sections.

{% img src="/assets/images/posts/docs-section-page.webp" alt="Documentation Section Page" width="2818" height="1800" /%}

### Ordering

To organize the order of the sections, you shall prefix the folder name with a number, such as `01-getting-started`. The sections are then sorted alphabetically, so you can use numbers to control the order.

{% img src="/assets/images/posts/docs-ordering.webp" alt="Documentation Ordering" width="754" height="674" /%}

For example, the `content` folder for the Next.js Supabase kit looks like this:

```bash
- content
  - docs
    - 01-getting-started
      - index.mdx
      - 01-installation.mdx
      - 02-configuration.mdx
        - 01-supabase.mdx
        - 02-firebase.mdx
      - 03-authentication.mdx
      - 04-database.mdx
      - 05-storage.mdx
      - 06-usage.mdx
      - 07-deployment.mdx
        - 01-vercel.mdx
        - 02-netlify.mdx
      - 08-questions.mdx
    - 02-faq
      - index.mdx
      - 01-what-is-supabase.mdx
```

As you can see, we can use nested folders to organize the content. The `01-getting-started` folder is the first section, and it has an `index.mdx` file, which is the initial page for the section. The `02-configuration` folder is the second section, and it has a sub-section `01-supabase` and `02-firebase`.

### Frontmatter

Every Markdown file can have a frontmatter, which is a YAML block at the top of the file. The frontmatter is used to define the title of the page, and the description of the page.

For example, the `index.mdx` file for the `01-getting-started` section looks like this:

```mdx
---
title: "Getting Started with the Makerkit SaaS Starter Kits"
label: "Getting Started"
description: "Learn how to get started with the Makerkit SaaS Starter Kits"
---
```

The `title` is the title of the page, which is used for the `title` tag in the HTML code. The `label` is the label of the page, which is used in the sidebar navigation (where it's likely you will want a less SEO-focused label). The `description` is the description of the page, which is used in the meta tags.

## Conclusion

I hope you like this new feature! I am super excited about it, and I can't wait to see what you will build with it.

If you have any questions, please feel free to reach out to me on our Discord channel.

Bye! 👋