Spike: Support widget in the support site

_widget/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

_widget/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

_widget/src/components/app/component.vue

@@ -0,0 +1,137 @@
+<template>
+    <div id="dnsimple-support">
+        <div v-if="isOpen" class="relative animated fadeInUp faster">
+            <Header :app="app" ref="header"/>
+            <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+        </div>
+        <Prompt v-else :app="app"/>
+    </div>
+</template>
+
+<script>
+import { urlMatchingDictionary } from './url-dictionary.js';
+
+import Footer from '../footer/component.vue';
+import Header from '../header/component.vue';
+
+import Article from '../article/component.vue';
+import Articles from '../articles/component.vue';
+import Prompt from '../prompt/component.vue';
+import Welcome from '../welcome/component.vue';
+
+import "./variables.scss"
+import "./reset.scss"
+import "./style.scss"
+
+const ANIMATION_TIMEOUT = 500;
+
+export default {
+  components: {
+    Footer,
+    Header,
+
+    Article,
+    Articles,
+    Prompt,
+    Welcome
+  },
+  props: {
+    query: {
+      default: ''
+    }
+  },
+  data () {
+    const query = this.query || urlMatchingDictionary(window.location.href);
+
+    window.support = this;
+
+    return {
+      app: this,
+      currentRoute: [query ? 'Articles' : 'Welcome'],
+      q: query,
+      isOpen: false,
+      isLoading: true,
+      rootURL: 'https://support.dnsimple.com',
+      history: []
+    };
+  },
+
+  watch: {
+    q (val) {
+      if (val.length > 2) {
+        if (this.currentRoute[0] !== 'Articles')
+          this.go('Articles', undefined, true);
+      } else if (!val.length)
+        this.go('Welcome', undefined, true);
+    }
+  },
+
+  computed: {
+    filteredArticles () {
+      return window.DNSimpleSupport.search(this.q);
+    },
+
+    noResults () {
+      return !this.q || !this.filteredArticles.length;
+    }
+  },
+  methods: {
+    go (page, params, ignoreHistory) {
+      if (!ignoreHistory)
+        this.history.push(this.currentRoute);
+
+      this.currentRoute = [page, params];
+    },
+
+    back () {
+      this.currentRoute = this.history.pop();
+    },
+
+    open () {
+      this.isOpen = true;
+
+      setTimeout(() => {
+        this.fetchArticles(() => {
+          if (this.filteredArticles.length === 1)
+            this.go('Article', this.filteredArticles[0]);
+          else if (this.noResults)
+            this.focus();
+        });
+      }, ANIMATION_TIMEOUT);
+    },
+
+    focus () {
+      const $header = this.$refs.header;
+
+      if ($header !== null && $header !== undefined)
+        $header.$refs.input.focus();
+    },
+
+    close () {
+      this.isOpen = false;
+    },
+
+    fetchArticles (done) {
+      const script = document.createElement('script');
+
+      this.isLoading = true;
+
+      script.type = 'text/javascript';
+      script.src = `${this.rootURL}/search.js`;
+
+      script.onload = () => {
+        setTimeout(() => {
+          this.isLoading = false;
+        }, 500);
+      };
+
+      document.getElementsByTagName('head')[0].appendChild(script);
+    },
+
+    setQ (q) {
+      this.q = q;
+    }
+  }
+};
+</script>
+

_widget/src/components/app/reset.scss

@@ -0,0 +1,77 @@
+/* Based on http://meyerweb.com/eric/tools/css/reset/
+v2.0 | 20110126
+License: none (public domain)
+*/
+
+#dnsimple-support {
+  box-sizing: border-box;
+
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hlocation,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video,
+  input, textarea, select, button, .button {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: inherit;
+      font: inherit;
+      color: inherit;
+      text-transform: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      vertical-align: baseline;
+      background: none;
+      box-shadow: none;
+      outline: none;
+      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure,
+  footer, header, hlocation, menu, nav, section {
+      display: block;
+  }
+  ol, ul {
+      list-style: none;
+  }
+  blockquote, q {
+      quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+      content: '';
+      content: none;
+  }
+  table {
+      border-collapse: collapse;
+      border-spacing: 0;
+  }
+  a {
+      color: inherit;
+      text-decoration: inherit;
+      text-transform: inherit;
+  }
+  img {
+      max-width: 100%;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  .no-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}

_widget/src/components/app/style.scss

@@ -0,0 +1,31 @@
+#dnsimple-support {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 480px;
+  font-size: var(--dnsimple-support-widget-rem);
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.6;
+  color: #222;
+  z-index: 999;
+
+  @media (var(--dnsimple-support-widget-desktop-only)) {
+    display: none;
+  }
+}
+
+#dnsimple-support {
+    .relative {
+      position: relative;
+      box-shadow: var(--dnsimple-support-widget-box-shadow);
+    }
+
+    .route {
+      height: 475px;
+      border-left: 1px solid var(--dnsimple-support-widget-line-color);
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: var(--dnsimple-support-widget-padding);
+      background: var(--dnsimple-support-widget-white);
+    }
+}

