88 lines
1.5 KiB
Svelte
88 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { format } from 'date-fns';
|
|
import type { Post } from './+page.server';
|
|
|
|
export let showYear: boolean = false;
|
|
export let showReadingTime: boolean = true;
|
|
export let post: Post;
|
|
|
|
const href = `/${post.path}/`;
|
|
</script>
|
|
|
|
<a {href}>
|
|
<li>
|
|
<div>
|
|
<h5 class="post-title">
|
|
{post.meta.title}
|
|
</h5>
|
|
{#if post.meta.description}
|
|
<p class="description">{post.meta.description}</p>
|
|
{/if}
|
|
</div>
|
|
<div class="meta">
|
|
<time datetime={post.meta.date}>
|
|
{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
|
|
</time>
|
|
{#if showReadingTime}
|
|
<div>{post.readingTime.words} words, {post.readingTime.text}</div>
|
|
{/if}
|
|
</div>
|
|
</li>
|
|
<div class="print-link">{`https://bgenc.net${href}`}</div>
|
|
</a>
|
|
|
|
<style lang="scss">
|
|
@import '../../../vars';
|
|
|
|
/* Restore the color of everything under the post links, except the titles */
|
|
a {
|
|
color: $color-text;
|
|
text-decoration: none;
|
|
|
|
.post-title {
|
|
color: $color-primary;
|
|
}
|
|
|
|
&:hover .post-title {
|
|
text-decoration-color: unset;
|
|
}
|
|
}
|
|
|
|
time {
|
|
width: 8rem;
|
|
}
|
|
|
|
.post-title {
|
|
text-decoration: underline;
|
|
text-decoration-color: transparent;
|
|
transition: all var(--animation-speed) var(--animation-type);
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.9rem;
|
|
margin-top: -1.4rem;
|
|
}
|
|
.meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.print-link {
|
|
display: none;
|
|
}
|
|
|
|
@media print {
|
|
.print-link {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|