dml_frontend/pages/artikel/[link].vue

<template>
  <div class="article" v-if="article">
    <SideBarNaviSlider link="/wissenswertes">
      {{ $t('pages.article.artikelUebersicht') }}
    </SideBarNaviSlider>

    <section class="teaserBox topSpace">
      <div class="container-10">
        <p class="articleInfo">
          <b>{{ $t('pages.article.autor') }}</b> {{ author }} <!--|
          <b>{{ $t('pages.article.aktualisiert') }}</b> {{ formattedDate }}-->
        </p>

        <NuxtImg
          v-if="article.image?.url"
          :src="article.image.url"
          :alt="article.image.alternativeText || article.header"
          class="img_detail"
          width="350"
          height="auto"
          priority
          provider="strapi"
          :sizes="'(max-width: 600px) 90vw, 350px'"
          role="img"
        />

        <h1>{{ article.header }}</h1>
        <p class="teaser">{{ article.teaser }}</p>
      </div>
    </section>

    <section class="articleBox container">
      <div v-html="htmlContent(article.content)" class="content"></div>
      <button
        @click.prevent="toggleContactBubble"
        class="pinkBtn"
        role="button"
        aria-label="Kontakt aufnehmen"
      >
        {{ $t('pages.article.kontaktieren') }}
      </button>
    </section>
  </div>

  <div v-else class="container topSpace">
    <p>{{ $t('pages.article.ladenOderNichtGefunden') }}</p>
  </div>
</template>

  
  <script setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useMainStore } from '@/stores/main'
  import { storeToRefs } from 'pinia'
  import { useHtmlConverter } from '@/composables/useHTMLConverter'
  import SideBarNaviSlider from '@/components/SideBarNaviSlider.vue'
  import { useI18n } from 'vue-i18n'
  const runtimeConfig = useRuntimeConfig();
  
  const route = useRoute()
  const slug = route.params.link
  console.log(slug)
  
  const mainStore = useMainStore()
  const { articles } = storeToRefs(mainStore)
  
  const { t } = useI18n()
  
  // Artikel suchen
  const article = computed(() => {
  if (!articles.value) return null
  return articles.value.find(item => item.slug === slug) ?? null
})
  
  const { convertToHTML } = useHtmlConverter()
  const htmlContent = (content) => convertToHTML(content)
  
  const toggleContactBubble = () => mainStore.toggleContactBubble()
  
  
  // Beispiel Autor und formatierte Datum (kannst du anpassen)
  const author = 'Sabrina Hennrich'
  const formattedDate = computed(() => {
    if (!article.value?.dateModified) return ''
    const d = new Date(article.value.dateModified)
    return d.toLocaleDateString('de-DE')
  })

  // ARTIKEL META AND JSON_LD INFOS
  watchEffect(() => {
    if (!article.value) return

    const truncate = (text, maxLength) => {
      if (!text) return ''
      return text.length <= maxLength ? text : text.slice(0, maxLength - 1).trimEnd() + '…'
    }

    const rawTitle = article.value.header
    const rawDescription = article.value.teaser

    const metaTitle = truncate(rawTitle, 60)
    const metaDescription = truncate(rawDescription, 160)
    const metaImage = `${runtimeConfig.public.cmsBaseUrl}${article.value.image?.url}` || 'https://strapi.digimedialoop.de/uploads/DML_Logo_Info_c4011028f9.png'
    const metaKeywords = article.value.SEO?.keywords || ''
    const metaType = article.value.SEO?.type || 'article'
    const canonical = `${runtimeConfig.public.appUrl}${route.fullPath}`

    const jsonLd = {
      '@context': 'https://schema.org',
      '@type': 'NewsArticle',
      headline: rawTitle,
      image: [metaImage],
      datePublished: article.value.dateCreated,
      dateModified: article.value.dateModified,
      author: {
        '@type': 'Person',
        name: author
      },
      publisher: {
        '@type': 'Organization',
        name: 'digimedialoop',
        logo: {
          '@type': 'ImageObject',
          url: 'https://strapi.digimedialoop.de/uploads/DML_Logo_Info_c4011028f9.png'
        }
      },
      description: metaDescription
    }

    useHead({
      title: metaTitle,
      meta: [
        { name: 'description', content: metaDescription },
        { name: 'keywords', content: metaKeywords },
        { name: 'robots', content: 'index, follow' },
        { property: 'og:title', content: metaTitle },
        { property: 'og:description', content: metaDescription },
        { property: 'og:image', content: metaImage },
        { property: 'og:type', content: metaType },
        { name: 'twitter:title', content: metaTitle },
        { name: 'twitter:description', content: metaDescription },
        { name: 'twitter:image', content: metaImage }
      ],
      link: [
        { rel: 'canonical', href: canonical }
      ],
      script: [
        {
          type: 'application/ld+json',
          children: JSON.stringify(jsonLd)
        }
      ]
    })
  })

  </script>
  
  <style scoped lang="sass">
  .article
    margin-top: 2rem
    .teaserBox
      margin-bottom: 1.5rem !important
      .teaser
        font-family: 'Mainfont-Bold'
    .articleInfo
      font-size: 0.8rem
      color: lighten(#333, 50%)
      b
        color: #e91e63
    h1
      font-size: 1.6rem
      font-family: 'Mainfont-Bold'
      margin-bottom: 1.5rem
      line-height: 2.2rem
    .img_detail
      width: 100%
      max-width: 350px
      float: right
      margin: 0 0 2rem 2rem
      border-radius: 1rem
      filter: grayscale(100%)
    .articleBox
      display: flex
      flex-direction: column
      align-items: flex-start
  
      .pinkBtn
        clear: both
        display: block
        width: max-content
  </style>