github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactored command with steps

pull/85/head
Bálint Szekeres 2019-05-19 17:11:11 +02:00
parent f54d4bd6cb
commit c1847af9ac
11 changed files with 299 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/img/check-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

1
public/assets/img/download-cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

1
public/assets/img/lock.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

1
public/assets/img/terminal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

6
public/assets/js/app.js
View File

@ -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;

48
public/index.html
View File

@ -984,15 +984,53 @@
</div>
</div>
</section>
<section class="steps">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<ol ng-attr-data-active-step="{{ activeStep }}">
<li
class="download"
ng-mouseenter="setActiveStep('download')">
<div class="circle" ng-include="'/assets/img/download-cloud.svg'"></div>
<span class="counter"></span>Download
</li>
<li
class="ssl"
ng-if="isHTTPS() && (isSSLDHRequired() || isCertLetsEncrypt())"
ng-mouseenter="setActiveStep('ssl')">
<div class="circle" ng-include="'/assets/img/lock.svg'"></div>
<span class="counter"></span>SSL init
</li>
<li
class="certbot"
ng-if="isHTTPS() && isCertLetsEncrypt()"
ng-mouseenter="setActiveStep('certbot')">
<div class="circle" ng-include="'/assets/img/terminal.svg'"></div>
<span class="counter"></span>Certbot
</li>
<li
class="live"
ng-mouseenter="setActiveStep('live')">
<div class="circle" ng-include="'/assets/img/check-circle.svg'"></div>
<span class="counter"></span>Go Live!
</li>
</ol>
</div>
</div>
</div>
</section>
<main ng-class="{ 'active': masonryInit }">
<div class="container">
<div class="col-xl-10 offset-xl-1">
<div class="commands" ng-cloak>
<pre><code class="hljs bash" ng-include="'templates/commands.html?v=COMMIT_HASH'"></code></pre>
</div>
</div>
<div class="row grid">
<div class="grid-sizer col-xl-6"></div>
<div ng-if="isSymlink() || (isHTTPS() && (isCertLetsEncrypt() || isSSLDHRequired()))" class="grid-item col-xl-10 offset-xl-1" ng-cloak>
<div class="commands">
<pre><code class="hljs bash" ng-include="'templates/commands.html?v=COMMIT_HASH'"></code></pre>
</div>
</div>
<div class="grid-item col-xl-12 mb-3 text-center" ng-cloak>
<button class="btn btn-primary btn-sm btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Generated config <small>(.zip)</small></button>
</div>

98
public/templates/commands.html
View File

