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/i18n/en/templates/callouts/contribute.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    wantToContributeChanges: '👋 Want to request new features, contribute changes, or translate the tool into a new language?',
+    getInvolvedOnGitHub: 'Get involved on GitHub',
+};

src/nginxconfig/i18n/en/templates/callouts/droplet.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    lookingForAPlaceToDeploy: '👋 Looking for a place to deploy your new configuration?',
+    tryOutDigitalOceansDroplet: 'Try out DigitalOcean\'s LEMP Droplet with NGINX',
+};

src/nginxconfig/i18n/en/templates/callouts/index.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+import droplet from './droplet';
+import contribute from './contribute';
+
+export default { droplet, contribute };

src/nginxconfig/i18n/en/templates/index.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -30,5 +30,6 @@ import footer from './footer';
 import domainSections from './domain_sections';
 import globalSections from './global_sections';
 import setupSections from './setup_sections';
+import callouts from './callouts';
 
-export default { app, setup, footer, domainSections, globalSections, setupSections };
+export default { app, setup, footer, domainSections, globalSections, setupSections, callouts };

src/nginxconfig/i18n/fr/templates/callouts/contribute.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    wantToContributeChanges: '👋 Want to request new features, contribute changes, or translate the tool into a new language?', // TODO: translate
+    getInvolvedOnGitHub: 'Get involved on GitHub', // TODO: translate
+};

src/nginxconfig/i18n/fr/templates/callouts/droplet.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    lookingForAPlaceToDeploy: '👋 Looking for a place to deploy your new configuration?', // TODO: translate
+    tryOutDigitalOceansDroplet: 'Try out DigitalOcean\'s LEMP Droplet with NGINX', // TODO: translate
+};

src/nginxconfig/i18n/fr/templates/callouts/index.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+import droplet from './droplet';
+import contribute from './contribute';
+
+export default { droplet, contribute };

src/nginxconfig/i18n/fr/templates/index.js

@@ -30,5 +30,6 @@ import footer from './footer';
 import domainSections from './domain_sections';
 import globalSections from './global_sections';
 import setupSections from './setup_sections';
+import callouts from './callouts';
 
-export default { app, setup, footer, domainSections, globalSections, setupSections };
+export default { app, setup, footer, domainSections, globalSections, setupSections, callouts };

src/nginxconfig/i18n/pt-br/templates/callouts/contribute.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    wantToContributeChanges: '👋 Want to request new features, contribute changes, or translate the tool into a new language?', // TODO: translate
+    getInvolvedOnGitHub: 'Get involved on GitHub', // TODO: translate
+};

src/nginxconfig/i18n/pt-br/templates/callouts/droplet.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    lookingForAPlaceToDeploy: '👋 Looking for a place to deploy your new configuration?', // TODO: translate
+    tryOutDigitalOceansDroplet: 'Try out DigitalOcean\'s LEMP Droplet with NGINX', // TODO: translate
+};

src/nginxconfig/i18n/pt-br/templates/callouts/index.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+import droplet from './droplet';
+import contribute from './contribute';
+
+export default { droplet, contribute };

src/nginxconfig/i18n/pt-br/templates/index.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -30,5 +30,6 @@ import footer from './footer';
 import domainSections from './domain_sections';
 import globalSections from './global_sections';
 import setupSections from './setup_sections';
+import callouts from './callouts';
 
-export default { app, setup, footer, domainSections, globalSections, setupSections };
+export default { app, setup, footer, domainSections, globalSections, setupSections, callouts };

src/nginxconfig/i18n/zh-cn/templates/callouts/contribute.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    wantToContributeChanges: '👋 Want to request new features, contribute changes, or translate the tool into a new language?', // TODO: translate
+    getInvolvedOnGitHub: 'Get involved on GitHub', // TODO: translate
+};

src/nginxconfig/i18n/zh-cn/templates/callouts/droplet.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    lookingForAPlaceToDeploy: '👋 Looking for a place to deploy your new configuration?', // TODO: translate
+    tryOutDigitalOceansDroplet: 'Try out DigitalOcean\'s LEMP Droplet with NGINX', // TODO: translate
+};

src/nginxconfig/i18n/zh-cn/templates/callouts/index.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+import droplet from './droplet';
+import contribute from './contribute';
+
+export default { droplet, contribute };

src/nginxconfig/i18n/zh-cn/templates/index.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -30,5 +30,6 @@ import footer from './footer';
 import domainSections from './domain_sections';
 import globalSections from './global_sections';
 import setupSections from './setup_sections';
+import callouts from './callouts';
 
-export default { app, setup, footer, domainSections, globalSections, setupSections };
+export default { app, setup, footer, domainSections, globalSections, setupSections, callouts };

src/nginxconfig/i18n/zh-tw/templates/callouts/contribute.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    wantToContributeChanges: '👋 Want to request new features, contribute changes, or translate the tool into a new language?', // TODO: translate
+    getInvolvedOnGitHub: 'Get involved on GitHub', // TODO: translate
+};

