Markdown render dataset / worker / model descriptions

src/views/Dataset/Details.vue

@@ -28,7 +28,7 @@
         <label class="label">Description</label>
         <div class="control">
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <p class="has-line-breaks" v-html="md.render(dataset.description)"></p>
+          <p class="content" v-html="md.render(dataset.description)"></p>
         </div>
       </div>
       <div class="mt-4 tabs is-medium is-centered">
@@ -141,7 +141,7 @@ export default defineComponent({
   },
   data: () => ({
     selectedSet: '',
-    md: MarkdownIt({ breaks: true }),
+    md: new MarkdownIt({ breaks: true }),
     confirmationClone: false,
     loading: false,
     // Display a loader for each set

src/views/Model/Model.vue

@@ -44,9 +44,9 @@
       <div class="field">
         <label class="label">Description</label>
         <div class="control">
-          <p class="has-line-breaks">
-            {{ model.description || '—' }}
-          </p>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <p v-if="model.description" class="content" v-html="md.render(model.description)"></p>
+          <p v-else>—</p>
         </div>
       </div>
 
@@ -66,6 +66,7 @@
 </template>
 
 <script lang="ts">
+import MarkdownIt from 'markdown-it'
 import { defineComponent } from 'vue'
 import { mapState, mapActions } from 'pinia'
 import { UUID_REGEX } from '@/config'
@@ -94,7 +95,8 @@ export default defineComponent({
   data: () => ({
     loading: false,
     error: null as string | null,
-    archiveModal: false
+    archiveModal: false,
+    md: new MarkdownIt({ breaks: true })
   }),
   computed: {
     ...mapState(useModelStore, ['models']),

src/views/Model/Version.vue

@@ -28,9 +28,9 @@
       <div class="field">
         <label class="label">Description</label>
         <div class="control">
-          <p class="has-line-breaks">
-            {{ version.description || '—' }}
-          </p>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <p v-if="version.description" class="content" v-html="md.render(version.description)"></p>
+          <p v-else>—</p>
         </div>
       </div>
 
@@ -77,6 +77,7 @@
 </template>
 
 <script lang="ts">
+import MarkdownIt from 'markdown-it'
 import { defineComponent } from 'vue'
 import { mapActions, mapState } from 'pinia'
 import { MODEL_VERSION_STATE_COLORS, UUID_REGEX } from '@/config'
@@ -105,7 +106,8 @@ export default defineComponent({
   },
   data: () => ({
     error: null as string | null,
-    editModal: false
+    editModal: false,
+    md: new MarkdownIt({ breaks: true })
   }),
   computed: {
     ...mapState(useModelStore, ['models', 'modelVersions']),

src/views/Process/Workers/List.vue

@@ -113,9 +113,12 @@
             <div class="field mt-2">
               <label class="label">Description</label>
               <div class="control">
-                <p class="has-line-breaks">
-                  {{ selectedWorker.description || '—' }}
-                </p>
+                <p v-if="!selectedWorker.description">—</p>
+                <div v-else>
+                  <!-- eslint-disable-next-line vue/no-v-html -->
+                  <p class="content" v-html="md.render(workerDescription(selectedWorker))"></p>
+                  <a class="button" v-if="readMore" v-on:click="expandDescription = !expandDescription">{{ readMoreText }}</a>
+                </div>
               </div>
             </div>
           </div>
@@ -154,6 +157,7 @@
 import { isEmpty } from 'lodash'
 import { mapState, mapActions } from 'pinia'
 import { mapState as mapVuexState } from 'vuex'
+import MarkdownIt from 'markdown-it'
 
 import { errorParser } from '@/helpers'
 import { truncateMixin } from '@/mixins'
@@ -228,11 +232,17 @@ export default {
     nameFilter: '',
     typeFilter: '',
     archiveModal: false,
-    archivedWorkers: false
+    archivedWorkers: false,
+    md: new MarkdownIt({ breaks: true }),
+    expandDescription: false
   }),
   computed: {
     ...mapVuexState('repos', ['reposPage']),
-    ...mapState(useWorkerStore, ['workerTypes'])
+    ...mapState(useWorkerStore, ['workerTypes']),
+    readMoreText () {
+      if (this.expandDescription) return 'collapse description'
+      return 'expand description'
+    }
   },
   methods: {
     ...mapActions(useNotificationStore, ['notify']),
@@ -276,6 +286,13 @@ export default {
     },
     workerTypeIdFromSlug (slug) {
       return Object.keys(this.workerTypes).find(type => this.workerTypes[type].slug === slug)
+    },
+    workerDescription (worker) {
+      if (!this.expandDescription) return this.truncateLong(worker.description)
+      return worker.description
+    },
+    readMore (worker) {
+      return this.truncateLong(worker.description).length < worker.description.length
     }
   },
   watch: {

src/views/Process/Workers/Manage.vue

@@ -20,6 +20,15 @@
         </button>
       </div>
 
+      <div class="field">
+        <label class="label">Description</label>
+        <div class="control">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <p v-if="worker.description" class="content" v-html="md.render(worker.description)"></p>
+          <p v-else>—</p>
+        </div>
+      </div>
+
       <hr />
       <VersionList :worker="worker" />
 
@@ -43,6 +52,7 @@
 </template>
 
 <script lang="ts">
+import MarkdownIt from 'markdown-it'
 import { mapState, mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 import { errorParser } from '@/helpers'
@@ -69,7 +79,8 @@ export default defineComponent({
   data: () => ({
     loading: false,
     error: null as string | null,
-    archiveModal: false
+    archiveModal: false,
+    md: new MarkdownIt({ breaks: true })
   }),
   async created () {
     if (!this.worker) await this.retrieveWorker()