Remove v-if prop anti-pattern, clean up, add reader mode

This commit is contained in:
2024-02-18 14:36:50 +03:00
parent 3853e8fa20
commit 9386c1d158
21 changed files with 131 additions and 204 deletions
+26 -8
View File
@@ -32,20 +32,36 @@ import { formatDate } from 'date-fns'
class="rounded-4"
/>
</div>
<div>
<div class="w-100">
<h3 class="post-title alex">{{ post.title }}</h3>
<p class="post-description">{{ post.description }}</p>
<p class="post-description mb-0">{{ post.description }}</p>
<div class="row">
<div class="col-6 d-flex flex-row gap-1 align-items-center">
<div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
<span
v-for="(tag, index) in post.tags.slice(0, 3)"
:key="index"
class="nobr"
>
{{ tag }}
</span>
<span v-if="post.tags.length > 3" class="nobr">
{{ post.tags.length - 3 }} more
</span>
</div>
<Separator class="m-0" />
<div class="post-details py-2">
<div class="d-flex flex-row gap-1 align-items-center">
<iconify-icon icon="mdi:calendar" />
<small class="nobr">
{{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
</small>
</div>
</div>
<div v-if="post.updated" class="row">
<div class="col-12 d-flex flex-row gap-1 align-items-center">
<div
v-if="post.updated"
class="d-flex flex-row gap-1 align-items-center"
>
<iconify-icon icon="mdi:pencil" />
<small class="nobr">
{{ formatDate(post.updated, 'LLLL do, y &ndash; HH:mm') }}
@@ -54,7 +70,9 @@ import { formatDate } from 'date-fns'
</div>
</div>
<div class="post-pocket d-flex flex-row gap-1 align-items-center">
<div
class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
>
<iconify-icon icon="mdi:clock-outline" />
<small class="nobr font-monospace font-small">
{{ post.readingTime.text }}