Add .md extension support for documentation pages

components/CodeBlock.tsx

@@ -48,7 +48,7 @@ const LivePreview = React.forwardRef<HTMLDivElement, LivePreviewProps>(
 		forwardedRef,
 	) {
 		return (
-			<Theme asChild className="radix-themes-default-fonts">
+			<Theme asChild className="radix-themes-default-fonts" data-md-exclude>
 				<Box
 					ref={forwardedRef}
 					className={classNames(styles.CodeBlockLivePreview, className)}

components/Highlights.tsx

@@ -9,7 +9,11 @@ import {
 	Link,
 	Select,
 } from "@radix-ui/themes";
-import { ArrowTopRightIcon, CheckIcon } from "@radix-ui/react-icons";
+import {
+	ArrowTopRightIcon,
+	CheckIcon,
+	FileTextIcon,
+} from "@radix-ui/react-icons";
 import { useRouter } from "next/router";
 import { VisuallyHidden } from "radix-ui";
 import { FrontmatterContext } from "./MDXComponents";
@@ -35,24 +39,28 @@ export function Highlights({ features }: { features: React.ReactNode[] }) {
 						{features.map(
 							(feature, i) =>
 								feature != null && (
-									<Flex key={i} gap="4" align="start">
-										<Flex
-											width="24px"
-											height="24px"
-											align="center"
-											justify="center"
-											flexShrink="0"
-											style={{
-												backgroundColor: "var(--green-4)",
-												borderRadius: "50%",
-												color: "var(--green-11)",
-											}}
-										>
-											<CheckIcon />
-										</Flex>
-										<Text size="3" as="p">
-											{feature}
-										</Text>
+									<Flex key={i} gap="4" align="start" asChild>
+										<li>
+											<Flex
+												data-md-exclude
+												as="span"
+												width="24px"
+												height="24px"
+												align="center"
+												justify="center"
+												flexShrink="0"
+												style={{
+													backgroundColor: "var(--green-4)",
+													borderRadius: "50%",
+													color: "var(--green-11)",
+												}}
+											>
+												<CheckIcon />
+											</Flex>
+											<Text size="3" as="p">
+												{feature}
+											</Text>
+										</li>
 									</Flex>
 								),
 						)}
@@ -157,6 +165,20 @@ export function Highlights({ features }: { features: React.ReactNode[] }) {
 								</Flex>
 							</Box>
 						)}
+
+						<Box>
+							<Flex
+								asChild
+								display="inline-flex"
+								align="center"
+								position="relative"
+								gap="1"
+							>
+								<Link size="2" href={`${router.asPath}.md`}>
+									View as Markdown
+								</Link>
+							</Flex>
+						</Box>
 					</Flex>
 				</nav>
 			</Box>

components/PropsTable.tsx

@@ -73,9 +73,14 @@ export function PropsTable({
 											{description && (
 												<Popover.Root>
 													<Popover.Trigger>
-														<IconButton variant="ghost" size="1" color="gray">
+														<IconButton
+															variant="ghost"
+															size="1"
+															color="gray"
+															data-md-exclude
+														>
 															<AccessibleIcon.Root label="Prop description">
-																<InfoCircledIcon />
+																<InfoCircledIcon aria-hidden="true" />
 															</AccessibleIcon.Root>
 														</IconButton>
 													</Popover.Trigger>
@@ -107,7 +112,12 @@ export function PropsTable({
 											{Boolean(typeSimple) && Boolean(type) && (
 												<Popover.Root>
 													<Popover.Trigger>
-														<IconButton variant="ghost" color="gray" size="1">
+														<IconButton
+															variant="ghost"
+															color="gray"
+															size="1"
+															data-md-exclude
+														>
 															<AccessibleIcon.Root label="See full type">
 																<InfoCircledIcon />
 															</AccessibleIcon.Root>
@@ -155,11 +165,13 @@ export function PropsTable({
 												{defaultValue}
 											</Code>
 										) : (
-											<AccessibleIcon.Root label="No default value">
-												<DividerHorizontalIcon
-													style={{ color: "var(--gray-8)" }}
-												/>
-											</AccessibleIcon.Root>
+											<>
+												<AccessibleIcon.Root label="No default value">
+													<DividerHorizontalIcon
+														style={{ color: "var(--gray-8)" }}
+													/>
+												</AccessibleIcon.Root>
+											</>
 										)}
 									</Table.Cell>
 								</Table.Row>

middleware.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+	const { pathname } = request.nextUrl;
+
+	// Check if the request accepts markdown
+	const acceptHeader = request.headers.get("accept") || "";
+	const wantsMarkdown =
+		acceptHeader.includes("text/markdown") ||
+		acceptHeader.includes("text/x-markdown");
+
+	// If the client accepts markdown and this is a docs page, rewrite to markdown API
+	if (wantsMarkdown && isDocsPage(pathname)) {
+		const url = request.nextUrl.clone();
+		url.pathname = `/api/markdown${pathname}`;
+		return NextResponse.rewrite(url);
+	}
+
+	return NextResponse.next();
+}
+
+/**
+ * Check if a path is a documentation page that can be served as markdown
+ */
+function isDocsPage(pathname: string): boolean {
+	// Match documentation paths
+	const docPatterns = [
+		/^\/primitives\/docs\//,
+		/^\/themes\/docs\//,
+		/^\/colors\/docs\//,
+		/^\/blog\//,
+	];
+
+	return docPatterns.some((pattern) => pattern.test(pathname));
+}
+
+// Configure which paths the middleware runs on
+export const config = {
+	matcher: [
+		// Match all docs paths
+		"/primitives/docs/:path*",
+		"/themes/docs/:path*",
+		"/colors/docs/:path*",
+		"/blog/:path*",
+	],
+};

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -13,6 +13,15 @@ module.exports = {
 	},
 
 	// Next.js config
+	async rewrites() {
+		return [
+			{
+				source: "/:path*.md",
+				destination: "/api/markdown/:path*",
+			},
+		];
+	},
+
 	async redirects() {
 		return [
 			{

package.json

@@ -34,6 +34,7 @@
 		"eslint-config-next": "^14.2.6",
 		"glob": "^10",
 		"gray-matter": "^4.0.2",
+		"hast-util-select": "^6.0.4",
 		"hast-util-to-html": "^9.0.1",
 		"hast-util-to-string": "^3.0.0",
 		"lodash.debounce": "^4.0.8",
@@ -52,7 +53,10 @@
 		"refractor": "^3.3.1",
 		"rehype": "^11.0.0",
 		"rehype-parse": "^9.0.0",
+		"rehype-remark": "^10.0.1",
+		"remark-gfm": "^4.0.1",
 		"remark-slug": "^6.0.0",
+		"remark-stringify": "^11.0.0",
 		"scroll-into-view-if-needed": "^3.1.0",
 		"smoothscroll-polyfill": "^0.4.4",
 		"tinycolor2": "^1.6.0",
@@ -62,6 +66,7 @@
 		"usehooks-ts": "^3.0.1"
 	},
 	"devDependencies": {
+		"@types/hast": "3.0.4",
 		"@types/lodash.debounce": "^4.0.6",
 		"@types/node": "20.12.10",
 		"@types/react": "^18.3.4",
@@ -72,6 +77,7 @@
 		"@types/unist": "^3.0.3",
 		"autoprefixer": "^10.4.19",
 		"husky": "^9.1.6",
+		"oxfmt": "0.28.0",
 		"prettier": "^3.3.3",
 		"pretty-quick": "^4.0.0",
 		"sucrase": "3.29.0",