I added a new type of post called reposts. In my Article component— used to render each article in multiple modes (eg. list, full, snippet)— I already include all tags as classes. I use this in lists to add the icons— look at the Ramblin’ section of the homepage.
<article data-mode={mode} data-draft={draft} class={`b--post ${tags.map(tag => `tag-${tag}`).join(' ')}`}>
[...]
</article>
So adding a new post type is just a tag. With the class tag-repost
, I can now add the icon. But I also wanted to show the original post embedded. To do this, I added an optional string called originalPostSlug
to my Content Collection. And this gets added to the Article component.
---
let originalPost: CollectionEntry<'posts'> | undefined = undefined
if (originalPostSlug) {
originalPost = (await getCollection('posts')).find(post => post.slug === originalPostSlug)
}
---
Now I have the original article. So now we display it after the content.
<div class="b--post--content">
<Content />
{
originalPostSlug && originalPostSlug && (
<div class="b--post--repost">
<Article post={originalPost} mode="list" />
</div>
)
}
</div>
You can see it in action here.