added tag search to blog

components/TextCard.vue

@@ -4,7 +4,8 @@ const props = defineProps({
   heading: String,
   description: String,
   subheading: String,
-  id: Number
+  id: Number,
+  tags: String
 });
 </script>
 
@@ -13,7 +14,8 @@ const props = defineProps({
         
         <div class="text-content">
             <h2 class="heading"> {{props.heading}}</h2>
-            <p class="subheading">{{props.subheading}} - #{{ props.id }}</p>
+            <p v-if="tags===''" class="subheading">{{props.subheading}} - #{{ props.id }}</p>
+            <p v-else class="subheading">{{props.subheading}} - #{{ props.id }} - {{ props.tags }}</p>
             <p>{{props.description}}</p>
         </div>
     </a>

content/blog/about-this-site.md

@@ -4,6 +4,7 @@ title: 'About This Site'
 description: 'A look behind the technologies and inspiration for this site'
 date: '20-07-2024'
 id: 2
+tags: 'Programming'
 
 ---
 

content/blog/first-post.md

@@ -4,6 +4,7 @@ title: 'First Blog Post'
 description: 'A simple test post to make sure everythings working'
 date: '20-07-2024'
 id: 1
+tags: ''
 
 ---
 

pages/blog-index.vue

@@ -3,6 +3,12 @@
     <a href="/"><-- Return Home</a>
     <h1>Tom's Blog</h1>
     
+    <p>Tag Search: 
+      <a v-if="qSupplied" href="blog-index">Clear Search</a> - 
+      <a href="blog-index?tag=Programming">Programming</a> - 
+      <a href="blog-index?tag=GameDev">Game Dev</a> - 
+      <a href="blog-index?tag=Queer">Queer Stuff</a>
+    </p>
 
     <TextCard v-for="post in data"
         :key="post.id"
@@ -11,6 +17,7 @@
         :subheading="post.date"
         :description="post.description"
         :id="post.id"
+        :tags="post.tags"
       />
 
     
@@ -19,7 +26,20 @@
 </template>
 
 <script lang="ts" setup>
-  var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1}).find())
+  // 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 } }).sort({id:-1}).find())
 </script>
 
 <style>