@ -1,65 +1,67 @@
<!-- ✔ symlink --><span ng-if="isSymlink()"><!--
<span class="step" ng-if="activeStep === 'download'"><!--
--><span class="hljs-comment"># <strong>Virtual host</strong>: create symbolic link{{ getDomains().length > 1 ? 's' : '' }}</span>
<span class="hljs-section">ln</span> <span class="hljs-attribute">-s</span> <span ng-repeat="(_site, _domain) in getDomains() track by $index">/etc/nginx/sites-available/{{ _domain }}.conf </span>/etc/nginx/sites-enabled</span><!--
step: download
--><span class="hljs-comment"><span class="counter">.</span> Download generated config:</span> <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
<span class="hljs-comment"><span class="counter">.</span> Upload to server's <strong>/etc/nginx/</strong> directory</span>
<span class="hljs-comment"><span class="counter">.</span> Backup current configuration:</span>
<span class="hljs-section">tar</span> <span class="hljs-attribute">-czvf</span> nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/
<span class="hljs-comment"><span class="counter">.</span> Unzip the uploaded archive:</span>
<span class="hljs-section">cd</span> /etc/nginx
<span class="hljs-section">unzip</span> <span class="hljs-attribute">-o</span> nginxconfig.io-{{ getDomains().join(',') }}.zip <span class="hljs-comment">(you probably need to install <strong>unzip</strong>:</span> <span class="hljs-section"></span><strong>sudo</strong> <span class="hljs-section">apt-get</span> <span class="hljs-attribute">install</span> unzip<span class="hljs-comment">)</span></span><!--
✔ symlink || ✔ HTTPS --><span ng-if="isSymlink() && (isSSLDHRequired() || hasCertLetsEncrypt())">
--><span class="step" ng-if="activeStep === 'ssl'"><!--
step: ssl
--><!--
✔ SSL DH required --><span ng-if="isSSLDHRequired()"><span class="hljs-comment"><span class="counter">.</span> Generate Diffie-Hellman keys:</span>
<span class="hljs-section">openssl</span> <span class="hljs-attribute">dhparam -dsaparam</span> <span class="hljs-attribute">-out</span> /etc/nginx/dhparam.pem <span class="hljs-number">{{ isSSLProfileLegacy() ? 1024 : 2048 }}</span>
</span><!--
✔ SSL DH required --><span ng-if="isSSLDHRequired()"><!--
--><span class="hljs-comment"># <strong>HTTPS</strong>: create Diffie-Hellman keys</span>
<span class="hljs-section">openssl dhparam</span> <span class="hljs-attribute">-dsaparam</span> <span class="hljs-attribute">-out</span> /etc/nginx/dhparam.pem <span class="hljs-number">{{ isSSLProfileLegacy() ? 1024 : 2048 }}</span><!--
--><span ng-if="hasCertLetsEncrypt()">
</span></span><!--
✔ Let's Encrypt --><span ng-if="hasCertLetsEncrypt()"><!--
--><span class="hljs-comment"># <strong>HTTPS - certbot</strong> (before first run): create ACME-challenge common directory</span>
<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> /var/www/_letsencrypt && <span class="hljs-section">chown</span> <span class="hljs-attribute">{{ data.user }}</span> /var/www/_letsencrypt
<!--
✔ Let's Encrypt
--><span ng-if="hasCertLetsEncrypt()"><span class="hljs-comment"><span class="counter">.</span> Create a common ACME-challenge directory (for Let's Encrypt):</span>
<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> /var/www/_letsencrypt
<span class="hljs-section">chown</span> <span class="hljs-attribute">{{ data.user }}</span> /var/www/_letsencrypt</span></span><!--
-->
<span class="hljs-comment"># <strong>HTTPS - certbot</strong> (before first run): disable SSL directives</span>
<span class="hljs-section">sed</span> <!--
--><span class="hljs-attribute">-i</span> <!--
--><span class="hljs-attribute">-r</span> <!--
-->'s/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g'<span ng-if="isUnified()"><!--
--><span class="step" ng-if="activeStep === 'certbot'"><!--
step: certbot
--><span class="hljs-comment"><span class="counter">.</span> Comment out SSL related directives in configuration:</span>
<span class="hljs-section">sed</span> <span class="hljs-attribute">-i -r</span> 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g'<span ng-if="isUnified()"><!--
--> /etc/nginx/nginx.conf</span><span ng-if="isModularized()"><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><!--
--> /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span>
<!--
-->
<span class="hljs-comment"># <strong>HTTPS - certbot</strong>: obtain certificates</span><!--
<span class="hljs-comment"><span class="counter">.</span> Reload NGINX:</span>
<strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx.service
<span class="hljs-comment"><span class="counter">.</span> Obtain certificate{{ getDomains().length > 1 ? 's' : '' }}:</span><!--
--><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)">
<span class="hljs-section">certbot certonly</span> <!--
<span class="hljs-section">certbot</span> <!--
--><span class="hljs-attribute">certonly</span> <!--
--><span class="hljs-attribute">--webroot</span> <!--
--><span ng-if="isNonWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> {{ _domain }} </span><!--
--><span ng-if="isWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> www.{{ _domain }} </span><!--
--><span ng-if="isCDN(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> cdn.{{ _domain }} </span><!--
--><span ng-if="isNonWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain }} </span><!--
--><span ng-if="isWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> www.{{ _domain }} </span><!--
--><span ng-if="isCDN(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> cdn.{{ _domain }} </span><!--
--><span class="hljs-attribute">--email</span> {{ data.sites[_site].email ? data.sites[_site].email : 'info@' + _domain }} <!--
--><span class="hljs-attribute" tooltips tooltip-template="--webroot-path">-w</span> /var/www/_letsencrypt <!--
--><span class="hljs-attribute" tooltips tooltip-template="--non-interactive">-n</span> <!--
--><span class="hljs-attribute" tooltips tooltip-template="--webroot-path" tooltip-side="top">-w</span> /var/www/_letsencrypt <!--
--><span class="hljs-attribute" tooltips tooltip-template="--non-interactive" tooltip-side="top">-n</span> <!--
--><span class="hljs-attribute">--agree-tos</span> <!--
--><span class="hljs-attribute">--force-renewal</span></span>
<!--
-->
<span class="hljs-comment"># <strong>HTTPS - certbot</strong> (after first run): enable SSL directives</span>
<span class="hljs-section">sed</span> <!--
--><span class="hljs-attribute">-i</span> <!--
--><span class="hljs-attribute">-r</span> <!--
-->'s/#?;#//g'<span ng-if="isUnified()"><!--
<span class="hljs-comment"><span class="counter">.</span> Uncomment SSL related directives in configuration:</span>
<span class="hljs-section">sed</span> <span class="hljs-attribute">-i -r</span> 's/#?;#//g'<span ng-if="isUnified()"><!--
--> /etc/nginx/nginx.conf</span><span ng-if="isModularized()"><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><!--
--> /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span></span>
--> /etc/nginx/sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span></span><!--
--><span class="step" ng-if="activeStep === 'live'"><!--
step: live
--><span class="hljs-comment"><span class="counter">.</span> Reload NGINX:</span>
<strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx.service</span>

8
resources/scss/_header.scss
View File

@ -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;

27
resources/scss/_main.scss
View File

@ -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 {

168
resources/scss/_steps.scss Normal file
View File

@ -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%;
}
}
}
}
}

1
resources/scss/app.scss
View File

@ -8,6 +8,7 @@
@import 'body';
@import 'header';
@import 'steps';
@import 'main';
@import 'sidebar';
@import 'footer';