fix: rehypeDetails rehypeSummary

src/app/globals.css

@@ -37,10 +37,6 @@ body {
  scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
 }
 
-details {
- @apply my-4;
-}
-
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs

src/components/mdx/Details/Details.tsx

@@ -0,0 +1,6 @@
+import cn from '@/lib/cn'
+import { type ComponentProps } from 'react'
+
+export function Details({ className, ...props }: ComponentProps<'details'>) {
+ return <details className={cn('my-4', className)} {...props} />
+}

src/components/mdx/Details/index.ts

@@ -0,0 +1 @@
+export * from './Details'

src/components/mdx/Details/rehypeDetails.ts

@@ -0,0 +1,12 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+// https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
+export function rehypeDetails() {
+ return (tree: Root) => {
+ visit(tree, null, function (node) {
+ // console.log(node)
+ if (node.type === 'mdxJsxFlowElement' && node.name === 'details') node.name = 'Details' // map HTML <details> to <Details> React component
+ })
+ }
+}

src/components/mdx/Summary/Summary.tsx

@@ -0,0 +1,6 @@
+import cn from '@/lib/cn'
+import { type ComponentProps } from 'react'
+
+export function Summary({ className, ...props }: ComponentProps<'summary'>) {
+ return <summary className={cn('mb-2', className)} {...props} />
+}

src/components/mdx/Summary/index.ts

@@ -0,0 +1 @@
+export * from './Summary'

src/components/mdx/Summary/rehypeSummary.ts

@@ -0,0 +1,12 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+// https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
+export function rehypeSummary() {
+ return (tree: Root) => {
+ visit(tree, null, function (node) {
+ // console.log(node)
+ if (node.type === 'mdxJsxFlowElement' && node.name === 'summary') node.name = 'Summary' // map HTML <summary> to <Summary> React component
+ })
+ }
+}

src/components/mdx/index.tsx

@@ -1,8 +1,10 @@
 export * from './Codesandbox'
+export * from './Details'
 export * from './Gha'
 export * from './Grid'
 export * from './Hint'
 export * from './Img'
+export * from './Summary'
 export * from './Toc'
 
 import cn from '@/lib/cn'

src/utils/docs.tsx

@@ -3,8 +3,10 @@ import * as components from '@/components/mdx'
 import { Codesandbox } from '@/components/mdx/Codesandbox'
 import { fetchCSB } from '@/components/mdx/Codesandbox/fetchCSB'
 import { rehypeCodesandbox } from '@/components/mdx/Codesandbox/rehypeCodesandbox'
+import { rehypeDetails } from '@/components/mdx/Details/rehypeDetails'
 import { rehypeGha } from '@/components/mdx/Gha/rehypeGha'
 import { rehypeImg } from '@/components/mdx/Img/rehypeImg'
+import { rehypeSummary } from '@/components/mdx/Summary/rehypeSummary'
 import { rehypeToc } from '@/components/mdx/Toc/rehypeToc'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
 import matter from 'gray-matter'
@@ -158,6 +160,8 @@ async function _getDocs(
  remarkPlugins: [remarkGFM],
  rehypePlugins: [
  rehypeImg,
+ rehypeDetails,
+ rehypeSummary,
  rehypeGha,
  rehypePrismPlus,
  rehypeCodesandbox(boxes), // 1. put all Codesandbox[id] into `doc.boxes`