Max/MarketingMax
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Built out a marketing site, working on blog posts

Browse Source
This commit is contained in:
Max
2023-11-21 19:19:49 +00:00
commit f43c30373e
27 changed files with 17983 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pages/blog/[post].vue Normal file
View File

@@ -0,0 +1,64 @@
<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;
}
</style>

50
pages/blog/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="">
<div class="sticky top-0 py-2 bg-white opacity-90 shadow-md">
<div
class="m-auto w-full max-w-3xl flex items-center justify-between"
>
<NuxtLink class="text-xl" to="/blog">Max's Blog</NuxtLink>
<NuxtLink class="" to="/">Home</NuxtLink>
</div>
</div>
<div class="w-full h-2 bg-blue-400"></div>
<div v-if="data" class="mx-auto max-w-3xl">
<a
v-for="post in data"
:href="post._path"
class="text-blue-700 w-full px-2"
>
<h3>{{ 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());
</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;
}
</style>