Fixed blog featured post images that was cutoff

.github/workflows/pizza.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Pizza Action
-        uses: open-sauced/pizza-action@v2.1.0
+        uses: open-sauced/pizza-action@v2.2.0
         with:
+          cli-version: 'v2.1.0'
           commit-and-pr: 'true'
+          pr-title: 'chore: update repository codeowners'

components/sections/blog/FeaturedPost.tsx

@@ -17,9 +17,9 @@ const FeaturedPost: FC<FeaturedPostProps> = ({ data }): ReactElement => {
       <div className="w-full largeTablet:grid largeTablet:grid-cols-2 largeTablet:gap-x-11">
         <div className="hidden largeTablet:flex">
           <GradientBorderWrapper style={{ width: '100%' }}>
-            <div className="flex-1  h-[496px] relative rounded-[5px] overflow-hidden ">
-              <Image src={src as string} layout="fill" objectFit="cover" alt="Post cover" />
-            </div>
+          <div className="w-full relative rounded-[5px] overflow-hidden ">
+            <Image width={580} height={304} src={src as string} alt="Cover" />
+          </div>
           </GradientBorderWrapper>
         </div>
 

components/sections/blog/[slug]/PageContent.tsx

@@ -1,5 +1,8 @@
-import React, { FC, ReactElement } from 'react'
-import { Author as SanityAuthor, Blog as SanityBlog } from '../../../../sanity.types'
+import React, { FC, ReactElement, useEffect, useState } from 'react'
+import {
+  Author as SanityAuthor,
+  Blog as SanityBlog,
+} from '../../../../sanity.types'
 import getReadTime from '../../../../utils/getReadTime'
 
 // Components
@@ -21,8 +24,8 @@ import { BiCalendarAlt } from 'react-icons/bi'
 import AuthorBio from '../components/AuthorBio'
 
 interface PageContentProps {
-  pageContent: Omit<SanityBlog, "author"> & { author: SanityAuthor }
-  blogs: (Omit<SanityBlog, "author"> & { author: SanityAuthor })[]
+  pageContent: Omit<SanityBlog, 'author'> & { author: SanityAuthor }
+  blogs: (Omit<SanityBlog, 'author'> & { author: SanityAuthor })[]
   featuredPost?: boolean
 }
 
@@ -32,21 +35,53 @@ const PageContent: FC<PageContentProps> = ({
   featuredPost,
 }): ReactElement => {
   const { query } = useRouter()
-  const { topics, title, author, published_date, coverImage, blogContent, blogUrl, ogImage, summary, slug } =
-    pageContent
+  const {
+    topics,
+    title,
+    author,
+    published_date,
+    coverImage,
+    blogContent,
+    blogUrl,
+    ogImage,
+    summary,
+    slug,
+  } = pageContent
   const src = coverImage || ''
   const displayBlogs =
     blogs.filter((item) => item.slug?.current != query.slug) || []
-  const absoluteURL = "https://opensauced.pizza/blog/"+slug?.current
+  const absoluteURL = 'https://opensauced.pizza/blog/' + slug?.current
+  const [height, setHeight] = useState('30rem');
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setHeight('14rem'); // Small screens
+      } else if (window.innerWidth < 1024) {
+        setHeight('25rem'); // Medium screens
+      } else {
+        setHeight('30rem'); // Large screens
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // Call the function once to set the initial size
+    handleResize();
+
+    // Cleanup the event listener on unmount
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
 
   return (
     <>
       <OgData
-      ogTitle={title || ""}
-      ogDescription={summary || ""}
-      ogImageUrl={ogImage as unknown as string || ""}
-      ogUrl={absoluteURL}
-      noindex={false}
+        ogTitle={title || ''}
+        ogDescription={summary || ''}
+        ogImageUrl={(ogImage as unknown as string) || ''}
+        ogUrl={absoluteURL}
+        noindex={false}
       />
       <SectionWrapper pt={205} pts={60} pb={235}>
         <div className=" w-full flex justify-start largeTablet:justify-center">
@@ -69,15 +104,16 @@ const PageContent: FC<PageContentProps> = ({
             <Image width={16} height={16} src={OrangeClock} alt="Clock" />
           </div>
 
-          <LocalTypography>{`${getReadTime(blogContent || "")} ${
-            getReadTime(blogContent || "") === 1 ? 'min' : 'mins'
-          } read`}
+          <LocalTypography>
+            {`${getReadTime(blogContent || '')} ${
+              getReadTime(blogContent || '') === 1 ? 'min' : 'mins'
+            } read`}
           </LocalTypography>
-          
-          { published_date && (
+
+          {published_date && (
             <>
               <div className="flex-shrink-0 mr-2 ml-4">
-                <BiCalendarAlt className='text-[#E33E24] w-5 h-5' /> 
+                <BiCalendarAlt className="text-[#E33E24] w-5 h-5" />
               </div>
               <LocalTypography>
                 <time>{published_date}</time>
@@ -88,16 +124,20 @@ const PageContent: FC<PageContentProps> = ({
         <div className="pb-11 largeTablet:pb-20">
           <SocialShare url={absoluteURL} size="lg" gap={6} hackerNews />
         </div>
-        <GradientBorderWrapper style={{ width: '100%', borderRadius: '8px' }}>
-          <div className="w-full relative rounded-[5px] overflow-hidden largeTablet:h-[496px]  ">
+        <GradientBorderWrapper
+          style={{ width:'100%', height, borderRadius: '8px' }}
+        >
+          <div className="relative rounded-[5px] overflow-hidden h-full w-full  object-cover">
             <Image
-              width={1206}
+              width={1800}
               height={496}
+              className="object-fit h-full w-full"
               src={src as string}
               alt="Cover"
             />
           </div>
         </GradientBorderWrapper>
+
         <BlogTextContent data={blogContent} />
 
         <AuthorBio author={author} />
@@ -108,12 +148,7 @@ const PageContent: FC<PageContentProps> = ({
           </div>
         )}
         {!featuredPost && !!blogUrl && (
-          <a
-            className="w-full max-w-[780px]"
-            href={blogUrl}
-            target="_blank"
-
-          >
+          <a className="w-full max-w-[780px]" href={blogUrl} target="_blank">
             <p className="text-left font-bold text-2xl border-b-[1px] w-fit tracking-[0.14em] pt-6">
               <DecoratedText content="$yellow-to-orangeRead entire article" />
             </p>

components/sections/blog/components/Post.tsx

@@ -57,12 +57,12 @@ const Post: FC<PostProps> = ({ data, featured }): ReactElement => {
       <div className={`${featured && 'largeTablet:hidden'}`}>
         <GradientBorderWrapper style={{ width: '100%', borderRadius: '5px' }}>
           <div className="w-full relative rounded-[5px] overflow-hidden ">
-            <Image width="580" height={304} src={src as string} alt="Cover" />
+            <Image width={580} height={304} className='min-h-[22rem]' src={src as string} alt="Cover" />
           </div>
         </GradientBorderWrapper>
       </div>
 
-      <div className="flex justify-start pt-6 pb-2 largeTablet:pt-10">
+      <div className={`flex justify-start pt-6 pb-2 ${featured ? "largeTablet:pt-4" : "largeTablet:pt-10"} `}>
         {topics?.map((item) => (
           <div key={item} className="mr-5">
             <Typography key={item} variant="body4">{`#${item}`}</Typography>
@@ -79,7 +79,7 @@ const Post: FC<PostProps> = ({ data, featured }): ReactElement => {
           </Link>
         </LocalTypography>
       </div>
-      <div className="flex items-center pb-6 largeTablet:pb-10 ">
+      <div className="flex items-center pb-6 largeTablet:pb-5 ">
         <div className="flex-shrink-0 mr-2">
           <Image src={OrangeAuthor} alt="Author" />
         </div>

pages/cli/index.tsx

@@ -5,7 +5,7 @@ import { getCommonData } from '../../lib/sanity';
 import Footer from '../../components/sections/Footer';
 import { Heading, Typography } from '../../components/common/text';
 import { Button } from '../../components/common';
-import { TbArrowNarrowRight, TbCopy } from "react-icons/tb";
+import { TbArrowNarrowRight } from "react-icons/tb";
 import Image from 'next/image';
 
 export async function getStaticProps() {
@@ -40,12 +40,11 @@ export default function CliPage({ commonData }: CliPageProps) {
             Try the <code className='px-2'>pizza</code> CLI and access OpenSauced features right from your terminal. Autogenerate your CODEOWNERS and contributor insights in seconds.
           </Typography>
 
-          <div className='flex gap-4 items-center'>
-            <code className='p-4 bg-neutral-800 rounded-xl'>
+          <div className='flex flex-col gap-4 items-center'>
+            <code className='p-4 bg-neutral-800 rounded-xl text-sm largeTablet:text-md'>
               brew install open-sauced/tap/pizza 
             </code>
-            <p>or</p>
-            <Button href='https://github.com/open-sauced/pizza-cli/releases'>Download for Mac</Button>
+            <Button href='https://github.com/open-sauced/pizza-cli/releases'>Download for Mac</Button> 
           </div>
 
           <a href="https://github.com/open-sauced/pizza-cli?tab=readme-ov-file#-install" className='hover:underline'>