171 lines
4.4 KiB
Vue
171 lines
4.4 KiB
Vue
<template>
|
|
<div class="knowledgeBox topSpace">
|
|
<section class="teaserBox">
|
|
<div class="container">
|
|
<h1>{{ $t('pages.magazin.title') }}</h1>
|
|
<p>{{ $t('pages.magazin.teaser1') }}</p>
|
|
<p>{{ $t('pages.magazin.teaser2') }}</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>
|
|
<button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
|
|
</div>
|
|
</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(280px, 1fr))
|
|
gap: 1rem
|
|
justify-content: start
|
|
width: 100%
|
|
max-width: 100%
|
|
margin: 0 auto
|
|
|
|
.article
|
|
width: 100%
|
|
max-width: 450px
|
|
border: 1px solid $beige
|
|
background: linear-gradient(to bottom right, white, $lightgrey)
|
|
border-radius: 1rem
|
|
transition: .8s
|
|
position: relative
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: flex-start
|
|
overflow: hidden
|
|
|
|
.article-link
|
|
position: relative
|
|
display: block
|
|
color: white
|
|
text-decoration: none
|
|
|
|
.image-wrapper
|
|
position: relative
|
|
width: 100%
|
|
height: 220px
|
|
|
|
.article-image
|
|
width: 100%
|
|
height: 450px
|
|
object-fit: cover
|
|
border-top-left-radius: 1rem
|
|
border-top-right-radius: 1rem
|
|
|
|
|
|
.overlay
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
background-color: rgba(0, 0, 0, 0.7)
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
padding: 1rem
|
|
border-top-left-radius: 1rem
|
|
border-top-right-radius: 1rem
|
|
text-align: center
|
|
transition: .5s
|
|
&:hover
|
|
background-color: rgba(255, 255, 255, 0.8)
|
|
h2
|
|
color: black
|
|
|
|
h2
|
|
color: white
|
|
font-size: 1.1rem
|
|
line-height: 130%
|
|
font-family: 'Mainfont-Bold'
|
|
margin-bottom: 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> |