add: first post, external posts, new comps

Add first post for monday, add external posts from other authors, add components for internal and external links

app/pages/blog/[slug].vue

@@ -15,10 +15,12 @@
             <span class="chip interactive"><BlogCategory :name="article.category as Category"/></span>
           </NuxtLink>
         </div>
-        <h1 class="margin-top">{{ article.title }}</h1>
-        <h2>{{ article.description }}</h2>
+        <h1 class="margin-top">
+          <span>{{ article.title }}</span>
+          <small>{{ article.description }}</small>
+        </h1>
       </header>
-      <div class="flex-col gap-default article-text">
+      <div class="flex-col article-text">
         <ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
       </div>
     </main>

app/pages/blog/index.vue

@@ -21,9 +21,9 @@
         </li>
       </ul>
       <div class="grid margin-top-middle article-overview">
-        <BlogCard v-for="article in firstTen" v-bind="makeBlogCard(article)"/>
-        <div v-if="firstTen.length < 2"/>
-        <div v-if="firstTen.length < 3"/>
+        <BlogCard v-for="article in allPosts" v-bind="article"/>
+        <div v-if="allPosts.length < 2"/>
+        <div v-if="allPosts.length < 3"/>
       </div>
     </main>
   </section>
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import type { BlogCollectionItem } from '@nuxt/content'
-import type { Category } from '../../components/Blog/types'
+import type { BlogCard, Category } from '../../components/Blog/types'
 
 const route = useRoute()
 
@@ -41,14 +41,14 @@ const { data: articles } = await useAsyncData('articles', () => queryCollection(
   .all(),
 )
 
-const firstTen = computed(() => {
+const firstTen = computed<BlogCard[]>(() => {
   if (route.query.category && Object.keys(allCategoriesAndCount.value).includes(route.query.category as Category)) {
-    return articles.value?.filter(article => article.category === route.query.category).slice(0, 10) ?? []
+    return (articles.value?.filter(article => article.category === route.query.category).slice(0, 10) ?? []).map(makeBlogCard)
   }
-  return articles.value?.slice(0, 10) ?? []
+  return (articles.value?.slice(0, 10) ?? []).map(makeBlogCard)
 })
 
-const allCategoriesAndCount = computed(() => {
+const allCategoriesAndCount = computed<Record<Category, number>>(() => {
   const categories = {} as Record<Category, number>
   articles.value?.forEach(article => {
     const category = article.category as Category
@@ -59,7 +59,23 @@ const allCategoriesAndCount = computed(() => {
   return categories
 })
 
-const makeBlogCard = (article: BlogCollectionItem) => ({
+const { data: externalPostsRaw } = useFetch('/api/external-posts', { method: 'POST' })
+
+const externalPosts = computed<BlogCard[]>(() => externalPostsRaw.value?.flatMap(externalBlog => {
+  return externalBlog.posts.map(post => ({
+    title: post.title,
+    description: post.excerpt,
+    image: 'asdf',
+    date: post.date,
+    link: post.url,
+    category: 'extern',
+    author: externalBlog.author,
+  }))
+}))
+
+const allPosts = computed<BlogCard[]>(() => [...(firstTen.value ?? []), ...(externalPosts.value ?? [])].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))
+
+const makeBlogCard = (article: BlogCollectionItem): BlogCard => ({
   title: article.title,
   description: article.description,
   image: article.thumbnail as string,