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 @@ \ 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 @@