Details component

zhangyu1818 · Jun 2, 2024 · ea6937e · ea6937e
1 parent 8b0ab5a
commit ea6937e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/app/(article)/posts/[id]/page.tsx b/src/app/(article)/posts/[id]/page.tsx
@@ -103,7 +103,7 @@ export default async function Page({ params }: PageProps) {
           </span>
         </div>
       </header>
-      <article className='prose prose-slate max-w-none dark:prose-invert has-[img]:prose-p:-mx-4 prose-code:break-words prose-pre:-mx-4 prose-pre:px-5 dark:prose-img:brightness-75 max-xl:col-start-2 max-sm:prose-pre:rounded-none sm:prose-img:rounded md:has-[img]:prose-p:-mx-8 md:prose-pre:-mx-8 [&:not(.code-group)]:prose-pre:my-0'>
+      <article className='prose prose-slate max-w-none dark:prose-invert prose-code:break-words prose-pre:px-5 dark:prose-img:brightness-75 max-xl:col-start-2 max-sm:prose-pre:rounded-none sm:prose-img:rounded [&:not(.mdx-components)]:prose-pre:my-0'>
         <Markdown
           source={body!}
           useMDXComponents={() => ({

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -34,6 +34,15 @@
   --border: 51 65 85; /* theme('colors.slate.700') */
 }
 
+/* Markdown */
+
+.prose {
+  > div > pre,
+  > p:has(img) {
+    @apply -mx-4 md:-mx-8;
+  }
+}
+
 /* Tailwind utilities */
 @layer utilities {
   @keyframes hello {

diff --git a/src/markdown/components/code-group.tsx b/src/markdown/components/code-group.tsx
@@ -26,7 +26,7 @@ const CodeGroup = (props: CodeGroupProps) => {
   const current = childrenArray[index]
 
   return (
-    <div className='code-group -mx-4 border bg-surface-1 md:-mx-8 md:rounded'>
+    <div className='mdx-components -mx-4 border bg-surface-1 md:-mx-8 md:rounded'>
       <header className='flex border-b px-4'>
         {fileNames.map((fileName, i) => (
           <button
@@ -43,7 +43,7 @@ const CodeGroup = (props: CodeGroupProps) => {
           </button>
         ))}
       </header>
-      <div className='px-4 md:px-8'>{current}</div>
+      {current}
     </div>
   )
 }

diff --git a/src/markdown/components/details.tsx b/src/markdown/components/details.tsx
@@ -1,12 +1,12 @@
 interface DetailsProps {
-  title?: string
+  summary?: string
   children: React.ReactNode
 }
 export const Details = (props: DetailsProps) => {
-  const { title, children } = props
+  const { summary, children } = props
   return (
-    <details>
-      <summary>{title}</summary>
+    <details className='mdx-components rounded-lg bg-surface-1 p-4'>
+      <summary>{summary}</summary>
       {children}
     </details>
   )