86 lines
No EOL
2.2 KiB
Vue
86 lines
No EOL
2.2 KiB
Vue
<template>
|
|
<main>
|
|
<!-- <a href="/"><-- Return Home</a> -->
|
|
<BigButton text="<<< Return Home" href="/"/>
|
|
<h1 class="no-margin">Tabby's Blog</h1>
|
|
|
|
<p class="no-margin" v-if="qSupplied">Selected Tag: <strong>{{query}}</strong> <a v-if="qSupplied" href="blog-index">(Clear Search)</a></p>
|
|
<p class="no-margin">Tag Search:
|
|
<a href="blog-index?tag=Programming">Programming</a> -
|
|
<a href="blog-index?tag=Godot">Godot</a> -
|
|
<a href="blog-index?tag=Tech">Tech</a> -
|
|
<a href="blog-index?tag=Queerness">Queerness</a> -
|
|
<a href="blog-index?tag=Gaming">Gaming</a>
|
|
<!-- <a class="no-posts" href="blog-index?tag=Mental Health">Mental Health</a> -->
|
|
</p>
|
|
|
|
<hr>
|
|
<div>
|
|
<BlogCard v-for="post in data" class="posts-list"
|
|
:key="post.id"
|
|
:href="post._path"
|
|
:heading="post.title"
|
|
:subheading="post.date"
|
|
:description="post.description"
|
|
:id="post.id"
|
|
:tags="post.tags"
|
|
/>
|
|
</div>
|
|
|
|
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
useSeoMeta({
|
|
title: "Blog",
|
|
ogTitle: "Blog",
|
|
description: "I write about random things sometimes",
|
|
ogDescription: "I write about random things sometimes",
|
|
});
|
|
// const route = useRoute()
|
|
// const { data: tagSearch } = await useFetch(`/api/mountains/${route.params.slug}`)
|
|
var query : string = String(useRoute().query.tag)
|
|
var qSupplied : boolean = false
|
|
// console.log (query == 'undefined')
|
|
if (query == 'undefined'){
|
|
query = ''
|
|
// console.log('no tag supplied')
|
|
}
|
|
else{
|
|
// console.log('tag successful')
|
|
qSupplied = true
|
|
}
|
|
var { data } = await useAsyncData('home', () => queryContent('blog').where({ tags: { $contains: query },hidden: {$not : true}},).sort({id:-1, $numeric: true}).find())
|
|
</script>
|
|
|
|
<style scoped>
|
|
main {
|
|
/* display: flex; */
|
|
/* flex-direction: column; */
|
|
/* align-items: center; */
|
|
padding: 2rem;
|
|
margin-top: 3.5rem;
|
|
/* gap: 0rem; */
|
|
/* width: 80%; */
|
|
|
|
}
|
|
|
|
.posts-list{
|
|
width: 80%;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
|
|
.no-margin{
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.no-posts{
|
|
color: gray;
|
|
}
|
|
</style> |