Add link block

This commit is contained in:
KingOfDog 2020-08-21 21:34:25 +02:00
parent 511ff90a98
commit 2fa432b6b8
2 changed files with 31 additions and 7 deletions

View File

@ -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>

View File

@ -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>