💄 Better UX

components/posts/PostContent.tsx

@@ -1,7 +1,30 @@
-"use client";
-
 import { PortableText } from "@portabletext/react";
+import { client } from "@/sanity/lib/client";
+import imageUrlBuilder from "@sanity/image-url";
+import Link from "next/link";
+import ImageViewer from "@/components/articles/ImageViewer";
 
 export default function PostContent({ content }: { content: any }) {
-  return <PortableText value={content} />;
+  const imageBuilder = imageUrlBuilder(client);
+
+  const componentSet = {
+    types: {
+      image: ({ value }: any) => {
+        const image = imageBuilder.image(value);
+        return <ImageViewer src={image.url()} alt={value.alt} />;
+      }
+    },
+    marks: {
+      link: ({ children, value }: any) => {
+        const rel = !value.href.startsWith("/") ? "noreferrer noopener" : undefined;
+        return (
+          <Link href={value.href} rel={rel}>
+            {children}
+          </Link>
+        );
+      }
+    }
+  };
+
+  return <PortableText value={content} components={componentSet} />;
 }