<script setup lang="ts">
import { formatDate } from 'date-fns'

const config = useAppConfig()
const meta = {
  title: 'The Enderchest',
  description:
    'A blog about software development, scientific research and Windows quirks.',
  image: `${config.url}/images/chest.png`,
  url: `${config.url}/blog`,
}

useSeoMeta({
  title: meta.title,
  description: meta.description,
  ogTitle: meta.title,
  ogDescription: meta.description,
  ogImage: meta.image,
  ogUrl: meta.url,
  ogType: 'website',
  twitterTitle: meta.title,
  twitterDescription: meta.description,
  twitterImage: meta.image,
  twitterCard: 'summary',
})

useHead({
  title: 'The Enderchest',
  htmlAttrs: {
    lang: config.locale || 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})
</script>

<template>
  <section>
    <h3 class="alex">The Enderchest</h3>
    <p>
      You're browsing the enderchest — a blog about software development,
      scientific research and Windows quirks.
    </p>
    <h4 class="alex">Recent posts</h4>
    <ContentList
      :query="{
        path: '/blog',
        where: [{ draft: false }],
        limit: 3,
        sort: [{ created: -1 }],
      }"
    >
      <template #default="{ list }">
        <div class="d-grid gap-3">
          <NuxtLink
            v-for="post in list"
            :key="post._path"
            :to="post._path"
            class="no-decoration"
          >
            <article
              class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
            >
              <div class="post-thumb">
                <img
                  draggable="false"
                  :src="
                    post.thumbnail ??
                    `/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
                  "
                  :alt="post.title"
                  class="rounded-4"
                />
              </div>
              <div class="w-100">
                <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">
                  <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
                    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') }}
                    </small>
                  </div>
                </div>
              </div>

              <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 }}
                </small>
              </div>
            </article>
          </NuxtLink>
        </div>
      </template>

      <template #not-found>
        <div
          class="d-flex flex-column justify-content-center align-items-center gap-3"
        >
          <span>No posts found 🙁</span>
          <NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
        </div>
      </template>
    </ContentList>
  </section>
</template>

<style scoped lang="scss"></style>
