convert blog from API to full MDX

[grantfox-oss]

Currently, our blog fetches content from an external API (/blog-posts) and renders it on the client using a custom useMarkdown hook with marked. This approach limits our ability to use React components within blog posts and adds unnecessary complexity for content updates.

Goal:
Move all blog content into the frontend repository as .mdx files and use a modern MDX rendering solution (like next-mdx-remote or MDX Components).

Steps to Implement:

1. MDX Setup:

   • Install necessary dependencies: next-mdx-remote, @next/mdx, gray-matter.
   • Configure next.config.js to support MDX if needed.

2. Content Migration:

   • Create a directory content/blog/ to store .mdx files.
   • Migrate existing blog posts from the database/API to MDX files with YAML frontmatter (for title, date, author, coverImage, etc.).

3. Data Fetching:

   • Implement utility functions in lib/mdx.ts to:
     • Get all blog posts (reading from content/blog/).
     • Get a single blog post by slug.
     • Parse frontmatter and MDX content.
   • Replace getBlogPosts and getBlogPost in app/(landing)/blog/ with these new utilities.

4. UI Components Update:

   • Update app/(landing)/blog/page.tsx to be a Server Component (if possible) or use generateStaticParams for static rendering.
   • Update app/(landing)/blog/[slug]/page.tsx to use next-mdx-remote for rendering the content.
   • Integrate existing custom components (like Mermaid.tsx, Badge, etc.) as MDX components.
   • Ensure the useMarkdown hook and its associated manual CSS injections are replaced with Tailwind Typography (prose) and proper MDX components.

5. Deprecation:

   • Remove lib/api/blog.ts and associated types if no longer used.
   • Cleanup app/api/blog/ routes if they exist.

Tasks:

• Define MDX content structure and frontmatter schema.
• Implement getMdxContent utility.
• Refactor blog listing page to use static file data.
• Refactor blog detail page to use next-mdx-remote.
• Verify SEO and metadata generation using MDX frontmatter.
• Migrate all current posts to .mdx files.

---

Submit video proof

• Run npm run build to ensure static generation of blog pages works without errors.

• Add a test MDX file and verify it appears in the blog list.

• Navigate to /blog and check if all posts are listed correctly.

• Open a blog post and verify styling, images, and any embedded components.

• Check view-source to ensure content is pre-rendered for SEO.

[linear]

BOU-116

[Izimartin]

I’d like to work on this because I’ve built content systems in Next.js and I’m comfortable migrating from API-fetched markdown to a clean MDX workflow. I can move posts into content/blog/*.mdx with frontmatter, set up next-mdx-remote/@next/mdx + gray-matter, and replace getBlogPosts/getBlogPost with lib/mdx.ts utilities for slug-based routing and rendering with MDX components.

[Amarjeet325]

Hi maintainers 👋
I’d like to work on this issue.
I’m a full-stack developer and have previously contributed to multiple open-source projects.

Could you please assign this issue to me?

[gregemax]

I would like to apply for this issue.

I will migrate all blog content to .mdx files and set up a modern MDX rendering solution using next-mdx-remote. This includes creating utilities for fetching posts, integrating custom components, refactoring blog pages for static rendering, and replacing the current useMarkdown setup with Tailwind Typography. I will also ensure SEO, metadata, and proper styling are preserved.

Ready to start immediately.

[akintewe]

I'm a full-stack developer with 4+ years of experience building complex forms and e-commerce systems. I've previously worked on this project in the past as well as also developed inventory management systems for agricultural businesses and am well-versed in handling image processing and state management at scale.
I would love to work on this issue, my ETA is 1 hour.