Skip to content

Conversation

@lucasmotta
Copy link
Contributor

Summary

Adds support for accessing documentation pages as markdown by appending .md to the URL or using the Accept: text/markdown header. This is useful for AI agents and tools that need to consume documentation in a clean, structured format.

How it works

  1. URL-based: Visit any docs page with .md extension (e.g., /themes/docs/components/button.md)
  2. Header-based: Request any docs page with Accept: text/markdown header

The implementation:

  • Fetches the rendered HTML page
  • Extracts the main content area ([data-algolia-page-scope])
  • Converts HTML to Markdown using the unified ecosystem (rehype-remark)
  • Formats the output with oxfmt

Filtering

Elements can be excluded from markdown output by adding the data-md-exclude attribute. Currently used for:

  • Live preview components (interactive demos)
  • Visually-hidden accessibility text

Files changed

  • next.config.js - Added rewrite rule for .md extension
  • middleware.ts - Added Accept: text/markdown header handling
  • pages/api/markdown/[...path].ts - API route for HTML → Markdown conversion
  • components/CodeBlock.tsx - Added data-md-exclude to live previews
  • components/PropsTable.tsx - Added data-md-exclude to visually-hidden elements
  • package.json - Added dependencies (rehype-remark, remark-stringify, remark-gfm, hast-util-select, oxfmt)

- Add rewrite rule in next.config.js for *.md -> /api/markdown/*
- Create middleware to handle Accept: text/markdown header
- Create API route that fetches rendered HTML and converts to markdown
- Use unified ecosystem (rehype-parse, rehype-remark, remark-gfm)
- Extract main content via [data-algolia-page-scope] selector
- Tables, code blocks, and links properly converted to GFM markdown
- Remove [data-algolia-lvl0] hidden elements (e.g., 'Components', 'Guides')
- Fix remarkStringify strong option: use '*' instead of '**' (library doubles it)
@lucasmotta lucasmotta requested a review from chaance as a code owner February 4, 2026 15:43
@vercel
Copy link

vercel bot commented Feb 4, 2026

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

Project Deployment Actions Updated (UTC)
radix-website Ready Ready Preview, Comment Feb 4, 2026 6:59pm

Request Review

<AccessibleIcon.Root label="Prop description">
<InfoCircledIcon />
</AccessibleIcon.Root>
<InfoCircledIcon aria-hidden="true" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the change here? Isn't this what AccessibleIcon already does for us? Markup on the site looks right to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude doing claude things, just changed it back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants