Content

Easily type blog posts, documentation, legal pages and other content in MDX format.

For the content features on the marketing site, we use MDX to write the content. MDX is a markdown format that allows you to write JSX components in markdown. This makes it easy to write complex content with interactive components.

Demo

To see the content features in action, you can check out these:

Technical details

We use Fumadocs which is a framework for building documentation in MDX, but it works great for blogs as well. It offers great customizability and has support for the app router in Next.js.

Folder structure

For this feature, we have created a content folder in the marketing app.

SEO

Sitemap and robots.txt files are generated automatically. The sitemap includes all the blog posts, documentation pages and legal pages.

Blog

Having a blog on your website is a great way to engage with your audience and improve your SEO.

The blog folder contains all the blog posts written in MDX format. Each blog post is a separate MDX file.

The blog can be accessed at http://localhost:3001/blog.

Creating a blog post

Frontmatter is used to define metadata for each blog post. It is also important for SEO.

Make sure to include the following frontmatter in each blog post:

---
title: Awesome Blog Title
description: Awesome blog description
publishedAt: '2024-06-04'
updatedAt: '2023-06-04'
coverImage: /images/blog/example-image.png
authorName: Renas Hassan
keywords: [tailwindcss, mdx, typography, design, fonts]
published: true
---
  • title: The title of the blog post.
  • description: A short description of the blog post.
  • publishedAt: The date the blog post was published.
  • updatedAt: The date the blog post was last updated.
  • coverImage: The cover image for the blog post.
  • authorName: The name of the author of the blog post.
  • keywords: An array of keywords for the blog post.
  • published: A boolean value to determine if the blog post should be published. If this is false, the blog post will not be displayed on the blog page.

Author

The author of the blog post is defined in the frontmatter using the authorName field. Make sure to add the author's name, avatar image and bio to the authors object in the apps/marketing/src/features/blog/config/authors.ts file.

export const authors: Authors = {
  "Renas Hassan": {
    image: "/images/blog/pixel-renas-avatar.jpg",
    bio: "I'm a mad scientist who loves to experiment with new technologies. Wubba lubba dub dub! 🧪🚀",
  },
}

The author will be displayed at the end of the blog post page along with the author's avatar image and bio.

Documentation

The docs folder contains all the documentation pages written in MDX format. Each documentation page is a separate MDX file.

The documentation can be accessed at http://localhost:3001/docs.

Creating a documentation page

Make sure to include the following frontmatter in each documentation page:

---
title: Content
description: Easily type blog posts, documentation, legal pages and other content in MDX format.
updatedAt: '2024-06-04'
---
  • title: The title of the documentation page.
  • description: A short description of the documentation page.
  • updatedAt: The date the documentation page was last updated.

Include the documentation pages in the meta.json file.

You can read more about the options in the Fumadocs documentation.

The legal folder contains all the legal pages written in MDX format.

I have already set up the Terms of Service and Privacy Policy pages for you. You can just edit the content in the terms-of-service.mdx and privacy-policy.mdx files.

The legal pages can be accessed at:

Last updated on

Entitlements

Overview