fix: header style, drop animation, card component

Author: winverse

packages/markdown-editor/src/components/header.tsx

@@ -84,7 +84,7 @@ export function Header({ flatDirectories, items }: NavBarProps): ReactElement {
           'contrast-more:nx-shadow-[0_0_0_1px_#000] contrast-more:dark:nx-shadow-[0_0_0_1px_#fff]',
         )}
       >
-        <nav className="nx-ml-[320px] nx-flex nx-h-[var(--nextra-navbar-height)] nx-max-w-[120rem] nx-items-center nx-justify-end nx-gap-2">
+        <nav className="nx-ml-[20px] nx-mr-[24px] nx-flex nx-h-[var(--nextra-navbar-height)] nx-items-center nx-justify-end nx-gap-2">
           {config.logoLink ? (
             <Anchor
               href={typeof config.logoLink === 'string' ? config.logoLink : '/'}

packages/markdown-editor/src/components/sidebar/utils/dropAnimation.ts

@@ -1,25 +1,25 @@
-import { defaultDropAnimation, DropAnimation } from '@dnd-kit/core'
+import type { DropAnimation } from '@dnd-kit/core'
 import { CSS } from '@dnd-kit/utilities'
 
 export const dropAnimation: DropAnimation = {
   keyframes({ transform }) {
     return [
-      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },
+      { opacity: 0, transform: CSS.Transform.toString(transform.initial) },
       {
         opacity: 0,
-        transform: CSS.Transform.toString({
-          ...transform.final,
-          x: transform.final.x + 5,
-          y: transform.final.y + 5,
-        }),
+        // transform: CSS.Transform.toString({
+        //   ...transform.final,
+        //   x: transform.final.x + 5,
+        //   y: transform.final.y + 5,
+        // }),
       },
     ]
   },
-  easing: 'ease-out',
-  sideEffects({ active }) {
-    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
-      duration: defaultDropAnimation.duration,
-      easing: defaultDropAnimation.easing,
-    })
-  },
+  // easing: 'ease-out',
+  // sideEffects({ active }) {
+  //   active.node.animate([{ opacity: 0 }, { opacity: 0 }], {
+  //     duration: defaultDropAnimation.duration,
+  //     easing: defaultDropAnimation.easing,
+  //   })
+  // },
 }

packages/markdown-editor/src/mdx-compiler.ts

@@ -139,17 +139,25 @@ export const mdxCompiler = async (
     return result
   } catch (error: any) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('Failed to compile source', error)
+      console.log('Failed to compile source as mdx', error)
     }
-    const result = await serialize(content, {
-      mdxOptions: {
-        format: 'md',
-        development: false,
-        remarkPlugins,
-        rehypePlugins,
-      },
-    })
 
-    return result
+    try {
+      const result = await serialize(content, {
+        mdxOptions: {
+          format: 'md',
+          development: false,
+          remarkPlugins,
+          rehypePlugins,
+        },
+      })
+
+      return result
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('Failed to compile source as md', error)
+      }
+      return null
+    }
   }
 }

packages/markdown-editor/src/nextra/components/cards.tsx

@@ -29,15 +29,15 @@ export function Card({
   icon,
   image,
   arrow,
-  href,
+  href = '/',
   ...props
 }: {
   children: ReactNode
   title: string
   icon: ReactNode
   image?: boolean
   arrow?: boolean
-  href: string
+  href?: string
 }) {
   const animatedArrow = arrow ? arrowEl : null