Blog Posts Are Now MDX-Powered: Callouts, Embeds, Tool Cards

The discoverwebtools.com blog has moved from plain Markdown rendering to MDX. Existing posts continue to render through the legacy pipeline — every URL stays where it is — but new posts can now reach for richer building blocks when the content calls for them.

What changed under the hood

The blog renderer now reads from two directories. Legacy markdown posts live in data/blog/*.md and continue to flow through marked. New MDX posts live in content/blog/*.mdx and render through next-mdx-remote/rsc. Both render in the same <article> shell, share the same prose styles, and appear in the same sitemap.

The six components

Callout — inline notes

Use callouts to break out tips, warnings, or critical context from the main flow. The variant controls both color and icon.

<Callout type="warning" title="Heads up">
  Schema markup is not a ranking factor on its own.
</Callout>

Figure — captioned images

Figure wraps next/image for local images and falls back to a raw <img> for remote URLs. Captions and lazy loading are handled automatically.

<Figure src="/blog/example/diagram.png" alt="Pipeline overview" caption="Build-time pipeline as of May 2026" width={1200} height={720} />

YouTube — privacy-friendly embeds

Uses youtube-nocookie.com, lazy loads, keeps the 16:9 aspect ratio. No third-party JavaScript hits the page until interaction.

<YouTube id="dQw4w9WgXcQ" title="A relevant explainer" />

ToolCard — internal product links

Drops in a clean link card to any tool by slug. The label is auto-derived from the slug if you do not pass one explicitly.

Regex Tester

Test patterns against sample text with live highlighting.

Comparison — side-by-side tables

Pass headers and rows. Each row's values align under the headers in order. Booleans render as Yes / No automatically.

Steps — numbered procedures

Wraps an ordered list with proper step numbering and spacing. Use for setup guides or how-to flows.

1. Author the post

   Create content/blog/your-slug.mdx with a frontmatter block matching the schema below.

2. Use components inline

   Import nothing. Components are injected by the renderer at request time.

3. Ship

   Push to main. The sitemap rebuilds on the next request via ISR.

Frontmatter schema

title: "Your post title"
description: "Meta description (under 160 chars)"
slug: your-post-slug
publishedAt: 2026-05-28
updatedAt: 2026-05-28
author:
  name: Author Name
  url: https://discoverwebtools.com/about-us
categories: [Development]
tags: [mdx, blog]
coverImage: /blog/your-slug/cover.png
status: published

coverImage becomes the OG/Twitter image and the article hero. slug controls the URL — keep it stable.

What is next

Three follow-ups are queued: a normalize script that rewrites legacy frontmatter into the new schema, an automated tone audit re-run after each new post, and dedicated cover images for the top 10 traffic-earning legacy posts.

Related reading

• Schema Markup: 6 Schema Types That Boost Rich Results
• Meta Tags Checker: SEO audit in 30 seconds
• Developer Tools Hub