dml_frontend/pages/magazin/index.vue

<template>
  <div class="knowledgeBox topSpace">
    <section class="teaserBox">
      <div class="container">
        <h1>Wissenswertes für digitale Entscheider</h1>
        <h2>Webdesign und Webentwicklung, SEO, Performance & AI</h2>
        <p>In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen, 
          um technisch, inhaltlich und strategisch zu überzeugen. 
          Themen wie <b>KI-gestütztes SEO (AI-SEO)</b>, <b>nachhaltige Webentwicklung</b>, <b>Barrierefreiheit</b>, 
          <b>Ladezeit-Optimierung</b>, <b>User Experience</b> und <b>Headless CMS</b> zeigen, worauf es heute im Webdesign wirklich ankommt.</p>
        <p>Entdecken Sie <b>praxisnahe Insights und zukunftsorientierte Lösungen</b> für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.</p>
      </div>
    </section>

    <section class="articleBox container">
      <div class="grid">
        <div
          v-for="article in articles"
          :key="article.id"
          class="article"
        >
        
        <NuxtLinkLocale :to="localePath({ name: 'article-link', params: { link: article.slug } })" class="article-link">
          <div class="image-wrapper">
            <NuxtImg
              v-if="article.image?.url"
              :src="article.image.url"
              provider="strapi"
              :alt="article.image.alternativeText"
              format="webp"
              class="article-image"
            />
            <div class="overlay">
              <h2>{{ article.header }}</h2>
              
            </div>
            <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
          </div>
        </NuxtLinkLocale>


        </div>
      </div>
    </section>
  </div>
</template>


<script setup lang="ts">
import { watch } from 'vue'
import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'
import { useLocalePath } from '#i18n'
const localePath = useLocalePath()

const mainStore = useMainStore()
const { articles } = storeToRefs(mainStore)

const truncateText = (text: string, length = 200) =>
  text?.length > length ? text.substring(0, length) + '…' : text

const currentDomain = typeof window !== 'undefined'
  ? window.location.origin
  : 'https://www.digimedialoop.de'


// SEO: JSON-LD für Artikelübersicht
watch(articles, (newVal) => {
  if (newVal?.length) {
    useHead({
      script: [
        {
          type: 'application/ld+json',
          children: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "ItemList",
            itemListElement: newVal.map((article, index) => ({
              "@type": "ListItem",
              position: index + 1,
              url: `${currentDomain}/wissenswertes/artikel/${article.slug}`,
              name: article.header,
            }))
          })
        }
      ]
    })
  }
}, { immediate: true })
</script>


<style lang="sass">
.articleBox
    display: flex
    justify-content: center
    width: 100%

    .grid
        display: grid
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
        gap: 2rem
        justify-content: start
        width: 100%
        max-width: 100%
        margin: 0 auto

    .article
        width: 100%
        max-width: 500px
        border: 1px solid $beige
        background: linear-gradient(to bottom right, white, $lightgrey)
        border-radius: 1rem
        transition: .5s
        position: relative
        display: flex
        flex-direction: column
        align-items: flex-start
        overflow: hidden
        &:hover
              transform: scale(1.08)

        .article-link
          position: relative
          display: block
          color: white
          text-decoration: none

        .image-wrapper
          position: relative
          width: 100%
          height: 280px
          border: 1px solid $lightgrey

          .article-image
            width: 100%
            height: 500px
            object-fit: cover
            border-top-left-radius: 1rem
            border-top-right-radius: 1rem
            opacity: .6

          button
            position: absolute
            bottom: .6rem
            right: 0rem
            border: 1px solid darken($primaryColor, 30%)
            font-size: 1rem
            box-shadow: 1px 1px 4px 2px rgba(black, .2)
            background-color: darken($primaryColor, 15%)
            letter-spacing: .05rem


          .overlay
            position: absolute
            top: 0
            left: 0
            width: calc(100% - 4rem)
            height: calc(100% - 6rem)
            background-color: rgba(255, 255, 255, 0.98)
            margin: 1.5rem 3.5rem 4rem 1rem
            display: flex
            flex-direction: column
            align-items: center
            justify-content: center
            padding: 1rem
            //border-top-left-radius: 1rem
            //border-top-right-radius: 1rem
            border-radius: .5rem
            text-align: center
            transition: .3s
            box-shadow: 2px 2px 5px 3px rgba(black, .6)
            

            h2
              color: black
              font-size: 1.1rem
              line-height: 140%
              font-family: 'Mainfont-Bold'
              margin-bottom: 0.5rem
              margin-top: 0.5rem

            .mintBtn
              background-color: $primaryColor
              color: white
              font-size: 0.9rem
              font-family: 'Mainfont-Bold'
              border: none
              padding: 0.4rem 1rem
              border-radius: 0.3rem
              cursor: pointer
</style>