126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
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 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')
|
|
})
|
|
</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>
|
|
|