Add teaser helper function

client/src/components/InstrumentTeaser.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="instrument-teaser">
-    <h3 class="instrument-teaser__title">Instrument: Diskussionsregeln</h3>
-    <p class="instrument-teaser__text">
-      Für eine konstruktive Diskussion braucht es gewisse Regeln.
+    <h3 class="instrument-teaser__title">{{title}}</h3>
+    <p class="instrument-teaser__text" v-html="teaser">
     </p>
   </div>
 </template>
 
 <script>
-  export default {}
+  import teaser from '@/helpers/teaser';
+
+  export default {
+    props: ['title', 'contents'],
+
+    computed: {
+      teaser() {
+        return teaser(this.contents);
+      }
+    }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -20,6 +29,7 @@
     box-sizing: border-box;
     padding: $medium-spacing;
     @include widget-shadow;
+    width: 100%;
 
     &__title {
       @include heading-3;

client/src/components/rooms/RoomEntry.vue

@@ -27,6 +27,7 @@
 
   import UserWidget from '@/components/UserWidget';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+  import teaser from '@/helpers/teaser';
 
   export default {
     props: ['title', 'author', 'contents', 'slug', 'id'],
@@ -72,24 +73,7 @@
         return '';
       },
       teaser() {
-        if (this.contents && this.contents.length) {
-          let first = this.contents.find(content => content.type !== 'image_url_block');
-          if (first && first.type) {
-            switch (first.type) {
-              case 'text_block':
-                return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
-              // return first.value.text;
-              case 'link_block':
-                return first.value.url;
-              case 'document_block':
-                const parts = first.value.url.split('/');
-                return parts[parts.length - 1];
-              default:
-                return ''
-            }
-          }
-        }
-        return '';
+        return teaser(this.contents);
       },
       myEntry() {
         return this.author.id === this.me.id;

client/src/helpers/teaser.js

@@ -0,0 +1,20 @@
+export default (contents) => {
+  if (contents && contents.length) {
+    let first = contents.find(content => content.type !== 'image_url_block');
+    if (first && first.type) {
+      switch (first.type) {
+        case 'text_block':
+          return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
+        // return first.value.text;
+        case 'link_block':
+          return first.value.url;
+        case 'document_block':
+          const parts = first.value.url.split('/');
+          return parts[parts.length - 1];
+        default:
+          return ''
+      }
+    }
+  }
+  return '';
+}