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