115 lines
4.5 KiB
Vue
115 lines
4.5 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { onMounted, computed, defineProps } from 'vue';
|
|
import { initFlowbite } from 'flowbite';
|
|
|
|
const { block, blockData, frontpage } = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
blockData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
frontpage: {
|
|
type: Boolean
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
});
|
|
|
|
/**
|
|
* Retrieve only 3 news articles
|
|
*/
|
|
|
|
const limitedArticles = computed(() => blockData.articles.data.slice(0, 3));
|
|
|
|
|
|
/** Get a node value from json */
|
|
|
|
const extractMetaValue = (node, key) => {
|
|
let meta = JSON.parse(node.fs_meta);
|
|
|
|
return meta[key];
|
|
};
|
|
|
|
/**
|
|
* formatDate
|
|
*
|
|
* Formats a date string to a Norwegian date format.
|
|
*
|
|
* @param {
|
|
* } dateString
|
|
*/
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
const day = ('0' + date.getDate()).slice(-2);
|
|
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
|
const year = date.getFullYear();
|
|
|
|
return `${day}/${month}/${year}`;
|
|
};
|
|
|
|
/**
|
|
* dateString
|
|
*
|
|
* Formats a date string to a Norwegian time format.
|
|
* @param {*} dateString
|
|
*/
|
|
|
|
const formatTime = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section :id="block.anchorName" class="relative block w-full h-screen overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
|
|
<div class="absolute inset-0 bg-black opacity-80"></div>
|
|
<div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
|
|
<div class="flex-row justify-center items-center">
|
|
<h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel/Overskrift' }}</h1>
|
|
<h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Tittel Merkelapp' }}</h2>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-[1280px]">
|
|
<div v-if="blockData.articles" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
|
|
<!-- Begin news article loop -->
|
|
<div
|
|
v-for="(article, index) in blockData.articles.data"
|
|
:key="article.id"
|
|
class="news-article flex justify-normal items-start max-w-md"
|
|
>
|
|
<div class="flex-shrink-0">
|
|
<img v-if="article.image_id" class="h-48 w-32 object-cover border-2 border-amber-800 rounded-lg shadow-md" :src="extractMetaValue(article.image, 'symbolic_name')" :alt="extractMetaValue(article.image, 'title')">
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-sm font-medium text-white font-arctic">
|
|
<Link :href="route('newsArticle', article.slug)" class="hover:underline">
|
|
{{ article.title }}
|
|
</Link>
|
|
</h3>
|
|
<span class="mt-1 text-xs text-gray-500">{{ formatDate(article.created_at) }}</span>
|
|
<Link v-if="article.news_category_id" :href="route('newsCategory', article.category.slug)" class="ml-4 bg-amber-100 hover:bg-amber-200 text-amber-800 text-xs font-semibold me-2 px-2.5 py-0.5 rounded border border-amber-400 inline-flex items-center justify-center">
|
|
{{ article.category.title }}
|
|
</Link>
|
|
<p class="mt-1 text-sm text-gray-300">
|
|
{{ article.excerpt }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- End news article loop -->
|
|
</div>
|
|
<div class="mt-12 flex justify-end items-end">
|
|
<Link :href="route('news')" class="font-arctic text-amber-600 hover:text-amber-400 no-underline hover:underline">{{ block.buttontext || 'Vis mer' }}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template> |