Merge branch 'main' of https://github.com/Mastodon-DE/joinmastodon

Mastodon-DE · Jul 20, 2024 · 8ef761a · 8ef761a
2 parents aae2a22 + 703fa19
commit 8ef761a
Showing 1 changed file with 48 additions and 50 deletions.
diff --git a/components/blog/Presentation.vue b/components/blog/Presentation.vue
@@ -27,60 +27,58 @@ const formatDate = (date?: string) => {
 		</div>
 		<div
 			class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-			<ClientOnly>
-				<article
-					v-for="post in posts"
-					:key="post.title"
-					class="hover:drop-shadow-xl duration-200 hover:ring-2 p-4 hover:bg-dark-400 ring-red-500 rounded">
-					<NuxtLink
-						class="flex flex-col items-start h-full justify-between"
-						:href="`${post.path}`">
-						<div class="relative w-full" v-if="post.image">
-							<nuxt-img
-								format="webp"
-								width="500"
-								:src="post.image"
-								alt=""
-								class="aspect-[16/9] w-full rounded bg-dark-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
-							<div
-								class="absolute inset-0 rounded-2xl ring-1 ring- inset ring-gray-100/10" />
+			<article
+				v-for="post in posts"
+				:key="post.title"
+				class="hover:drop-shadow-xl duration-200 hover:ring-2 p-4 hover:bg-dark-400 ring-red-500 rounded">
+				<NuxtLink
+					class="flex flex-col items-start h-full justify-between"
+					:href="`${post.path}`">
+					<div class="relative w-full" v-if="post.image">
+						<nuxt-img
+							format="webp"
+							width="500"
+							:src="post.image"
+							alt=""
+							class="aspect-[16/9] w-full rounded bg-dark-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
+						<div
+							class="absolute inset-0 rounded-2xl ring-1 ring- inset ring-gray-100/10" />
+					</div>
+					<div class="max-w-xl h-full flex flex-col">
+						<div class="mt-8 flex items-center gap-x-4 text-xs">
+							<time
+								:datetime="post.created_at"
+								class="text-gray-500"
+								>{{ formatDate(post.created_at) }}</time
+							>
 						</div>
-						<div class="max-w-xl h-full flex flex-col">
-							<div class="mt-8 flex items-center gap-x-4 text-xs">
-								<time
-									:datetime="post.created_at"
-									class="text-gray-500"
-									>{{ formatDate(post.created_at) }}</time
-								>
-							</div>
-							<div class="group relative">
-								<h3
-									class="mt-3 text-lg font-semibold leading-6 text-gray-50 group-hover:text-gray-300">
-									{{ post.title }}
-								</h3>
-								<p
-									class="mt-5 line-clamp-3 text-sm leading-6 text-gray-300">
-									{{ post.description }}
+						<div class="group relative">
+							<h3
+								class="mt-3 text-lg font-semibold leading-6 text-gray-50 group-hover:text-gray-300">
+								{{ post.title }}
+							</h3>
+							<p
+								class="mt-5 line-clamp-3 text-sm leading-6 text-gray-300">
+								{{ post.description }}
+							</p>
+						</div>
+						<div class="mt-auto pt-8 flex items-center gap-x-4">
+							<img
+								:src="post.author.image"
+								alt=""
+								class="h-10 w-10 rounded bg-dark-100" />
+							<div class="text-sm leading-6">
+								<p class="font-semibold text-gray-50">
+									{{ post.author.name }}
+								</p>
+								<p class="text-gray-300">
+									{{ post.author.handle }}
 								</p>
-							</div>
-							<div class="mt-auto pt-8 flex items-center gap-x-4">
-								<img
-									:src="post.author.image"
-									alt=""
-									class="h-10 w-10 rounded bg-dark-100" />
-								<div class="text-sm leading-6">
-									<p class="font-semibold text-gray-50">
-										{{ post.author.name }}
-									</p>
-									<p class="text-gray-300">
-										{{ post.author.handle }}
-									</p>
-								</div>
 							</div>
 						</div>
-					</NuxtLink>
-				</article>
-			</ClientOnly>
+					</div>
+				</NuxtLink>
+			</article>
 		</div>
 	</div>
 </template>