yourpart3/frontend/src/views/public/GuideArticleView.vue

<template>
  <main v-if="guide" class="guide-page">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <router-link to="/">YourPart</router-link>
      <span>/</span>
      <router-link to="/ratgeber">Ratgeber</router-link>
      <span>/</span>
      <span>{{ guide.category }}</span>
    </nav>

    <article class="guide-article">
      <header class="guide-header">
        <p class="guide-category">{{ guide.category }}</p>
        <h1>{{ guide.title }}</h1>
        <p class="guide-description">{{ guide.description }}</p>
        <p class="guide-updated">Aktualisiert: {{ formattedDate }}</p>
      </header>

      <section v-for="section in guide.sections" :key="section.heading" class="guide-section">
        <h2>{{ section.heading }}</h2>
        <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
      </section>
    </article>

    <aside class="related-guides" aria-label="Weitere Ratgeber">
      <h2>Weitere Ratgeber</h2>
      <ul>
        <li v-for="item in relatedGuides" :key="item.slug">
          <router-link :to="`/ratgeber/${item.slug}`">{{ item.title }}</router-link>
        </li>
      </ul>
    </aside>
  </main>

  <main v-else class="guide-page">
    <article class="guide-article">
      <h1>Ratgeber nicht gefunden</h1>
      <p>Der gesuchte Beitrag ist nicht vorhanden.</p>
      <router-link to="/ratgeber">Zur Ratgeber-Übersicht</router-link>
    </article>
  </main>
</template>

<script>
import { getPublicGuide, publicGuides } from '@/content/publicGuides.js';
import { applySeo, buildAbsoluteUrl } from '@/utils/seo.js';

export default {
  name: 'GuideArticleView',
  computed: {
    guide() {
      return getPublicGuide(this.$route.params.slug);
    },
    formattedDate() {
      if (!this.guide?.updatedAt) return '';
      return new Date(this.guide.updatedAt).toLocaleDateString('de-DE');
    },
    relatedGuides() {
      if (!this.guide) return publicGuides.slice(0, 4);
      return publicGuides
        .filter((item) => item.slug !== this.guide.slug)
        .slice(0, 4);
    },
  },
  watch: {
    '$route.params.slug': {
      immediate: true,
      handler() {
        this.applyGuideSeo();
      },
    },
  },
  methods: {
    applyGuideSeo() {
      const guide = getPublicGuide(this.$route.params.slug);
      if (!guide) {
        applySeo({
          title: 'Ratgeber nicht gefunden | YourPart',
          description: 'Der gesuchte YourPart-Ratgeber ist nicht vorhanden.',
          canonicalPath: '/ratgeber',
          robots: 'noindex, follow',
        });
        return;
      }

      const canonicalPath = `/ratgeber/${guide.slug}`;
      applySeo({
        title: `${guide.title} | YourPart Ratgeber`,
        description: guide.description,
        keywords: `${guide.category}, YourPart, Ratgeber, Community, Vokabeltrainer, Falukant, Browsergames`,
        canonicalPath,
        robots: 'index, follow',
        type: 'article',
        lang: 'de',
        locale: 'de_DE',
        includeHreflangAlternates: false,
        jsonLd: [
          {
            '@context': 'https://schema.org',
            '@type': 'Article',
            headline: guide.title,
            description: guide.description,
            dateModified: guide.updatedAt,
            datePublished: guide.updatedAt,
            inLanguage: 'de',
            url: buildAbsoluteUrl(canonicalPath),
            publisher: {
              '@type': 'Organization',
              name: 'YourPart',
              url: buildAbsoluteUrl('/'),
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.guide-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  color: #253043;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: #5f6b7a;
}

.breadcrumb a {
  color: #245da8;
  font-weight: 700;
  text-decoration: none;
}

.guide-article {
  max-width: 820px;
}

.guide-header {
  margin-bottom: 34px;
}

.guide-category {
  margin: 0 0 10px;
  color: #245da8;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
}

.guide-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
}

.guide-description {
  margin: 18px 0 0;
  font-size: 1.12rem;
  line-height: 1.7;
  color: #46556a;
}

.guide-updated {
  margin: 14px 0 0;
  color: #667085;
  font-size: 0.9rem;
}

.guide-section {
  margin-top: 34px;
}

.guide-section h2 {
  margin: 0 0 12px;
  font-size: 1.45rem;
  line-height: 1.25;
}

.guide-section p {
  margin: 0 0 16px;
  font-size: 1.02rem;
  line-height: 1.78;
}

.related-guides {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(36, 93, 168, 0.16);
}

.related-guides h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
}

.related-guides ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-guides a {
  color: #245da8;
  font-weight: 700;
  text-decoration: none;
}
</style>