Begin setup & files with download tab

src/nginxconfig/scss/style.scss

@@ -114,6 +114,26 @@ $highlight: #f2c94c;
       }
     }
 
+    &.setup {
+      ol {
+        color: $dark-blue;
+        margin: 0 1rem;
+        text-align: left;
+
+        li {
+          margin: 0 0 1.5rem;
+
+          p {
+            overflow-wrap: break-word;
+
+            a {
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+
     .container {
       padding: 0 1.5rem;
     }
@@ -204,7 +224,7 @@ $highlight: #f2c94c;
       }
 
       .v-select {
-        .vs__dropdown-toggle {
+        .vs__dropdown-toggle { // sass-lint:disable-line class-name-format
           background: rgba($highlight, .35);
         }
       }
@@ -291,6 +311,7 @@ $highlight: #f2c94c;
     }
   }
 
+  // sass-lint:disable class-name-format
   .v-select {
     &.vs--open {
       > ul {
@@ -308,7 +329,7 @@ $highlight: #f2c94c;
     }
 
     > ul {
-      display: block !important;
+      display: block !important; // sass-lint:disable-line no-important
       margin: 0;
       opacity: 0;
       transition: opacity $transition;
@@ -346,6 +367,7 @@ $highlight: #f2c94c;
       }
     }
   }
+  // sass-lint:enable class-name-format
 
   .modal {
     .modal-card {

src/nginxconfig/templates/app.vue

@@ -53,6 +53,9 @@ limitations under the License.
             <h2>Global config</h2>
             <Global :data="global"></Global>
 
+            <h2>Setup and files</h2>
+            <Setup :data="{ domains, global }"></Setup>
+
             <pre><code>{{ exportData }}</code></pre>
         </div>
 
@@ -71,6 +74,7 @@ limitations under the License.
     import i18n from '../i18n';
     import Domain from './domain';
     import Global from './global';
+    import Setup from './setup';
 
     export default {
         name: 'App',
@@ -79,6 +83,7 @@ limitations under the License.
             Footer,
             Domain,
             Global,
+            Setup,
         },
         data() {
             return {

src/nginxconfig/templates/setup.vue

@@ -0,0 +1,85 @@
+<!--
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+    <div class="panel setup">
+        <div class="tabs">
+            <ul>
+                <li v-for="tab in tabs" :class="tabClass(tab.key)">
+                    <a @click="active = tab.key">{{ tab.display }}</a>
+                </li>
+            </ul>
+        </div>
+
+        <component :is="tab"
+                   v-for="tab in tabs"
+                   :key="tab.key"
+                   :data="$props.data"
+                   :style="{ display: active === tab.key ? undefined : 'none' }"
+                   class="container"
+        ></component>
+
+        <div class="navigation-buttons">
+            <a v-if="previousTab !== false" class="button is-mini" @click="active = previousTab">
+                <i class="fas fa-long-arrow-alt-left"></i> <span>Back</span>
+            </a>
+            <a v-if="nextTab !== false" class="button is-primary is-mini" @click="active = nextTab">
+                <span>Next</span> <i class="fas fa-long-arrow-alt-right"></i>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import * as Sections from './setup_sections';
+
+    const tabs = Object.values(Sections);
+
+    export default {
+        name: 'Setup',
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                active: tabs[0].key,
+                tabs,
+            };
+        },
+        computed: {
+            nextTab() {
+                const tabs = this.$data.tabs.map(t => t.key);
+                const index = tabs.indexOf(this.$data.active) + 1;
+                if (index < tabs.length) return tabs[index];
+                return false;
+            },
+            previousTab() {
+                const tabs = this.$data.tabs.map(t => t.key);
+                const index = tabs.indexOf(this.$data.active) - 1;
+                if (index >= 0) return tabs[index];
+                return false;
+            },
+        },
+        methods: {
+            tabClass(tab) {
+                if (tab === this.$data.active) return 'is-active';
+                const tabs = this.$data.tabs.map(t => t.key);
+                if (tabs.indexOf(tab) < tabs.indexOf(this.$data.active)) return 'is-before';
+                return undefined;
+            },
+        },
+    };
+</script>

src/nginxconfig/templates/setup_sections/download.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <ol>
+            <li>
+                <p>
+                    <b>Download</b> the generated config: <b><a @click="downloadZip">{{ zipName }}</a></b>
+                    <br />
+                    and <b>upload</b> it to your server's <code class="slim">{{ nginxDir }}</code> directory.
+                </p>
+                <p>
+                    or, <b><a @click="copyZip">Copy a base64 string of the compressed config</a></b>, paste it in
+                    your server's command line and execute it.
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Check that you have <b>unzip</b> installed, or install it, on your server by running this command:
+                    <br />
+                    <code class="slim">(unzip -v >/dev/null 2>&1 && echo 'unzip already installed') || sudo apt-get install unzip</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Navigate to your NGINX <b>configuration directory</b> on your server:
+                    <br />
+                    <code class="slim">cd {{ nginxDir }}</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    Create a <b>backup</b> of your current NGINX configuration:
+                    <br />
+                    <code class="slim">tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/</code>
+                </p>
+            </li>
+
+            <li>
+                <p>
+                    <b>Unzip</b> the new compressed configuration archive:
+                    <br />
+                    <code class="slim">unzip -o {{ zipName }}</code>
+                </p>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+    import i18n from '../../i18n';
+
+    export default {
+        name: 'SetupDownload',
+        display: 'Download',
+        key: 'download',
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                i18n,
+            };
+        },
+        computed: {
+            nginxDir() {
+                return this.$props.data.global.nginx.nginxConfigDirectory.computed;
+            },
+            zipName() {
+                const domains = this.$props.data.domains.filter(d => d !== null).map(d => d.server.domain.computed);
+                return `nginxconfig.io-${domains.join(',')}.zip`;
+            },
+        },
+        methods: {
+            downloadZip() {
+                alert('Imagine I\'m a working download');
+            },
+            copyZip() {
+                const command = `echo 'BASE64 HERE' | base64 --decode > ${this.nginxDir}${this.zipName}`;
+                alert(`Imagine I'm a working copy to clipboard\n\n${command}`);
+            },
+        },
+    };
+</script>

src/nginxconfig/templates/setup_sections/index.js

@@ -0,0 +1 @@
+export { default as Download } from './download';