From ebd81f7cb4c120ad14e1796fb90db8c06b5b6f6b Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Sun, 26 Nov 2023 22:36:10 +0800
Subject: [PATCH 1/3] fix: set content in response to be required

---
 packages/models/response.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/models/response.js b/packages/models/response.js
index a2bf5b0..d108df6 100644
--- a/packages/models/response.js
+++ b/packages/models/response.js
@@ -7,7 +7,10 @@ const responseSchema = new Schema({
     default: 'dialogue',
     required: true,
   },
-  content: [String],
+  content: {
+    type: [String],
+    required: true,
+  },
   speaker: { type: String, default: 'Ada' },
   color: String,
 })

From abaacf7ee7c106fae89f6588ce2bda9bd7c6ce89 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Sun, 26 Nov 2023 23:16:13 +0800
Subject: [PATCH 2/3] feat: display markdown to html

---
 app/package.json                 |  2 ++
 app/src/components/HintPart.vue  | 20 ++++++++-----
 app/src/components/QuestPart.vue | 51 +++++++++++++++++++++++++-------
 app/src/utils/markdown.js        |  7 +++++
 yarn.lock                        | 10 +++++++
 5 files changed, 72 insertions(+), 18 deletions(-)
 create mode 100644 app/src/utils/markdown.js

diff --git a/app/package.json b/app/package.json
index 6a326a0..bb5fe96 100644
--- a/app/package.json
+++ b/app/package.json
@@ -20,7 +20,9 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/utils": "*",
     "axios": "^1.6.0",
+    "dompurify": "^3.0.6",
     "echarts": "^5.4.3",
+    "marked": "^10.0.0",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 115c438..3a95891 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import sessionStore from '../store/session'
+import markdown2HTML from '../utils/markdown'
 
 const current = ref(-1)
 watch(
@@ -22,6 +23,12 @@ const right = () => {
     current.value += 1
   }
 }
+
+const hints = computed(() => {
+  return sessionStore.session.hints.map((stageHints) =>
+    stageHints.map(markdown2HTML)
+  )
+})
 </script>
 
 <template>
@@ -50,13 +57,13 @@ const right = () => {
       <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionStore.session.hints.length }}
+        {{ hints.length }}
       </p>
       <button
         class="p-2 m-1 w-1/8"
         id="Rbutton"
         @click="right"
-        :disabled="current === sessionStore.session.hints.length - 1"
+        :disabled="current === hints.length - 1"
       >
         <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
       </button>
