breadone/BreadnetV3
Archived
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update post info to use border separators

Browse Source
This commit is contained in:
June
2025-11-19 12:14:31 +13:00
parent ef0c8dd981
commit facb2b0f99
3 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/post/postInfo.astro
View File

@@ -3,9 +3,16 @@ 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) => (
<> <>
<a class="b1-no-underline" href={`/posts/tag/${tag}/`}> <a class="b1-no-underline" href={`/posts/tag/${tag}/`}>
@@ -14,4 +21,5 @@ const { publishDate, wordCount, readTime, tags } = Astro.props
{i < tags.length - 1 && ", "} {i < tags.length - 1 && ", "}
</> </>
)) ))
} }
</div>

3
web/src/components/postList/postCard.astro
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>

4
web/src/styles/global.css
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;
} }