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

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

@@ -3,15 +3,23 @@ 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>
{
tags.map((tag, i) => ( <span class="tag-separator"/>
<>
<a class="b1-no-underline" href={`/posts/tag/${tag}/`}> <span title={`${wordCount} words`}>{readTime} min. read</span>
#{tag}
</a> <span class="tag-separator"/>
{i < tags.length - 1 && ", "}
</> {
)) tags.map((tag, i) => (
} <>
<a class="b1-no-underline" href={`/posts/tag/${tag}/`}>
#{tag}
</a>
{i < tags.length - 1 && ", "}
</>
))
}
</div>

15
web/src/components/postList/postCard.astro
View File

@@ -22,14 +22,13 @@ 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},
readTime={readTime}, readTime={readTime},
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;
} }