Merge pull request #132 from ssss-sfu/131-fix-image-not-rendered-on-b…

…log-body-post

Fix image not rendered on blog body post

components/PostCard.tsx

@@ -12,7 +12,11 @@ interface PostCardProps {
 export const PostCard: React.FC<PostCardProps> = ({ post }) => {
   return (
     <div className="post">
-      <Link as={`/blog/${post.slug.current}`} href="/blog/[slug]">
+      <Link
+        as={`/blog/${post.slug.current}`}
+        href="/blog/[slug]"
+        className="post-link"
+      >
         <article className="post">
           <div className="thumbnail">
             {post.mainImage ? (

pages/blog/[slug].tsx

@@ -2,7 +2,8 @@ import { PortableText } from "@portabletext/react";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import Image from "next/image";
 import { useLiveQuery } from "next-sanity/preview";
-
+import urlBuilder from "@sanity/image-url";
+import { getImageDimensions } from "@sanity/asset-utils";
 import { readToken } from "../../lib/sanity.api";
 import { getClient } from "@lib/sanity.client";
 import { urlForImage } from "@lib/sanity.image";
@@ -17,6 +18,7 @@ import React from "react";
 import clock from "../../public/images/blog-page/clock.svg";
 import person from "../../public/images/blog-page/person.svg";
 import { formatDate } from "utils/index";
+import { SanityImageSource } from "@sanity/image-url/lib/types/types";
 
 interface Query {
   [key: string]: string;
@@ -46,6 +48,20 @@ export const getStaticProps: GetStaticProps<
   };
 };
 
+// Barebones lazy-loaded image component
+const SampleImageComponent = ({ value }: { value: any }) => {
+  const { width, height } = getImageDimensions(value);
+  return (
+    <Image
+      className="post__image"
+      src={urlForImage(value)!.width(400).fit("max").auto("format").url()}
+      height={height * (400 / width)} // Adjust height based on the new width to maintain aspect ratio
+      width={400}
+      alt=""
+    />
+  );
+};
+
 export default function ProjectSlugRoute(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
@@ -85,7 +101,14 @@ export default function ProjectSlugRoute(
           </div>
         </header>
         <div className="container blog-content">
-          <PortableText value={post.body} />
+          <PortableText
+            value={post.body}
+            components={{
+              types: {
+                image: SampleImageComponent,
+              },
+            }}
+          />
         </div>
       </main>
     </div>

styles/components/blog-post-list.scss

@@ -6,6 +6,9 @@
   width: 100%;
   gap: 16px;
 
+  .post-link {
+    text-decoration: none;
+  }
   .post {
     border-radius: 12px;
     display: flex;
@@ -34,7 +37,6 @@
     }
     .text {
       padding: 16px;
-
       .title {
         font-size: 1.2em;
         margin-bottom: 12px;
@@ -45,7 +47,7 @@
         flex-direction: row;
         gap: 4px;
         align-items: center;
-        font-size: 0.7em;
+        font-size: 1em;
       }
       .summary {
         margin-top: 8px;

styles/pages/blog-page.scss

@@ -76,3 +76,7 @@
     font-size: 18px;
   }
 }
+
+.post__image {
+  margin: 0.5em;
+}