Trigger to open the support widget

_widget/src/components/app/component.vue

@@ -1,14 +1,18 @@
 <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 v-if="isOpen">
+            <div class="overlay" @click="close"></div>
+            <div class="dnsimple-modal animated fadeInUp faster">
+              <Header :app="app" ref="header"/>
+              <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+            </div>
         </div>
-        <Prompt v-else :app="app"/>
+        <Prompt v-else-if="showPrompt" :app="app"/>
     </div>
 </template>
 
 <script>
+import { nextTick } from 'vue';
 import { urlMatchingDictionary } from './url-dictionary.js';
 
 import Footer from '../footer/component.vue';
@@ -38,6 +42,13 @@ export default {
   props: {
     query: {
       default: ''
+    },
+    showPrompt: {
+      default: true
+    },
+    currentSiteUrl: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -51,7 +62,7 @@ export default {
       q: query,
       isOpen: false,
       isLoading: true,
-      rootURL: 'https://support.dnsimple.com',
+      isFetched: false,
       history: []
     };
   },
@@ -68,7 +79,9 @@ export default {
 
   computed: {
     filteredArticles () {
-      return window.DNSimpleSupport.search(this.q);
+      const articles = window.DNSimpleSupport.search(this.q);
+      articles.forEach((a) => { a.source = 'https://support.dnsimple.com'; });
+      return articles;
     },
 
     noResults () {
@@ -101,27 +114,33 @@ export default {
     },
 
     focus () {
-      const $header = this.$refs.header;
+      nextTick(() => {
+        const $header = this.$refs.header;
 
-      if ($header !== null && $header !== undefined)
-        $header.$refs.input.focus();
+        if ($header !== null && $header !== undefined)
+          $header.$refs.input.focus();
+      });
     },
 
     close () {
       this.isOpen = false;
     },
 
     fetchArticles (done) {
+      if (this.isFetched) return done();
+
       const script = document.createElement('script');
 
       this.isLoading = true;
 
       script.type = 'text/javascript';
-      script.src = `${this.rootURL}/search.js`;
+      script.src = `https://support.dnsimple.com/search.js`;
 
       script.onload = () => {
         setTimeout(() => {
+          this.isFetched = true;
           this.isLoading = false;
+          done();
         }, 500);
       };
 
@@ -130,6 +149,10 @@ export default {
 
     setQ (q) {
       this.q = q;
+    },
+
+    getCurrentSiteUrl() {
+      return this.currentSiteUrl;
     }
   }
 };

_widget/src/components/app/reset.scss

@@ -3,7 +3,7 @@ v2.0 | 20110126
 License: none (public domain)
 */
 
-#dnsimple-support {
+#dnsimple-support-widget {
   box-sizing: border-box;
 
   div, span, applet, object, iframe,

_widget/src/components/app/style.scss

@@ -1,31 +1,54 @@
 #dnsimple-support-widget {
   position: fixed;
+  z-index: 999;
   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 {
+    z-index: 999;
+
+    .dnsimple-modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        margin-top: 5vh;
+        z-index: 999;
+        max-width: 45rem;
+        margin-left: auto;
+        margin-right: auto;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    }
+
+    .overlay {
+        position: fixed;
+        z-index: 998;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.5);
+    }
+
     .relative {
       position: relative;
       box-shadow: var(--dnsimple-support-widget-box-shadow);
     }
 
     .route {
-      height: 475px;
-      border-left: 1px solid var(--dnsimple-support-widget-line-color);
+      border: 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);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      height: 75vh;
     }
 }

_widget/src/components/article/component.vue

@@ -78,7 +78,7 @@ export default {
         return a.id === href;
       });
 
