PostCard new design, desktop

nemanjam · Jun 15, 2024 · 9bbc71c · 9bbc71c
1 parent 0de621a
commit 9bbc71c
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 20 deletions.
diff --git a/docs/my-old-code/PostCard.astro b/docs/my-old-code/PostCard.astro
@@ -0,0 +1,77 @@
+---
+import { Image } from 'astro:assets';
+
+import Link from '@/components/Link.astro';
+import PostMeta from '@/components/PostMeta.astro';
+import TagList from '@/components/TagList.astro';
+import { ROUTES } from '@/constants/routes';
+import { cn } from '@/utils/styles';
+
+import type { Post } from '@/types/post';
+
+export interface Props {
+  post: Post;
+}
+
+const { post } = Astro.props;
+const { data, slug, readingTime } = post;
+
+const {
+  draft,
+  publishDate,
+  title,
+  heroImage,
+  heroAlt,
+  // category,
+  tags = [],
+  description,
+} = data;
+
+const postMetaProps = { readingTime, publishDate };
+---
+
+{/* Text in right column determines height, 2 lines title + 2 lines description. */}
+{/* Image determines max-height. For cases when image isn't 16/9 so it's cropped. */}
+{/* Image for 2 + 2 lines text has 168px naturaly, limit to 172, h-44 = 176 */}
+
+<article
+  class={cn(
+    'w-full flex flex-col md:flex-row gap-4 lg:gap-6',
+    'not-first:pt-4 not-last:pb-4 md:not-first:pt-6 md:not-last:pb-6',
+    'not-last:border-b border-base-300'
+  )}
+>
+  {/* left column */}
+  {
+    heroImage && (
+      <div class="md:basis-1/3 md:shrink-0">
+        <Image
+          src={heroImage}
+          alt={heroAlt}
+          widths={[320, 540]}
+          sizes="(max-width: 475px) 320px, 540px"
+          itemprop="image"
+          class="w-full h-40 md:h-full md:max-h-[172px] object-cover rounded-box"
+          transition:name={`hero-${heroImage.src}`}
+        />
+      </div>
+    )
+  }
+
+  {/* right column */}
+  <div class="flex flex-col md:basis-2/3 md:shrink">
+    <PostMeta {...postMetaProps} class="text-sm text-captions leading-none mb-1" />
+
+    {/* title */}
+    <h2 class="text-2xl font-bold break-words md:line-clamp-2 mt-0 mb-2">
+      <Link href={`${ROUTES.BLOG}${slug}`} variant="link-heading">
+        {title}
+        {draft && <sup class="text-sm text-red-400">(draft)</sup>}
+      </Link>
+    </h2>
+
+    {description && <p class="text-base mb-1 line-clamp-2">{description}</p>}
+
+    <TagList tags={tags} class="mt-auto" />
+  </div>
+</article>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
@@ -1,10 +1,12 @@
 ---
+import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
+import { getCategoryProps } from '@/modules/post';
 import Link from '@/components/Link.astro';
-import PostMeta from '@/components/PostMeta.astro';
 import TagList from '@/components/TagList.astro';
 import { ROUTES } from '@/constants/routes';
+import { formatDate, formatDateIso } from '@/utils/datetime';
 import { cn } from '@/utils/styles';
 
 import type { Post } from '@/types/post';
