Bflow.ai

Blog

How the blog works with categories and authors.

Blog posts can have multiple categories, authors, and related posts.

Authors

Create one author

Blog posts can have one or multiple authors.
Add a new object with name, image url and twitter handle to add a new author to your blog.

config/blog.ts
export const BLOG_AUTHORS = {
  mickasmt: {
    name: "mickasmt",
    image: "/_static/avatars/mickasmt.png",
    twitter: "miickasmt",
  },
  newauthor: {
    name: "shadcn",
    image: "/_static/avatars/shadcn.jpeg",
    twitter: "shadcn",
  },
};

Add in a blog post

Add your new author to a blog post like this:

---
title: Deploying Next.js Apps
description: How to deploy your Next.js apps on Vercel.
image: /_static/blog/blog-post-3.jpg
date: "2023-01-02"
authors:
  - newauthor
  - mickasmt
categories:
  - news
related:
  - server-client-components
  - preview-mode-headless-cms
---

Categories

Create one category

Add a new object and a slug to add a new category to your blog.

config/blog.ts
export const BLOG_CATEGORIES: {
  title: string;
  slug: "news" | "education";
  description: string;
}[] = [
  {
    title: "News",
    slug: "news",
    description: "Updates and announcements from Next SaaS Starter.",
  },
  {
    title: "Education",
    slug: "education",
    description: "Educational content about SaaS management.",
  },
];

Add in a blog post

Add your new category to a blog post like this:

---
title: Deploying Next.js Apps
description: How to deploy your Next.js apps on Vercel.
image: /_static/blog/blog-post-3.jpg
date: "2023-01-02"
authors:
  - newauthor
  - mickasmt
categories:
  - news
related:
  - server-client-components
  - preview-mode-headless-cms
---

The blog post can belong to multiple categories, but currently, only the first category in the list is being displayed.

Related posts

Each blog post can have a list of related posts. Simply use the filenames of the blog posts you want to reference, without the .mdx or .md extension.

---
title: Deploying Next.js Apps
description: How to deploy your Next.js apps on Vercel.
image: /_static/blog/blog-post-3.jpg
date: "2023-01-02"
authors:
  - newauthor
  - mickasmt
categories:
  - news
related:
  - server-client-components
  - preview-mode-headless-cms
---

Use React components in Markdown using MDX.

The following components are available out of the box for use in Markdown.

If you'd like to build and add your own custom components, see the Custom Components section below.

Built-in Components

1. Callout

<Callout type="default | warning | danger | note | info | success">
  This is a default callout. You can embed **Markdown** inside a `callout`.
</Callout>

This is a default callout. You can embed Markdown inside a callout.

This is a warning callout. It uses the props type="warning".

This is a danger callout. It uses the props type="danger".

This is a note callout. It uses the props type="note".

This is an info callout. It uses the props type="info".

This is a success callout. It uses the props type="success".

2. Card

<Card href="#">
 
#### Heading
 
You can use **markdown** inside cards.
 
</Card>

Heading

You can use markdown inside cards.

View

You can also use HTML to embed cards in a grid.

<div className="grid grid-cols-2 gap-4">
  <Card href="#">
    #### Card One 
    You can use **markdown** inside cards.
  </Card>
 
  <Card href="#">
    #### Card Two 
    You can also use `inline code` and code blocks.
  </Card>
</div>

Card One

You can use markdown inside cards.

View

Card Two

You can also use inline code and code blocks.

View

Custom Components

You can add your own custom components using the components props from useMDXComponent.

components/mdx.tsx
import { Callout } from "@/components/callout"
import { CustomComponent } from "@/components/custom"
 
const components = {
  Callout,
  CustomComponent,
}
 
export function Mdx({ code }) {
  const Component = useMDXComponent(code)
 
  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  )
}

Once you've added your custom component, you can use it in MDX as follows:

<CustomComponent propName="value" />

HTML Elements

You can overwrite HTML elements using the same technique above.

const components = {
  Callout,
  CustomComponent,
  hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}

This will overwrite the <hr /> tag or --- in Markdown with the HTML output above.

Styling

Tailwind CSS classes can be used inside MDX for styling.

<p className="text-red-600">This text will be red.</p>

Make sure your Tailwind CSS configuration includes the path to your content files so that classes used in MDX are properly compiled.