update post info to use border separators

This commit is contained in:
2025-11-19 12:14:31 +13:00
parent ef0c8dd981
commit facb2b0f99
3 changed files with 31 additions and 20 deletions

View File

@@ -3,8 +3,15 @@ import { getFormattedDate } from '@utils/date'
const { publishDate, wordCount, readTime, tags } = Astro.props const { publishDate, wordCount, readTime, tags } = Astro.props
--- ---
<time datetime={publishDate}>{getFormattedDate(publishDate)}</time> | <div class="flex flex-row gap-1">
<span title={`${wordCount} words`}>{readTime} min. read</span> | <time datetime={publishDate}>{getFormattedDate(publishDate)}</time>
<span class="tag-separator"/>
<span title={`${wordCount} words`}>{readTime} min. read</span>
<span class="tag-separator"/>
{ {
tags.map((tag, i) => ( tags.map((tag, i) => (
<> <>
@@ -15,3 +22,4 @@ const { publishDate, wordCount, readTime, tags } = Astro.props
</> </>
)) ))
} }
</div>

View File

@@ -22,7 +22,7 @@ const readTime = calcReadTime(wordCount);
<p class="line-clamp-3 block italic text-gray-600">{p.description}</p> <p class="line-clamp-3 block italic text-gray-600">{p.description}</p>
} }
<div class="flex flex-row gap-1">
<PostInfo <PostInfo
publishDate={p.publishDate}, publishDate={p.publishDate},
wordCount={wordCount}, wordCount={wordCount},
@@ -30,7 +30,6 @@ const readTime = calcReadTime(wordCount);
tags={p.tags} tags={p.tags}
/> />
</div> </div>
</div>

View File

@@ -56,6 +56,10 @@
} }
} }
.tag-separator {
@apply border-l border-gray-400;
}
.content-panel { .content-panel {
@apply w-full md:w-[68%] py-8 md:py-14 px-6 md:pl-10 md:pr-0; @apply w-full md:w-[68%] py-8 md:py-14 px-6 md:pl-10 md:pr-0;
} }