Merge pull request #85 from geoadmin/bugfix-PB-2088-end-of-life-preview

PB-2088: add markdown 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;

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,14 @@ 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'
+// Though vitepress uses markdown-it, it's not exposed so we need to explicitly import
+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 +112,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>