diff --git a/public/assets/img/check-circle.svg b/public/assets/img/check-circle.svg new file mode 100644 index 0000000..f2f4fd1 --- /dev/null +++ b/public/assets/img/check-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/img/download-cloud.svg b/public/assets/img/download-cloud.svg new file mode 100644 index 0000000..f3126fc --- /dev/null +++ b/public/assets/img/download-cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/img/lock.svg b/public/assets/img/lock.svg new file mode 100644 index 0000000..de09d9d --- /dev/null +++ b/public/assets/img/lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/img/terminal.svg b/public/assets/img/terminal.svg new file mode 100644 index 0000000..af459c0 --- /dev/null +++ b/public/assets/img/terminal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 6cb9ca5..799fdbd 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -353,6 +353,8 @@ $scope.clipboardCopy = undefined; + $scope.activeStep = 'download'; + $scope.gzipTypes = 'text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml'; $scope.extensions = { @@ -489,6 +491,10 @@ }); }; + $scope.setActiveStep = function(step) { + $scope.activeStep = step; + }; + $scope.getSiteChanges = function(site) { if ($scope.siteChanges[site] === undefined) { return undefined; diff --git a/public/index.html b/public/index.html index fe4e4c6..68c39f4 100644 --- a/public/index.html +++ b/public/index.html @@ -984,15 +984,53 @@ +
+
+
+
+
    +
  1. +
    + Download +
    2. +
  2. +
    + SSL init +
    3. + +
  3. +
    + Certbot +
    4. + +
  4. +
    + Go Live! +
    5. +
+
+
+
+
+
+
+
+
+
-
-
-
-
-
diff --git a/public/templates/commands.html b/public/templates/commands.html index c88d57f..0b90d6a 100644 --- a/public/templates/commands.html +++ b/public/templates/commands.html @@ -1,65 +1,67 @@ -# Virtual host: create symbolic link{{ getDomains().length > 1 ? 's' : '' }} -ln -s /etc/nginx/sites-available/{{ _domain }}.conf /etc/nginx/sites-enabled. Download generated config: nginxconfig.io-{{ getDomains().join(',') }}.zip +. Upload to server's /etc/nginx/ directory +. Backup current configuration: + tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/ +. Unzip the uploaded archive: + cd /etc/nginx + unzip -o nginxconfig.io-{{ getDomains().join(',') }}.zip (you probably need to install unzip: sudo apt-get install unzip) +-->. Generate Diffie-Hellman keys: + openssl dhparam -dsaparam -out /etc/nginx/dhparam.pem {{ isSSLProfileLegacy() ? 1024 : 2048 }} # HTTPS: create Diffie-Hellman keys -openssl dhparam -dsaparam -out /etc/nginx/dhparam.pem {{ isSSLProfileLegacy() ? 1024 : 2048 }} - -# HTTPS - certbot (before first run): create ACME-challenge common directory -mkdir -p /var/www/_letsencrypt && chown {{ data.user }} /var/www/_letsencrypt -. Create a common ACME-challenge directory (for Let's Encrypt): + mkdir -p /var/www/_letsencrypt + chown {{ data.user }} /var/www/_letsencrypt -# HTTPS - certbot (before first run): disable SSL directives -sed -i -r 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g'. Comment out SSL related directives in configuration: + sed -i -r 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' /etc/nginx/nginx.conf /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf - -# HTTPS - certbot: obtain certificates -certbot certonly certonly --webroot -d {{ _domain }} -d www.{{ _domain }} -d cdn.{{ _domain }} -d {{ _domain }} -d www.{{ _domain }} -d cdn.{{ _domain }} --email {{ data.sites[_site].email ? data.sites[_site].email : 'info@' + _domain }} -w /var/www/_letsencrypt -n -w /var/www/_letsencrypt -n --agree-tos --force-renewal - -# HTTPS - certbot (after first run): enable SSL directives -sed -i -r 's/#?;#//g' /etc/nginx/nginx.conf /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf +--> /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf. Reload NGINX: + sudo systemctl reload nginx.service diff --git a/resources/scss/_header.scss b/resources/scss/_header.scss index 0525c10..e53171b 100644 --- a/resources/scss/_header.scss +++ b/resources/scss/_header.scss @@ -1,3 +1,11 @@ +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + } 50% { + transform: scale(1.0); + } +} + header { background-color: #000; padding: 0.5rem 0; diff --git a/resources/scss/_main.scss b/resources/scss/_main.scss index 04e5481..f4001e3 100644 --- a/resources/scss/_main.scss +++ b/resources/scss/_main.scss @@ -1,11 +1,3 @@ -@keyframes sk-bounce { - 0%, 100% { - transform: scale(0.0); - } 50% { - transform: scale(1.0); - } -} - section.tabs { margin-bottom: 1rem; @@ -267,6 +259,25 @@ main { .commands { margin-bottom: 1rem; + line-height: 1.35; + + .step { + counter-reset: step-command-counter; + + .counter { + display: inline-block; + margin-top: 0.15rem; + + &::before { + counter-increment: step-command-counter; + content: counter(step-command-counter); + } + } + + & > span:first-of-type .counter { + margin-top: 0; + } + } } .file { diff --git a/resources/scss/_steps.scss b/resources/scss/_steps.scss new file mode 100644 index 0000000..96bc05e --- /dev/null +++ b/resources/scss/_steps.scss @@ -0,0 +1,168 @@ +section.steps { + ol { + display: flex; + flex-direction: row; + list-style: none; + counter-reset: steps-counter; + padding: 60px 0 0; + + &[data-active-step="download"], + &[data-active-step="ssl"], + &[data-active-step="certbot"], + &[data-active-step="live"] { + li.download { + div { + background-color: #000; + border-color: #000; + + svg { + stroke: #fff; + } + } + } + } + + &[data-active-step="ssl"], + &[data-active-step="certbot"], + &[data-active-step="live"] { + li.ssl { + div { + background-color: #000; + border-color: #000; + + svg { + stroke: #fff; + } + } + } + } + + &[data-active-step="certbot"], + &[data-active-step="live"] { + li.certbot { + div { + background-color: #000; + border-color: #000; + + svg { + stroke: #fff; + } + } + } + } + + &[data-active-step="live"] { + li.live { + div { + background-color: #000; + border-color: #000; + + svg { + stroke: #fff; + } + } + } + } + + &[data-active-step="ssl"] { + li.download::after, + li.ssl::before { + background-color: #000; + } + } + + &[data-active-step="certbot"] { + li.download::after, + li.ssl::before, + li.ssl::after, + li.certbot::before { + background-color: #000; + } + } + + &[data-active-step="live"] { + li.download::after, + li.ssl::before, + li.ssl::after, + li.certbot::before, + li.certbot::after, + li.live::before { + background-color: #000; + } + } + + li { + display: block; + position: relative; + flex: 1 1 auto; + counter-increment: steps-counter; + list-style-type: none; + text-align: center; + cursor: pointer; + font-size: 0.9rem; + + @include media-breakpoint-up(sm) { + font-size: inherit; + } + + &::before, + &::after { + content: ''; + display: block; + height: 2px; + width: 50%; + position: absolute; + top: -35px; + background-color: #dee2e6; + z-index: 0; + transition: background-color 0.15s ease-in-out; + } + + &::before { + right: 50%; + } + + &::after { + left: 50%; + } + + &:first-child::before, + &:last-child::after { + display: none; + } + + .counter::before { + content: counter(steps-counter) '. '; + font-weight: 700; + } + + .circle { + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); + top: -50px; + width: 40px; + height: 40px; + border: 1px solid #dee2e6; + border-radius: 50%; + background-color: #f8f8f8; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; + + @include media-breakpoint-up(sm) { + top: -60px; + width: 50px; + height: 50px; + } + + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60%; + } + } + } + } +} diff --git a/resources/scss/app.scss b/resources/scss/app.scss index a9408a6..8d17800 100644 --- a/resources/scss/app.scss +++ b/resources/scss/app.scss @@ -8,6 +8,7 @@ @import 'body'; @import 'header'; +@import 'steps'; @import 'main'; @import 'sidebar'; @import 'footer';