Skip to content

Merge postcards into single component #9

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

Merge postcards into single component #9

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
65 changes: 47 additions & 18 deletions components/PostCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ import Link from 'next/link'
import { useInView } from 'react-intersection-observer'
import LazyLoad from 'react-lazyload'

export enum Size {
small = 'small',
medium = 'medium',
large = 'large',
}

type Props = {
size: Size
slug: string
coverImage: string
placeholder: string
Expand All @@ -14,14 +21,15 @@ type Props = {
keywords: string[]
}

const Post: React.FC<Props> = ({
export const PostCard: React.FC<Props> = ({
slug,
coverImage,
placeholder,
title,
excerpt,
date,
keywords,
size,
}) => {
const { ref, inView, entry } = useInView({
/* Optional options */
Expand All @@ -32,6 +40,24 @@ const Post: React.FC<Props> = ({
// Check if component is in default view
const [initialView, setInitialView] = useState(true)

const linkClasses = {
small: `${
inView && !initialView && 'animate__fadeInUp animate__faster'
} animate__animated Post group relative col-span-12 cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-4`,
medium: `${
inView && !initialView && 'animate__fadeInUp animate__faster'
} animate__animated Post group relative col-span-12 cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-6`,
large: `Post group mainCard relative col-span-12 mx-auto -mt-6 flex w-full cursor-pointer flex-wrap rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-12 md:flex-nowrap`,
}

const cardClasses = {
small: 'hidden h-40 w-full overflow-hidden rounded-t-lg md:flex',
medium:
'flex h-40 w-full overflow-hidden rounded-t-lg xs:h-[204px] md:h-[187px] xl:h-[266px]',
large:
' mb-4 flex min-h-[30vh] w-full overflow-hidden rounded-t-lg md:mb-0 md:h-auto md:min-h-[10vh] md:w-1/2 md:rounded-l-lg md:rounded-r-none',
}

useEffect(() => {
// If component is rendered to DOM and is not in the view, set initialView to false
if (entry && !inView) {
Expand All @@ -42,15 +68,8 @@ const Post: React.FC<Props> = ({
// Then in main function we check which posts are in view and toggle fadeIn animation class for that are not
return (
<Link href={`/posts/${slug}`} passHref>
<a
href="replace"
ref={ref}
className={`${
inView && !initialView && 'animate__fadeInUp animate__faster'
} animate__animated Post group relative col-span-12 cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-6`}
key={slug}
>
<div className="flex h-40 w-full overflow-hidden rounded-t-lg xs:h-[204px] md:h-[187px] xl:h-[266px]">
<a href="replace" ref={ref} className={linkClasses[size]} key={slug}>
<div className={cardClasses[size]}>
<div className="cardImageContainer animate__animated animate__fadeIn animate__faster relative w-full">
{coverImage.match(/.webm/) ? (
<LazyLoad height="200">
Expand All @@ -72,24 +91,36 @@ const Post: React.FC<Props> = ({
layout="fill"
objectFit="contain"
objectPosition="center"
sizes="33vw"
sizes={`${
// eslint-disable-next-line no-nested-ternary
size === 'small'
? '25vw'
: size === 'medium'
? '33vw'
: '100vw'
}`}
/>
)}
<div className="overlay" />
</div>
</div>

<div className="flex flex-col rounded-lg p-4 shadow-none">
<h3 className=" text-start text-md font-extrabold text-primary transition-all hover:text-[#222] md:text-left md:text-xl">
<h3
className={`text-start text-md font-extrabold text-primary transition-all hover:text-[#222] md:text-left ${
size !== 'small' && 'md:text-xl'
}`}
>
{title}
</h3>
<p className="text-xs text-secondary transition-all group-hover:text-secondary">
{date.split('-').reverse().join('-')}
</p>

<p className="pt-2 text-xs text-secondary transition-all line-clamp-3 group-hover:text-secondary md:text-sm lg:pt-4">
{excerpt}
</p>
{size !== 'small' && (
<p className="pt-2 text-xs text-secondary transition-all line-clamp-3 group-hover:text-secondary md:text-sm lg:pt-4">
{excerpt}
</p>
)}

<div className="flex flex-wrap pt-2">
{keywords?.map((keyword) => (
Expand All @@ -106,5 +137,3 @@ const Post: React.FC<Props> = ({
</Link>
)
}

export default Post
11 changes: 6 additions & 5 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import { getPlaiceholder } from 'plaiceholder'
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import MainPost from '../components/MainPostCard'
import PostCard from '../components/PostCard'
import MiniPostCard from '../components/MiniPostCard'
import { Size, PostCard } from '../components/PostCard'
import Head from '../components/Head'
import Header from '../components/Header'
import Hero from '../components/Hero'
Expand Down Expand Up @@ -83,7 +81,8 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
{postsCardsList.map((post, index) => {
if (index < 1) {
return (
<MainPost
<PostCard
size={Size.large}
key={post.slug}
slug={post.slug}
{...post.frontmatter}
Expand All @@ -93,6 +92,7 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
if (index < 3) {
return (
<PostCard
size={Size.medium}
key={post.slug}
slug={post.slug}
{...post.frontmatter}
Expand All @@ -101,7 +101,8 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
}
if (index < 6) {
return (
<MiniPostCard
<PostCard
size={Size.small}
key={post.slug}
slug={post.slug}
{...post.frontmatter}
Expand Down