@@ -16,18 +18,9 @@ export interface Props {
 const { post } = Astro.props;
 const { data, slug, readingTime } = post;
 
-const {
-  draft,
-  publishDate,
-  title,
-  heroImage,
-  heroAlt,
-  // category,
-  tags = [],
-  description,
-} = data;
+const { draft, publishDate, title, heroImage, heroAlt, category, tags = [], description } = data;
 
-const postMetaProps = { readingTime, publishDate };
+const { icon: categoryIcon } = getCategoryProps(category);
 ---
 
 {/* Text in right column determines height, 2 lines title + 2 lines description. */}
@@ -51,7 +44,7 @@ const postMetaProps = { readingTime, publishDate };
           widths={[320, 540]}
           sizes="(max-width: 475px) 320px, 540px"
           itemprop="image"
-          class="w-full h-40 md:h-full md:max-h-[172px] object-cover rounded-box"
+          class="w-full h-40 md:h-full md:max-h-52 object-cover rounded-box"
           transition:name={`hero-${heroImage.src}`}
         />
       </div>
@@ -60,7 +53,25 @@ const postMetaProps = { readingTime, publishDate };
 
   {/* right column */}
   <div class="flex flex-col md:basis-2/3 md:shrink">
-    <PostMeta {...postMetaProps} class="text-sm text-captions leading-none mb-1" />
+    {/* category and publishDate row*/}
+    <div class="flex items-start justify-between mb-4 text-sm leading-none">
+      <Link
+        href={`${ROUTES.CATEGORIES}${category}`}
+        class="inline-flex items-center gap-2 bg-primary-base-200 font-medium px-2 py-0.5 rounded-button"
+      >
+        <Icon name={categoryIcon} />
+        <span class="pb-0.5">
+          {category}
+        </span>
+      </Link>
+
+      <span class="inline-flex items-center gap-2 text-captions">
+        <Icon name="mdi:access-time" class="w-4 h-4" />
+        <time itemprop="datePublished" datetime={formatDateIso(publishDate)}>
+          {formatDate(publishDate)}
+        </time>
+      </span>
+    </div>
 
     {/* title */}
     <h2 class="text-2xl font-bold break-words md:line-clamp-2 mt-0 mb-2">
@@ -70,8 +81,19 @@ const postMetaProps = { readingTime, publishDate };
       </Link>
     </h2>
 
-    {description && <p class="text-base mb-1 line-clamp-2">{description}</p>}
+    {description && <p class="text-base mb-4 line-clamp-2">{description}</p>}
 
-    <TagList tags={tags} class="mt-auto" />
+    {/* reading time and read more link */}
+    <div class="flex items-end justify-between">
+      <span class="inline-flex items-center gap-2 text-sm text-captions">
+        <Icon name="mdi:book-open-blank-variant-outline" class="w-4 h-4" />
+        <span>{`${Math.round(readingTime)} minutes`}</span>
+      </span>
+
+      <Link href={`${ROUTES.BLOG}${slug}`} class="inline-flex items-center gap-1 font-medium">
+        <span>Read more</span>
+        <Icon name="mdi:arrow-right" class="w-4 h-4" />
+      </Link>
+    </div>
   </div>
 </article>
diff --git a/src/components/PostMeta.astro b/src/components/PostMeta.astro
@@ -2,7 +2,6 @@
 import { Icon } from 'astro-icon/components';
 
 import Link from '@/components/Link.astro';
-import { CATEGORIES } from '@/constants/collections';
 import { ROUTES } from '@/constants/routes';
 import { formatDate, formatDateIso } from '@/utils/datetime';
 import { cn } from '@/utils/styles';

diff --git a/src/styles/themes.css b/src/styles/themes.css
@@ -19,8 +19,8 @@
     --th-primary: var(--var-color-blue-500);
     --th-primary-content: var(--var-color-white);
 
-    --th-primary-base-200: var(--var-color-blue-200);
-    --th-primary-base-300: var(--var-color-blue-300);
+    --th-primary-base-200: var(--var-color-blue-100);
+    --th-primary-base-300: var(--var-color-blue-200);
 
     --th-secondary: var(--var-color-orange);
     --th-secondary-content: var(--var-color-white);

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -16,8 +16,8 @@
     --var-color-blue-500: theme('colors.blue.500');
     --var-color-blue-600: theme('colors.blue.600');
     --var-color-blue-700: theme('colors.blue.700');
+    --var-color-blue-100: theme('colors.blue.100');
     --var-color-blue-200: theme('colors.blue.200');
-    --var-color-blue-300: theme('colors.blue.300');
     --var-color-purple-700: theme('colors.purple.700');
     --var-color-purple-500: theme('colors.purple.500');
     --var-color-orange: theme('colors.orange.400');