enderman.ch/index
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade to Nuxt 3.12, simplify logic

Browse Source
This commit is contained in:
endermanch
2024-06-15 13:14:34 +03:00
parent 753bdb5c0a
commit 9339416c1b
23 changed files with 6958 additions and 4527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/blog/[slug].vue
+5 -5
View File
@@ -127,7 +127,7 @@ useHead({
<template>
<article
v-if="data"
class="post scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
class="post scrollbar fade-mask-sm flex flex-col gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-3"
>
<div
class="post-preamble"
@@ -135,14 +135,14 @@ useHead({
>
<div class="p-2">
<h3 class="alex">{{ data.title }}</h3>
<div class="d-flex flex-row row-gap-0 column-gap-2 flex-wrap">
<div class="d-flex flex-row gap-1 align-items-center">
<div class="flex flex-row gap-x-0 gap-y-2 flex-wrap">
<div class="flex flex-row items-center gap-1">
<iconify-icon icon="mdi:calendar" />
<strong class="nobr font-small">
{{ formatDate(data.created, 'LLLL do, y &ndash; HH:mm') }}
</strong>
</div>
<div class="d-flex flex-row gap-1 align-items-center">
<div class="flex flex-row items-center gap-1">
<iconify-icon icon="mdi:clock-outline" />
<strong class="nobr font-small">
{{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
@@ -162,7 +162,7 @@ useHead({
</NuxtLink>
</div>
<div class="post-content">
<Separator class="mt-0" />
<hr class="accent accent-gradient border-0 h-px" />
<ContentRenderer :value="data" />
</div>
</article>
pages/blog/index.vue
+10 -14
View File
@@ -56,7 +56,7 @@ useHead({
}"
>
<template #default="{ list }">
<div class="d-grid gap-3">
<div class="grid gap-3">
<NuxtLink
v-for="post in list"
:key="post._path"
@@ -64,7 +64,7 @@ useHead({
class="no-decoration"
>
<article
class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
class="post-box flex flex-col md:flex-row gap-3 rounded-xl h-full"
>
<div class="post-thumb">
<img
@@ -74,14 +74,14 @@ useHead({
`/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
"
:alt="post.title"
class="rounded-4"
class="rounded-xl"
/>
</div>
<div class="w-100">
<div class="w-full">
<h3 class="post-title alex">{{ post.title }}</h3>
<p class="post-description mb-0">{{ post.description }}</p>
<div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
<div class="post-tags flex flex-row flex-wrap gap-2 py-2">
<span
v-for="(tag, index) in post.tags.slice(0, 3)"
:key="index"
@@ -94,10 +94,10 @@ useHead({
</span>
</div>
<Separator class="m-0" />
<hr class="accent accent-gradient border-0 h-px" />
<div class="post-details py-2">
<div class="d-flex flex-row gap-1 align-items-center">
<div class="flex flex-row items-center gap-1">
<iconify-icon icon="mdi:calendar" />
<small class="nobr">
{{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
@@ -105,7 +105,7 @@ useHead({
</div>
<div
v-if="post.updated"
class="d-flex flex-row gap-1 align-items-center"
class="flex flex-row items-center gap-1"
>
<iconify-icon icon="mdi:pencil" />
<small class="nobr">
@@ -115,9 +115,7 @@ useHead({
</div>
</div>
<div
class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
>
<div class="post-pocket flex flex-row items-center gap-1 p-2">
<iconify-icon icon="mdi:clock-outline" />
<small class="nobr font-monospace font-small">
{{ post.readingTime.text }}
@@ -129,9 +127,7 @@ useHead({
</template>
<template #not-found>
<div
class="d-flex flex-column justify-content-center align-items-center gap-3"
>
<div class="flex flex-col justify-center items-center gap-3">
<span>No posts found 🙁</span>
<NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
</div>