Update to version 0.1.3

package-lock.json

@@ -1746,6 +1746,17 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1772,6 +1783,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1793,6 +1832,13 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1857,6 +1903,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1873,6 +1929,21 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.5",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
+          "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/mini-css-extract-plugin": "^0.9.1",
+            "chalk": "^3.0.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^1.2.3",
+            "merge-source-map": "^1.1.0",
+            "source-map": "^0.6.1"
+          }
         }
       }
     },
@@ -10914,86 +10985,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -1,8 +1,7 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.1.0",
+  "version": "0.1.3",
-  "private": true,
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",
@@ -31,4 +30,4 @@
     "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}

src/assets/svg/custom.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
+  <path d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
+</svg>

src/assets/svg/standard.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
+  <g fill="#A8ACB8" fill-rule="evenodd">
+    <path fill-rule="nonzero" d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
+    <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"/>
+  </g>
+</svg>

src/components/AttachesBlock.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="attaches-block">
+    <div
+      :data-extension="data.file.extension"
+      :style="{ color: color }"
+      class="attaches-block-file-icon"
+    >
+      <svg>
+        <use
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          v-bind:xlink:href="color ? customIcon : standardIcon"
+        />
+      </svg>
+    </div>
+    <div class="attaches-block-file-info">
+      <p class="attaches-block-title">{{ data.file.name }}</p>
+      <p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
+    </div>
+    <a :href="data.file.url" class="attaches-block-file download-button"></a>
+  </div>
+</template>
+
+<script>
+import byteFormatter from "../filters/byteFormatter";
+
+const extensions = {
+  doc: "#3e74da",
+  docx: "#3e74da",
+  odt: "#3e74da",
+  pdf: "#d47373",
+  rtf: "#656ecd",
+  tex: "#5a5a5b",
+  txt: "#5a5a5b",
+  pptx: "#e07066",
+  ppt: "#e07066",
+  mp3: "#eab456",
+  mp4: "#f676a6",
+  xls: "#3f9e64",
+  html: "#2988f0",
+  htm: "#2988f0",
+  png: "#f676a6",
+  jpg: "#f67676",
+  jpeg: "#f67676",
+  gif: "#f6af76",
+  zip: "#4f566f",
+  rar: "#4f566f",
+  exe: "#e26f6f",
+  svg: "#bf5252",
+  key: "#e07066",
+  sketch: "#df821c",
+  ai: "#df821c",
+  psd: "#388ae5",
+  dmg: "#e26f6f",
+  json: "#2988f0",
+  csv: "#3f9e64"
+};
+
+export default {
+  filters: {
+    byteFormatter
+  },
+  props: ["data"],
+  data() {
+    return {
+      standardIcon: require("@/assets/svg/standard.svg"),
+      customIcon: require("@/assets/svg/custom.svg")
+    };
+  },
+  computed: {
+    color() {
+      return extensions[this.data.file.extension];
+    }
+  }
+};
+</script>
+
+<style scoped>
+.attaches-block-file-icon::before {
+  content: attr(data-extension);
+}
+</style>

src/components/BlockContentRenderer.vue

@@ -10,29 +10,33 @@
 </template>
 
 <script>
+import AttachesBlock from "./AttachesBlock";
 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";
 import WarningBlock from "./WarningBlock";
 
 const componentTypes = {
+  attaches: AttachesBlock,
   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 +49,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>

src/filters/byteFormatter.js

@@ -0,0 +1,30 @@
+module.exports = function(size) {
+  var result;
+
+  switch (true) {
+    case size === null || size === "" || isNaN(size):
+      result = "-";
+      break;
+
+    case size >= 0 && size < 1024:
+      result = size + " B";
+      break;
+
+    case size >= 1024 && size < Math.pow(1024, 2):
+      result = Math.round((size / 1024) * 100) / 100 + " KiB";
+      break;
+
+    case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
+      result = Math.round((size / Math.pow(1024, 2)) * 100) / 100 + " MiB";
+      break;
+
+    case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
+      result = Math.round((size / Math.pow(1024, 3)) * 100) / 100 + " GiB";
+      break;
+
+    default:
+      result = Math.round((size / Math.pow(1024, 4)) * 100) / 100 + " TiB";
+  }
+
+  return result;
+};