Add link block

src/components/BlockContentRenderer.vue

@@ -13,6 +13,7 @@
 import EmbedBlock from "./EmbedBlock";
 import HeaderBlock from "./HeaderBlock";
 import ImageBlock from "./ImageBlock";
+import LinkBlock from "./LinkBlock";
 import ListBlock from "./ListBlock";
 import ParagraphBlock from "./ParagraphBlock";
 import QuoteBlock from "./QuoteBlock";
@@ -22,17 +23,18 @@ const componentTypes = {
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,
+  link: LinkBlock,
   list: ListBlock,
   paragraph: ParagraphBlock,
   quote: QuoteBlock,
-  warning: WarningBlock,
+  warning: WarningBlock
 };
 
 export default {
   props: ["content"],
   data() {
     return {
-      blocks: [],
+      blocks: []
     };
   },
   mounted() {
@@ -45,20 +47,20 @@ export default {
       if (!this.content.blocks) {
         return;
       }
-      this.blocks = this.content.blocks.map((block) => ({
+      this.blocks = this.content.blocks.map(block => ({
         component: componentTypes[block.type],
         type: block.type,
-        data: block.data,
+        data: block.data
       }));
-    },
+    }
   },
   watch: {
     content() {
       if (this.content) {
         this.prepareBlocks();
       }
-    },
+    }
-  },
+  }
 };
 </script>
 

src/components/LinkBlock.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="link-block">
+    <div class="link-block-meta">
+      <div class="link-block-title">{{data.meta.title}}</div>
+      <p class="link-block-description">{{data.meta.description}}</p>
+      <div class="link-block-anchor">{{domain}}</div>
+    </div>
+
+    <div class="link-block-image" :style="{ 'background-image': data.meta.image.url }"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["data"],
+  computed: {
+    domain() {
+      return this.data.link.replace(/(https|http):\/\//, "").split(/[/?#]/)[0];
+    }
+  }
+};
+</script>