Merge remote-tracking branch 'origin/issue159_page_acceuil' into testing-202401

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

@@ -38,8 +38,6 @@ ul {
 }
 
 h1 {
-    font: 600 2rem/1 'Oswald', sans-serif;
-    text-transform: uppercase;
     text-align: center;
 }
 

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

@@ -1,10 +1,12 @@
 <template>
     <li>
         <h2>{{ props.item.title }}</h2>
-        <time datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
+        <time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
         <div class="content" v-if="shouldTruncate(item.content)">
             <div v-html="prepareContent(item.content)"></div>
-            <button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
+            <div class="float-end">
+                <button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
+            </div>
         </div>
         <div class="content" v-else>
             <div v-html="convertMarkdownToHtml(item.content)"></div>
@@ -16,7 +18,7 @@
             </template>
             <template #body>
                 <p class="news-date">
-                    <span>{{ $d(newsItemStartDate(), 'short') }}</span>
+                    <time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
                 </p>
                 <div v-html="convertMarkdownToHtml(item.content)"></div>
             </template>
@@ -30,8 +32,8 @@ import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import { DateTime, NewsItemType } from "../../../types";
 import type { PropType } from 'vue'
-import { defineProps, ref } from "vue";
-import {ISOToDatetime} from 'ChillMainAssets/chill/js/date';
+import { ref } from "vue";
+import {ISOToDatetime} from '../../../chill/js/date';
 
 
 const props = defineProps({
@@ -74,17 +76,13 @@ const shouldTruncate = (content: string): boolean => {
 };
 
 const truncateContent = (content: string): string => {
-    console.log('max length', props.maxLength)
-    console.log('content', content)
     let truncatedContent = content.slice(0, props.maxLength);
-    console.log('truncated content', truncatedContent)
     let linkDepth = 0;
     let linkStartIndex = -1;
     const lines = content.split('\n');
 
     // Truncate if amount of lines are too many
     if (lines.length > props.maxLines && content.length < props.maxLength) {
-        console.log('how many lines', lines.length)
         const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
         return truncatedContent + '...';
     }
@@ -117,17 +115,33 @@ const truncateContent = (content: string): string => {
         truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
     }
 
-    console.log('truncated content later on', truncatedContent)
-
     truncatedContent += '...';
 
     return truncatedContent;
 };
 
+const preprocess = (markdown: string): string => {
+    return markdown;
+}
+
+const postprocess = (html: string): string => {
+    DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener noreferrer');
+        }
+        if (!node.hasAttribute('target') && (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+            node.setAttribute('xlink:show', 'new');
+        }
+    })
+
+    return DOMPurify.sanitize(html);
+}
+
 const convertMarkdownToHtml = (markdown: string): string => {
+    marked.use({'hooks': {postprocess, preprocess}});
     const rawHtml = marked(markdown);
-    // console.log(rawHtml)
-    return DOMPurify.sanitize(rawHtml)
+    return rawHtml;
 };
 
 const prepareContent = (content: string): string => {
@@ -162,36 +176,8 @@ h2 {
     position: relative;
 }
 
-button {
-    cursor: pointer;
-    color: #fff;
-    border: none;
-    padding: 5px 10px;
-}
-
-.read-more {
-    cursor: pointer;
-    position: absolute;
-    bottom: -2px;
-    right: 10px;
-}
-
-.news-date {
-    font-style: italic;
-}
-
 .news-title {
     font-weight: bold;
-    text-transform: uppercase;
-}
-
-time {
-    font-size: .8rem;
-    font-style: italic;
-    border-bottom: 1px dotted #333;
-    padding-bottom: .4rem;
-    margin-bottom: .5rem;
-    display: block;
 }
 
 </style>

src/Bundle/ChillMainBundle/Tests/Controller/NewsItemControllerTest.php

@@ -35,7 +35,6 @@ class NewsItemControllerTest extends WebTestCase
     {
         self::bootKernel();
         $this->em = self::$container->get(EntityManagerInterface::class);
-
     }
 
     public static function tearDownAfterClass(): void
@@ -56,11 +55,11 @@ class NewsItemControllerTest extends WebTestCase
 
     public function generateNewsItemIds(): iterable
     {
-/*        $qb = $em->createQueryBuilder();
-        $newsItems = $qb->select('n')->from(NewsItem::class, 'n')
-            ->setMaxResults(2)
-            ->getQuery()
-            ->getResult();*/
+        /*        $qb = $em->createQueryBuilder();
+                $newsItems = $qb->select('n')->from(NewsItem::class, 'n')
+                    ->setMaxResults(2)
+                    ->getQuery()
+                    ->getResult();*/
 
         $this->setUp();