From 91b59e4ebe0cb633ac9794d04c20a033c2bc61d5 Mon Sep 17 00:00:00 2001 From: webfussel Date: Wed, 11 Jun 2025 20:41:34 +0200 Subject: [PATCH 01/12] add: basic blog layout Basic Blog Layout to work on --- app/assets/css/blogAuthor.css | 32 +++++++++++++++++++++++++ app/assets/css/blogCard.css | 44 ++++++++++++++++++++++++++++++++++ app/assets/css/global.css | 8 ++++++- app/components/Blog/Author.vue | 29 ++++++++++++++++++++++ app/components/Blog/Card.vue | 42 ++++++++++++++++++++++++++++++++ app/components/Card.vue | 2 +- app/pages/blog/[slug].vue | 11 +++++++++ app/pages/blog/index.vue | 25 +++++++++++++++++++ app/utils/navigation.ts | 6 +++++ content.config.ts | 8 ++++++- content/blog/0000.start.md | 18 ++++++++++++++ content/blog/0001.entry1.md | 18 ++++++++++++++ content/blog/0002.entry2.md | 18 ++++++++++++++ content/blog/0003.entry3.md | 18 ++++++++++++++ nuxt.config.ts | 2 ++ 15 files changed, 278 insertions(+), 3 deletions(-) create mode 100644 app/assets/css/blogAuthor.css create mode 100644 app/assets/css/blogCard.css create mode 100644 app/components/Blog/Author.vue create mode 100644 app/components/Blog/Card.vue create mode 100644 app/pages/blog/[slug].vue create mode 100644 app/pages/blog/index.vue create mode 100644 content/blog/0000.start.md create mode 100644 content/blog/0001.entry1.md create mode 100644 content/blog/0002.entry2.md create mode 100644 content/blog/0003.entry3.md diff --git a/app/assets/css/blogAuthor.css b/app/assets/css/blogAuthor.css new file mode 100644 index 0000000..fcf8af2 --- /dev/null +++ b/app/assets/css/blogAuthor.css @@ -0,0 +1,32 @@ +.BlogAuthor { + display: flex; + align-items: center; + gap: 1rem; + + & .meta { + display: flex; + flex-direction: column; + gap: .2rem; + + & .name { + font-weight: bold; + } + & .date { + font-size: .8rem; + } + } + + & .image { + --size: 50px; + height: var(--size); + width: var(--size); + border-radius: 50%; + overflow: hidden; + + & img { + height: 100%; + width: 100%; + object-fit: cover; + } + } +} \ No newline at end of file diff --git a/app/assets/css/blogCard.css b/app/assets/css/blogCard.css new file mode 100644 index 0000000..027b501 --- /dev/null +++ b/app/assets/css/blogCard.css @@ -0,0 +1,44 @@ +.BlogCard { + overflow: hidden; + border-radius: 1rem; + background: var(--color-orange-black); + display: flex; + flex-direction: column; + height: 100%; + transition: 150ms; + gap: 1rem; + + &:hover { + scale: 1.05; + } + + & .card-content { + display: flex; + flex-direction: column; + height: 100%; + padding: 0 1.5rem 1rem; + gap: 1.5rem; + } + + & .chip { + margin-bottom: 1rem; + } + + & footer { + margin-top: auto; + display: flex; + flex-direction: column; + gap: .5rem; + } + + & .tags { + display: flex; + flex-wrap: wrap; + gap: .5rem; + opacity: .5; + + & .tag { + color: var(--color-orange); + } + } +} \ No newline at end of file diff --git a/app/assets/css/global.css b/app/assets/css/global.css index da566fa..c2e4d07 100755 --- a/app/assets/css/global.css +++ b/app/assets/css/global.css @@ -142,7 +142,7 @@ span.chip { border-radius: 999px; font-size: 1rem; height: max-content; - padding: .5em 1em; + padding: .2em 1em; user-select: none; display: flex; align-items: center; @@ -288,6 +288,12 @@ span.chip { align-items: center; } +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; +} + .tip-container .tip { scale: 0; position: absolute; diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue new file mode 100644 index 0000000..3cd93e7 --- /dev/null +++ b/app/components/Blog/Author.vue @@ -0,0 +1,29 @@ + + + \ No newline at end of file diff --git a/app/components/Blog/Card.vue b/app/components/Blog/Card.vue new file mode 100644 index 0000000..8a6e544 --- /dev/null +++ b/app/components/Blog/Card.vue @@ -0,0 +1,42 @@ + + + \ No newline at end of file diff --git a/app/components/Card.vue b/app/components/Card.vue index 2a077ad..70568fa 100644 --- a/app/components/Card.vue +++ b/app/components/Card.vue @@ -8,7 +8,7 @@ + + \ No newline at end of file diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue new file mode 100644 index 0000000..d15f2ad --- /dev/null +++ b/app/pages/blog/index.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/app/utils/navigation.ts b/app/utils/navigation.ts index 8ec7d89..d29e9bc 100644 --- a/app/utils/navigation.ts +++ b/app/utils/navigation.ts @@ -23,4 +23,10 @@ export const navigation = [ icon: 'ph:chats-circle-duotone', aria: 'Link dieser Seite: Kontakt' }, + { + to: `/blog/`, + label: 'Blog', + icon: 'ph:book-open-user-duotone', + aria: 'Link dieser Seite: Blog' + }, ] \ No newline at end of file diff --git a/content.config.ts b/content.config.ts index bcb3581..61f4e44 100644 --- a/content.config.ts +++ b/content.config.ts @@ -4,7 +4,13 @@ export default defineContentConfig({ collections: { blog: defineCollection({ type: 'page', - source: 'blog/**/*.md' + source: 'blog/*.md', + schema: z.object({ + excerpt: z.object({ + type: z.string(), + children: z.any(), + }), + }), }), skills: defineCollection({ diff --git a/content/blog/0000.start.md b/content/blog/0000.start.md new file mode 100644 index 0000000..3d7d7b1 --- /dev/null +++ b/content/blog/0000.start.md @@ -0,0 +1,18 @@ +--- +image: 'https://picsum.photos/600/250?random=4' +title: 'Blogfussel - für mehr Fussel im Blog' +description: 'Und nochmal...' +navigation: true +date: 2025-07-01 +category: 'start' +tags: ['start', 'story'] +author: + name: 'webfussel' + image: '/img/og.webp' +--- + +Warum ich mich dazu entschlossen habe jetzt doch wieder mit dem Bloggen anzufangen? Nun ja, das hat alles angefangen, als man mich einfach so auf Instagram gesperrt hat. + + + +Noch mehr Text \ No newline at end of file diff --git a/content/blog/0001.entry1.md b/content/blog/0001.entry1.md new file mode 100644 index 0000000..3e24c7e --- /dev/null +++ b/content/blog/0001.entry1.md @@ -0,0 +1,18 @@ +--- +image: 'https://picsum.photos/600/250?random=3' +title: 'Post 1' +description: 'Blablabla' +navigation: true +date: 2025-07-01 +category: 'test' +tags: ['test', 'wasd'] +author: + name: 'webfussel' + image: '/img/og.webp' +--- + +Blablabla test 1 2 3 + + + +Noch mehr Text \ No newline at end of file diff --git a/content/blog/0002.entry2.md b/content/blog/0002.entry2.md new file mode 100644 index 0000000..c1a08fc --- /dev/null +++ b/content/blog/0002.entry2.md @@ -0,0 +1,18 @@ +--- +image: 'https://picsum.photos/600/250?random=2' +title: 'Post 2' +description: 'Blablabla' +navigation: true +date: 2025-07-01 +category: 'test' +tags: ['test', 'asdf'] +author: + name: 'webfussel' + image: '/img/og.webp' +--- + +Blablabla test 1 2 3 + + + +Noch mehr Text \ No newline at end of file diff --git a/content/blog/0003.entry3.md b/content/blog/0003.entry3.md new file mode 100644 index 0000000..92b070b --- /dev/null +++ b/content/blog/0003.entry3.md @@ -0,0 +1,18 @@ +--- +image: 'https://picsum.photos/600/250?random=1' +title: 'Post 3' +description: 'Blablabla' +navigation: true +date: 2025-07-01 +category: 'test' +tags: ['test', '123'] +author: + name: 'webfussel' + image: '/img/og.webp' +--- + +Blablabla test 1 2 3 + + + +Noch mehr Text \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index 6f4e0b8..0e6f4f6 100755 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -43,6 +43,8 @@ export default defineNuxtConfig({ '~/assets/css/burger.css', '~/assets/css/teaser.css', '~/assets/css/project.css', + '~/assets/css/blogCard.css', + '~/assets/css/blogAuthor.css', ], postcss: { From 9b66a79a8c83758be5a7a4681c9e027203450823 Mon Sep 17 00:00:00 2001 From: webfussel Date: Thu, 12 Jun 2025 09:08:21 +0200 Subject: [PATCH 02/12] add: category, date sorting Add category layouts and date sorting --- app/assets/css/blogCard.css | 24 + app/assets/css/global.css | 4 +- app/components/Blog/Author.vue | 8 +- app/components/Blog/Card.vue | 10 +- app/components/Blog/Category.vue | 24 + app/components/Blog/types.ts | 1 + app/pages/blog/index.vue | 18 +- bun.lock | 2341 ++++ content.config.ts | 7 +- content/blog/0000.start.md | 7 +- content/blog/0001.entry1.md | 6 +- content/blog/0002.entry2.md | 6 +- content/blog/0003.entry3.md | 6 +- content/blog/0004.entry4.md | 18 + package-lock.json | 17696 ----------------------------- package.json | 9 +- server/routes/blog/rss.xml.ts | 39 + 17 files changed, 2495 insertions(+), 17729 deletions(-) create mode 100644 app/components/Blog/Category.vue create mode 100644 app/components/Blog/types.ts create mode 100644 bun.lock create mode 100644 content/blog/0004.entry4.md delete mode 100644 package-lock.json create mode 100644 server/routes/blog/rss.xml.ts diff --git a/app/assets/css/blogCard.css b/app/assets/css/blogCard.css index 027b501..66fe68e 100644 --- a/app/assets/css/blogCard.css +++ b/app/assets/css/blogCard.css @@ -12,6 +12,17 @@ scale: 1.05; } + & > .image { + flex: 0 0 200px; + width: 100%; + + & img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + & .card-content { display: flex; flex-direction: column; @@ -24,6 +35,11 @@ margin-bottom: 1rem; } + & header { + display: flex; + flex-direction: column; + } + & footer { margin-top: auto; display: flex; @@ -41,4 +57,12 @@ color: var(--color-orange); } } +} + + + +@media (width <= 780px) { + .BlogCard header { + align-items: center; + } } \ No newline at end of file diff --git a/app/assets/css/global.css b/app/assets/css/global.css index c2e4d07..f266ffb 100755 --- a/app/assets/css/global.css +++ b/app/assets/css/global.css @@ -290,7 +290,7 @@ span.chip { .grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } @@ -325,7 +325,7 @@ span.chip { } @media (width <= 780px) { - h1, h2, h3, h4, h5, h6, p { + h1, h2, h3, h4, h5, h6, p, small { text-align: center; } } diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue index 3cd93e7..6045e67 100644 --- a/app/components/Blog/Author.vue +++ b/app/components/Blog/Author.vue @@ -1,7 +1,7 @@