feat: render announcements as markdown (#180)

Author: budak7273

src/lib/components/announcements/AnnouncementRow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { AnnouncementImportance } from '$lib/generated';
+  import { markdown } from '$lib/utils/markdown';
 
   const iconNames: { [key in AnnouncementImportance]: string } = {
     [AnnouncementImportance.Info]: 'info',
@@ -27,10 +28,14 @@
   <div class="striped p-1 text-black">
     <span class="material-icons align-middle text-2xl">{iconNames[importance]}</span>
     <div
-      class="text-l inline-block max-w-full break-words align-middle"
+      class="text-l announcement-markdown inline-block max-w-full break-words align-middle"
       class:font-mono={isMonospace}
       class:whitespace-pre={isMonospace}>
-      <b>{importance}: </b>{finalMessage}
+      <b>{importance}: </b>
+      {#await markdown(finalMessage, true) then previewRendered}
+        <!-- eslint-disable-next-line -->
+        {@html previewRendered}
+      {/await}
     </div>
   </div>
 </div>

src/lib/components/versions/VersionForm.svelte

@@ -146,7 +146,7 @@
       <div class="grid grid-flow-row auto-rows-max gap-2">
         <span>{$t('preview')}:</span>
         {#await markdown(preview) then previewRendered}
-          <!-- eslint-disable -->
+          <!-- eslint-disable-next-line -->
           <div class="markdown-content right">{@html previewRendered}</div>
         {/await}
       </div>

src/lib/utils/markdown.ts

@@ -27,9 +27,9 @@ if (!browser) {
   resolver(DOMPurify.sanitize);
 }
 
-export const markdown = (md: string): Promise<string> =>
+export const markdown = (md: string, inline = false): Promise<string> =>
   sanitizer.then((s) => {
-    const sanitized = s(marked(md));
+    const sanitized = s(inline ? marked.parseInline(md) : marked(md));
     const parsed = new DOMParser().parseFromString(sanitized, 'text/html');
     Prism.highlightAllUnder(parsed.body);
     return parsed.body.innerHTML;

src/routes/_global.postcss

@@ -132,6 +132,12 @@ body.accessibility {
   }
 }
 
+.announcement-markdown {
+  & a {
+    text-decoration: underline;
+  }
+}
+
 @font-face {
   font-family: Flow;
   font-weight: 400;