-      a.href = `${this.app.rootURL}${href}`;
+      a.href = `${this.article.source}${href}`;
       a.onclick = (event) => {
         event.stopImmediatePropagation();
         event.preventDefault();

_widget/src/components/articles/component.vue

@@ -8,9 +8,15 @@
         <li v-for="article in app.filteredArticles" :key="article.id">
           <h3>
             <a
+              v-if="article.source === app.getCurrentSiteUrl()"
+              v-html="highlight(article.title, highlighter)"
+              :href="absoluteURL(article, article.id)"
+            ></a>
+            <a
+              v-else
               @click.prevent="app.go('Article', article)"
               v-html="highlight(article.title, highlighter)"
-              :href="absoluteURL(article.id)"
+              :href="absoluteURL(article, article.id)"
             ></a>
           </h3>
 
@@ -62,8 +68,8 @@ export default {
     }
   },
   methods: {
-    absoluteURL (path) {
-      return `${this.app.rootURL}${path}`;
+    absoluteURL (article, path) {
+      return `${article.source}${path}`;
     },
 
     highlight (str, highlighter) {

_widget/src/components/articles/style.scss

@@ -1,6 +1,6 @@
 #dnsimple-support {
   .articles {
-    margin-top: -var(--dnsimple-support-widget-padding);
+    margin-top: calc(var(--dnsimple-support-widget-padding) * -1);
 
     h3 {
       color: var(--dnsimple-support-widget-blue);

_widget/src/components/header/component.vue

@@ -3,13 +3,11 @@
         <a href="javascript:;" @click="app.close" class="minimize">
             <div v-html="minimizeIcon"></div>
         </a>
-        <h1>DNSimple Support</h1>
         <input
                 type="text"
                 ref="input"
                 v-model="q"
                 placeholder='Try some keywords, like "alias" or "url redirect"'
-                data-cy='support-widget-input-search'
         />
     </div>
 </template>

_widget/src/components/header/style.scss

@@ -1,22 +1,18 @@
 #dnsimple-support {
   .header {
-    background: var(--dnsimple-support-widget-blue);
+    background: var(--dnsimple-support-widget-dark-gray);
     text-align: center;
     padding: var(--dnsimple-support-widget-padding);
     border-top-left-radius: 4px;
-
-    h1 {
-      color: var(--dnsimple-support-widget-white);
-      margin-bottom: var(--dnsimple-support-widget-padding);
-    }
+    border-top-right-radius: 4px;
 
     .minimize {
       color: var(--dnsimple-support-widget-white);
       position: absolute;
       top: 0;
       right: 0;
       line-height: 1;
-      padding: calc(var(--dnsimple-support-widget-padding) * 1.1) calc(var(--dnsimple-support-widget-padding) / 1.25);
+      padding: calc(var(--dnsimple-support-widget-padding) * 2) calc(var(--dnsimple-support-widget-padding) / 1.25);
 
       svg {
         width: calc(var(--dnsimple-support-widget-rem) * 1.25);
@@ -35,7 +31,7 @@
     input {
         outline: none;
         padding: 10px;
-        width: 100%;
+        width: calc(100% - var(--dnsimple-support-widget-padding) * 4);
         border: 0;
         border-bottom: 1px solid #eee;
         background: var(--dnsimple-support-widget-white);
@@ -48,7 +44,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      padding: calc(var(--dnsimple-support-widget-padding) / 1.25) calc(var(--dnsimple-support-widget-padding) / 2);
+      padding: calc(var(--dnsimple-support-widget-padding) * 1.6) calc(var(--dnsimple-support-widget-padding) / 2);
       line-height: 1;
 
       svg {

_widget/src/components/welcome/style.scss

@@ -1,7 +1,6 @@
 #dnsimple-support {
   .welcome {
     text-align: center;
-    padding-top: calc(var(--dnsimple-support-widget-padding) * 7);
 
     h1 {
       font-weight: bold;
@@ -10,15 +9,15 @@
     }
 
     p {
-      max-width: 70%;
+      max-width: 90%;
       margin: 0 auto;
       color: var(--dnsimple-support-widget-dark-gray);
     }
 
     .mascot {
       bottom: 0;
-      max-width: 50%;
-      margin: 0 auto calc(var(--dnsimple-support-widget-padding) * 5);
+      max-width: 30vh;
+      margin: calc(var(--dnsimple-support-widget-padding) * 3) auto calc(var(--dnsimple-support-widget-padding) * 3);
     }
   }
 }

_widget/src/main.js

@@ -2,12 +2,24 @@ import { createApp } from 'vue';
 import App from './components/app/component.vue';
 
 const elementId = 'dnsimple-support-widget';
+const $openers = [...document.querySelectorAll('[data-dnsimple-open-support-widget]')];
+
 let $target = document.querySelector(`#${elementId}`);
 
 if (!$target) {
   $target = document.createElement('div');
   $target.id = elementId;
-  document.body.appendChild($target);
+  document.body.insertBefore($target, document.body.firstChild);
 }
 
-createApp(App).mount($target);
+const app = createApp(App, {
+  showPrompt: $openers.length === 0,
+  currentSiteUrl: document.querySelector('[data-dnsimple-current-site-url]')?.getAttribute('data-dnsimple-current-site-url') || ''
+}).mount($target);
+
+$openers.forEach(($el) => {
+  $el.addEventListener('click', () => {
+    app.open();
+    app.focus();
+  });
+});

content/assets/css/_template.scss

@@ -1,6 +1,9 @@
 * { box-sizing: border-box; }
 
 .input-search {
+  background: var(--elementInverse);
+  color: var(--gray);
+
   &::-ms-clear {  display: none; width : 0; height: 0; }
   &::-ms-reveal {  display: none; width : 0; height: 0; }
   &::-webkit-search-decoration,
@@ -15,6 +18,7 @@
   right: 10px;
   border: none;
   background: transparent;
+  color: var(--gray);
 }
 
 .bg-pipes {