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/components/Blog/Author.vue

@@ -5,7 +5,7 @@
         loading="lazy"
         width="50"
         height="50"
-        :srcset="imageSet.join(', ')"
+        :srcset="imageSet"
         :src="initialImage"
         aria-hidden="true"
         :alt="`Profilbild von ${name}`"
@@ -24,9 +24,10 @@ import { getImageSet, getInitialImage } from '../../utils/image'
 type Props = {
   name: string
   date: string
+  img?: string
 }
 
-const { name, date } = defineProps<Props>()
+const { name, date, img } = defineProps<Props>()
 
 const formatter = new Intl.DateTimeFormat('de-DE', {
   year: 'numeric',
@@ -36,6 +37,13 @@ const formatter = new Intl.DateTimeFormat('de-DE', {
 
 const dateFormatted = computed(() => formatter.format(new Date(date)))
 
-const imageSet = getImageSet('/img/blog/authors/', name)
-const initialImage = getInitialImage('/img/blog/authors/', name)
+const imageSet = computed(() => {
+  if (img) return img
+  return getImageSet('/img/blog/authors/', name).join(', ')
+})
+
+const initialImage = computed(() => {
+  if (img) return img
+  return getInitialImage('/img/blog/authors/', name)
+})
 </script>

app/components/Blog/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink :to="link" class="BlogCard z-2">
+  <NuxtLink :to="link" :external="isExternal" :target="isExternal ? '_blank' : '_self'" class="BlogCard z-2">
     <div class="image">
       <img :src="image" alt=" " aria-hidden="true"/>
     </div>
@@ -14,27 +14,16 @@
         </p>
       </main>
       <footer>
-        <BlogAuthor :name="author.name" :date="date"/>
+        <BlogAuthor :name="author.name" :img="author.img" :date="date"/>
       </footer>
     </div>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-import type { Category } from './types'
+import type { BlogCard } from './types'
 
-type Props = {
-  title: string
-  description: string
-  image: string
-  date: string
-  link: string
-  category: Category
-  author: {
-    name: string
-  }
-}
-
-defineProps<Props>()
+const { link } = defineProps<BlogCard>()
 
+const isExternal = computed(() => link.startsWith('http'))
 </script>

app/components/Blog/Category.vue

@@ -18,6 +18,7 @@ const icons: Record<Category, string> = {
   'tutorial': 'ph:lightbulb-duotone',
   'news': 'ph:newspaper-duotone',
   'freelancing': 'ph:laptop-duotone',
+  'extern': 'ph:repeat-duotone',
 }
 
 const icon = computed(() => icons[name] ?? 'ph:question-mark-duotone')

app/components/Blog/types.ts

@@ -1 +1,14 @@
-export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing'
+export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing' | 'extern'
+
+export type BlogCard = {
+  title: string
+  description: string
+  image: string
+  date: string
+  link: string
+  category: Category
+  author: {
+    name: string
+    img?: string
+  }
+}

app/components/Link/External.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtLink class="inline-flex-row text" external :to="url" target="_blank">
+    <slot/>
+    <IconLinkExternal/>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  url: string
+}
+
+defineProps<Props>()
+</script>

app/components/Link/Internal.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtLink class="inline-flex-row text" :to="url">
+    <slot/>
+    <IconLinkInternal/>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  url: string
+}
+
+defineProps<Props>()
+</script>