Skip to content

feat(blog): build blog and dynamic MDX article pages - #14

Merged
CodingWithJiro merged 71 commits into
mainfrom
feat/blog-article-pages
Aug 27, 2026
Merged

CodingWithJiro merged 71 commits into
mainfrom
feat/blog-article-pages

Conversation

@CodingWithJiro

Copy link
Copy Markdown
Owner

Description

Built the blog page with dynamic article pages using MDX, slug-based article routing, reusable article metadata, and UI/accessibility improvements.

Changes

  • Added the /blog/[slug] dynamic article pages using Next.js App Router.
  • Added slug generation and blog metadata helpers.
  • Configured Next.js and TypeScript to support MDX.
  • Moved article content into individual .mdx files.
  • Added Tailwind Typography plugin for styling MDX content.
  • Overridden Typography colors using the existing global theme tokens.
  • Added reusable <ArticleHeader> and <Breadcrumb> components.
  • Added self-hosted article images and author profile image.
  • Added responsive article header styling and rounded banner images.
  • Added accessible breadcrumb labels, current-page state, and focus styles.
  • Added a "Read more articles" link at the end of articles.
  • Added <Footer> component to article pages.
  • Added a Blog not found state for invalid slugs.

Quick Demo

portfolio-blog-page-demo.mp4

Notes for Reviewers

  • Blog metadata remains in BLOGS data source, while article content is stored as .mdx files.
  • The article slug is used to resolve both the corresponding blog metadata and MDX content.
  • Tailwind Typography plugin is mapped to the existing global color tokens so MDX content follows my light/dark themes.
  • I initially wanted to add a Back To Top icon on the article slug page but I did follow through for simplicity.
  • The first two articles are done through collobaration that's why it links to dev.to.
  • Planning on adding a view more at the bottom of the /blog page whenever I have more than 10 articles published in the future.
  • For now, I will be focusing on adding the View More feature for other sections of my landing page.

@CodingWithJiro CodingWithJiro self-assigned this Aug 27, 2026
@CodingWithJiro CodingWithJiro added bug Something isn't working enhancement New feature or request chore refactor test perf labels Aug 27, 2026
@vercel

vercel Bot commented Aug 27, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
elmarchavez Ready Ready Preview Aug 27, 2026 3:53pm

@CodingWithJiro

Copy link
Copy Markdown
Owner Author

In a team setting, this PR would await senior developer approval.
For this solo project, I’ll proceed with merging after review.

@CodingWithJiro

Copy link
Copy Markdown
Owner Author

I updated the tests which involves checking whether the "Read more" button goes to a new page to goes to a new local article page.

@CodingWithJiro
CodingWithJiro merged commit 9a2f09d into main Aug 27, 2026
6 checks passed
@CodingWithJiro
CodingWithJiro deleted the feat/blog-article-pages branch August 27, 2026 16:01

This branch was successfully deployed

1 active deployment
Preview — 96cae728 Deployed Aug 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working chore enhancement New feature or request perf refactor test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant