feat(blog): add :::gallery directive for responsive image grids

[paras-verma7454]

What does this PR do?

Adds a :::gallery container directive that renders multiple images side-by-side in a responsive grid layout, plus converts blog post markdown rendering from client-side (react-markdown) to server-side (unified/remark/rehype pipeline at build time).

Closes #12

What's included

Gallery directive (:::gallery)

• columns attribute — optional, defaults to 2; supports values 2, 3, 4
• Mobile: single column; tablet/desktop (≥641px): N columns via CSS Grid
• Each image wrapped in a styled card with border, rounded corners, and dark mode support
• Alt text renders as a caption below each image
• Usage: :::gallery columns=3 ... :::

Server-side markdown rendering

• Markdown → HTML conversion now happens at build time via unified + remark-parse + remark-rehype + rehype-highlight + rehype-stringify
• [slug]/page.tsx now uses dangerouslySetInnerHTML with pre-rendered HTML instead of the client-side <MarkdownBody> component
• MarkdownBody.tsx kept as a client-side fallback (not deleted)
• .blog-prose CSS restored for server-rendered typography (headings, paragraphs, lists, blockquotes, tables, code blocks, links)

Lint fixes

• Fixed 3 react-hooks/set-state-in-effect errors in BlogListing.tsx, SearchOverlay.tsx, and ThemeToggle.tsx

Requirements checklist (from #12)

• columns attribute: optional, default 2, valid values 2, 3, 4
• Mobile: 1 column, tablet/desktop (≥641px): N columns in a row
• Images inside galleries use the existing custom img component styling
• No raw HTML

Verification

• pnpm lint — 0 errors
• pnpm typecheck — pass
• pnpm format:check — pass
• pnpm test — 46/46 pass
• pnpm build — 97/97 pages static

[vercel]

@paras-verma7454 is attempting to deploy a commit to the Manixh Team Team on Vercel.

A member of the Team first needs to authorize it.

[paras-verma7454]

@ig-imanish

[Copilot]

Pull request overview

Adds a new :::gallery container directive for responsive multi-image grids and migrates blog post Markdown rendering from client-side (react-markdown) to a server-side unified/remark/rehype pipeline with pre-rendered HTML injection.

Changes:

• Introduces a directives preprocessor + remark plugin to support :::gallery columns=2|3|4 syntax.
• Adds a server-side Markdown→HTML renderer with post-processing for code blocks, tables, links, and images, then injects the HTML in the [slug] page.
• Restores/extends .blog-prose and adds gallery CSS to match the new server-rendered markup.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks new unified/remark/rehype and directive dependencies (plus eslint sub-dep bumps).
package.json	Adds unified/remark/rehype pipeline deps and @eslint/eslintrc dev dependency.
lib/markdown/directives.ts	Implements :::gallery directive handling + directive attribute preprocessing.
lib/markdown/directives.test.ts	Adds unit tests for directive parsing, preprocessing, and HTML emission.
lib/content/markdown.ts	Adds server-side Markdown→HTML pipeline + AST post-processing for layout/styling hooks.
components/theme/ThemeToggle.tsx	Removes an inline comment during lint fixes.
components/blog/MarkdownBody.tsx	Updates client-side fallback renderer to support directives + gallery handling.
components/blog/MarkdownBody.test.tsx	Adds tests for gallery rendering behavior in the client-side fallback.
app/globals.css	Restores/extends .blog-prose typography and adds .gallery grid/card styles.
app/BlogListing.tsx	Adjusts query state syncing logic (lint-related).
app/[slug]/page.tsx	Switches post body rendering to dangerouslySetInnerHTML using pre-rendered HTML.
AGENTS.md	Documents the new rendering pipeline and authoring guidance for galleries.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (1)

app/globals.css:557

• Same issue as above: caption styling for gallery cards uses prefers-color-scheme instead of the .dark class, so it can get out of sync with the theme toggle.

Switch to .dark ... selectors.

  .blog-prose .gallery > p > span > span {
    color: #a3a3a3;
    border-color: #262626;
  }
}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[paras-verma7454]

Done