Merge pull request #12 from pereira-tech-talks/feature/custom-blog-co…

…mponent

Create custom component to show blog items

astro.config.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'url';
 
 import { defineConfig, squooshImageService } from 'astro/config';
 
+import { astroImageTools } from 'astro-imagetools';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import mdx from '@astrojs/mdx';
@@ -32,9 +33,10 @@ export default defineConfig({
   telemetry: false,
   server: {
     port: 4321,
-    host: true
+    host: true,
   },
   integrations: [
+    astroImageTools,
     tailwind({
       applyBaseStyles: false,
     }),
@@ -79,13 +81,15 @@ export default defineConfig({
     astrowind(),
     svelte(),
     sentry(
-      process.env.SENTRY_DSN? {
-        dsn: process.env.SENTRY_DSN,
-        sourceMapsUploadOptions: {
-          project: process.env.SENTRY_PROJECT,
-          authToken: process.env.SENTRY_AUTH_TOKEN,
-        },
-      }: {}
+      process.env.SENTRY_DSN
+        ? {
+            dsn: process.env.SENTRY_DSN,
+            sourceMapsUploadOptions: {
+              project: process.env.SENTRY_PROJECT,
+              authToken: process.env.SENTRY_AUTH_TOKEN,
+            },
+          }
+        : {}
     ),
     // spotlightjs()
   ],

src/assets/styles/blog/BlogCard.css

@@ -0,0 +1,52 @@
+/* src/styles/BlogCard.css */
+.blog-card {
+  @apply transition-transform duration-300;
+  @apply bg-white shadow-md rounded-lg overflow-hidden;
+}
+
+.blog-card:hover {
+  @apply -translate-y-1 shadow-lg;
+}
+
+.tooltip {
+  @apply relative inline-block cursor-pointer;
+}
+
+.tooltip .tooltiptext {
+  @apply invisible bg-black text-white text-center rounded-lg p-1 absolute z-10 opacity-0 transition-opacity duration-300;
+  width: 120px;
+  bottom: 125%;
+  /* Position the tooltip above the text */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Center the tooltip horizontally */
+}
+
+.tooltip:hover .tooltiptext {
+  @apply visible opacity-100;
+}
+
+.read-time {
+  @apply text-gray-500 text-sm ml-auto uppercase;
+}
+
+.tag {
+  @apply bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded-full mr-2;
+}
+
+/* Blog Card Horizontal */
+.blog-card-horizontal {
+  @apply transition-transform duration-300 bg-white shadow-md rounded-lg overflow-hidden flex;
+}
+
+.blog-card-horizontal:hover {
+  @apply -translate-y-1 shadow-lg;
+}
+
+.image-container {
+  @apply w-1/3;
+}
+
+.content-container {
+  @apply w-2/3 p-6;
+}

src/components/Logo.astro

@@ -7,5 +7,5 @@ const PereiraTechTalksLogo = '~/assets/images/logos/per-tech-talks.png';
 <span
   class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
 >
-<Image src={PereiraTechTalksLogo} alt="Pereira Tech Talks" width={150} class="mx-auto" />
+  <Image src={PereiraTechTalksLogo} alt="Pereira Tech Talks" width={150} class="mx-auto" />
 </span>

src/components/blog/Grid.astro

@@ -9,6 +9,6 @@ export interface Props {
 const { posts } = Astro.props;
 ---
 
-<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
+<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-3 -mb-6">
   {posts.map((post) => <Item post={post} />)}
 </div>

src/components/blog/GridItem.astro

@@ -1,12 +1,13 @@
 ---
-import { APP_BLOG } from 'astrowind:config';
 import type { Post } from '~/types';
 
 import Image from '~/components/common/Image.astro';
 
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
+import '~/assets/styles/blog/BlogCard.css';
+
 export interface Props {
   post: Post;
 }
@@ -16,11 +17,15 @@ const image = await findImage(post.image);
 ---
 
 <article class="mb-6 transition">
-  <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
-    {
-      image && (
-        <a href={getPermalink(post.permalink, 'post')}>
+  <div
+    class="blog-card dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900"
+  >
+    <a href={getPermalink(post.permalink, 'post')} class="block">
+      {
+        image && (
           <Image
+            src={image || 'https://via.placeholder.com/400'}
+            alt="Article Image"
             src={image}
             class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
@@ -32,23 +37,24 @@ const image = await findImage(post.image);
             loading="lazy"
             decoding="async"
           />
+        )
+      }
+      <div class="p-6">
+        <div class="flex mb-2">
+          {post.tags.map((tag) => <span class="tag">{tag}</span>)}
+        </div>
+        <h2 class="text-2xl font-bold mb-2">{post.title}</h2>
+        <p class="text-gray-600 mb-4 text-long">{post.excerpt}</p>
+      </div>
+    </a>
+    <div class="flex items-center justify-between p-6">
+      <div class="flex items-center">
+        <a href="#" class="tooltip">
+          <img src="https://via.placeholder.com/50" alt="Author Avatar" class="w-10 h-10 rounded-full" />
+          <span class="tooltiptext">Author Name</span>
         </a>
-      )
-    }
+      </div>
+      <p class="read-time">{post.readingTime} min read</p>
+    </div>
   </div>
-  <h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
-    {
-      !APP_BLOG?.post?.isEnabled ? (
-        post.title
-      ) : (
-        <a
-          href={getPermalink(post.permalink, 'post')}
-          class="hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
-        >
-          {post.title}
-        </a>
-      )
-    }
-  </h3>
-  <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>
 </article>

src/components/widgets/BlogLatestPosts.astro

@@ -19,10 +19,10 @@ export interface Props extends Widget {
 
 const {
   title = await Astro.slots.render('title'),
-  linkText = 'View all posts',
+  linkText = 'Ver todas las entradas',
   linkUrl = getBlogPermalink(),
   information = await Astro.slots.render('information'),
-  count = 4,
+  count = 20,
 
   id,
   isDark = false,