mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-04 23:09:50 +00:00
Convert markdown into html + minor style adjustments
This commit is contained in:
parent
3ae8e0c406
commit
cd793d6842
@ -59,11 +59,15 @@ class NewsItem implements TrackCreationInterface, TrackUpdateInterface
|
||||
|
||||
/**
|
||||
* @ORM\Column(type="date_immutable", nullable=false)
|
||||
*
|
||||
* @Groups({"read"})
|
||||
*/
|
||||
private ?\DateTimeImmutable $startDate = null;
|
||||
|
||||
/**
|
||||
* @ORM\Column(type="date_immutable", nullable=true, options={"default": null})
|
||||
*
|
||||
* @Groups({"read"})
|
||||
*/
|
||||
private ?\DateTimeImmutable $endDate = null;
|
||||
|
||||
|
@ -5,15 +5,20 @@
|
||||
<li v-for="item in newsItems" :key="item.id">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="content" v-if="shouldTruncate(item.content)">
|
||||
{{ truncateContent(item.content) }}
|
||||
<div v-html="truncateMarkdownContent(item.content)"></div>
|
||||
<span class="read-more" @click="() => openModal(item)">Read more</span>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
{{ item.content }}
|
||||
<div v-html="convertMarkdownToHtml(item.content)"></div>
|
||||
</div>
|
||||
<modal v-if="showModal" @close="closeModal">
|
||||
<template #header>{{ item.title }}</template>
|
||||
<template #body>{{ item.content }}</template>
|
||||
<template #header>
|
||||
<p class="news-title">{{ item.title }}</p>
|
||||
</template>
|
||||
<template #body>
|
||||
<p class="news-date">{{ formatDate(item.startdate) }}</p>
|
||||
<div v-html="convertMarkdownToHtml(item.content)"></div>
|
||||
</template>
|
||||
</modal>
|
||||
</li>
|
||||
</ul>
|
||||
@ -24,6 +29,7 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import {makeFetch} from "ChillMainAssets/lib/api/apiMethods";
|
||||
import Modal from '../../_components/Modal.vue'; // Adjust the import path
|
||||
import { marked } from 'marked';
|
||||
|
||||
|
||||
const newsItems = ref([])
|
||||
@ -52,6 +58,19 @@ const truncateContent = (content, maxLength = 100) => {
|
||||
}
|
||||
};
|
||||
|
||||
const convertMarkdownToHtml = (markdown) => {
|
||||
return marked(markdown);
|
||||
};
|
||||
|
||||
const truncateMarkdownContent = (content, maxLength = 100) => {
|
||||
const htmlContent = convertMarkdownToHtml(content);
|
||||
return truncateContent(htmlContent, maxLength);
|
||||
};
|
||||
|
||||
const formatDate = (datetime) => {
|
||||
return new Date(datetime.date).toDateString()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
makeFetch('GET', '/api/1.0/main/news.json')
|
||||
.then((response) => {
|
||||
@ -103,4 +122,13 @@ button {
|
||||
color: #3498db; /* Adjust the color as needed */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user