> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog

> Learn how to manage your blog, including adding new posts, managing authors and tags, and understanding the content structure.

Sabo includes a complete, file-based blog system powered by MDX. All blog content is stored as `.mdx` files in the `src/content/blog/` directory, making it easy to manage your posts using Markdown.

* **Content Location**: `sabo/src/content/blog/`
* **Public Assets**: `sabo/public/blog/` (author pictures and post thumbnails)
* **List Page**: `sabo/src/app/blog/page.tsx`
* **Entry Page**: `sabo/src/app/blog/[slug]/page.tsx`
* **Helper**: `sabo/src/lib/posts.ts`

## Adding a New Blog Post

Creating a new blog post is as simple as adding a new MDX file.

<Steps>
  <Step title="Create a New File">
    Create a new `.mdx` file inside the `src/content/blog/` directory. The filename will be used as the URL slug, so it's best to use kebab-case (e.g., `my-first-post.mdx`).
  </Step>

  <Step title="Add Frontmatter">
    At the very top of your new file, add a "frontmatter" block. This is a YAML block surrounded by `---` that contains all the metadata for your post.

    ```yaml theme={null}
    ---
    title: "Your Amazing Post Title"
    description: "A brief and engaging description for search engines and previews."
    date: "2024-08-15"
    author:
      name: "Author Name"
      picture: "/blog/authors/author-image.png"
    thumbnail: "/blog/thumbnails/post-thumbnail.png"
    tags: ["nextjs", "react", "tutorial"]
    ---
    ```
  </Step>

  <Step title="Write Your Content">
    Below the frontmatter, write your blog post content using Markdown and MDX.

    #### Basic Formatting

    You can use all standard Markdown features like **bold text**, *italics*, and lists.

    #### Adding Links

    * **External Links**: Use standard Markdown syntax: `[Link Text](https://example.com)`
    * **Internal Links**: For linking to other pages within your site (e.g., the pricing page), it's recommended to import and use Next.js's `<Link>` component for optimal performance.

    ```tsx theme={null}
    import Link from "next/link";

    Check out our <Link href="/pricing">pricing page</Link> for more details.
    ```

    You can also import and use other custom React components.

    ```mdx theme={null}
    ---
    (frontmatter from step 2)
    ---

    # My First Blog Post

    Welcome to my blog! Here's some **bold text** and a list:

    - Item 1
    - Item 2

    You can even include code blocks with syntax highlighting.
    ```
  </Step>

  <Step title="Add Images">
    * **Author Pictures**: Place new author images in `public/blog/authors/`.
    * **Post Thumbnails**: Place new thumbnail images in `public/blog/thumbnails/`.

    Reference these images using a root path in your frontmatter (e.g., `/blog/authors/name.png`).
  </Step>
</Steps>

## Understanding the Frontmatter

All fields in the frontmatter are important for how the post is displayed.

<ParamField path="title" type="string">
  The main title of the blog post.
</ParamField>

<ParamField path="description" type="string">
  A short summary used for SEO and on the blog listing page.
</ParamField>

<ParamField path="date" type="string">
  The publication date in `YYYY-MM-DD` format. This is used to sort posts.
</ParamField>

<ParamField path="author.name" type="string">
  The name of the post's author.
</ParamField>

<ParamField path="author.picture" type="string">
  The path to the author's image, relative to the `public` folder.
</ParamField>

<ParamField path="thumbnail" type="string">
  The path to the post's thumbnail image, relative to the `public` folder.
</ParamField>

<ParamField path="tags" type="array of strings">
  A list of tags associated with the post. These are displayed on the post page and can be used for filtering.
</ParamField>

## How It Works

Blog posts are read from `src/content/blog`, parsed for frontmatter, and sorted by `date` (newest first).

```ts sabo/src/lib/posts.ts theme={null}
export interface Author {
  name: string;
  picture?: string;
}

export interface BlogPostMetadata {
  slug: string;
  title: string;
  date: string;
  description: string;
  author?: Author;
  thumbnail?: string;
  tags?: string[];
}
```

```ts sabo/src/lib/posts.ts theme={null}
// Sort posts by date (newest first)
return posts.sort((a, b) => {
  return new Date(b.date).getTime() - new Date(a.date).getTime();
});
```

<Info>
  Slugs are derived from filenames (e.g., `my-first-post.mdx` → `/blog/my-first-post`).
</Info>