Add attaches block

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,6 +10,7 @@
 </template>
 
 <script>
+import AttachesBlock from "./AttachesBlock";
 import EmbedBlock from "./EmbedBlock";
 import HeaderBlock from "./HeaderBlock";
 import ImageBlock from "./ImageBlock";
@@ -20,6 +21,7 @@ import QuoteBlock from "./QuoteBlock";
 import WarningBlock from "./WarningBlock";
 
 const componentTypes = {
+  attaches: AttachesBlock,
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,

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;
+};