changes

components/ExternalLink.vue

@@ -0,0 +1,74 @@
+<template>
+  <a
+    class="external-link link"
+    rel="noopener"
+    target="_blank"
+    :href="href"
+  >
+    <template v-if="this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text">
+      <slot/>
+    </template>
+    <template v-else>
+      {{ label }}
+    </template>
+    <ExternalIcon class="external-link__icon"/>
+  </a>
+</template>
+
+<style scoped lang="scss">
+  .external-link {
+    padding-right: 2px;
+    overflow-wrap: break-word;
+  }
+
+  .external-link__icon {
+    margin-left: 3px;
+
+    width: 15px;
+    position: relative;
+    top: 2px;
+  }
+</style>
+
+<script>
+  import ExternalIcon from "@/assets/icons/external.svg";
+
+  export default {
+    name: "ExternalLink",
+    components: { ExternalIcon },
+    props: {
+      href: {
+        type: String,
+        required: true
+      },
+      showProtocol: {
+        type: Boolean,
+        default: false
+      },
+      showQuery: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      label() {
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        const url = new (process.server ? require("url").URL : window.URL)(this.href);
+        let label = "";
+
+        if (this.showProtocol) {
+          label += url.protocol;
+          label += "//";
+        }
+
+        label += url.host + url.pathname;
+
+        if (this.showQuery) {
+          label += url.search;
+        }
+
+        return label;
+      }
+    }
+  };
+</script>