webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: SEO for articles

Browse source 
SEO and SchemaORg for articles
This commit is contained in:
webfussel 2025-06-14 10:23:46 +02:00
parent f1cb4048a4
commit d6859cdaad
22 changed files with 198 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/pages/blog/index.vue
View file

@ -1,10 +1,17 @@
<template>
<section id="blog" class="BlogOverview content">
<main>
<h1>Blogfussel - für mehr Fussel im Blog</h1>
<p>Hey! Hier sammel ich alles, was mir so durch den Kopf geht - von handfesten Tutorials und Code-Snippets über Freelancing-Stories
bis hin zu News meiner Apps und random Gedanken. Manchmal ausführlich, manchmal nur kurz angerissen.</p>
<main class="margin-top">
<ul class="category-list">
<li>
<NuxtLink class="inline-flex-row gap-sm side" to="/blog">
<span class="chip" :class="{ 'dark' : route.query.category}">Alle {{ articles?.length }}</span>
<span class="chip"
:class="{ 'dark' : route.query.category && Object.keys(allCategoriesAndCount).includes(route.query.category as string)}">Alle {{
articles?.length
}}</span>
</NuxtLink>
</li>
<li v-for="(count, category) in allCategoriesAndCount">
@ -15,6 +22,8 @@
</ul>
<div class="grid margin-top-middle article-overview">
<BlogCard v-for="article in firstTen" v-bind="makeBlogCard(article)"/>
<div v-if="firstTen.length < 2"/>
<div v-if="firstTen.length < 3"/>
</div>
</main>
</section>
@ -33,8 +42,8 @@ const { data: articles } = await useAsyncData('articles', () => queryCollection(
)
const firstTen = computed(() => {
if (route.query.category) {
return articles.value?.filter(article => article.meta.category === route.query.category).slice(0, 10) ?? []
if (route.query.category && Object.keys(allCategoriesAndCount.value).includes(route.query.category as Category)) {
return articles.value?.filter(article => article.category === route.query.category).slice(0, 10) ?? []
}
return articles.value?.slice(0, 10) ?? []
})
@ -42,7 +51,7 @@ const firstTen = computed(() => {
const allCategoriesAndCount = computed(() => {
const categories = {} as Record<Category, number>
articles.value?.forEach(article => {
const category = article.meta.category as Category
const category = article.category as Category
if (category) {
categories[category] = (categories[category] ?? 0) + 1
}
@ -55,9 +64,7 @@ const makeBlogCard = (article: BlogCollectionItem) => ({
description: article.description,
image: article.thumbnail as string,
date: article.date as string,
excerpt: article.excerpt as any,
link: article.path,
tags: article.tags as string[],
category: article.category as Category,
author: article.author as { name: string, image: string },
})