Implement Markdown-based News Feed (/news) and Blog Post Pages

[gdams]

Background

The Adoptium website uses Markdown files under content/blog/ to manage community blog posts and announcements. Each blog post lives in its own subdirectory (with an index.md and optional images or PDFs). In the Next.js migration, we need to replicate this functionality by creating a /news landing page that lists all posts, and individual blog pages under /news/<year>/<month>/<slug>/.

The posts use frontmatter for metadata (title, date, author, description, and tags), and may contain rich Markdown content including links, images, and code blocks.

---

Requirements

• [x] Directory and data source

  • Use the existing Markdown files located under content/blog/.
  • Each blog lives in a directory with index.md and optional media files (e.g., *.jpg, *.pdf).
  • These Markdown files should be parsed at build time (SSG) using a library such as gray-matter (for frontmatter) and remark/rehype or MDX for content rendering.

• [x] Route structure

  • The /news path should list all blog posts in reverse chronological order.

  • Each individual post must be accessible at /news/<year>/<month>/<slug>/.

    • For example, content/blog/eclipse-temurin-23-available/index.md (dated 2024-05-28) should be available at /news/2024/05/eclipse-temurin-23-available/.

• [x] Slug generation

  • Use the directory name (not the filename) in content/blog/ as the slug.
  • Parse the frontmatter date to generate the <year> and <month> route segments.
  • Ensure slugs are URL-safe and consistent with existing links.

• [x] News listing page (/news)

  • Display a paginated list of blog post previews sorted by date descending.

  • Each preview should include:

    • title
    • description (from frontmatter)
    • author
    • date (formatted e.g. "28 May 2024")
    • tags (optional, can be used later for filtering)

  • Each preview should link to the full blog post URL.

• [x] Blog post detail pages

  • Render full Markdown content from index.md.
  • Resolve local image paths (e.g., ./workflow.jpg) relative to the post’s folder.
  • Optionally support PDF links or downloads (e.g., Adoptium-Community-Day-EclipseCon2022.pdf).
  • Set dynamic title, meta description, and og:image tags for SEO and social sharing (using frontmatter).

• [x] Error handling

  • Show a custom 404 page if the post doesn’t exist.
  • Gracefully skip malformed or missing frontmatter (log a build warning).

---

Tech Suggestions

• Use gray-matter to extract frontmatter.
• Use next-mdx-remote, @next/mdx, or remark/rehype to render Markdown safely.
• Use fs and path in a utility file (e.g., lib/blog.ts) to recursively read blog folders and construct metadata objects for each post.
• Use static generation (getStaticPaths and getStaticProps) to build all blog routes at compile time.

---

Bonus (Optional)

• [x] Add RSS feed generation for /news/feed.xml.
• [x] Add tag support for filtering or grouping posts.
• [ ] Add estimated reading time (readingTime package).

---

Acceptance Criteria

• Visiting /news shows a reverse-chronological list of all blog posts.
• Blog posts can be visited at /news/<year>/<month>/<slug>/ with working content and media.
• The Markdown content renders correctly with all expected formatting (e.g., code blocks, links, images).
• All posts use the correct frontmatter metadata.
• No en or en-GB translation files are required for the blog — blog posts are English-only for now.

---

Let me know if you’d like a follow-up issue to support internationalisation of blog posts in future.

[Jexsie]

Hey @gdams, would like to take this one forward