feat: refactor how blog cards layout, add metadata, better responsiveness
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { Image } from 'astro:assets';
|
||||
import getReadingTime from 'reading-time';
|
||||
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
|
||||
import { formatDate } from '@support/time';
|
||||
import Logo from '@components/images/Logo.astro';
|
||||
import { formatShortDate } from '@support/time';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
interface Props {
|
||||
@@ -12,6 +13,8 @@ interface Props {
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
|
||||
const readingTime = getReadingTime(post.content || '');
|
||||
---
|
||||
|
||||
<div class="smooth-reveal-cards group flex flex-col">
|
||||
@@ -31,25 +34,37 @@ const { post } = Astro.props;
|
||||
inferSize={true}
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-xl p-4 md:p-5 flex flex-col flex-1">
|
||||
<h3 class="card-text-title text-xl">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div class="ml-6 flex mt-auto">
|
||||
<div class="relative inline-block w-full">
|
||||
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
|
||||
<span class="relative inline-block overflow-hidden ml-2">
|
||||
Read more
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
<div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
|
||||
<div class="flex flex-row items-center mb-8">
|
||||
<h3 class="card-text-title card-hover-text-title text-xl md:text-2xl">
|
||||
{post.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center mt-auto gap-x-2 card-text-description text-sm overflow-hidden whitespace-nowrap max-w-full">
|
||||
<div class="inline-flex items-center">
|
||||
<div class="mr-2">
|
||||
<Logo
|
||||
srcLight={getDirectusImageURL(post.category.logoLight)}
|
||||
srcDark={getDirectusImageURL(post.category.logoDark)}
|
||||
alt={`Logo of ${post.category.title}`}
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
<p class="card-text-description text-sm ml-auto">
|
||||
{formatDate(post.published_date)}
|
||||
</p>
|
||||
</div>
|
||||
{post.category.title}
|
||||
</div>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<p>
|
||||
{formatShortDate(post.published_date)}
|
||||
</p>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
{readingTime.minutes.toPrecision(1)} minutes
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -1,33 +1,34 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { Image } from 'astro:assets';
|
||||
import getReadingTime from 'reading-time';
|
||||
|
||||
import { formatDate } from '@support/time';
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
|
||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||
import Logo from '@components/images/Logo.astro';
|
||||
import { formatShortDate } from '@support/time';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
url: string;
|
||||
pubDate: Date,
|
||||
img: string;
|
||||
imgAlt: string;
|
||||
post: Post;
|
||||
}
|
||||
|
||||
const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
|
||||
const { post } = Astro.props;
|
||||
|
||||
const readingTime = getReadingTime(post.content || '');
|
||||
---
|
||||
|
||||
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
|
||||
<a
|
||||
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
|
||||
href={url}
|
||||
href={`/blog/${post.slug}`}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
||||
src={getDirectusImageURL(img)}
|
||||
alt={imgAlt}
|
||||
src={getDirectusImageURL(post.image)}
|
||||
alt={post.image_alt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="850"
|
||||
@@ -37,26 +38,39 @@ const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
|
||||
</div>
|
||||
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
||||
<h2 class="card-text-header mb-2">
|
||||
{title}
|
||||
{post.title}
|
||||
</h2>
|
||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||
{subTitle}
|
||||
{post.description}
|
||||
</p>
|
||||
<div class="card-text-title flex items-center justify-between w-full">
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
<ReadMoreButton/>
|
||||
<div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
|
||||
<div class="inline-flex items-center">
|
||||
<div class="mr-2">
|
||||
<Logo
|
||||
srcLight={getDirectusImageURL(post.category.logoLight)}
|
||||
srcDark={getDirectusImageURL(post.category.logoDark)}
|
||||
alt={`Logo of ${post.category.title}`}
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
</div>
|
||||
{post.category.title}
|
||||
</div>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<p>
|
||||
{formatShortDate(post.published_date)}
|
||||
</p>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
{readingTime.minutes.toPrecision(1)} minutes
|
||||
</span>
|
||||
</div>
|
||||
<span class="card-text-description text-sm ml-auto">
|
||||
{formatDate(pubDate)}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,60 +1,72 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { Image } from 'astro:assets';
|
||||
import getReadingTime from 'reading-time';
|
||||
|
||||
import { formatDate } from '@support/time';
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
|
||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||
import Logo from '@components/images/Logo.astro';
|
||||
import { formatShortDate } from '@support/time';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
url: string;
|
||||
pubDate: Date;
|
||||
imgOne: string;
|
||||
imgOneAlt: string;
|
||||
imgTwo?: string;
|
||||
imgTwoAlt?: string;
|
||||
post: Post;
|
||||
}
|
||||
|
||||
const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
|
||||
const { post } = Astro.props;
|
||||
|
||||
const readingTime = getReadingTime(post.content || '');
|
||||
---
|
||||
|
||||
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
|
||||
<a
|
||||
class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
|
||||
href={url}
|
||||
href={`/blog/${post.slug}`}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
||||
<h2 class="card-text-header mb-2">
|
||||
{title}
|
||||
{post.title}
|
||||
</h2>
|
||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||
{subTitle}
|
||||
{post.description}
|
||||
</p>
|
||||
<div class="card-text-title flex items-center justify-between w-full">
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
<ReadMoreButton/>
|
||||
<div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
|
||||
<div class="inline-flex items-center">
|
||||
<div class="mr-2">
|
||||
<Logo
|
||||
srcLight={getDirectusImageURL(post.category.logoLight)}
|
||||
srcDark={getDirectusImageURL(post.category.logoDark)}
|
||||
alt={`Logo of ${post.category.title}`}
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
</div>
|
||||
{post.category.title}
|
||||
</div>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<p>
|
||||
{formatShortDate(post.published_date)}
|
||||
</p>
|
||||
<span>
|
||||
/
|
||||
</span>
|
||||
<span>
|
||||
{readingTime.minutes.toPrecision(1)} minutes
|
||||
</span>
|
||||
</div>
|
||||
<span class="card-text-description text-sm ml-auto">
|
||||
{formatDate(pubDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!imgTwo ? (
|
||||
{!post.image_second ? (
|
||||
<div>
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
src={getDirectusImageURL(post.image)}
|
||||
alt={post.image_alt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="850"
|
||||
@@ -67,8 +79,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
|
||||
<div class="md:hidden">
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
src={getDirectusImageURL(post.image)}
|
||||
alt={post.image_alt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="850"
|
||||
@@ -79,8 +91,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
|
||||
<div class="hidden md:flex md:items-start">
|
||||
<Image
|
||||
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
src={getDirectusImageURL(post.image)}
|
||||
alt={post.image_alt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="600"
|
||||
@@ -89,8 +101,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
|
||||
/>
|
||||
<Image
|
||||
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
|
||||
src={getDirectusImageURL(imgTwo)}
|
||||
alt={imgTwoAlt}
|
||||
src={getDirectusImageURL(post.image_second)}
|
||||
alt={post.image_second_alt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="600"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||
import Logo from '@components/images/Logo.astro';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
@@ -39,17 +38,7 @@ const { title, subTitle, url, logoLight, logoDark} = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block shrink-0 mr-4">
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ReadMoreButton/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user