_widget/src/components/app/url-dictionary.js

@@ -0,0 +1,64 @@
+const DICTIONARY = {
+  // Keys are the search terms
+  // Show 1 article with URL path
+  // Show a category with "cat:Name"
+
+  "Let's Encrypt": /letsencrypt/,
+  'Standard SSL Certificate': /standard/,
+  'Reverse Zones': /zones/,
+  'share management': /memberships/,
+  Automation: /automation/,
+  'User Settings': /user/,
+  DNSSEC: /dnssec/,
+  'Renew Domain': /renewal/,
+  'Two-Factor Authentication': /twofa/,
+
+  '/articles/account-users/': /members/,
+  '/articles/a-record/': /record_type=a/,
+  '/articles/aaaa-record/': /record_type=aaaa/,
+  '/articles/alias-record/': /record_type=alias/,
+  '/articles/caa-record/': /record_type=caa/,
+  '/articles/cname-record/': /record_type=cname/,
+  '/articles/heroku-connector/': /connections|connector/,
+  // "": /record_type=hinfo/,
+  '/articles/mx-record/': /record_type=mx/,
+  // "": /record_type=naptr/,
+  '/articles/ns-record/': /record_type=ns/,
+  '/articles/pool-record/': /record_type=pool/,
+  // "": /record_type=ptr/,
+  '/articles/spf-record/': /record_type=spf/,
+  '/articles/srv-record/': /record_type=srv/,
+  // "": /record_type=sshfp/,
+  // "": /record_type=txt/,
+  '/articles/url-record/': /record_type=url/,
+  // "/articles/dkim-record/": /dkim/,
+  // "/articles/soa-record/": /soa/,
+  '/articles/differences-between-a-cname-alias-url/': /records/,
+
+  'cat:CloudFlare and DNSimple': /cloudflare/,
+  'cat:Heroku and DNSimple': /heroku/,
+  'cat:Name Servers': /name-servers/,
+  'cat:SSL Certificates': /ssl|certificate/,
+  'cat:Domain Transfers': /transfer|push/,
+  'cat:Services': /services/,
+  'cat:Templates': /templates/,
+  'cat:Contacts': /contacts/,
+  'cat:Secondary DNS': /secondary/,
+  'cat:Integrations': /integrations/,
+  'cat:Whois Privacy': /whois/,
+  'cat:Emails': /email/,
+  'cat:API': /api/,
+  invoice: /\/account/
+  // "cat:Account": /account/,
+  // "cat:DNS": /dns|records/,
+  // "cat:Domains": /domains/,
+  // "cat:DNSimple": /dnsimple/,
+};
+
+function urlMatchingDictionary (url) {
+  for (const key in DICTIONARY)
+    if (DICTIONARY[key].test(url))
+      return key;
+}
+
+export { urlMatchingDictionary };

_widget/src/components/app/variables.scss

@@ -0,0 +1,18 @@
+#dnsimple-support {
+  --dnsimple-support-widget-blue: #1A5EC6;
+  --dnsimple-support-widget-dark-gray: #333;
+  --dnsimple-support-widget-medium-gray: #7e7e7e;
+  --dnsimple-support-widget-light-gray: #eaeaea;
+  --dnsimple-support-widget-yellow: #f8c939;
+  --dnsimple-support-widget-orange: #ff7f2a;
+  --dnsimple-support-widget-green: #43a047;
+  --dnsimple-support-widget-white: #fff;
+  --dnsimple-support-widget-rem: 16px;
+  --dnsimple-support-widget-padding: 15px;
+  --dnsimple-support-widget-line-color: #ddd;
+  --dnsimple-support-widget-desktop-only: "max-width: 640px";
+  --dnsimple-support-widget-font-monospace: Menlo,Monaco,Consolas,"Courier New",monospace;
+  --dnsimple-support-widget-font-size-monospace: 13px;
+  --dnsimple-support-widget-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  --dnsimple-support-widget-prompt-padding: 7px;
+}