diff --git a/app/assets/css/blog/article.css b/app/assets/css/blog/article.css
index b01583c..068ae00 100644
--- a/app/assets/css/blog/article.css
+++ b/app/assets/css/blog/article.css
@@ -24,12 +24,20 @@
h1 {
font-size: 2rem;
+ display: flex;
+ flex-direction: column;
+
+ & small {
+ font-size: 1.2rem;
+ font-style: italic;
+ }
}
h2 {
font-size: 1.5rem;
- font-style: italic;
font-weight: lighter;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
}
& .image {
@@ -47,4 +55,8 @@
object-position: center;
}
}
+
+ & p {
+ margin-bottom: .5rem;
+ }
}
\ No newline at end of file
diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue
index 45f4e40..3d53967 100644
--- a/app/components/Blog/Author.vue
+++ b/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()
+const { name, date, img } = defineProps()
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)
+})
\ No newline at end of file
diff --git a/app/components/Blog/Card.vue b/app/components/Blog/Card.vue
index ba33f0e..cb1c5f5 100644
--- a/app/components/Blog/Card.vue
+++ b/app/components/Blog/Card.vue
@@ -1,5 +1,5 @@
-
+
@@ -14,27 +14,16 @@
\ No newline at end of file
diff --git a/app/components/Blog/Category.vue b/app/components/Blog/Category.vue
index c89429b..26534e1 100644
--- a/app/components/Blog/Category.vue
+++ b/app/components/Blog/Category.vue
@@ -18,6 +18,7 @@ const icons: Record = {
'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')
diff --git a/app/components/Blog/types.ts b/app/components/Blog/types.ts
index 687006f..f198dec 100644
--- a/app/components/Blog/types.ts
+++ b/app/components/Blog/types.ts
@@ -1 +1,14 @@
-export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing'
\ No newline at end of file
+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
+ }
+}
\ No newline at end of file
diff --git a/app/components/Link/External.vue b/app/components/Link/External.vue
new file mode 100644
index 0000000..f0354b6
--- /dev/null
+++ b/app/components/Link/External.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/app/components/Link/Internal.vue b/app/components/Link/Internal.vue
new file mode 100644
index 0000000..1c5452a
--- /dev/null
+++ b/app/components/Link/Internal.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index 682f440..8bcc8ac 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -15,10 +15,12 @@
- {{ article.title }}
- {{ article.description }}
+
+ {{ article.title }}
+ {{ article.description }}
+
-
+
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 8a4f56e..df56eec 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -21,9 +21,9 @@
@@ -31,7 +31,7 @@