<template>
  <main class="min-h-screen relative bg-[#070F11]">
    <FlickeringGrid
    class="absolute inset-0 z-0"
    color="#0CE77E"
    :squareSize="3"
    :gridGap="10"
    :maxOpacity="0.2"
    />
    <div class="relative z-10">
      <hero />
      <section
        class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 overflow-hidden text-primary"
      >
        <post v-for="post in data" :content="post" />
      </section>
    </div>
  </main>
</template>

<script setup>
import FlickeringGrid from "@/components/FlickeringGrid.vue";
import seoConfig from "../seoConfig/index";

useHead({
  title: seoConfig.title,
  meta: [
    {
      name: "description",
      content: seoConfig.description,
      meta: [
        { name: "og:title", content: seoConfig.og.title },
        { name: "og:description", content: seoConfig.og.description },
        { name: "og:image", content: seoConfig.og.image },
        { name: "og:url", content: seoConfig.og.url },
        { name: "twitter:title", content: seoConfig.og.title },
        { name: "twitter:description", content: seoConfig.og.description },
        { name: "twitter:image", content: seoConfig.og.image },
        { name: "twitter:card", content: "summary_large_image" },
      ],
    },
  ],
});

const { data } = await useAsyncData("feed", () =>
  queryContent("/posts").find()
);
</script>