@@ -65,12 +72,11 @@ const right = () => {
   <div id="hint" class="bg-bg flex flex-wrap p-8">
     <ul>
       <li
-        v-for="hint in sessionStore.session.hints[current]"
+        v-for="hint in hints[current]"
         :key="hint"
         class="text-text font-xl whitespace-pre-wrap"
-      >
-        {{ hint }}
-      </li>
+        v-html="hint"
+      ></li>
     </ul>
     <br />
   </div>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 0874957..8feb98d 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -1,5 +1,23 @@
 <script setup>
+import { computed } from 'vue'
 import sessionStore from '../store/session'
+import markdown2HTML from '../utils/markdown'
+
+const instruction = computed(() => {
+  return markdown2HTML(sessionStore.quest.instruction)
+})
+
+const tasks = computed(() => {
+  return sessionStore.session.tasks.map((task) => {
+    const prefix = task.completed ? '✓' : '➤'
+    const color = task.completed ? 'text-text-primary' : 'text-text'
+    return {
+      ...task,
+      class: `${color} markdown-content`,
+      content: markdown2HTML(`${prefix} ${task.name}`),
+    }
+  })
+})
 </script>
 
 <template>
@@ -10,26 +28,37 @@ import sessionStore from '../store/session'
     <br />
     <div>
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
-        <p class="text-text">{{ sessionStore.quest.instruction }}</p>
+        <p class="text-text markdown-content" v-html="instruction"></p>
         <br />
         <p id="tasks" class="text-text">
           <!-- Tasks: -->
           任務：
         </p>
         <ul v-if="sessionStore.session">
-          <li v-for="task in sessionStore.session.tasks" :key="task.id">
-            <p v-if="task.completed" class="text-text-primary">
-              <span class=""> ✓</span>
-              {{ task.name }}
-            </p>
-            <p v-else class="text-text">
-              <span class="">➤</span>
-              {{ task.name }}
-            </p>
-          </li>
+          <li
+            v-for="task in tasks"
+            :key="task.id"
+            :class="task.class"
+            v-html="task.content"
+          ></li>
         </ul>
       </div>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>
 </template>
+
+<style scoped>
+.markdown-content :deep(p) {
+  margin: 0;
+  color: 'red';
+  padding: 0;
+}
+
+.markdown-content :deep(code) {
+  background-color: #282a33;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/app/src/utils/markdown.js b/app/src/utils/markdown.js
new file mode 100644
index 0000000..32b4276
--- /dev/null
+++ b/app/src/utils/markdown.js
@@ -0,0 +1,7 @@
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+export default function markdown2HTML(markdown) {
+  const html = marked.parse(markdown)
+  return DOMPurify.sanitize(html)
+}
diff --git a/yarn.lock b/yarn.lock
index e5c7d07..fb9b082 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2404,6 +2404,11 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dompurify@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.6.tgz#925ebd576d54a9531b5d76f0a5bef32548351dae"
+  integrity sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==
+
 dotenv@^16.3.1:
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
@@ -4691,6 +4696,11 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+marked@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-10.0.0.tgz#7fe1805bb908433d760e2de0fcc8841a2b2d745c"
+  integrity sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"

From 8f31e4f2cd337ffb3a286257c6ee58feeed7acee Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Sun, 26 Nov 2023 23:32:37 +0800
Subject: [PATCH 3/3] feat: separate Markdown to a component

---
 app/src/components/HintPart.vue     | 21 ++++++----------
 app/src/components/MarkdownText.vue | 38 +++++++++++++++++++++++++++++
 app/src/components/QuestPart.vue    | 37 +++++++---------------------
 3 files changed, 55 insertions(+), 41 deletions(-)
 create mode 100644 app/src/components/MarkdownText.vue

diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 3a95891..f22d998 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
 import sessionStore from '../store/session'
-import markdown2HTML from '../utils/markdown'
+import MarkdownText from './MarkdownText.vue'
 
 const current = ref(-1)
 watch(
@@ -23,12 +23,6 @@ const right = () => {
     current.value += 1
   }
 }
-
-const hints = computed(() => {
-  return sessionStore.session.hints.map((stageHints) =>
-    stageHints.map(markdown2HTML)
-  )
-})
 </script>
 
 <template>
@@ -57,13 +51,13 @@ const hints = computed(() => {
       <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ hints.length }}
+        {{ sessionStore.session.hints.length }}
       </p>
       <button
         class="p-2 m-1 w-1/8"
         id="Rbutton"
         @click="right"
-        :disabled="current === hints.length - 1"
+        :disabled="current === sessionStore.session.hints.length - 1"
       >
         <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
       </button>
@@ -72,11 +66,12 @@ const hints = computed(() => {
   <div id="hint" class="bg-bg flex flex-wrap p-8">
     <ul>
       <li
-        v-for="hint in hints[current]"
+        v-for="hint in sessionStore.session.hints[current]"
         :key="hint"
         class="text-text font-xl whitespace-pre-wrap"
-        v-html="hint"
-      ></li>
+      >
+        <MarkdownText :content="hint" />
+      </li>
     </ul>
     <br />
   </div>
diff --git a/app/src/components/MarkdownText.vue b/app/src/components/MarkdownText.vue
new file mode 100644
index 0000000..686995f
--- /dev/null
+++ b/app/src/components/MarkdownText.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed, defineProps } from 'vue'
+import markdown2HTML from '../utils/markdown'
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+})
+
+const html = computed(() => {
+  return markdown2HTML(props.content)
+})
+</script>
+
+<template>
+  <div class="markdown-content" v-html="html"></div>
+</template>
+
+<style scoped>
+.markdown-content {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.markdown-content :deep(ol) {
+  list-style: decimal;
+  padding-left: 1em;
+}
+.markdown-content :deep(code) {
+  background-color: #282a33;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 8feb98d..eeae92c 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -1,11 +1,7 @@
 <script setup>
 import { computed } from 'vue'
+import MarkdownText from './MarkdownText.vue'
 import sessionStore from '../store/session'
-import markdown2HTML from '../utils/markdown'
-
-const instruction = computed(() => {
-  return markdown2HTML(sessionStore.quest.instruction)
-})
 
 const tasks = computed(() => {
   return sessionStore.session.tasks.map((task) => {
@@ -14,7 +10,7 @@ const tasks = computed(() => {
     return {
       ...task,
       class: `${color} markdown-content`,
-      content: markdown2HTML(`${prefix} ${task.name}`),
+      content: `${prefix} ${task.name}`,
     }
   })
 })
@@ -28,37 +24,22 @@ const tasks = computed(() => {
     <br />
     <div>
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
-        <p class="text-text markdown-content" v-html="instruction"></p>
+        <MarkdownText
+          class="text-text markdown-content"
+          :content="sessionStore.quest.instruction"
+        />
         <br />
         <p id="tasks" class="text-text">
           <!-- Tasks: -->
           任務：
         </p>
         <ul v-if="sessionStore.session">
-          <li
-            v-for="task in tasks"
-            :key="task.id"
-            :class="task.class"
-            v-html="task.content"
-          ></li>
+          <li v-for="task in tasks" :key="task.id">
+            <MarkdownText :class="task.class" :content="task.content" />
+          </li>
         </ul>
       </div>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>
 </template>
-
-<style scoped>
-.markdown-content :deep(p) {
-  margin: 0;
-  color: 'red';
-  padding: 0;
-}
-
-.markdown-content :deep(code) {
-  background-color: #282a33;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
-  font-size: 0.875rem;
-}
-</style>