Change Structure

mdx-components.tsx

@@ -159,23 +159,31 @@ const components = {
     <strong className="font-bold" {...props} />
   ),
   a: CustomLink,
-  code: ({ children, ...props }: ComponentPropsWithoutRef<'code'>) => {
-    const codeHTML = highlight(children as string);
+  code: ({ children, className, ...props }: ComponentPropsWithoutRef<'code'>) => {
+  // Inline code typically doesn't have a className with language info
+  // and usually contains simple text without newlines
+  const isInline = !className && typeof children === 'string' && !children.includes('\n');
+
+  if (isInline) {
     return (
-    <div className="relative group">
-      <pre className="overflow-x-auto">
-        <CopyButton
-          codeSnippet={children as string}
-        />
-        <code
-          className="block pl-12 p-4"
-          dangerouslySetInnerHTML={{ __html: codeHTML }}
-          {...props}
-        />
-      </pre>
-    </div>
+      <code className="px-1 py-0.5 rounded bg-gray-100 dark:bg-zinc-800 text-sm" {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  const codeHTML = highlight(children as string);
+  return (
+    <pre className="relative group overflow-x-auto">
+      <CopyButton codeSnippet={children as string} />
+      <code
+        className="block pl-12 p-4"
+        dangerouslySetInnerHTML={{ __html: codeHTML }}
+        {...props}
+      />
+    </pre>
   );
-  },
+},
   Image: RoundedImage,
   blockquote: (props: BlockquoteProps) => (
     <blockquote

src/app/page.mdx

@@ -61,25 +61,24 @@ import {
 
   <Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
     <CardHeader>
-    <CardTitle> <a href='https://github.com/EarthyScience/next-project-site' target='_blank'> Earth surface forecasting </a> </CardTitle>
+    <CardTitle> <a href='/science' target='_blank'> Earth surface forecasting </a> </CardTitle>
       <FaHeartbeat size={24}/> 
       <CardDescription>Using Machine Learning to forecast the dynamics of Earth’s surface, we can predict crop yield, forest health, the effects of a drought and more. </CardDescription>
     </CardHeader>
   </Card>
 
   <Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
     <CardHeader>
-    <CardTitle> <a href='https://mdxjs.com' target='_blank'> MDX </a> </CardTitle>
+    <CardTitle> <a href='/team' target='_blank'> EarthNet Team </a> </CardTitle>
       <SiMdx size={24} />
-      <CardDescription><a style={{color: "var(--accent-3)"}} href='https://mdxjs.com' target='_blank'> Markdown for the
-component era.</a> MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. </CardDescription>
+      <CardDescription> Meet our team. </CardDescription>
     </CardHeader>
   </Card>
   <Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
     <CardHeader>
-      <CardTitle><a href='https://nextjs.org' target='_blank'>Next.js</a></CardTitle>
+      <CardTitle><a href='/resources/opportunities' target='_blank'>Opportunities</a></CardTitle>
       <SiNextdotjs size={24}/>
-      <CardDescription>This template is built using <a style={{color: "var(--accent-1)"}} href='https://nextjs.org' target='_blank'>Next.js</a>, the <a style={{color: "var(--accent-1)"}} href='https://react.dev' target='_blank'>React</a> framework for the web. Getting you direct access to the latest React features, including Server Components and Actions. </CardDescription>
+      <CardDescription>Come work or collaborate with us!</CardDescription>
     </CardHeader>
   </Card>
 </div>