fix(projects): styling

app/components/StyledMarkdown.tsx

@@ -1,10 +1,14 @@
 import Markdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
 
 export default function StyledMarkdown({ content }: { content: string | undefined | null }) {
   if (!content) return null;
 
   return (
     <Markdown
+      rehypePlugins={[rehypeHighlight]}
+      remarkPlugins={[remarkGfm]}
       components={{
         h1: ({ children }) => <h1 className="my-4 text-3xl font-bold">{children}</h1>,
         h2: ({ children }) => <h2 className="my-3 text-2xl font-semibold">{children}</h2>,
@@ -16,14 +20,15 @@ export default function StyledMarkdown({ content }: { content: string | undefine
         blockquote: ({ children }) => (
           <blockquote className="my-4 border-l-4 border-gray-300 pl-4 italic">{children}</blockquote>
         ),
-        code: ({ children }) => <code className="rounded bg-gray-200 p-1">{children}</code>,
         em: ({ children }) => <em className="text-base italic">{children}</em>,
         strong: ({ children }) => <strong className="text-base font-bold">{children}</strong>,
         a: ({ children, href }) => (
           <a href={href} className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">
             {children}
           </a>
         ),
+        pre: ({ children }) => <pre className="ml-3 rounded-md opacity-70">{children}</pre>,
+        hr: () => <hr className="my-4 opacity-10" />,
       }}
     >
       {content}

app/projects/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import StyledMarkdown from '@/app/components/StyledMarkdown';
 import Link from 'next/link';
 import { StructuredText } from 'react-datocms';
 
@@ -73,32 +74,28 @@ async function getProject(slug: string, lng: string) {
       query: `
       query getProject {
         projecten(filter: {slug: {eq: "${slug}"}}, locale: ${lng}) {
-          id
-          slug
+      slug
+    
           techniekGebruikt
           title
           website
           werkzaamheden
-          content
-              contentNew(locale: ${lng}) {
-      value
-      links
-      blocks
-    }
-          image{
-            responsiveImage(imgixParams: { fit: max, w: 1000, h: 450, auto: format }) {
-        sizes
-        src
-        width
-        height
-        alt
-        title
-        webpSrcSet
-        base64
+          content(markdown: false)
+        
+    image {
+        responsiveImage(imgixParams: { fit: max, w: 1000, h: 450, auto: format }) {
+            sizes
+            src
+            width
+            height
+            alt
+            title
+            webpSrcSet
+            base64
       }
+    }
         }
       }
-    }
     `,
     }),
   }).then((res) => res.json());
@@ -114,6 +111,7 @@ export default async function Projecten(props: { params: Promise<{ slug: string
   const slugSplitted = slug.split('/');
 
   const getData = await getProject(slugSplitted[0], 'en');
+  console.log(getData);
   const data = getData.projecten;
 
   return (
@@ -157,7 +155,7 @@ export default async function Projecten(props: { params: Promise<{ slug: string
         id="blog-content"
         className="col-span-full text-balance text-base text-stone-800 lg:w-4/5 dark:text-stone-100"
       >
-        <StructuredText data={data?.contentNew} />
+        <StyledMarkdown content={data?.content} />
       </div>
     </div>
   );

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  output: 'export',
+  // output: 'export',
   images: {
     remotePatterns: [
       {

package.json

@@ -33,10 +33,14 @@
     "react-datocms": "^7.0.3",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.1",
+    "rehype-pretty-code": "^0.14.0",
     "remark": "^15.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
     "sanitize-html": "^2.14.0",
+    "shiki": "^1.24.4",
     "urql": "^4.2.1"
   },
   "devDependencies": {