10 prj blog

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "window.zoomLevel": 6
+  "window.zoomLevel": 1
 }

components/layout/main-navigation.js

@@ -6,18 +6,16 @@ import classes from './main-navigation.module.css';
 function MainNavigation() {
   return (
     <header className={classes.header}>
-      <Link href='/'>
-        <a>
-          <Logo />
-        </a>
+      <Link href="/">
+        <Logo />
       </Link>
       <nav>
         <ul>
           <li>
-            <Link href='/posts'>Posts</Link>
+            <Link href="/posts">Posts</Link>
           </li>
           <li>
-            <Link href='/contact'>Contact</Link>
+            <Link href="/contact">Contact</Link>
           </li>
         </ul>
       </nav>

components/posts/post-detail/post-content.js

@@ -12,7 +12,7 @@ function PostContent(props) {
   const imagePath = `/images/posts/${post.slug}/${post.image}`;
 
   const customRenderers = {
-    // image(image) {
+    // img(image) {
     //   return (
     //     <Image
     //       src={`/images/posts/${post.slug}/${image.src}`}
@@ -22,16 +22,16 @@ function PostContent(props) {
     //     />
     //   );
     // },
-    paragraph(paragraph) {
+    p(paragraph) {
       const { node } = paragraph;
 
-      if (node.children[0].type === 'image') {
+      if (node.children[0].tagName === 'img') {
         const image = node.children[0];
 
         return (
           <div className={classes.image}>
             <Image
-              src={`/images/posts/${post.slug}/${image.url}`}
+              src={`/images/posts/${post.slug}/${image.properties.src}`}
               alt={image.alt}
               width={600}
               height={300}
@@ -44,12 +44,13 @@ function PostContent(props) {
     },
 
     code(code) {
-      const { language, value } = code;
+      const { className, children } = code;
+      const language = className.split('-')[1]; // className is something like language-js => We need the "js" part here
       return (
         <SyntaxHighlighter
           style={atomDark}
           language={language}
-          children={value}
+          children={children}
         />
       );
     },
@@ -58,7 +59,7 @@ function PostContent(props) {
   return (
     <article className={classes.content}>
       <PostHeader title={post.title} image={imagePath} />
-      <ReactMarkdown renderers={customRenderers}>{post.content}</ReactMarkdown>
+      <ReactMarkdown components={customRenderers}>{post.content}</ReactMarkdown>
     </article>
   );
 }

components/posts/post-item.js

@@ -18,22 +18,20 @@ function PostItem(props) {
   return (
     <li className={classes.post}>
       <Link href={linkPath}>
-        <a>
-          <div className={classes.image}>
-            <Image
-              src={imagePath}
-              alt={title}
-              width={300}
-              height={200}
-              layout='responsive'
-            />
-          </div>
-          <div className={classes.content}>
-            <h3>{title}</h3>
-            <time>{formattedDate}</time>
-            <p>{excerpt}</p>
-          </div>
-        </a>
+        <div className={classes.image}>
+          <Image
+            src={imagePath}
+            alt={title}
+            width={300}
+            height={200}
+            layout="responsive"
+          />
+        </div>
+        <div className={classes.content}>
+          <h3>{title}</h3>
+          <time>{formattedDate}</time>
+          <p>{excerpt}</p>
+        </div>
       </Link>
     </li>
   );