Montech_Landing/apps/landing/pages/blog/index.vue

<template>
  <div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
    <SiteNavbar brand="منتک" />
    <div class="mx-auto max-w-[1100px]">
      <h1 class="font-display text-4xl font-extrabold md:text-6xl">بلاگ</h1>
      <p class="mt-4 max-w-xl text-ash">یادداشت‌هایی درباره محصول، مهندسی و ساخت نرم‌افزار.</p>
      <ul class="mt-16 divide-y divide-white/[0.07] border-y border-white/[0.07]">
        <li v-for="post in posts" :key="post.id" class="py-8">
          <NuxtLink :to="`/blog/${post.slug}`" class="group block">
            <p class="text-sm text-ash">
              {{ post.publishedAt ? new Date(post.publishedAt).toLocaleDateString("fa-IR") : "" }}
            </p>
            <h2 class="mt-2 font-display text-2xl font-bold group-hover:text-volt md:text-3xl">
              {{ post.title }}
            </h2>
            <p class="mt-3 max-w-2xl text-sm text-ash">{{ post.excerpt }}</p>
          </NuxtLink>
        </li>
      </ul>
      <p v-if="!posts?.length" class="mt-10 text-ash">هنوز پستی منتشر نشده است.</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: posts } = await useAsyncData("blog-list", () => fetchPublicBlog());
const { data: page } = await useAsyncData("page-blog", () => fetchPage("blog"));
applyPageSeo(page.value?.seo);
</script>