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.

3 min read
Cover Image for Announcing a new documentation generator for the 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.

Documentation Index Page

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.

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.

Documentation Section Page

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.

Documentation Ordering

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

- 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:

--- 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! 馃憢



Read more about Changelog

Cover Image for Introducing the Makerkit Super Admin

Introducing the Makerkit Super Admin

4 min read
The Makerkit Super Admin is an admin panel for SaaS applications built with Makerkit. It allows you to manage your users, subscriptions, and more.
Cover Image for Upcoming changes to Makerkit in Summer 2023

Upcoming changes to Makerkit in Summer 2023

3 min read
An overview of the changes coming to MakerKit in Summer 2023.
Cover Image for Introducing Makerkit Lite: a lightweight Next.js SaaS Boilerplate

Introducing Makerkit Lite: a lightweight Next.js SaaS Boilerplate

3 min read
Introducing Makerkit Lite: a lightweight SaaS Boilerplate built with Next.js and Supabase. It is a smaller, faster and simpler version that the original Makerkit template.
Cover Image for Announcing: Makerkit now supports Lemon Squeezy subscriptions! 馃崑

Announcing: Makerkit now supports Lemon Squeezy subscriptions! 馃崑

2 min read
Announcing support for Lemon Squeezy subscriptions in Makerkit. It's now possible to use a MoR to power your Makerkit app.
Cover Image for Announcing support for Multi-Factor Authentication (MFA) with Supabase

Announcing support for Multi-Factor Authentication (MFA) with Supabase

3 min read
A sneak peek to our coming feature for Multi-Factor Authentication (MFA) with Supabase.
Cover Image for A sneak peek at the Supabase and Next.js RSC SaaS kit

A sneak peek at the Supabase and Next.js RSC SaaS kit

9 min read
A behind the scenes look at how we built the Supabase and Next.js RSC SaaS Starter.