From bbddeb0f13814cb594d94c55e8230ccc2dff2250 Mon Sep 17 00:00:00 2001 From: "Matt (IPv4) Cowley" Date: Thu, 4 Feb 2021 19:31:26 +0000 Subject: [PATCH] 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 --- .../i18n/en/templates/callouts/contribute.js | 30 +++++ .../i18n/en/templates/callouts/droplet.js | 30 +++++ .../i18n/en/templates/callouts/index.js | 30 +++++ src/nginxconfig/i18n/en/templates/index.js | 5 +- .../i18n/fr/templates/callouts/contribute.js | 30 +++++ .../i18n/fr/templates/callouts/droplet.js | 30 +++++ .../i18n/fr/templates/callouts/index.js | 30 +++++ src/nginxconfig/i18n/fr/templates/index.js | 3 +- .../pt-br/templates/callouts/contribute.js | 30 +++++ .../i18n/pt-br/templates/callouts/droplet.js | 30 +++++ .../i18n/pt-br/templates/callouts/index.js | 30 +++++ src/nginxconfig/i18n/pt-br/templates/index.js | 5 +- .../zh-cn/templates/callouts/contribute.js | 30 +++++ .../i18n/zh-cn/templates/callouts/droplet.js | 30 +++++ .../i18n/zh-cn/templates/callouts/index.js | 30 +++++ src/nginxconfig/i18n/zh-cn/templates/index.js | 5 +- .../zh-tw/templates/callouts/contribute.js | 30 +++++ .../i18n/zh-tw/templates/callouts/droplet.js | 30 +++++ .../i18n/zh-tw/templates/callouts/index.js | 30 +++++ src/nginxconfig/i18n/zh-tw/templates/index.js | 5 +- src/nginxconfig/scss/_callout.scss | 98 +++++++++++++++++ src/nginxconfig/scss/style.scss | 4 +- src/nginxconfig/templates/app.vue | 7 ++ .../templates/callouts/contribute.vue | 103 ++++++++++++++++++ .../templates/callouts/droplet.vue | 67 ++++++++++++ src/nginxconfig/util/analytics.js | 55 +++++++++- 26 files changed, 794 insertions(+), 13 deletions(-) create mode 100644 src/nginxconfig/i18n/en/templates/callouts/contribute.js create mode 100644 src/nginxconfig/i18n/en/templates/callouts/droplet.js create mode 100644 src/nginxconfig/i18n/en/templates/callouts/index.js create mode 100644 src/nginxconfig/i18n/fr/templates/callouts/contribute.js create mode 100644 src/nginxconfig/i18n/fr/templates/callouts/droplet.js create mode 100644 src/nginxconfig/i18n/fr/templates/callouts/index.js create mode 100644 src/nginxconfig/i18n/pt-br/templates/callouts/contribute.js create mode 100644 src/nginxconfig/i18n/pt-br/templates/callouts/droplet.js create mode 100644 src/nginxconfig/i18n/pt-br/templates/callouts/index.js create mode 100644 src/nginxconfig/i18n/zh-cn/templates/callouts/contribute.js create mode 100644 src/nginxconfig/i18n/zh-cn/templates/callouts/droplet.js create mode 100644 src/nginxconfig/i18n/zh-cn/templates/callouts/index.js create mode 100644 src/nginxconfig/i18n/zh-tw/templates/callouts/contribute.js create mode 100644 src/nginxconfig/i18n/zh-tw/templates/callouts/droplet.js create mode 100644 src/nginxconfig/i18n/zh-tw/templates/callouts/index.js create mode 100644 src/nginxconfig/scss/_callout.scss create mode 100644 src/nginxconfig/templates/callouts/contribute.vue create mode 100644 src/nginxconfig/templates/callouts/droplet.vue diff --git a/src/nginxconfig/i18n/en/templates/callouts/contribute.js b/src/nginxconfig/i18n/en/templates/callouts/contribute.js new file mode 100644 index 0000000..5eb241a --- /dev/null +++ b/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', +}; diff --git a/src/nginxconfig/i18n/en/templates/callouts/droplet.js b/src/nginxconfig/i18n/en/templates/callouts/droplet.js new file mode 100644 index 0000000..ab78f64 --- /dev/null +++ b/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', +}; diff --git a/src/nginxconfig/i18n/en/templates/callouts/index.js b/src/nginxconfig/i18n/en/templates/callouts/index.js new file mode 100644 index 0000000..dd68947 --- /dev/null +++ b/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 }; diff --git a/src/nginxconfig/i18n/en/templates/index.js b/src/nginxconfig/i18n/en/templates/index.js index bac43df..d946745 100644 --- a/src/nginxconfig/i18n/en/templates/index.js +++ b/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 }; diff --git a/src/nginxconfig/i18n/fr/templates/callouts/contribute.js b/src/nginxconfig/i18n/fr/templates/callouts/contribute.js new file mode 100644 index 0000000..75a9e75 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/fr/templates/callouts/droplet.js b/src/nginxconfig/i18n/fr/templates/callouts/droplet.js new file mode 100644 index 0000000..676e584 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/fr/templates/callouts/index.js b/src/nginxconfig/i18n/fr/templates/callouts/index.js new file mode 100644 index 0000000..dd68947 --- /dev/null +++ b/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 }; diff --git a/src/nginxconfig/i18n/fr/templates/index.js b/src/nginxconfig/i18n/fr/templates/index.js index 03e8a4f..d946745 100644 --- a/src/nginxconfig/i18n/fr/templates/index.js +++ b/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 }; diff --git a/src/nginxconfig/i18n/pt-br/templates/callouts/contribute.js b/src/nginxconfig/i18n/pt-br/templates/callouts/contribute.js new file mode 100644 index 0000000..75a9e75 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/pt-br/templates/callouts/droplet.js b/src/nginxconfig/i18n/pt-br/templates/callouts/droplet.js new file mode 100644 index 0000000..676e584 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/pt-br/templates/callouts/index.js b/src/nginxconfig/i18n/pt-br/templates/callouts/index.js new file mode 100644 index 0000000..dd68947 --- /dev/null +++ b/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 }; diff --git a/src/nginxconfig/i18n/pt-br/templates/index.js b/src/nginxconfig/i18n/pt-br/templates/index.js index bac43df..d946745 100644 --- a/src/nginxconfig/i18n/pt-br/templates/index.js +++ b/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 }; diff --git a/src/nginxconfig/i18n/zh-cn/templates/callouts/contribute.js b/src/nginxconfig/i18n/zh-cn/templates/callouts/contribute.js new file mode 100644 index 0000000..75a9e75 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/zh-cn/templates/callouts/droplet.js b/src/nginxconfig/i18n/zh-cn/templates/callouts/droplet.js new file mode 100644 index 0000000..676e584 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/zh-cn/templates/callouts/index.js b/src/nginxconfig/i18n/zh-cn/templates/callouts/index.js new file mode 100644 index 0000000..dd68947 --- /dev/null +++ b/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 }; diff --git a/src/nginxconfig/i18n/zh-cn/templates/index.js b/src/nginxconfig/i18n/zh-cn/templates/index.js index bac43df..d946745 100644 --- a/src/nginxconfig/i18n/zh-cn/templates/index.js +++ b/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 }; diff --git a/src/nginxconfig/i18n/zh-tw/templates/callouts/contribute.js b/src/nginxconfig/i18n/zh-tw/templates/callouts/contribute.js new file mode 100644 index 0000000..75a9e75 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/zh-tw/templates/callouts/droplet.js b/src/nginxconfig/i18n/zh-tw/templates/callouts/droplet.js new file mode 100644 index 0000000..676e584 --- /dev/null +++ b/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 +}; diff --git a/src/nginxconfig/i18n/zh-tw/templates/callouts/index.js b/src/nginxconfig/i18n/zh-tw/templates/callouts/index.js new file mode 100644 index 0000000..dd68947 --- /dev/null +++ b/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 }; diff --git a/src/nginxconfig/i18n/zh-tw/templates/index.js b/src/nginxconfig/i18n/zh-tw/templates/index.js index bac43df..d946745 100644 --- a/src/nginxconfig/i18n/zh-tw/templates/index.js +++ b/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 }; diff --git a/src/nginxconfig/scss/_callout.scss b/src/nginxconfig/scss/_callout.scss new file mode 100644 index 0000000..59f679a --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss index e6964db..2b24018 100644 --- a/src/nginxconfig/scss/style.scss +++ b/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"; diff --git a/src/nginxconfig/templates/app.vue b/src/nginxconfig/templates/app.vue index da5069b..4cecc52 100644 --- a/src/nginxconfig/templates/app.vue +++ b/src/nginxconfig/templates/app.vue @@ -87,6 +87,8 @@ THE SOFTWARE.

{{ $t('templates.app.globalConfig') }}

+ +

{{ $t('templates.app.setup') }}

@@ -110,6 +112,7 @@ THE SOFTWARE. + @@ -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'), diff --git a/src/nginxconfig/templates/callouts/contribute.vue b/src/nginxconfig/templates/callouts/contribute.vue new file mode 100644 index 0000000..a979eba --- /dev/null +++ b/src/nginxconfig/templates/callouts/contribute.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/src/nginxconfig/templates/callouts/droplet.vue b/src/nginxconfig/templates/callouts/droplet.vue new file mode 100644 index 0000000..1b37000 --- /dev/null +++ b/src/nginxconfig/templates/callouts/droplet.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/nginxconfig/util/analytics.js b/src/nginxconfig/util/analytics.js index 5a773fb..ec9f81b 100644 --- a/src/nginxconfig/util/analytics.js +++ b/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 { - // Google + /*try { + // 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' + */