Support the panelists description (Modal.vue) in markdown format.

[gkirchou]

Types of changes

• New feature
• Documentation Update

Description

1. 翻譯未提供中文介紹的來賓與主持人。
2. 讓 Modal.vue 支援 markdown 格式。
3. 把 Panel 參與者的介紹改顯示為 markdown 格式。

Steps to Test This Pull Request

$ npm run dev
http://localhost:3000/2025/en-us/conference/panel-discussion
http://localhost:3000/2025/zh-hant/conference/panel-discussion

Expected behavior

1. 中文介面均顯示中文翻譯。
2. 連結可以點擊。
3. 現有的 Modal.vue 不應該被影響到。

Related Issue

N/A 目前沒開，要的話我再開。

[netlify]

👷 Deploy request for classy-granita-bc2b5a pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	5e7c49f

[netlify]

✅ Deploy Preview for zesty-gnome-f04144 ready!

Name	Link
🔨 Latest commit	5e7c49f
🔍 Latest deploy log	https://app.netlify.com/projects/zesty-gnome-f04144/deploys/68bb9380954a0600085d65c9
😎 Deploy Preview	https://deploy-preview-700--zesty-gnome-f04144.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[serkodev]

the changes of panel-discussion.i18n.js LGTM

[gkirchou]

Updated, PTaL! @serkodev

[serkodev]

Thanks for the update. @gkirchou

If we use the MarkdownRenderer component, I think we should pass the raw Markdown instead of HTML because MarkdownRenderer already converts Markdown to HTML and sanitizes the output with dom purify.
https://github.com/pycontw/pycontw-frontend/blob/main/components/core/markdown/MarkdownRenderer.vue#L2

Click to view suggested patch

diff --git a/components/core/modal/Modal.vue b/components/core/modal/Modal.vue
index b4283c797..9e3ff9541 100644
--- a/components/core/modal/Modal.vue
+++ b/components/core/modal/Modal.vue
@@ -22,12 +22,7 @@
             </div>
             <div class="lightBox__intro">
                 <p class="text-sm">{{ intro }}</p>
-                <MarkdownRenderer
-                    v-if="descriptionIsHtml"
-                    class="text-sm"
-                    :markdown="sanitizedDescription"
-                />
-                <div v-else>
+                <div v-if="Array.isArray(description)">
                     <div
                         v-for="(item, i) in description"
                         :key="i"
@@ -36,6 +31,11 @@
                         {{ item }}
                     </div>
                 </div>
+                <MarkdownRenderer
+                    v-else-if="typeof description === 'string'"
+                    class="text-sm"
+                    :markdown="description"
+                />
             </div>
             <div v-if="websiteUrl" class="lightBox__buttons">
                 <text-button
@@ -51,7 +51,6 @@
 </template>
 
 <script>
-import DOMPurify from 'dompurify'
 import i18n from '../../core/modal/Modal.i18n'
 import MarkdownRenderer from '~/components/core/markdown/MarkdownRenderer'
 import TextButton from '~/components/core/buttons/TextButton'
@@ -70,21 +69,13 @@ export default {
         name: { type: String, default: '' },
         intro: { type: String, default: '' },
         websiteUrl: { type: String, default: '' },
-        description: { type: Array, default: () => [] },
-        descriptionIsHtml: { type: Boolean, default: false },
+        description: { type: [Array, String], default: () => [] },
     },
     data() {
         return {
             shouldShowModal: this.value,
         }
     },
-    computed: {
-        sanitizedDescription() {
-            return this.descriptionIsHtml
-                ? DOMPurify.sanitize(this.description[0])
-                : this.description
-        },
-    },
     watch: {
         value(newVal) {
             this.shouldShowModal = newVal
diff --git a/pages/conference/panel-discussion.vue b/pages/conference/panel-discussion.vue
index eb99a43e8..2dcd9abfd 100644
--- a/pages/conference/panel-discussion.vue
+++ b/pages/conference/panel-discussion.vue
@@ -113,7 +113,6 @@
                             :img-urls="getSpeakerPhoto(selectedItem)"
                             :name="getSpeakerName(selectedItem)"
                             :description="getSpeakerDescription(selectedItem)"
-                            :description-is-html="true"
                         />
                     </transition>
                 </div>
@@ -239,7 +238,7 @@ export default {
             const markdownText = Array.isArray(participant.description)
                 ? participant.description.join('\n\n')
                 : participant.description
-            return [this.$md.render(markdownText)]
+            return markdownText
         },
     },
     head() {

[gkirchou]

Adopted your suggestion, thanks for the advice!

[serkodev]

Just committed the part you missed. All good now, LGTM

[gtbcoding]

Serko is the registration member
LGTM, please help merge