PB-2088: add markdonw support for previewTitle and previewContent

Author: pedroslvieira

.vitepress/theme/custom.css

@@ -65,6 +65,11 @@ figcaption {
     margin-top: 24px;
 }
 
+.home-status-container p {
+    display: inline;
+    margin: 0px;
+}
+
 .home-status-container a {
     text-decoration: none;
     color: var(--vp-button-brand-bg);
@@ -110,6 +115,10 @@ figcaption {
     margin-bottom: 4px;
 }
 
+.home-container-col span p {
+    margin: 0px;
+}
+
 .home-container-col a {
     display: block;
     text-decoration: none;

.vitepress/theme/index.ts

@@ -7,6 +7,7 @@ import ExampleCodeBlock from '../../components/ExampleCodeBlock.vue'
 import { createHighlighter } from 'shiki'
 import type { HighlighterGeneric, BundledLanguage, BundledTheme } from 'shiki'
 import { createMermaidRenderer } from 'vitepress-mermaid-renderer'
+import markdownit from 'markdown-it'
 
 // Create a global instance of the highlighter as Shiki is supposed to be used as a singleton
 const highlighterPromise = createHighlighter({

components/StatusBanner.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 interface StatusBannerProps {
     type: string
-    title: string
-    content: string
+    previewTitle: string
+    previewContent: string
 }
 
 const props = defineProps<{
@@ -18,8 +18,8 @@ const isWarning = props.status.type === 'warning'
             class="status-content"
         >
             <p>
-                <span class="status-content-title">{{ props.status.title }} - </span>
-                <span class="status-content-text">{{ props.status.content }}</span>
+                <span class="status-content-title">{{ props.status.previewTitle }} - </span>
+                <span class="status-content-text">{{ props.status.previewContent }}</span>
             </p>
         </a>
     </div>

index.md

@@ -46,10 +46,13 @@ import { data as status } from './scripts/status.data.ts'
 import { data as announcements } from './scripts/announcements.data.ts'
 import StatusBanner from './components/StatusBanner.vue'
 import {withBase} from 'vitepress'
+import markdownit from 'markdown-it'
+
 
 const lastRelease = releases.at(0)
 const statusPreview = status[0]
 const announcementsPreview = announcements[0]
+const md = markdownit()
 
 
 let statusContainer = null;
@@ -108,13 +111,13 @@ onUnmounted(() => {
   <div class="announcements-container">
     <h2 id="home-container-h2">End-of-Life</h2>
     <div class="home-container-col">
-      <h4>{{ announcementsPreview.frontmatter.previewTitle}}</h4>
-      <span>{{ announcementsPreview.frontmatter.previewContent}}</span>
+      <h4>{{announcementsPreview.frontmatter.previewTitle}}</h4>
+      <span v-html="md.render(announcementsPreview.frontmatter.previewContent)"></span>
       <a :href="withBase('/page/end-of-life')">Learn more</a>
     </div>
   </div>
 </div>
 <div class="home-status-container" v-if="statusPreview.frontmatter.type === 'info'">
-  <span class="status-content-text">{{ '✅ ' +  statusPreview.frontmatter.content + ' '}}</span>
+  <span class="status-content-text" v-html="md.render('✅ ' +  statusPreview.frontmatter.previewContent + ' ')"></span>
   <a :href="withBase('/page/status-page')">Learn more</a>
 </div>

package-lock.json

@@ -14,7 +14,8 @@
         "prettier": "^3.6.2",
         "tsx": "^4.19.4",
         "vitepress": "1.6.4",
-        "vitepress-mermaid-renderer": "1.1.5"
+        "vitepress-mermaid-renderer": "1.1.5",
+        "markdown-it": "14.1.0"
     },
     "type": "module",
     "engines": {

package.json

@@ -1,6 +1,6 @@
 ---
 previewTitle: 'Planned removal of ch.bfe.komo-projekte'
-previewContent: 'The layer _ch.bfe.komo-projekte_ will be removed from chsdi services with the release of December 17th.'
+previewContent: 'The layer *ch.bfe.komo-projekte* will be removed from chsdi services with the release of December 17th.'
 ---
 
 # End-of-Life

page/end-of-life.md

@@ -1,7 +1,7 @@
 ---
 type: 'info'
-title: 'All Systems Operational'
-content: 'No ongoing incidents - all services are functioning as expected.'
+previewTitle: 'All Systems Operational'
+previewContent: 'No ongoing incidents - all services are functioning as expected'
 
 outline: [2, 3]
 ---
@@ -40,7 +40,7 @@ This page provides the latest status updates for all \*.geo.admin.ch web service
     'warning': '⚠️',
     'danger': '🚨'
   }[$frontmatter.type] || ''
-}} **{{ $frontmatter.previewTitle }}**: {{ $frontmatter.content }}
+}} **{{ $frontmatter.previewTitle }}**: {{ $frontmatter.previewContent }}
 
 ## Incident History