Convert markdown into html + minor style adjustments

src/Bundle/ChillMainBundle/Entity/NewsItem.php

@@ -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;
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue

@@ -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 #header>
-                    <template #body>{{ item.content }}</template>
+                        <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>