Add blog description

dv297 · Sep 28, 2022 · c126331 · c126331 · vercel · Sep 28, 2022
1 parent bbfaa7a
commit c126331
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 15 deletions.
diff --git a/blog/schemas/post.js b/blog/schemas/post.js
@@ -17,6 +17,11 @@ export default {
         maxLength: 96,
       },
     },
+    {
+      name: 'description',
+      title: 'Description',
+      type: 'string',
+    },
     {
       name: 'author',
       title: 'Author',

diff --git a/src/components/ProseableText.jsx b/src/components/ProseableText.jsx
@@ -4,7 +4,7 @@
  */
 
 import { PortableText } from '@portabletext/react';
-import Img from 'next/image';
+import Image from 'next/image';
 import { useNextSanityImage } from 'next-sanity-image';
 import React, { useMemo } from 'react';
 
@@ -13,7 +13,9 @@ import { getClient } from '../lib/sanity';
 const ImageComponent = ({ value }) => {
   const imageProps = useNextSanityImage(getClient(false), value);
 
-  return <Img {...imageProps} layout="intrinsic" />;
+  console.log(imageProps);
+
+  return <Image {...imageProps} layout="responsive" />;
 };
 
 const components = {

diff --git a/src/components/pages/blog/BlogPostListing.tsx b/src/components/pages/blog/BlogPostListing.tsx
@@ -11,6 +11,7 @@ export interface Post {
   slug: string;
   mainImage: any;
   title: string;
+  description: string;
   author: Author;
   publishedAt: string;
 }
@@ -38,21 +39,23 @@ const BlogPostListing = (props: BlogPostListingProps) => {
       className="flex flex-col overflow-hidden rounded-lg shadow-lg"
     >
       <div className="flex-shrink-0">
-        <Image
-          className="w-full object-cover"
-          src={urlFor(post.mainImage, preview).url()}
-          alt="Blog Image"
-          height="300px"
-          width="512px"
-          objectFit="fill"
-          quality={50}
-        />
+        <a href={`/blog/${post.slug}`} className="mt-2 block">
+          <Image
+            className="w-full object-cover"
+            src={urlFor(post.mainImage, preview).url()}
+            alt="Blog Image"
+            height="300px"
+            width="512px"
+            objectFit="fill"
+            quality={50}
+          />
+        </a>
       </div>
       <div className="flex flex-1 flex-col justify-between bg-white p-6">
         <div className="flex-1">
           <a href={`/blog/${post.slug}`} className="mt-2 block">
             <p className="text-xl font-semibold text-gray-900">{post.title}</p>
-            <p className="mt-3 text-base text-gray-500">Sample description</p>
+            <p className="mt-3 text-base text-gray-500">{post.description}</p>
           </a>
         </div>
         <div className="mt-6 flex items-center">

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { groq } from 'next-sanity';
 import { ReactNode } from 'react';
@@ -10,6 +11,7 @@ const query = groq`
   *[_type == "post"]  | order(publishedAt desc) {
     _id,
     title,
+    description,
     "slug": slug.current,
     mainImage,
     publishedAt,
@@ -35,11 +37,23 @@ const Posts = (props: any) => {
   }
 
   return (
-    <div>
+    <div className="px-8">
       <div className="mt-8">
-        <h1 className="mb-4 text-5xl md:text-6xl text-center font-bold font-heading font-heading tracking-px-n leading-tight">
-          Latest from Blog
+        <h1 className="mb-4 text-4xl md:text-6xl text-center font-bold font-heading font-heading tracking-px-n leading-tight">
+          The Latest from{' '}
+          <span className="text-primary block text-5xl md:text-7xl">
+            Planner
+          </span>
         </h1>
+        <p className="mt-2 tracking-px-n leading-tight text-center w-full">
+          We are always learning and exploring new ideas. We try to share our
+          experiences through these blogs, and{' '}
+          <Link href="https://twitter.com/thedanielvu">
+            <span className="text-primary underline cursor-pointer">
+              we would love to hear from you!
+            </span>
+          </Link>
+        </p>
       </div>
       <div className="relative mx-auto max-w-7xl">
         <div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">