Add Droplet & contribution callouts (#216)

* Add the initial Droplet callout

* Add the initial Contribute callout

* Show contribute callout on scroll

* Add close button to contribute callout

* Add/update styling copyright header

* Add analytics events for the callouts

* Tweak how we send analytics events

* Add some z-index to the floating callout

* Fix all the failing tests

src/nginxconfig/templates/app.vue

@@ -87,6 +87,8 @@ THE SOFTWARE.
                     <h2>{{ $t('templates.app.globalConfig') }}</h2>
                     <Global :data="global"></Global>
 
+                    <DropletCallout></DropletCallout>
+
                     <h2>{{ $t('templates.app.setup') }}</h2>
                     <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>
                 </div>
@@ -110,6 +112,7 @@ THE SOFTWARE.
         </div>
 
         <Footer></Footer>
+        <ContributeCallout></ContributeCallout>
     </div>
 </template>
 
@@ -134,6 +137,8 @@ THE SOFTWARE.
 
     import Domain from './domain';
     import Global from './global';
+    import DropletCallout from './callouts/droplet';
+    import ContributeCallout from './callouts/contribute';
     import Setup from './setup';
     import Footer from './footer';
 
@@ -147,6 +152,8 @@ THE SOFTWARE.
             Footer,
             Domain,
             Global,
+            DropletCallout,
+            ContributeCallout,
             Setup,
             NginxPrism,
             YamlPrism: () => import('./prism/yaml'),

src/nginxconfig/templates/callouts/contribute.vue

@@ -0,0 +1,103 @@
+<!--
+Copyright 2021 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<template>
+    <div class="callout floating" :style="style">
+        <div class="close">
+            <p>
+                {{ $t('templates.callouts.contribute.wantToContributeChanges') }}
+            </p>
+            <a @click.prevent="close">
+                <i class="fas fa-times"></i>
+            </a>
+        </div>
+        <a href="https://github.com/digitalocean/nginxconfig.io"
+           class="button is-primary"
+           target="_blank"
+           @click="linkClickEvent"
+        >
+            {{ $t('templates.callouts.contribute.getInvolvedOnGitHub') }}
+        </a>
+    </div>
+</template>
+
+<script>
+    import analytics from '../../util/analytics';
+
+    export default {
+        name: 'ContributeCallout',
+        data() {
+            return {
+                scrolled: false,
+                closed: false,
+            };
+        },
+        computed: {
+            visible() {
+                return this.$data.scrolled && !this.$data.closed;
+            },
+            style() {
+                return this.visible ? undefined : {
+                    opacity: 0,
+                    pointerEvents: 'none',
+                };
+            },
+        },
+        mounted() {
+            document.addEventListener('scroll', () => {
+                if (this.$data.scrolled) return;
+                if (window.scrollY < 300) return;
+                this.$data.scrolled = true;
+                this.calloutVisibleEvent();
+            });
+        },
+        methods: {
+            close() {
+                this.$data.closed = true;
+                this.closedEvent();
+            },
+            closedEvent() {
+                analytics({
+                    category: 'Contribute callout',
+                    action: 'Closed',
+                });
+            },
+            calloutVisibleEvent() {
+                analytics({
+                    category: 'Contribute callout',
+                    action: 'Visible',
+                    nonInteraction: true,
+                });
+            },
+            linkClickEvent() {
+                analytics({
+                    category: 'Contribute callout',
+                    action: 'Clicked',
+                });
+            },
+        },
+    };
+</script>

src/nginxconfig/templates/callouts/droplet.vue

@@ -0,0 +1,67 @@
+<!--
+Copyright 2021 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<template>
+    <div class="callout">
+        <p>
+            {{ $t('templates.callouts.droplet.lookingForAPlaceToDeploy') }}
+            <ExternalLink :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
+                          link="https://marketplace.digitalocean.com/apps/lemp"
+                          @click.native="linkClickEvent"
+            ></ExternalLink>
+        </p>
+    </div>
+</template>
+
+<script>
+    import ExternalLink from 'do-vue/src/templates/external_link';
+    import analytics from '../../util/analytics';
+
+    export default {
+        name: 'DropletCallout',
+        components: {
+            ExternalLink,
+        },
+        mounted() {
+            this.calloutVisibleEvent();
+        },
+        methods: {
+            calloutVisibleEvent() {
+                analytics({
+                    category: 'Droplet callout',
+                    action: 'Visible',
+                    nonInteraction: true,
+                });
+            },
+            linkClickEvent() {
+                analytics({
+                    category: 'Droplet callout',
+                    action: 'Clicked',
+                });
+            },
+        },
+    };
+</script>