add: basic blog layout

Basic Blog Layout to work on

app/pages/blog/[slug].vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

app/pages/blog/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <section id="blog" class="Blog content">
+    <div class="grid">
+      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { data } = await useAsyncData('articles', () => queryCollection('blog').limit(10).all())
+
+const articles = data.value!
+
+const makeBlogCard = (article : typeof articles[0]) => ({
+  title: article.title,
+  description: article.description,
+  image: article.meta.image as string,
+  date: article.meta.date as string,
+  excerpt: article.excerpt,
+  link: article.path,
+  tags: article.meta.tags as string[],
+  category: article.meta.category as string,
+  author: article.meta.author as { name: string, image: string },
+})
+</script>