Apply prettier rules

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

@@ -1,11 +1,18 @@
 <template>
     <li>
         <h2>{{ props.item.title }}</h2>
-        <time class="createdBy" 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>
             <div class="float-end">
-                <button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
+                <button
+                    class="btn btn-sm btn-show read-more"
+                    @click="() => openModal(item)"
+                >
+                    {{ $t("widget.news.readMore") }}
+                </button>
             </div>
         </div>
         <div class="content" v-else>
@@ -18,7 +25,11 @@
             </template>
             <template #body>
                 <p class="news-date">
-                    <time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
+                    <time
+                        class="createdBy"
+                        datetime="{{item.startDate.datetime}}"
+                        >{{ $d(newsItemStartDate(), "text") }}</time
+                    >
                 </p>
                 <div v-html="convertMarkdownToHtml(item.content)"></div>
             </template>
@@ -28,18 +39,17 @@
 
 <script setup lang="ts">
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
+import { marked } from "marked";
+import DOMPurify from "dompurify";
 import { NewsItemType } from "../../../types";
-import type { PropType } from 'vue'
+import type { PropType } from "vue";
 import { ref } from "vue";
-import {ISOToDatetime} from '../../../chill/js/date';
-
+import { ISOToDatetime } from "../../../chill/js/date";
 
 const props = defineProps({
     item: {
         type: Object as PropType<NewsItemType>,
-        required: true
+        required: true,
     },
     maxLength: {
         type: Number,
@@ -49,9 +59,9 @@ const props = defineProps({
     maxLines: {
         type: Number,
         required: false,
-        default: 3
-    }
-})
+        default: 3,
+    },
+});
 
 const selectedArticle = ref<NewsItemType | null>(null);
 const showModal = ref(false);
@@ -67,7 +77,7 @@ const closeModal = () => {
 };
 
 const shouldTruncate = (content: string): boolean => {
-    const lines = content.split('\n');
+    const lines = content.split("\n");
 
     // Check if any line exceeds the maximum length
     const tooManyLines = lines.length > props.maxLines;
@@ -79,67 +89,74 @@ const truncateContent = (content: string): string => {
     let truncatedContent = content.slice(0, props.maxLength);
     let linkDepth = 0;
     let linkStartIndex = -1;
-    const lines = content.split('\n');
+    const lines = content.split("\n");
 
     // Truncate if amount of lines are too many
     if (lines.length > props.maxLines && content.length < props.maxLength) {
-        const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
-        return truncatedContent + '...';
+        const truncatedContent = lines
+            .slice(0, props.maxLines)
+            .join("\n")
+            .trim();
+        return truncatedContent + "...";
     }
 
     for (let i = 0; i < truncatedContent.length; i++) {
         const char = truncatedContent[i];
 
-        if (char === '[') {
+        if (char === "[") {
             linkDepth++;
             if (linkDepth === 1) {
                 linkStartIndex = i;
             }
-        } else if (char === ']') {
+        } else if (char === "]") {
             linkDepth = Math.max(0, linkDepth - 1);
-        } else if (char === '(' && linkDepth === 0) {
+        } else if (char === "(" && linkDepth === 0) {
             truncatedContent = truncatedContent.slice(0, i);
             break;
         }
     }
 
     while (linkDepth > 0) {
-        truncatedContent += ']';
+        truncatedContent += "]";
         linkDepth--;
     }
 
     // If a link was found, append the URL inside the parentheses
     if (linkStartIndex !== -1) {
-        const linkEndIndex = content.indexOf(')', linkStartIndex);
+        const linkEndIndex = content.indexOf(")", linkStartIndex);
         const url = content.slice(linkStartIndex + 1, linkEndIndex);
-        truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
+        truncatedContent =
+            truncatedContent.slice(0, linkStartIndex) + `(${url})`;
     }
 
-    truncatedContent += '...';
+    truncatedContent += "...";
 
     return truncatedContent;
 };
 
 const preprocess = (markdown: string): string => {
     return markdown;
-}
+};
 
 const postprocess = (html: string): string => {
-    DOMPurify.addHook('afterSanitizeAttributes', (node: any) => {
-        if ('target' in node) {
-            node.setAttribute('target', '_blank');
-            node.setAttribute('rel', 'noopener noreferrer');
+    DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
+        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');
+        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}, 'async': false});
+    marked.use({ hooks: { postprocess, preprocess }, async: false });
     const rawHtml = marked(markdown) as string;
     return rawHtml;
 };
@@ -149,18 +166,16 @@ const prepareContent = (content: string): string => {
     return truncateContent(htmlContent);
 };
 
-const newsItemStartDate = (): null|Date => {
+const newsItemStartDate = (): null | Date => {
     return ISOToDatetime(props.item?.startDate.datetime);
-}
-
+};
 </script>
 
 <style scoped>
-
 li {
     margin-bottom: 20px;
     overflow: hidden;
-    padding: .8rem;
+    padding: 0.8rem;
     background-color: #fbfbfb;
     border-radius: 4px;
 }
@@ -172,12 +187,11 @@ h2 {
 
 .content {
     overflow: hidden;
-    font-size: .9rem;
+    font-size: 0.9rem;
     position: relative;
 }
 
 .news-title {
     font-weight: bold;
 }
-
 </style>