Skip to content

Fixed PostCard & HeroPost Layout Consistency in Blog Website #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed PostCard & HeroPost Layout Consistency in Blog Website #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions components/cover-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import { Post } from "../types/post";
interface Props extends Partial<Pick<Post, "title" | "slug">> {
coverImage: Post["featuredImage"];
isCommunity?: boolean;
className?: string; // Add className prop
}

export default function CoverImage({
title,
coverImage,
slug,
isCommunity,
className, // Destructure className prop
}: Props) {
const basePath = isCommunity ? "/community/" : "/technology/";

Expand All @@ -23,13 +25,15 @@ export default function CoverImage({
alt={`Cover Image for ${title}`}
src={coverImage?.node.sourceUrl}
className={cn("rounded-md transition-border duration-300", {
" transition-scale duration-300": slug,
"transition-scale duration-300": slug,
[className]: className, // Apply className if provided
})}
priority
/>
);

return (
<div className="sm:mx-0 ">
<div className={cn("sm:mx-0", className)}> {/* Apply className to the div */}
{slug ? (
<Link href={`${basePath}${slug}`} aria-label={title}>
{image}
Expand Down
82 changes: 38 additions & 44 deletions components/hero-post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,56 +19,50 @@ export default function HeroPost({
slug,
isCommunity,
}) {

const basePath = isCommunity ? "/community" : "/technology";
excerpt = excerpt.replace("Table of Contents", "");


return (
<section>
<div className="relative bg-gray-100 border border-gray-300 px-8 py-8 rounded-md lg:grid lg:grid-cols-2 lg:gap-x-8 mb-20 md:mb-28 content-center lg:group transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)] overflow-hidden">
{/* Banner */}
<div className="absolute top-0 right-0 transform rotate-45 translate-x-[25%] translate-y-[90%] bg-orange-200 text-orange-800 text-[10px] font-bold py-0.5 w-[100px] flex justify-center items-center shadow-md">
Latest Blog
</div>
<section>
<div className="relative bg-gray-100 border border-gray-300 p-8 rounded-md grid lg:grid-cols-2 gap-8 mb-20 md:mb-28 transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)] overflow-hidden">
{/* Banner */}
<div className="absolute top-0 right-0 transform rotate-45 translate-x-[25%] translate-y-[90%] bg-orange-200 text-orange-800 text-xs font-bold py-0.5 w-24 flex justify-center items-center shadow-md">
Latest Blog
</div>

{/* Content */}
<div className="mb-8 lg:mb-0 ">
{coverImage && (
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
/>
)}
</div>
<div className="">
<div>
<h3 className="heading1 text-4xl lg:text-6xl font-bold leading-none">
<Link
href={`${basePath}/${slug}`}
className="hero-title-link title-link bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
dangerouslySetInnerHTML={{ __html: title }}
></Link>
</h3>
</div>
<div className="flex items-center gap-4">
<Avatar author={author ? author : "Anonymous"} />
<div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
<div className="text-md mb-4 pt-4">
<Date dateString={date} />
{/* Content */}
<div className="mb-8 lg:mb-0">
{coverImage && (
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
className="w-full h-64 object-cover" // Ensure consistent image size
/>
)}
</div>
<div className="flex flex-col justify-center">
<h3 className="text-4xl lg:text-6xl font-bold leading-tight mb-4">
<Link
href={`${basePath}/${slug}`}
className="hero-title-link title-link bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
dangerouslySetInnerHTML={{ __html: title }}
></Link>
</h3>
<div className="flex items-center gap-4 mb-4">
<Avatar author={author ? author : "Anonymous"} />
<div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
<div className="text-md">
<Date dateString={date} />
</div>
</div>
<div
className="text-md leading-relaxed mb-4 text-slate-600"
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</div>
</div>
<div>
<div
className="body xl:text-md text-md leading-relaxed mb-4 text-slate-600"
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</div>
</div>
</div>
</section>

</section>
);
}
31 changes: 18 additions & 13 deletions components/post-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ export default function PostPreview({
}) {
const basePath = isCommunity ? "/community" : "/technology";
excerpt = excerpt.replace("Table of Contents", "");

const [ref, springStyles] = useInView(
() => ({
from: {
opacity: 0,
},
to: {
opacity: 100,
opacity: 1,
},
config: {
duration: 500,
Expand All @@ -39,41 +40,45 @@ export default function PostPreview({
},
}),
{
rootMargin: "-200px 0px",
rootMargin: "-10px 0px",
}
);

return (
<animated.div
className="bg-gray-100 border p-6 rounded-md lg:hover:shadow-md transition group"
className="bg-gray-100 border p-6 rounded-md lg:hover:shadow-md transition group flex flex-col h-full"
ref={ref}
style={springStyles}
>
<div className="mb-5">
{coverImage && (
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
/>
<div className="relative w-full h-44 mb-4 overflow-hidden rounded-md">
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
/>
</div>
)}
</div>
<h3 className="text-2xl leading-snug leading-none heading1 font-bold">
<h3 className="text-2xl leading-snug heading1 font-bold mb-2 h-16 overflow-hidden">
<Link
href={`${basePath}/${slug}`}
className="bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
dangerouslySetInnerHTML={{ __html: title }}
></Link>
</h3>
<div className="flex items-center gap-4">
<div className="flex items-center gap-4 mb-4">
<Avatar author={author ? author : "Anonymous"} />
<div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
<div className="text-md mb-4 pt-4">
<div className="text-md">
<Date dateString={date} />
</div>
</div>

<div
className="text-sm leading-normal mb-4 body text-slate-600"
className="text-sm leading-normal body text-slate-600 flex-grow overflow-hidden line-clamp-3"
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</animated.div>
Expand Down