68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<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>
|