Outstatic blog post not found

.env.local

# ENV IS THE SAME ON VERCEL, WITH DIFFERENT OST_GITHUB_ID AND OST_GITHUB_SECRET TO POINT TO THE CORRECT OAUTH APPLICATION

OST_GITHUB_ID=...
OST_GITHUB_SECRET=...
OST_REPO_OWNER=repo-org
OST_REPO_SLUG=repo
OST_CONTENT_PATH=src/content
# OPTIONAL
# If empty this will default to main
OST_REPO_BRANCH=main

blog-post-with-slug.tsx

// /src/app/blog/[slug]/page.tsx

import { getDocumentBySlug } from 'outstatic/server'
import Markdown from 'markdown-to-jsx'
import { notFound } from 'next/navigation'

export default async function BlogPost({ params }: { params: { slug: string }}) {
    const post = await getData(params.slug)

    if (post === null) {
        notFound()
    }
    
    return (
        <main>
            <h1>{post.title}</h1>
            <span>by: {post.author?.name}</span>
            
            <div className='pt-8'>
                <Markdown>
                    {post.content}
                </Markdown>
            </div>
            
        </main>
    )
}

async function getData(slug: string) {
    return getDocumentBySlug('posts', slug, [
        'title',
        'publishedAt',
        'slug',
        'author',
        'content',
        'coverImage'
    ])
}

blog.tsx

// /src/app/blog/page.tsx

import { getDocuments } from 'outstatic/server'
import Link from 'next/link'

export default async function Blog() {
    const posts = await getData()

    return (
        <main>
            <h1>Blog Articles</h1>
            <ul className='pt-8'>
                {posts.map(post => (
                    <li key={post.slug}>
                        - <Link href={`/blog/${post.slug}`}>{post.title}</Link>
                    </li>
                ))}
            </ul>
        </main>
    )
}

async function getData() {
    return getDocuments('posts', ['title', 'slug', 'content'])
}

welcome-to-our-blog.md

REMOVE THIS LINE - /src/content/posts/welcome-to-our-blog.md

---

title: 'Welcome to our blog' status: 'published' author: name: '...' picture: 'https://avatars.githubusercontent.com/u/771903?v=4' slug: 'welcome-to-our-blog' description: '' coverImage: '' publishedAt: '2024-03-29T21:14:59.240Z'

This is a heading 1

This is a heading 2

This is a heading 3

This is a paragraph

Some AI generated content:

In the document, different headings are used to organize content, with Heading 1 being the main section, Heading 2 as subsections, and Heading 3 for further subcategories, followed by paragraphs for detailed information.

And some code samples

// Some example code

import Link from "next/link";

export default function BlogPostNotFound() {
    return (
        <div>
            <h2>Not Found</h2>
            <p>This blog post could not be found</p>
            <Link href="/blog">Go back to the blog</Link>
        </div>
    )
}