Improve warning and embed block

This commit is contained in:
KingOfDog 2021-01-06 17:26:46 +01:00
parent cefdf76045
commit d9b5af7388
10 changed files with 5141 additions and 52 deletions

View File

@ -3,12 +3,42 @@ module.exports = {
env: { env: {
node: true node: true
}, },
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: { parserOptions: {
parser: "babel-eslint" parser: "babel-eslint"
}, },
rules: { rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", semi: [
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 'error',
} 'always',
],
quotes: [
2,
'single',
],
'comma-dangle': [
'error',
{
'arrays': 'always-multiline',
'objects': 'always-multiline',
'imports': 'always-multiline',
'exports': 'always-multiline',
'functions': 'never'
}
],
'space-before-function-paren': [
'error',
'never',
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'max-len': ['warn', {
'code': 100,
'ignoreStrings': true,
}]
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
],
}; };

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
{ {
"name": "block-renderer", "name": "block-renderer",
"description": "Content renderer for JSON blocks from Editor.js", "description": "Content renderer for JSON blocks from Editor.js",
"version": "0.5.2", "version": "0.6.2",
"author": "KingOfDog <info@kingofdog.de>", "author": "KingOfDog <info@kingofdog.de>",
"repository": { "repository": {
"type": "git", "type": "git",

View File

@ -1,19 +1,54 @@
<template> <template>
<figure> <figure class="embed-block">
<iframe <div class="embed-container">
:src="data.embed" <iframe
:height="data.height" v-if="accepted"
frameborder="0" :src="data.embed"
allowfullscreen :height="data.height"
class="w-full" frameborder="0"
></iframe> allowfullscreen
/>
<div
v-else
class="embed-accept"
>
<h2>Externer Inhalt</h2>
<h3>
Originaler Link: <a
:href="data.source"
target="_blank"
>{{ displayUrl }}</a>
</h3>
<p>
An dieser Stelle ist externer Inhalt eingebunden. Um den Datenschutz
zu gewährleisten, ist er derzeit ausgeblendet. Deine Privatsphäre kann
auf externen Seiten nicht sichergestellt werden. Möchtest du den
Inhalt dennoch anzeigen?
</p>
<button @click="accepted = true">
Anzeigen
</button>
</div>
</div>
<figcaption v-html="data.caption"></figcaption> <figcaption v-html="data.caption" />
</figure> </figure>
</template> </template>
<script> <script>
export default { export default {
props: ["data"] props: ['data'],
data() {
return { accepted: false };
},
computed: {
displayUrl() {
if (!this.data) {
return '';
}
const url = new URL(this.data.source);
return url.hostname;
},
},
}; };
</script> </script>

View File

@ -1,15 +1,17 @@
<template> <template>
<div class="warning-block"> <div class="warning-block">
<p class="font-semibold mb-4 text-white">{{data.title}}</p> <b v-html="title"></b>
<p v-html="data.message" class="text-white"></p> <p v-html="data.message"></p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ["data"], props: ["data"],
computed: {
title() {
return this.data.title ? this.data.title.replace(/<br>/g, "") : "";
}
}
}; };
</script> </script>
<style>
</style>