diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue index ee794c63f..74620c5bb 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue +++ b/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; } diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue index 8bca4c8d3..bbad4315c 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue @@ -1,10 +1,12 @@ @@ -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; } diff --git a/src/Bundle/ChillMainBundle/Tests/Controller/NewsItemControllerTest.php b/src/Bundle/ChillMainBundle/Tests/Controller/NewsItemControllerTest.php index 16d286887..ddd38af85 100644 --- a/src/Bundle/ChillMainBundle/Tests/Controller/NewsItemControllerTest.php +++ b/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();