Improve warning and embed block

.eslintrc.js

@@ -3,12 +3,42 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
     parser: "babel-eslint"
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    semi: [
+      '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',
+  ],
 };

package.json

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

src/components/EmbedBlock.vue

@@ -1,19 +1,54 @@
 <template>
-  <figure>
+  <figure class="embed-block">
+    <div class="embed-container">
       <iframe
+        v-if="accepted"
         :src="data.embed"
         :height="data.height"
         frameborder="0"
         allowfullscreen
-      class="w-full"
-    ></iframe>
+      />
+      <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>
 </template>
 
 <script>
 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>

src/components/WarningBlock.vue

@@ -1,15 +1,17 @@
 <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>
+    <b v-html="title"></b>
+    <p v-html="data.message"></p>
   </div>
 </template>
 
 <script>
 export default {
   props: ["data"],
+  computed: {
+    title() {
+      return this.data.title ? this.data.title.replace(/<br>/g, "") : "";
+    }
+  }
 };
 </script>
-
-<style>
-</style>