Add read-more button

src/components/Entry.vue

@@ -15,7 +15,7 @@
             </p>
           </div>
 
-          <div class="content">
+          <div ref="content-container" :class="{'content': true, 'content-container': true, 'open': hiddenContentVisible}">
             <div v-if="isRef">
               <div><small><a :href="outside_author_url">{{ outside_author_name }}</a>&nbsp;<span v-text="refText"></span>:</small></div>
             </div>
@@ -35,8 +35,14 @@
                 </div>
               </div>
             </div>
-
+          </div>
-            <p>
+        </div>
+        <div>
+          <div class="level" v-if="hasHiddenContent">
+            <div class="level-item">
+              <button class="is-link" @click.prevent="toggleHiddenContent">Read more</button>
+            </div>
+            <div class="level-item">
                 <small>
                 <span v-if="showFooterButtons">
                 <a @click="like">Like</a>
@@ -47,7 +53,7 @@
                 &middot; <a @click.prevent="debug">Debug</a>
                 </span>
                 </small>
-            </p>
+            </div>
           </div>
         </div>
         <div class="media" v-if="replying">
@@ -126,7 +132,8 @@ export default {
         selected: [],
         destinations: [],
         selectedDestinations: [],
-        categories: []
+        categories: [],
+        hiddenContentVisible: false
       }
     },
 
@@ -206,6 +213,9 @@ export default {
         }
         return false
       },
+      toggleHiddenContent() {
+        this.hiddenContentVisible = !this.hiddenContentVisible
+      }
     },
 
     mounted() {
@@ -213,6 +223,15 @@ export default {
     },
 
     computed: {
+      hasHiddenContent () {
+        const el = this.$refs['content-container']
+        if (!el) {
+          // eslint-disable-next-line
+          console.log('ref content-container not found')
+          return true
+        }
+        return el.scrollHeight > el.clientHeight
+      },
       currentItem() {
         if (this.isRef) {
           return this.innerRef
@@ -317,7 +336,11 @@ export default {
         }
         if (!this.currentItem.author.name) {
           if (this.currentItem.author.url) {
+            try {
               return new URL(this.currentItem.author.url).hostname
+            } catch (e) {
+              return this.currentItem.author.url
+            }
           }
         }
         return this.currentItem.author.name
@@ -366,4 +389,13 @@ export default {
     white-space: pre-wrap;
   }
 
+  .content-container {
+    max-height: 20vh;
+    overflow: hidden;
+  }
+
+  .content-container.open {
+    max-height: fit-content;
+  }
+
 </style>