src/nginxconfig/i18n/zh-tw/templates/callouts/droplet.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+export default {
+    lookingForAPlaceToDeploy: '👋 Looking for a place to deploy your new configuration?', // TODO: translate
+    tryOutDigitalOceansDroplet: 'Try out DigitalOcean\'s LEMP Droplet with NGINX', // TODO: translate
+};

src/nginxconfig/i18n/zh-tw/templates/callouts/index.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+import droplet from './droplet';
+import contribute from './contribute';
+
+export default { droplet, contribute };

src/nginxconfig/i18n/zh-tw/templates/index.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -30,5 +30,6 @@ import footer from './footer';
 import domainSections from './domain_sections';
 import globalSections from './global_sections';
 import setupSections from './setup_sections';
+import callouts from './callouts';
 
-export default { app, setup, footer, domainSections, globalSections, setupSections };
+export default { app, setup, footer, domainSections, globalSections, setupSections, callouts };

src/nginxconfig/scss/_callout.scss

@@ -0,0 +1,98 @@
+/*
+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.
+*/
+
+.callout {
+  background: $callout;
+  border-radius: $border-radius;
+  margin: 2rem .5rem 1rem;
+  padding: 1.875rem 1.875rem 1.5rem;
+  transition: opacity $transition;
+
+  &.floating {
+    bottom: 0;
+    box-shadow: inset 0 0 0 $border-size $border-color;
+    max-width: calc(100% - 1rem);
+    position: fixed;
+    right: 0;
+    width: 22rem;
+    z-index: 100;
+
+    .close {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      margin: 0 0 1.25rem;
+
+      p {
+        flex-grow: 1;
+        margin: 0 .5rem 0 0;
+      }
+
+      a {
+        color: $muted;
+        margin: 0 .5rem;
+        text-decoration: none;
+        transition: color $transition;
+
+        &:hover {
+          color: $text;
+        }
+      }
+    }
+
+    p {
+      @include sailec-regular;
+    }
+
+    .button {
+      display: block;
+      height: 3rem;
+      line-height: 3rem;
+    }
+  }
+
+  p {
+    @include sailec-medium;
+
+    font-size: 15px;
+    margin: 0;
+    text-align: left;
+
+    a {
+      border-bottom: $border-size dotted $primary;
+      padding: 0 0 $border-size;
+      text-decoration: none;
+
+      &:hover {
+        border-bottom-color: $primary-hover;
+      }
+
+      + i {
+        margin: 0 0 0 .25rem;
+      }
+    }
+  }
+}

src/nginxconfig/scss/style.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -26,6 +26,7 @@ THE SOFTWARE.
 
 $header: #0071fe;
 $highlight: #f2c94c;
+$callout: #f3f5f9;
 @import "~do-bulma/src/style";
 
 .do-bulma {
@@ -47,6 +48,7 @@ $highlight: #f2c94c;
   @import "fields";
   @import "vue-select";
   @import "modals";
+  @import "callout";
   @import "setup";
   @import "code";
   @import "files";

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>

src/nginxconfig/util/analytics.js

@@ -27,8 +27,8 @@ THE SOFTWARE.
 export default ({ category, action, label, value, nonInteraction }) => {
     console.info('Analytics event:', { category, action, label, value, nonInteraction });
 
-    try {
+    /*try {
-        // Google
+        // Google Analytics
         window.ga('send', 'event', {
             eventCategory: category,
             eventAction: action,
@@ -38,11 +38,28 @@ export default ({ category, action, label, value, nonInteraction }) => {
         });
     } catch (_) {
         // If analytics fail, don't block anything else
+    }*/
+
+    try {
+        // Google Tag Manager
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+            event: `${category} ${action}`,
+            category,
+            action,
+            label,
+            value,
+            nonInteraction,
+        });
+    } catch (_) {
+        // If analytics fail, don't block anything else
     }
 
     try {
         // Segment
-        window.analytics.track(`${category} ${action}`, {
+        window.analytics.track('Web Interaction', {
+            category,
+            action,
             label,
             value,
             nonInteraction,
@@ -254,4 +271,36 @@ Category: 'Config files'
 Action: 'Code snippet copied'
 Label: name of file without nginx directory
 
+# Droplet callout is rendered
+
+File: callouts/droplet.vue
+Category: 'Droplet callout'
+Action: 'Visible'
+Non-interaction: true
+
+# User clicks on droplet callout
+
+File: callouts/droplet.vue
+Category: 'Droplet callout'
+Action: 'Clicked'
+
+# Contribute callout is rendered (on scroll)
+
+File: callouts/contribute.vue
+Category: 'Contribute callout'
+Action: 'Visible'
+Non-interaction: true
+
+# User clicks on contribute callout
+
+File: callouts/contribute.vue
+Category: 'Contribute callout'
+Action: 'Clicked'
+
+# User closes the contribute callout
+
+File: callouts/contribute.vue
+Category: 'Contribute callout'
+Action: 'Closed'
+
 */