mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Upgrade nuxt & nuxt-ui to latest

Browse Source
This commit is contained in:
Marios Antonoudiou
2025-09-19 20:45:17 +03:00
parent b8a4eceab5
commit ee04181d82
21 changed files with 10310 additions and 15424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/articles/[...slug].vue
View File

@@ -17,17 +17,17 @@ const { data: article } = useAsyncData(path, async () => {
<template>
<UContainer
v-motion-fade
class="flex flex-col gap-3 prose dark:prose-invert"
class="flex flex-col gap-3 prose max-w-3xl dark:prose-invert p-4 sm:p-6 lg:p-8"
as="article"
>
<div class="text-sm text-slate-500">
{{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
</div>
<h1>{{ article.title }}</h1>
<h1 class="text-3xl md:text-4xl font-bold">{{ article.title }}</h1>
</UContainer>
<UContainer
class="hidden md:block"
class="hidden md:block max-w-3xl p-4 sm:p-6 lg:p-8"
as="figure"
v-if="article.coverImage?.url"
v-motion-fade
@@ -45,7 +45,7 @@ const { data: article } = useAsyncData(path, async () => {
v-if="article.coverImage.authorUrl"
:to="article.coverImage.authorUrl"
target="_blank"
class="text-xs text-slate-500 italic font-serif hover:underline"
class="text-xs text-slate-500 italic font-serif hover:underline p-4 sm:p-6 lg:p-8"
>
Photo by {{ article.coverImage.author }}
</ULink>
@@ -54,7 +54,7 @@ const { data: article } = useAsyncData(path, async () => {
<UContainer
v-motion-fade
:delay="500"
class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
class="flex flex-col gap-3 prose dark:prose-invert !pt-0 max-w-3xl p-4 sm:p-6 lg:p-8"
as="article"
>
<ContentRenderer :value="article" />

10
pages/articles/index.vue
View File

@@ -11,14 +11,14 @@ const articles = useAsyncData("articles", async () => {
</script>
<template>
<UContainer v-motion-fade class="prose dark:prose-invert">
<h1>Articles</h1>
<UContainer v-motion-fade class="prose dark:prose-invert p-4 sm:p-6 lg:p-8 max-w-3xl">
<h1 class="font-bold text-3xl md:text-4xl">Articles</h1>
</UContainer>
<UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
<UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8 max-w-3xl p-4 sm:p-6 lg:p-8" as="section">
<UCard
class="col-span-12 md:col-span-6"
:ui="{ body: { padding: '' } }"
:ui="{ body: '!p-0' }"
v-for="article in articles.data.value"
>
<div class="grid gap-4 pb-4 md:pb-6">
@@ -39,7 +39,7 @@ const articles = useAsyncData("articles", async () => {
</div>
<div class="w-full px-4 md:px-6">
<UButton variant="soft" color="gray" :to="article.path"
<UButton variant="soft" color="neutral" :to="article.path"
>Read article</UButton
>
</div>