From fae4ba08e82b8ebcc624dc3d85fd68460e6c9078 Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Wed, 2 Feb 2022 10:22:47 +0100
Subject: [PATCH] Fix broken instance description if it contains a line break

---
 changes/changelog.d/1673.bugfix  |  1 +
 front/src/components/Home.vue    | 28 +++++++++-------------------
 front/src/style/pages/_home.scss | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 changes/changelog.d/1673.bugfix

diff --git a/changes/changelog.d/1673.bugfix b/changes/changelog.d/1673.bugfix
new file mode 100644
index 000000000..66e0d4b9f
--- /dev/null
+++ b/changes/changelog.d/1673.bugfix
@@ -0,0 +1 @@
+Fix broken instance description if it contains a line break #1673
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 9b4c8194b..606e74a29 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -39,23 +39,24 @@
           >
             <div class="ui stackable grid">
               <div class="eight wide column">
-                <p v-if="!truncatedDescription">
+                <p v-if="!renderedDescription">
                   <translate translate-context="Content/Home/Paragraph">
                     No description available.
                   </translate>
                 </p>
-                <template v-if="truncatedDescription || rules">
+                <template v-if="renderedDescription || rules">
                   <div
-                    v-if="truncatedDescription"
-                    v-html="truncatedDescription"
+                    v-if="renderedDescription"
+                    id="renderedDescription"
+                    v-html="renderedDescription"
                   />
                   <div
-                    v-if="truncatedDescription"
+                    v-if="renderedDescription"
                     class="ui hidden divider"
                   />
                   <div class="ui relaxed list">
                     <div
-                      v-if="truncatedDescription"
+                      v-if="renderedDescription"
                       class="item"
                     >
                       <i class="arrow right icon" />
@@ -324,7 +325,6 @@
 </template>
 
 <script>
-import $ from 'jquery'
 import _ from '@/lodash'
 import { mapState } from 'vuex'
 import showdown from 'showdown'
@@ -372,22 +372,12 @@ export default {
     rules () {
       return _.get(this.nodeinfo, 'metadata.rules')
     },
-    truncatedDescription () {
+    renderedDescription () {
       if (!this.longDescription) {
         return
       }
       const doc = this.markdown.makeHtml(this.longDescription)
-      const nodes = $.parseHTML(doc)
-      const excerptParts = []
-      let handled = 0
-      nodes.forEach((n) => {
-        const content = n.innerHTML || n.nodeValue
-        if (handled < this.excerptLength && content.trim()) {
-          excerptParts.push(n)
-          handled += 1
-        }
-      })
-      return excerptParts.map((p) => { return p.outerHTML }).join('')
+      return doc
     },
     stats () {
       const data = {
diff --git a/front/src/style/pages/_home.scss b/front/src/style/pages/_home.scss
index 818eec303..8c26df1f5 100644
--- a/front/src/style/pages/_home.scss
+++ b/front/src/style/pages/_home.scss
@@ -31,3 +31,18 @@
     display: block;
   }
 }
+
+#renderedDescription {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+#renderedDescription p {
+  margin: 0;
+}
+
+#renderedDescription *:not(:first-child) {
+  display: none;
+}