From 0a481fee5eb0d1dc479f3fe1d2674374c3ae26bb Mon Sep 17 00:00:00 2001 From: webfussel Date: Fri, 11 Jul 2025 09:13:06 +0200 Subject: [PATCH] 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/assets/css/blog/article.css | 14 +- app/components/Blog/Author.vue | 16 +- app/components/Blog/Card.vue | 21 +- app/components/Blog/Category.vue | 1 + app/components/Blog/types.ts | 15 +- app/components/Link/External.vue | 14 ++ app/components/Link/Internal.vue | 14 ++ app/pages/blog/[slug].vue | 8 +- app/pages/blog/index.vue | 34 ++- bun.lock | 348 ++++++---------------------- content/blog/0000.start.md | 68 +++++- content/snippets/skills/2.edit.md | 14 +- content/snippets/skills/3.result.md | 2 +- eslint.config.mjs | 6 - nuxt.config.ts | 1 - package.json | 2 - server/api/external-posts.post.ts | 10 +- server/utils/filter.ts | 3 + shared/types/Blog.ts | 2 +- 19 files changed, 264 insertions(+), 329 deletions(-) create mode 100644 app/components/Link/External.vue create mode 100644 app/components/Link/Internal.vue delete mode 100644 eslint.config.mjs create mode 100644 server/utils/filter.ts 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 @@