feat(blog): improve card loading and blog page styles

Author: rafa-thayto

src/components/BlogCard/BlogCard.tsx

@@ -7,7 +7,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
 import posthog from 'posthog-js'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 interface BlogCardProps {
   id: string
@@ -23,6 +23,7 @@ interface BlogCardProps {
   href: string
   reactionsLength: number
   commentsLength: number
+  priority?: boolean
 }
 
 export const BlogCard = ({
@@ -35,11 +36,10 @@ export const BlogCard = ({
   image,
   reactionsLength,
   commentsLength,
+  priority = false,
 }: BlogCardProps) => {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const cardImageId = `card-image-${id}`
-  const cardImageElementRef = useRef<HTMLDivElement>(null)
 
   const [hasLike, setHasLike] = useState(false)
 
@@ -57,15 +57,8 @@ export const BlogCard = ({
     setHasLike((oldState) => !oldState)
   }, [])
 
-  const handleImageOnLoad = useCallback(() => {
-    const div = cardImageElementRef.current
-    if (div) {
-      div.className = `${div?.className} loaded not-blur`
-    }
-  }, [])
-
   return (
-    <div className="rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 overflow-hidden shadow-lg transition border-gray-400 dark:border-black hover:border-indigo-300 hover:border border bg-slate-50 dark:bg-gray-800">
+    <div className="rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 overflow-hidden shadow-lg transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-indigo-300 hover:shadow-xl bg-white dark:bg-gray-800">
       <Link
         href={href}
         onClick={() => {
@@ -76,53 +69,44 @@ export const BlogCard = ({
         }}
       >
         {image && (
-          <>
-            <div
-              id={cardImageId}
-              ref={cardImageElementRef}
-              className="h-64 relative blurred-img"
-              style={
-                (image?.blurDataURL && {
-                  backgroundImage: `url(${image?.blurDataURL})`,
-                  backgroundRepeat: 'no-repeat',
-                  backgroundSize: 'cover',
-                }) ||
-                {}
-              }
-            >
-              <Image
-                className="object-cover"
-                fill
-                loading="lazy"
-                onLoad={handleImageOnLoad}
-                src={image.src}
-                alt={image.alt || title}
-              />
-            </div>
-          </>
+          <div className="relative aspect-video bg-gray-100 dark:bg-gray-700 overflow-hidden">
+            <Image
+              className="object-cover transition-transform duration-200 hover:scale-105"
+              fill
+              priority={priority}
+              loading={priority ? 'eager' : 'lazy'}
+              placeholder={image.blurDataURL ? 'blur' : 'empty'}
+              blurDataURL={image.blurDataURL}
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              src={image.src}
+              alt={image.alt || title}
+            />
+          </div>
         )}
-        <div className="px-6 py-4">
-          <h2 className="font-bold text-slate-900 dark:text-white text-xl mb-2">
+        <div className="px-6 py-4 flex flex-col gap-2">
+          <h2 className="font-bold text-slate-900 dark:text-white text-xl mb-2 line-clamp-2">
             {title}
           </h2>
           <p className="text-gray-400 text-sm mb-2">
-            {new Intl.DateTimeFormat('pt-BR', {
-              dateStyle: 'long',
-            }).format(new Date(publishedTime))}
+            <time dateTime={new Date(publishedTime).toISOString()}>
+              {new Intl.DateTimeFormat('pt-BR', {
+                dateStyle: 'long',
+              }).format(new Date(publishedTime))}
+            </time>
           </p>
-          <p className="text-gray-700 dark:text-slate-300 text-base">
+          <p className="text-gray-700 dark:text-slate-300 text-sm line-clamp-3">
             {description}
           </p>
         </div>
       </Link>
 
-      <div className="px-6 pt-4 pb-2">
+      <div className="px-6 pt-4 flex flex-wrap gap-2 mb-4 text-blue-800 dark:text-blue-300">
         {tags?.map((tag) => (
           <Link
             key={`tag-${tag}-${id}`}
             href={pathname + '?' + createQueryString('tag', tag)}
             rel="noopener nofollow"
-            className="inline-block bg-gray-200 dark:bg-slate-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2"
+            className="inline-block bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full px-3 py-1 text-xs font-normal hover:bg-gray-300 dark:hover:bg-slate-300 transition-colors duration-200"
           >
             #{tag}
           </Link>

src/pages/blog/index.tsx

@@ -62,12 +62,25 @@ const Blog = ({ posts: p }: InferGetStaticPropsType<typeof getStaticProps>) => {
     })),
   }
 
+  const priorityPosts = posts.slice(0, 3)
+
   return (
     <Layout>
       <Head>
         <script type="application/ld+json">
           {JSON.stringify(structuredData)}
         </script>
+        {priorityPosts.map((post, index) =>
+          post.data.image ? (
+            <link
+              key={`preload-${post.data.id}`}
+              rel="preload"
+              as="image"
+              href={`/static/images/${post.data.image.src}`}
+              crossOrigin="anonymous"
+            />
+          ) : null,
+        )}
       </Head>
       <NextSeo
         title="Rafael Thayto - Blog"
@@ -93,19 +106,22 @@ const Blog = ({ posts: p }: InferGetStaticPropsType<typeof getStaticProps>) => {
       />
 
       <main className="sm:px-2 mt-8">
-        <div className="px-4 sm:px-2">
+        <div className="px-4 sm:px-2 mb-8 max-w-3xl mx-auto flex flex-col gap-2">
           <h1 className="text-4xl text-slate-900 dark:text-white font-bold m-4 text-center">
             Blog
           </h1>
-          <h2 className="text-lg text-slate-900 dark:text-slate-400 mb-4 text-center">
+          <p className="text-base text-slate-900 dark:text-slate-400 mb-4 font-light text-center">
             É aqui onde você encontra tudo que gostaria de saber, o que sabe e
             até o que nem sabia que queria saber! :D
-          </h2>
+          </p>
         </div>
 
-        <div className="flex flex-wrap justify-center">
-          {posts?.map((post) => (
-            <article key={post.data.title} className="my-2 sm:m-2 lg:max-w-md ">
+        <div className="flex flex-wrap justify-center gap-4">
+          {posts?.map((post, index) => (
+            <article
+              key={post.data.title}
+              className="w-full sm:max-w-sm lg:max-w-md"
+            >
               <BlogCard
                 id={post.data.id}
                 title={post.data.title}
@@ -124,6 +140,7 @@ const Blog = ({ posts: p }: InferGetStaticPropsType<typeof getStaticProps>) => {
                 href={post.data.href}
                 reactionsLength={post.data.reactionsLength}
                 commentsLength={post.data.commentsLength}
+                priority={index < 3}
               />
             </article>
           ))}

src/styles/globals.css

@@ -44,66 +44,34 @@
   transform: scaleX(1);
 }
 
-/* BlogCard */
-.blurred-img {
-  background-repeat: no-repeat;
-  background-size: cover;
-  filter: blur(20px);
+/* BlogCard - Optimized loading */
+.blog-card-skeleton {
+  background: linear-gradient(90deg,
+      var(--skeleton-base) 0%,
+      var(--skeleton-highlight) 50%,
+      var(--skeleton-base) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
 }
 
-.blurred-img::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  animation: pulse 2.5s infinite;
-  background-color: var(--text-color);
-}
-
-@keyframes pulse {
+@keyframes shimmer {
   0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 0.1;
+    background-position: -200% 0;
   }
 
   100% {
-    opacity: 0;
+    background-position: 200% 0;
   }
 }
 
-.blurred-img.loaded::before {
-  animation: none;
-  content: none;
-}
-
-.blurred-img img {
-  opacity: 0;
-  transition: opacity 250ms ease-in-out;
-}
-
-.blurred-img.loaded img {
-  opacity: 1;
-}
-
-.blurred-img.not-blur {
-  animation: blur 0.25s forwards;
+:root {
+  --skeleton-base: #f3f4f6;
+  --skeleton-highlight: #e5e7eb;
 }
 
-@keyframes blur {
-  0% {
-    filter: blur(20px);
-  }
-
-  50% {
-    filter: blur(15px);
-  }
-
-  100% {
-    filter: blur(0px);
-  }
+.dark {
+  --skeleton-base: #374151;
+  --skeleton-highlight: #4b5563;
 }
 
 @keyframes fade-in {