This commit is contained in:
KingOfDog 2020-08-16 16:59:10 +02:00
parent 19ef182430
commit 511ff90a98
13 changed files with 177 additions and 149 deletions

View File

@ -1,10 +1,18 @@
{ {
"name": "block-renderer", "name": "block-renderer",
"description": "Content renderer for JSON blocks from Editor.js",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"author": "KingOfDog <info@kingofdog.de>",
"repository": {
"type": "git",
"url": "https://git.kingofdog.de/KingOfDog/block-renderer"
},
"homepage": "https://git.kingofdog.de/KingOfDog/block-renderer",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"build-package": "vue-cli-service build --target lib --name block-renderer ./src/main.js",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {

View File

@ -1,28 +0,0 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -0,0 +1,66 @@
<template>
<div>
<component
v-for="(block, index) in blocks"
:key="index"
:is="block.component"
:data="block.data"
/>
</div>
</template>
<script>
import EmbedBlock from "./EmbedBlock";
import HeaderBlock from "./HeaderBlock";
import ImageBlock from "./ImageBlock";
import ListBlock from "./ListBlock";
import ParagraphBlock from "./ParagraphBlock";
import QuoteBlock from "./QuoteBlock";
import WarningBlock from "./WarningBlock";
const componentTypes = {
embed: EmbedBlock,
header: HeaderBlock,
image: ImageBlock,
list: ListBlock,
paragraph: ParagraphBlock,
quote: QuoteBlock,
warning: WarningBlock,
};
export default {
props: ["content"],
data() {
return {
blocks: [],
};
},
mounted() {
if (this.content) {
this.prepareBlocks();
}
},
methods: {
prepareBlocks() {
if (!this.content.blocks) {
return;
}
this.blocks = this.content.blocks.map((block) => ({
component: componentTypes[block.type],
type: block.type,
data: block.data,
}));
},
},
watch: {
content() {
if (this.content) {
this.prepareBlocks();
}
},
},
};
</script>
<style>
</style>

View File

@ -0,0 +1,16 @@
<template>
<figure>
<iframe :src="data.embed" :height="data.height" frameborder="0" allowfullscreen class="w-full"></iframe>
<figcaption v-html="data.caption"></figcaption>
</figure>
</template>
<script>
export default {
props: ["data"],
};
</script>
<style>
</style>

View File

@ -0,0 +1,11 @@
<script>
export default {
props: ["data"],
render(createElement) {
return createElement("h" + this.data.level, this.data.text);
},
};
</script>
<style>
</style>

View File

@ -1,114 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@ -0,0 +1,16 @@
<template>
<figure>
<img :src="data.file.url" />
<figcaption v-html="data.caption"></figcaption>
</figure>
</template>
<script>
export default {
props: ["data"],
};
</script>
<style>
</style>

View File

@ -0,0 +1,14 @@
<script>
export default {
props: ["data"],
render(createElement) {
return createElement(
this.data.style === "ordered" ? "ol" : "ul",
this.data.items.map((item) => createElement("li", item))
);
},
};
</script>
<style>
</style>

View File

@ -0,0 +1,12 @@
<template>
<p v-html="data.text"></p>
</template>
<script>
export default {
props: ["data"],
};
</script>
<style>
</style>

View File

@ -0,0 +1,16 @@
<template>
<blockquote>
<p v-html="data.text"></p>
<footer v-html="data.caption"></footer>
</blockquote>
</template>
<script>
export default {
props: ["data"],
};
</script>
<style>
</style>

View File

@ -0,0 +1,15 @@
<template>
<div class="warning-block">
<p class="font-semibold mb-4 text-white">{{data.title}}</p>
<p v-html="data.message" class="text-white"></p>
</div>
</template>
<script>
export default {
props: ["data"],
};
</script>
<style>
</style>

View File

@ -1,8 +1,4 @@
import Vue from "vue"; import BlockContentRenderer from './components/BlockContentRenderer.vue';
import App from "./App.vue";
Vue.config.productionTip = false; export default BlockContentRenderer;
export { BlockContentRenderer };
new Vue({
render: h => h(App)
}).$mount("#app");