add: basic blog layout

Basic Blog Layout to work on

app/components/Blog/Author.vue

@@ -0,0 +1,29 @@
+<template>
+  <aside class="BlogAuthor">
+    <div class="image">
+      <img :src="image" :alt="`Bild von ${name}`" />
+    </div>
+    <div class="meta">
+      <span class="name">{{ name }}</span>
+      <span class="date">{{ dateFormatted }}</span>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  name : string
+  image : string
+  date : string
+}
+
+const { date } = defineProps<Props>()
+
+const formatter = new Intl.DateTimeFormat('de-DE', {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+})
+
+const dateFormatted = computed(() => formatter.format(new Date(date)))
+</script>

app/components/Blog/Card.vue

@@ -0,0 +1,42 @@
+<template>
+  <NuxtLink :to="link" class="BlogCard z-2">
+    <img :src="image" alt=" " aria-hidden="true" />
+    <div class="card-content">
+      <header>
+        <span class="chip">{{ category }}</span>
+        <h2>{{ title }}</h2>
+        <small>{{ description }}</small>
+      </header>
+      <main>
+        <ContentRenderer :value="excerpt" />
+      </main>
+      <footer>
+        <BlogAuthor :name="author.name" :image="author.image" :date="date" />
+        <div class="tags">
+          <span>tags</span>
+          <span class="tag" v-for="tag in tags">{{tag}}</span>
+        </div>
+      </footer>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  title : string
+  description : string
+  image : string
+  date : string
+  excerpt : { type: string, children?: any }
+  link : string
+  tags : string[]
+  category : string
+  author : {
+    name : string
+    image : string
+  }
+}
+
+defineProps<Props>()
+
+</script>