Blog

Supaplate comes with a minimalistic built-in blog feature that allows you to create and publish a blog using Markdown and MDX files.

There are already a couple of blog posts in the ./app/features/blog/docs folder, you can use them as a reference to create your own blog posts.

Blog Pages

The blog feature has two pages: /blog and /blog/:slug.

The /blog page

The loader function for the /blog page goes through the file system and reads all the MDX files in the ./app/features/blog/docs folder.

It uses the frontmatter to generate the list of blog posts.

The initial format is the following:

---
title: <title>
description: <description>
date: <date>
category: <category>
author: <author>
slug: <slug>
---

<content>

The /blog page also will try to display an image that should be located in the ./public/blog folder and named after {slug}.jpg.

The /blog/:slug page

The loader function for the /blog/:slug page reads the MDX file from the file system that is named after {slug}.mdx and renders it.

It also displays the image that should be located in the ./public/blog folder and named after {slug}.jpg.

A note on pre-rendering

The blog pages are pre-rendered at build time, making use of the prerender function in the react-router.config.js file.

// This is how we get the list of blog posts to pre-render
const urls = (
  await readdir(path.join(process.cwd(), 'app', 'features', 'blog', 'docs'))
)
  .filter((file) => file.endsWith('.mdx'))
  .map((file) => `/blog/${file.replace('.mdx', '')}`)

export default {
  ssr: true,
  async prerender() {
    return [
      '/blog', // The blog page
      ...urls, // The blog posts
      '/sitemap.xml', // The sitemap
      '/robots.txt', // The robots.txt file
      '/legal/terms-of-service', // The legal pages
      '/legal/privacy-policy', // The legal pages
    ]
  },
}

Whenever you add a new blog post, you can re deploy your application to rebuild the blog pages.

Open Graph Images

The blog feature comes with an API route in /app/features/blog/api/og.tsx that generates an Open Graph image for the blog posts automatically.

The image is generated using Vercle's OG Image Generator