<template>
    <div>
        <div class="sticky top-0 py-2 px-4 bg-white opacity-90 shadow-md">
            <div
                class="m-auto w-full max-w-3xl flex items-center justify-between"
            >
                <NuxtLink class="text-2xl text-zinc-600" to="/blog"
                    >Project Overview</NuxtLink
                >
                <NuxtLink to="/">Back to Resume</NuxtLink>
            </div>
        </div>
        <div class="pt-4"></div>
        <div class="mx-auto max-w-3xl px-4 blog">
            <h1>{{ page.title }}</h1>
            <h2 class="text-zinc-500 pb-3">Posted on: {{ page.date }}</h2>
            <!-- <ContentDoc /> -->
            <ContentRenderer :key="page._id" :value="page" />
        </div>
        <div class="w-full h-2 bg-blue-400 my-4"></div>
        <div v-if="data && page" class="mx-auto max-w-3xl px-4">
            <p>Other Projects</p>
            <a
                v-for="post in data"
                :href="post._path"
                class="text-blue-700 w-full px-2"
            >
                <h3 class="text-xl">{{ post.title }}</h3>
                <p class="text-zinc-500">{{ post.description }}</p>
                <!-- <p>{{ post }}</p> -->
            </a>
        </div>
    </div>
</template>

<script setup>
    // Find other pages and list them
    const { data } = await useAsyncData("blog", () => queryContent("/").find());
    // Find current page content
    const { page } = useContent();
    // console.log(page.value);
    // console.log(data.value);
</script>

<style>
    .blog {
        @apply leading-9 text-base;
    }
    .blog a {
        @apply text-blue-700;
    }
    .blog h1 {
        @apply pt-5 text-3xl border-zinc-300;
    }
    .blog h3 {
        @apply pt-5 mb-2 text-xl border-b border-zinc-300;
    }
    .blog img {
        @apply my-3 shadow-sm;
    }
    .blog p + P {
        @apply pt-4;
    }
    .blog ul {
        @apply list-disc ml-10;
    }
</style>
