refactor: improve component structure and clean up code

Author: xianminx

app/tag-data.json

@@ -1,20 +1,20 @@
 {
+  "markdown": 2,
+  "code": 2,
+  "features": 2,
   "next-js": 6,
-  "tailwind": 3,
-  "guide": 5,
-  "feature": 2,
-  "multi-author": 1,
-  "hello": 1,
   "math": 1,
   "ols": 1,
   "github": 1,
-  "writings": 1,
-  "book": 1,
-  "reflection": 1,
+  "guide": 5,
+  "tailwind": 3,
+  "hello": 1,
   "holiday": 1,
   "canada": 1,
   "images": 1,
-  "markdown": 1,
-  "code": 1,
-  "features": 1
+  "feature": 2,
+  "writings": 1,
+  "book": 1,
+  "reflection": 1,
+  "multi-author": 1
 }

components/MDXComponents.tsx

@@ -22,4 +22,4 @@ export const components: MDXComponents = {
   pre: (props) => <PreviewableCode defaultView={'code'} renderers={renderers} {...props} />,
   table: TableWrapper,
   BlogNewsletterForm,
-}
+}

components/Mermaid.tsx

@@ -60,7 +60,7 @@ const ErrorDisplay = ({ error, code }: ErrorDisplayProps) => (
         </div>
       </summary>
       <div className="border-b border-red-200 bg-red-50 px-4 py-2">
-        <pre className="whitespace-pre-wrap break-words font-mono text-sm font-medium text-red-700">
+        <pre className="font-mono text-sm font-medium break-words whitespace-pre-wrap text-red-700">
           {typeof error === 'string' ? error : error.message || 'Failed to render diagram'}
         </pre>
       </div>

components/PlantUML.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import PlantUmlEncoder from 'plantuml-encoder'
+import Image from 'next/image'
 
 interface PlantUMLProps {
   code: string
@@ -21,21 +22,23 @@ const PlantUML = ({ code, dpi = 600 }: PlantUMLProps) => {
       setUrl(`https://www.plantuml.com/plantuml/img/${encoded}`)
       setSvgUrl(`https://www.plantuml.com/plantuml/svg/${encoded}`)
     }
-  }, [code])
+  }, [code, dpi])
 
   if (!url) {
     return null
   }
 
   return (
-    <div 
+    <div
       className="plantuml-chart relative mx-auto max-w-4xl"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <img
+      <Image
         src={url}
         alt="PlantUML diagram"
+        width={1200}
+        height={800}
         className="mx-auto block w-full rounded-md object-contain"
         style={{ maxHeight: '80vh' }}
       />
@@ -44,7 +47,7 @@ const PlantUML = ({ code, dpi = 600 }: PlantUMLProps) => {
         target="_blank"
         rel="noopener noreferrer"
         className={`absolute right-2 bottom-2 rounded-md bg-white/80 px-2 py-1 text-xs text-gray-600 shadow-sm transition-all duration-200 hover:bg-white hover:text-gray-900 dark:bg-gray-800/80 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 ${
-          isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+          isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
         }`}
       >
         View SVG

components/PreviewableCode.tsx

@@ -29,15 +29,15 @@ const isPreviewableCodeBlock = (children: unknown): children is PreviewableCodeB
     typeof children === 'object' &&
     'props' in children &&
     'type' in children &&
-    (children as any).type === 'code'
+    children.type === 'code'
   )
 }
 
 interface PreviewableCodeProps {
   children: ReactNode
   enablePreview?: boolean
   defaultView?: 'preview' | 'code'
-  renderers: { [key: string]: ComponentType<any> }
+  renderers: { [key: string]: ComponentType<{ code: string; [key: string]: unknown }> }
   [key: string]: unknown
 }
 
@@ -109,7 +109,7 @@ const PreviewableCode = ({
       </TabPanels>
       <TabPanel>
         <div className="">
-          <Renderer code={rawText} {...props} />
+          <Renderer {...props} code={rawText} />
         </div>
       </TabPanel>
     </TabGroup>