Dynamic Tag

assets/css/main.css

@@ -22,7 +22,6 @@ a:hover {
 /* Header and Navigation Styling */
 header {
     padding: 10px 20px;
-    background-color: #000; /* maintain the background across all major elements */
     text-align: center;
 }
 

content/articles/creating-a-simple-chatbot-with-langchain-and-ollama.md

@@ -1,6 +1,7 @@
 ---
 draft: false
 date: 06-05-2024
+tag: LLM
 ---
 
 # Creating a simple chatbot with Langchain and Ollama 

pages/articles.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+const { data } = await useAsyncData('articles', () => queryContent('/articles').find())
+const tags = computed(() => data.value.map((article) => article.tag).filter((tag) => tag !== undefined))
+const LLMArticles = (tag) => data.value.filter((article) => article.tag === tag).sort((a, b) => a.date > b.date ? -1 : 1)
+console.log(LLMArticles('LLM'))
+</script>
+<template>
+    <section class="articles">
+        <article>
+            <h1>Latest Articles</h1>
+            <ul>
+                <li v-for="tag in tags" :key="tag">
+                    <h2>{{ tag }}</h2>
+                    <ul>
+                        <li v-for="article in LLMArticles(tag)" :key="article.id">
+                            <router-link :to="`${article._path}`">{{ article.title }} - [Published {{article.date}}]</router-link>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </article>
+    </section>
+</template>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+</style>