Blog System

The blog is the primary content feature of the website, supporting article listing, detail pages, category and tag filtering, and rich content rendering.

Blog Listing

Route: /[locale]/blog

Displays articles in a paginated list (5 per page) with a right sidebar containing category and tag filters.

Each article is rendered as an ArticleCard with:

  • Cover image (or SVG placeholder fallback)

  • Category link (navigates to category filter page)

  • Publication date

  • Title (links to article detail; ::after overlay makes entire card clickable)

  • Summary (3-line clamp)

  • Tag pills (links to tag filter pages, green background with hover darkening)

Article Detail

Route: /[locale]/blog/[slug]

Renders the full article with:

  • Header: category + date meta row, title, author name

  • Body: rich markdown content (via RichMarkdown component)

  • Tags: pill links below content

  • Right sidebar: Share button, Copy Link button

  • Contact Us button at bottom

Category View

Route: /[locale]/blog/categories/[categorySlug]

Uses the CategoryArticleViewer component with a three-column layout:

  • Left sidebar — Article title list (clickable buttons, 3-line clamp). Clicking a title loads the article in the center panel and scrolls to top.

  • Center — Full article content with rich markdown rendering. Title links to the standalone article detail page.

  • Right sidebar — Table of contents (scroll-spy highlights active heading)

All articles in the category are loaded at once (up to 100). The viewer supports Mermaid diagrams, KaTeX math, YouTube embeds, and raw HTML.

Tag Filter

Route: /[locale]/blog/tags/[tagSlug]

Same layout as the main blog listing but filtered to articles with the specified tag. Pagination is 5 per page.

Rich Markdown Rendering

The RichMarkdown component (src/components/RichMarkdown.tsx) wraps react-markdown with these plugins:

Plugin

Capability

remark-gfm

GFM tables, strikethrough, task lists, autolinks

remark-math

Inline $...$ and display $$...$$ math syntax

rehype-raw

Raw HTML passthrough (YouTube iframes, embeds)

rehype-katex

LaTeX math rendering to HTML

Mermaid Diagrams:

Fenced code blocks with language mermaid are intercepted and rendered by the MermaidBlock component, which:

  1. Lazy-loads the Mermaid library

  2. Initializes with a Carbon blue theme (#d0e2ff nodes, #0f62fe borders, #4589ff lines)

  3. Renders SVG via mermaid.render()

  4. Falls back to a <pre><code> block on parse errors

Supported diagram types: flowcharts, sequence diagrams, Gantt charts, entity-relationship diagrams, state machines.

KaTeX Math:

  • Inline: $T = \frac{N}{t}$ renders inline

  • Display: $$F^* = \arg\min_F [...]$$ renders as centered block equation

  • KaTeX CSS is imported from katex/dist/katex.min.css

Article Card Design

The ArticleCard component uses a layered click target pattern:

  • Outer wrapper is a <div> (not <a>) with cursor: pointer

  • Title <Link> has a ::after pseudo-element stretched over the entire card (position: absolute; inset: 0)

  • Category and tag <Link> elements have position: relative; z-index: 1 to sit above the overlay, making them independently clickable

This avoids invalid nested <a> tags while maintaining full-card clickability.