Update links throughout tool

src/i18n/en/templates/app.ts

@@ -5,5 +5,5 @@ export default {
     backToTop: "Back To Top",
     textRecords: "Get records in text/markdown form",
     domain: "Domain name",
-    oss: `This tool is <a href="https://github.com/do-community/dns-tool">open-source on GitHub</a> under the <a href="https://github.com/do-community/dns-tool/blob/master/LICENSE">Apache-2.0</a> license! We welcome feedback and contributions.`,
+    oss: `This tool is {link|open-source on GitHub|https://github.com/do-community/dns-tool} under the {link|Apache-2.0|https://github.com/do-community/dns-tool/blob/master/LICENSE} license! We welcome feedback and contributions.`,
 } as {[key: string]: string}

src/i18n/en/templates/propagation_modal.ts

@@ -5,7 +5,7 @@ export default {
                 <br><br>
                 Due to various caches at user and DNS server levels, it may take some time for all your users to see the new records.
                 <br><br>
-                If you use a fast updating DNS such as <a href="https://1.1.1.1">Cloudflare DNS</a>, it may be possible to get the new values locally by flushing your DNS cache.
+                If you use a fast updating DNS such as {link|Cloudflare DNS|https://1.1.1.1}, it may be possible to get the new values locally by flushing your DNS cache.
                 Here is how you do it on several operating systems:
                 <hr>
                 <b>Windows:</b> Press the Windows Key and R together. You should get a "Run" box. Type <code>ipconfig /flushdns</code> in the box and press OK. You should see a brief flash of a black box. Your cache should then be invalidated.
@@ -16,7 +16,7 @@ export default {
                 <br><br>
                 <b>iPadOS:</b> Turning off and on Airplane mode will flush your DNS cache.
                 <hr>
-                If you are still unable to get the correct results, you can check the propagation status using a <a href="https://dnschecker.org/">propagation checker</a>.
+                If you are still unable to get the correct results, you can check the propagation status using a {link|propagation checker|{{DEEPLINK}}}.
     `,
     title: "DNS Propagation",
 } as {[key: string]: string}

src/scss/_base.scss

@@ -89,3 +89,8 @@ figure {
     transition: opacity $transition;
   }
 }
+
+.fas.fa-external-link-alt {
+  font-size: 0.8em;
+  opacity: 0.6;
+}

src/scss/_buttons.scss

@@ -104,6 +104,9 @@ limitations under the License.
 
 .fa, .far, .fab {
   &.help {
+    display: inline-block;
+    font-size: 1em;
+    margin: 0;
     cursor: pointer;
   }
 }

src/templates/app.vue

@@ -57,7 +57,16 @@ limitations under the License.
         <div class="footer">
             <div class="container">
                 <p><a href="#top" class="button is-primary is-small">{{ i18n.templates.app.backToTop }}</a></p>
-                <p v-html="i18n.templates.app.oss"></p>
+                <p>
+                    <span v-for="part in splitUrlText(i18n.templates.app.oss)">
+                        <span v-if="typeof part === 'string'">
+                            {{ part }}
+                        </span>
+                        <span v-else>
+                            <ExternalLink :text="part[0]" :link="part[1]"></ExternalLink>
+                        </span>
+                    </span>
+                </p>
             </div>
         </div>
     </div>
@@ -75,6 +84,8 @@ limitations under the License.
     import cfDNS from "../utils/cfDNS"
     import NoSearch from "./skeletons/no_search"
     import RecordSkeleton from "./skeletons/record"
+    import ExternalLink from "./ext_link"
+    import dataUrlParser from "../utils/dataUrlParser"
 
     const stripHttps = /(https*:\/\/)*(.+)*/
     const isHostname = /.*\.[a-z]+/
@@ -89,6 +100,7 @@ limitations under the License.
             RecordJumps,
             RecordSelectionModal,
             GHLink,
+            ExternalLink,
         },
         data() {
             return {
@@ -109,6 +121,9 @@ limitations under the License.
             }
         },
         methods: {
+            splitUrlText(text) {
+                return dataUrlParser(text)
+            },
             error(message) {
                 alert(message)
                 this.$data.contentOpacity = 1

src/templates/ext_link.vue

@@ -0,0 +1,36 @@
+<!--
+Copyright 2019 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+    <span>
+        <a :href="this.$props.link"
+           target="_blank"
+           rel="noreferrer"
+           v-text="this.$props.text"
+        ></a>
+        <i class="fas fa-external-link-alt"></i>
+    </span>
+</template>
+
+<script>
+    export default {
+        name: "ExternalLink",
+        props: {
+            link: String,
+            text: String,
+        },
+    }
+</script>

src/templates/mx_blacklist.vue

@@ -28,17 +28,21 @@ limitations under the License.
             </p>
         </div>
         <p style="font-size: 11px">
-            <a href="https://www.techwalla.com/articles/what-does-it-mean-if-an-email-address-is-blacklisted">{{ i18n.templates.mxBlacklist.whatDoesItMean }}</a>
+            <ExternalLink :text="i18n.templates.mxBlacklist.whatDoesItMean" link="https://www.techwalla.com/articles/what-does-it-mean-if-an-email-address-is-blacklisted"></ExternalLink>
         </p>
     </div>
 </template>
 
 <script>
     import getBlacklists from "../blacklists"
     import i18n from "../i18n"
+    import ExternalLink from "./ext_link"
 
     export default {
         name: "MXBlacklist",
+        components: {
+            ExternalLink,
+        },
         props: {
             ip: String,
             hostname: String,

src/templates/propagation_modal.vue

@@ -24,23 +24,52 @@ limitations under the License.
                 </p>
                 <button class="delete" :aria-label="i18n.common.close" @click="toggle"></button>
             </header>
-            <section class="modal-card-body" v-html="i18n.templates.propagationModal.tutorial"></section>
+            <section class="modal-card-body">
+                <span v-for="part in splitUrlText(tutorial)">
+                    <span v-if="typeof part === 'string'" v-html="part"></span>
+                    <span v-else>
+                        <ExternalLink :text="part[0]" :link="part[1]"></ExternalLink>
+                    </span>
+                </span>
+            </section>
         </div>
     </div>
 </template>
 
 <script>
     import i18n from "../i18n"
+    import dataUrlParser from "../utils/dataUrlParser"
+    import ExternalLink from "./ext_link"
+
+    let recordType, recordHost
+    const deeplink = () => {
+        const link = 'https://dnschecker.org/'
+        if (!recordType || !recordHost) return link
+        return `${link}#${recordType.toUpperCase()}/${recordHost}`
+    }
+    const content = () => i18n.templates.propagationModal.tutorial.replace("{{DEEPLINK}}", deeplink())
 
     export default {
         name: "PropagationModal",
+        components: {
+            ExternalLink,
+        },
         data() {
             return {
+                tutorial: content(),
                 toggled: false,
                 i18n,
             }
         },
         methods: {
+            splitUrlText(text) {
+                return dataUrlParser(text)
+            },
+            setData(newRecordType, newRecordHost) {
+                recordType = newRecordType
+                recordHost = newRecordHost
+                this.$data.tutorial = content()
+            },
             toggle() {
                 this.$data.toggled = !this.$data.toggled
             },

src/templates/record.vue

@@ -25,7 +25,7 @@ limitations under the License.
             </h3>
             <p>
                 <span v-html="this.$props.recordDescription"></span>
-                <a :href="this.$props.recordUrl">{{ i18n.templates.records.learnMore }}</a>
+                <ExternalLink :link="this.$props.recordUrl" :text="i18n.templates.records.learnMore"></ExternalLink>
             </p>
             <div v-if="recordKeys.length === 0">
                 <p><b>{{ i18n.templates.records.noRecords }}</b></p>
@@ -84,7 +84,9 @@ limitations under the License.
                 <DNSDiff ref="DNSDiff" :dns-differences="dnsDifferences" :record-type="recordType"></DNSDiff>
             </div>
             <p v-if="learnMore" style="margin-top: 20px">
-                <a :href="learnMore">{{ i18n.templates.records.learnHow.replace("{record}", this.$props.recordType) }}</a>
+                <ExternalLink :link="learnMore"
+                              :text="i18n.templates.records.learnHow.replace('{record}', this.$props.recordType)"
+                ></ExternalLink>
             </p>
         </div>
         <div v-else>
@@ -112,6 +114,7 @@ limitations under the License.
     import i18n from "../i18n"
     import DNSDiff from "./dns_diff"
     import { reports } from "../plain_text_reports"
+    import ExternalLink from "./ext_link"
 
     const trimmers = {}
     for (const recordKey in records)
@@ -141,6 +144,7 @@ limitations under the License.
             MXBlacklist,
             RecordSkeleton,
             DNSDiff,
+            ExternalLink,
         },
         props: {
             recordUrl: String,

src/templates/record_base.vue

@@ -28,7 +28,7 @@ limitations under the License.
                 :data="$props.data"
                 :expects-host="record.expectsHost"
                 :loading="$props.loading"
-                @propagation-toggle="toggleModal"
+                @propagation-toggle="toggleModal(record.name)"
             />
         </div>
     </div>
@@ -78,7 +78,8 @@ limitations under the License.
                 }
                 await Promise.all(promises)
             },
-            toggleModal() {
+            toggleModal(recordType) {
+                this.$refs.PropagationModal.setData(recordType, this.$props.data)
                 this.$refs.PropagationModal.toggle()
             },
         },

src/utils/dataUrlParser.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2019 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Parses URL's from data.
+export default (text: string) => {
+    const matchRegex = /{link\|([^|]+)\|([^|]+)}/
+    const items: (string | string[])[] = []
+    for (;;) {
+        const match = text.match(matchRegex)
+        if (!match) break
+        const splitByMatch = text.split(match[0])
+        items.push(splitByMatch[0])
+        items.push([match[1], match[2]])
+        text = splitByMatch[1]
+    }
+    items.push(text)
+    return items
+}