major refactor

.travis.yml

@@ -13,4 +13,4 @@ deploy:
   on:
     branch: master
   provider: script
-  script: ssh -q -l root nginxconfig.io "sudo -u www-data -H sh -c 'cd /var/www/nginxconfig.io; git pull origin master'"
+  script: ssh -q -l root nginxconfig.io "sudo -u www-data -H sh -c 'cd /var/www/nginxconfig.io; git reset --hard && git pull origin master && sed -i -e \"s/COMMIT_HASH/$BITBUCKET_COMMIT/\" public/index.html'"

README.md

@@ -3,7 +3,7 @@
 Online nginx configuration generator.
 
 ## Features
-* HTTPS (with [Let's Encrypt](https://letsencrypt.org), [Mozilla SSL Configuration Generator](https://mozilla.github.io/server-side-tls/ssl-config-generator/))
+* HTTPS (with [Let's Encrypt](https://letsencrypt.org) or custom certificate, [Mozilla SSL Configuration Generator](https://mozilla.github.io/server-side-tls/ssl-config-generator/))
 * HTTP2
 * CDN
 * www / non-www
@@ -25,7 +25,7 @@ Online nginx configuration generator.
 	* *[Vue.js](https://stackoverflow.com/questions/47655869/how-to-use-vue-js-with-nginx)*
 	* *[Ember.js](https://discuss.emberjs.com/t/how-to-serve-all-routes-on-a-production-server-exactly/6372)*
 	* …
-* unified (`nginx.conf`) / separated file structure (ideal for multi-domain environment)
+* unified (`nginx.conf`) / modularized file structure (ideal for multi-domain environment)
 * security headers
 * `worker_processes`
 * `user`
@@ -46,3 +46,4 @@ Online nginx configuration generator.
 * [clipboard.js](https://clipboardjs.com) - Copy generated config to clipboard
 * [ngclipboard](http://sachinchoolur.github.io/ngclipboard/) - AngularJS directive for clipboard.js
 * [Angular Tooltips](https://720kb.github.io/angular-tooltips/) - helper tooltips
+* [Masonry](https://masonry.desandro.com) - files grid layout

public/assets/css/app.css

@@ -19,6 +19,12 @@ body {
 	display: none;
 }
 
+.clipboard-success {
+	font-size: 0.8rem;
+	color: #28a745;
+	font-weight: 700;
+}
+
 
 
 /*
@@ -96,16 +102,45 @@ main .options .card + .card {
 	margin-top: 1rem;
 }
 
-main .options .card .card-body .form-label {
+main .options .card .form-label {
 	margin-bottom: 0.15rem;
 	margin-left: 0.15rem;
 }
 
-main .options .card .card-body .form-group {
+main .options .card .form-group {
 	margin-bottom: 0.5rem;
 }
 
-main .options .card .card-body .form-group:last-child {
+main .options .card .form-subgroup {
+	margin-left: 5px;
+	border-left: 2px solid #ced4da;
+	padding-left: 11px;
+}
+
+main .options .card .form-control[type="text"]:placeholder-shown,
+main .options .card .form-control[type="email"]:placeholder-shown {
+	background-color: #f8f8f8;
+}
+
+main .options .card .form-control.domain:placeholder-shown {
+	/*background-color: #f8d7da;*/
+	/*background-color: #dedeff;*/
+	border-color: #3131ff;
+}
+
+main .options .card .form-control.domain::placeholder {
+	color: #000;
+}
+
+main .options .card .form-check-label {
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+main .options .card .form-group:last-child {
 	margin-bottom: 0;
 }
 
@@ -119,15 +154,8 @@ main .file .btn-clipboard {
 	vertical-align: text-bottom;
 }
 
-main .file .clipboard-success {
-	font-size: 0.8rem;
-	color: #28a745;
-	font-weight: 700;
-}
-
 main .file .code,
 main .commands {
-	padding: 0.5rem;
 	overflow-x: auto;
 	font-size: 0.75rem;
 	line-height: 1.25;
@@ -136,11 +164,9 @@ main .commands {
 
 main .commands {
 	margin-bottom: 1rem;
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
 }
 
-main .file .code.source {
+main .file .code.source.hidden {
 	display: none;
 }
 
@@ -152,6 +178,8 @@ main .commands pre {
 
 main .file .code pre code,
 main .commands pre code {
+	display: block;
+	padding: 0.6rem;
 	-moz-tab-size: 4;
 	tab-size: 4;
 	overflow: visible;

public/assets/js/app.js

@@ -10,6 +10,19 @@
 		return repeatedString;
 	};
 
+
+
+	var masonry = new Masonry('main .files .grid', {
+		itemSelector: '.grid-item',
+		columnWidth: '.grid-sizer',
+		percentPosition: true,
+		initLayout: false,
+		stagger: 0,
+		transitionDuration: '0.6s'
+	});
+
+
+
 	angular
 	.module('NginxConfigIoApp', ['ngclipboard', '720kb.tooltips'])
 	.config(function NginxCongigIoConfig($locationProvider) {
@@ -22,17 +35,25 @@
 		// PRIVATE VARIABLES //
 		///////////////////////
 		var data = {
-			domain:				'example.com',
+			domain:				'',
-			path:				'/var/www/example.com',
+			path:				'',
 			document_root:		'/public',
+
 			https:				false,
 			http2:				true,
-			email:				'hello@example.com',
+
-			cdn:				false,
+			cert_type:			'letsencrypt',
+			email:				'',
+			ssl_certificate:	'',
+			ssl_certificate_key:'',
+
 			non_www:			true,
+			cdn:				false,
+
+			index_html:			false,
+
 			php:				'7.2',
 			index_php:			true,
-			index_html:			false,
 			wordpress:			false,
 
 			file_structure:		'unified',
@@ -64,6 +85,9 @@
 		$scope.dataInit = false;
 		$scope.isDirty = false;
 
+		$scope.sslCertificateChanged = false;
+		$scope.sslCertificateKeyChanged = false;
+
 		$scope.extensions = {
 			assets:	'css(\\.map)?|js(\\.map)?',
 			fonts:	'ttf|ttc|otf|eot|woff|woff2',
@@ -79,9 +103,38 @@
 		$scope.clipboardCopy = undefined;
 
 
+
 		/////////////////////
 		// SCOPE FUNCTIONS //
 		/////////////////////
+		$scope.domain = function() {
+			return $scope.data.domain ? $scope.data.domain : 'example.com';
+		};
+
+		$scope.sslCertificate = function() {
+			if ($scope.isLetsEncrypt()) {
+				return '/etc/letsencrypt/live/' + $scope.domain() + '/fullchain.pem'
+			}
+
+			if ($scope.data.ssl_certificate) {
+				return $scope.data.ssl_certificate;
+			}
+
+			return '/etc/nginx/ssl/' + $scope.domain() + '.crt';
+		};
+
+		$scope.sslCertificateKey = function() {
+			if ($scope.isLetsEncrypt()) {
+				return '/etc/letsencrypt/live/' + $scope.domain() + '/privkey.pem'
+			}
+
+			if ($scope.data.ssl_certificate_key) {
+				return $scope.data.ssl_certificate_key;
+			}
+
+			return '/etc/nginx/ssl/' + $scope.domain() + '.key';
+		};
+
 		$scope.refreshHighlighting = function() {
 			var sourceCodes = document.querySelectorAll('main .file .code.source');
 
@@ -93,6 +146,10 @@
 					if (_sourceCode.nextSibling.children.length && _sourceCode.nextSibling.children[0].children.length) {
 						hljs.highlightBlock(_sourceCode.nextSibling.children[0].children[0]);
 					}
+					_sourceCode.classList.add('hidden');
+
+					masonry.reloadItems();
+					masonry.layout();
 				}, 0, true, sourceCode);
 			}
 		};
@@ -101,6 +158,10 @@
 			var hashData = $location.search();
 
 			for (var key in hashData) {
+				if (hashData[key] === 'false') {
+					hashData[key] = false;
+				}
+
 				if ($scope.data[key] !== undefined && typeof $scope.data[key] === typeof hashData[key]) {
 					$scope.isDirty = true;
 					$scope.data[key] = hashData[key];
@@ -154,6 +215,85 @@
 
 
 
+		///////////////////////////
+		// SCOPE QUERY FUNCTIONS //
+		///////////////////////////
+		$scope.isUnified = function() {
+			return $scope.data.file_structure === 'unified';
+		};
+
+		$scope.isModularized = function() {
+			return !$scope.isUnified();
+		};
+
+		$scope.isHTTPS = function() {
+			return $scope.data.https;
+		};
+
+		$scope.isHTTP2 = function() {
+			return $scope.isHTTPS() && $scope.data.http2;
+		};
+
+		$scope.isLetsEncrypt = function() {
+			return $scope.isHTTPS() && $scope.data.cert_type === 'letsencrypt';
+		};
+
+		$scope.isCustomCert = function() {
+			return $scope.isHTTPS() && $scope.data.cert_type === 'custom';
+		};
+
+		$scope.isNonWWW = function() {
+			return $scope.data.non_www;
+		};
+
+		$scope.isWWW = function() {
+			return !$scope.isNonWWW();
+		};
+
+		$scope.isCDN = function() {
+			return $scope.isWWW() && $scope.data.cdn;
+		};
+
+		$scope.isIndexHtml = function() {
+			return $scope.data.index_html;
+		};
+
+		$scope.isPHP = function() {
+			return $scope.data.php !== 'off';
+		};
+
+		$scope.isIndexPhp = function() {
+			return $scope.isPHP() && $scope.data.index_php;
+		};
+
+		$scope.isWordPress = function() {
+			return $scope.isPHP() && $scope.data.wordpress;
+		};
+
+		$scope.isAccessLog = function() {
+			return $scope.data.access_log;
+		};
+
+		$scope.isGzip = function() {
+			return $scope.data.gzip;
+		};
+
+		$scope.isServerTokens = function() {
+			return $scope.data.server_tokens;
+		};
+
+		$scope.isLogNotFound = function() {
+			return $scope.data.log_not_found;
+		};
+
+		$scope.isLimitReq = function() {
+			return $scope.data.limit_req;
+		};
+
+
+
+
+
 		//////////////////
 		// SCOPE EVENTS //
 		//////////////////

public/index.html

@@ -5,37 +5,24 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:400,700">
-		<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/bootstrap.min.css?v=4.0.0">
+		<link rel="stylesheet" href="assets/css/bootstrap.min.css?v=4.0.0">
-		<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/highlight-github.min.css?v=9.12.0">
+		<link rel="stylesheet" href="assets/css/highlight-github.min.css?v=9.12.0">
-		<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/angular-tooltips.min.css?v=1.2.2">
+		<link rel="stylesheet" href="assets/css/angular-tooltips.min.css?v=1.2.2">
-		<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/app.css">
+		<link rel="stylesheet" href="assets/css/app.css?v=COMMIT_HASH">
-		<link rel="icon" type="image/png" href="https://cdn.nginxconfig.io/assets/img/favicon.png">
+		<link rel="icon" type="image/png" href="assets/img/favicon.png">
 		<title>nginxconfig.io</title>
 		<meta name="description" content="Online nginx configuration generator">
-		<meta name="keywords" content="nginx, config, configurator, /etc/nginx/nginx.conf, nginx performance, nginx tuning, nginx php, nginx, php fpm, wordpress, cdn, access_log, error_log, Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim, Angular, React, Vue.js, Ember.js">
+		<meta name="keywords" content="nginx, config, configurator, /etc/nginx/nginx.conf, nginx performance, nginx tuning, nginx php, nginx, php fpm, wordpress, Let's Encrypt, custom certificate, cdn, access_log, error_log, Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim, Angular, React, Vue.js, Ember.js">
 		<meta property="og:title" content="nginxconfig.io">
 		<meta property="og:description" content="Online nginx configuration generator: HTTPS, HTTP2, CDN, PHP (Laravel, Symfony, CodeIgniter…), Frontend (Angular, React, Vue.js…), WordPress, security headers, rate limiting, expiration by file types…">
 		<meta property="og:type" content="website">
 		<meta property="og:url" content="https://nginxconfig.io">
-		<meta property="og:image" content="https://cdn.nginxconfig.io/assets/img/share.png">
+		<meta property="og:image" content="https://nginxconfig.io/assets/img/share.png">
 	</head>
 	<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController">
 		<header>
 			<div class="container">
 				<div class="logo">nginxconfig.io</div>
-				<div class="row">
-					<div class="col-sm-10 col-lg-8 col-xl-6 offset-sm-1 offset-lg-2 offset-xl-3">
-						<div class="input-group url" ng-class="{active: isDirty}">
-							<div class="input-group-prepend">
-								<div class="input-group-text" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="https://cdn.nginxconfig.io/assets/img/clipboard.svg" alt="Copy to clipboard"></div>
-							</div>
-							<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
-							<div class="input-group-append">
-								<div class="input-group-text" ng-click="reset()"><img src="https://cdn.nginxconfig.io/assets/img/refresh.svg" alt="Reset"></div>
-							</div>
-						</div>
-					</div>
-				</div>
 			</div>
 		</header>
 		<main>
@@ -43,6 +30,7 @@
 				<div class="row">
 					<div class="col-md-3 col-lg-2 options">
 						<div class="adsbygoogle-container d-block d-md-none">
+							<div class="note">▾ advertisement ▾</div>
 							<ins class="adsbygoogle"
 									style="display:block"
 									data-ad-client="ca-pub-6543577519725877"
@@ -50,19 +38,18 @@
 							<script>
 								(window.adsbygoogle = window.adsbygoogle || []).push({});
 							</script>
-							<div class="note">⌃ advertisement ⌃</div>
 						</div>
 						<div class="card">
 							<div class="card-body">
 								<div class="form-group">
 									<label class="form-label">Domain</label>
-									<input type="text" class="form-control form-control-sm" ng-model="data.domain">
+									<input type="text" class="form-control form-control-sm domain" ng-model="data.domain" autofocus placeholder="{{ domain() }}">
 								</div>
 								<div class="form-group">
 									<label class="form-label">
 										<span tooltips tooltip-template="Define path to project.">Path</span>
 									</label>
-									<input type="text" class="form-control form-control-sm" ng-model="data.path">
+									<input type="text" class="form-control form-control-sm" ng-model="data.path" placeholder="{{ '/var/www/' + domain() }}">
 								</div>
 								<div class="form-group">
 									<label class="form-label">
@@ -70,40 +57,78 @@
 									</label>
 									<input type="text" class="form-control form-control-sm" ng-model="data.document_root">
 								</div>
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" id="https" ng-model="data.https">
-									<label class="form-check-label" for="https">
-										<span tooltips tooltip-template="Provides support for HTTPS.<br><br><i>using Let's Encrypt and Mozilla SSL config</i>">HTTPS</span>
-									</label>
-								</div>
-								<div class="form-check" ng-if="data.https">
-									<input class="form-check-input" type="checkbox" id="http2" ng-model="data.http2">
-									<label class="form-check-label" for="http2">
-										<span tooltips tooltip-template="Provides support for HTTP/2.">HTTP/2</span>
-									</label>
-								</div>
-								<div class="form-group" ng-if="data.https">
-									<label class="form-label">
-										<span tooltips tooltip-template="Let's Encrypt expiration notify e-mail.">E-mail</span>
-									</label>
-									<input type="text" class="form-control form-control-sm" ng-model="data.email">
-								</div>
-								<div class="form-check">
-									<input class="form-check-input" type="checkbox" id="cdn" ng-model="data.cdn">
-									<label class="form-check-label" for="cdn">
-										<span tooltips tooltip-template="Cookie-free CDN subdomain.">CDN</span>
-									</label>
-								</div>
 								<div class="form-check">
 									<input class="form-check-input" type="checkbox" id="non_www" ng-model="data.non_www">
 									<label class="form-check-label" for="non_www">
 										<span tooltips tooltip-template="Serve requests without www subdomain.">non-www</span>
 									</label>
 								</div>
+								<div class="form-subgroup" ng-if="isWWW()">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" id="cdn" ng-model="data.cdn">
+										<label class="form-check-label" for="cdn">
+											<span tooltips tooltip-template="Cookie-free CDN subdomain.">CDN <small>subdomain</small></span>
+										</label>
+									</div>
+								</div>
+								<div class="form-check">
+									<input class="form-check-input" type="checkbox" id="https" ng-model="data.https">
+									<label class="form-check-label" for="https">
+										<span tooltips tooltip-template="Provides support for HTTPS.<br><br><i>using Mozilla SSL config</i>">HTTPS</span>
+									</label>
+								</div>
+								<div class="form-subgroup" ng-if="isHTTPS()">
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" id="http2" ng-model="data.http2">
+										<label class="form-check-label" for="http2">
+											<span tooltips tooltip-template="Provides support for HTTP/2.">HTTP/2</span>
+										</label>
+									</div>
+								</div>
+								<div class="form-subgroup" ng-if="isHTTPS()">
+									<div class="form-check">
+										<input class="form-check-input" type="radio" id="letsencrypt" ng-model="data.cert_type" value="letsencrypt">
+										<label class="form-check-label" for="letsencrypt">
+											<span tooltips tooltip-template="Let's Encrypt based SSl.<br><br><i>free, automated, and open Certificate Authority</i>">Let's Encrypt</span>
+										</label>
+									</div>
+									<div class="form-subgroup">
+										<div class="form-group" ng-if="isHTTPS() && isLetsEncrypt()">
+											<label class="form-label small">
+												<span tooltips tooltip-template="Let's Encrypt expiration notify e-mail.">E-mail</span>
+											</label>
+											<input type="text" class="form-control form-control-sm" ng-model="data.email" placeholder="{{ 'hello@' + domain() }}">
+										</div>
+									</div>
+								</div>
+								<div class="form-subgroup" ng-if="isHTTPS()">
+									<div class="form-check">
+										<input class="form-check-input" type="radio" id="custom_cert" ng-model="data.cert_type" value="custom">
+										<label class="form-check-label" for="custom_cert">
+											<span tooltips tooltip-template="Custom certificate">Custom certificate</span>
+										</label>
+									</div>
+									<div class="form-subgroup">
+										<div class="form-group" ng-if="isHTTPS() && isCustomCert()">
+											<label class="form-label small">
+												<span tooltips tooltip-template="Path to crt file"><code>ssl_certificate</code></span>
+											</label>
+											<input type="text" class="form-control form-control-sm" ng-model="data.ssl_certificate" placeholder="{{ '/etc/nginx/ssl/' + domain() + '.crt' }}">
+										</div>
+									</div>
+									<div class="form-subgroup">
+										<div class="form-group" ng-if="isHTTPS() && isCustomCert()">
+											<label class="form-label small">
+												<span tooltips tooltip-template="Path to key file"><code>ssl_certificate_key</code></span>
+											</label>
+											<input type="text" class="form-control form-control-sm" ng-model="data.ssl_certificate_key" placeholder="{{ '/etc/nginx/ssl/' + domain() + '.key' }}">
+										</div>
+									</div>
+								</div>
 								<div class="form-check">
 									<input class="form-check-input" type="checkbox" id="index_html" ng-model="data.index_html">
 									<label class="form-check-label" for="index_html">
-										<span tooltips tooltip-template="Pass unhandled requests to index.html.<br><br><i>Angular, React, Vue.js, Ember.js</i>...">index.html</span>
+										<span tooltips tooltip-template="Pass unhandled requests to index.html.<br><br><i>Angular, React, Vue.js, Ember.js</i>...">index.html <small>handler</small></span>
 									</label>
 								</div>
 							</div>
@@ -121,15 +146,16 @@
 										<option value="7.0">7.0 socket</option>
 										<option value="7.1">7.1 socket</option>
 										<option value="7.2">7.2 socket</option>
+										<option value="7.3">7.3 socket</option>
 									</select>
 								</div>
-								<div class="form-check" ng-if="data.php !== 'off'">
+								<div class="form-check" ng-if="isPHP()">
 									<input class="form-check-input" type="checkbox" id="index_php" ng-model="data.index_php">
 									<label class="form-check-label" for="index_php">
-										<span tooltips tooltip-template="Pass unhandled requests to index.php.<br><br><i>Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim...</i>">index.php</span>
+										<span tooltips tooltip-template="Pass unhandled requests to index.php.<br><br><i>Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim...</i>">index.php <small>handler</small></span>
 									</label>
 								</div>
-								<div class="form-check" ng-if="data.php !== 'off'">
+								<div class="form-check" ng-if="isPHP()">
 									<input class="form-check-input" type="checkbox" id="wordpress" ng-model="data.wordpress">
 									<label class="form-check-label" for="wordpress">
 										<span tooltips tooltip-template="WordPress security rules and login limiting <i>(if enabled)</i>.">WordPress</span>
@@ -147,9 +173,9 @@
 									</label>
 								</div>
 								<div class="form-check">
-									<input class="form-check-input" type="radio" id="separated" ng-model="data.file_structure" value="separated">
+									<input class="form-check-input" type="radio" id="modularized" ng-model="data.file_structure" value="modularized">
-									<label class="form-check-label" for="separated">
+									<label class="form-check-label" for="modularized">
-										<span tooltips tooltip-template="Multiple configuration files<br><br><i>(ideal for multi-domain environment)</i>">separated</span>
+										<span tooltips tooltip-template="Multiple configuration files<br><br><i>(ideal for multi-domain environment)</i>">modularized</span>
 									</label>
 								</div>
 							</div>
@@ -249,99 +275,107 @@
 								</div>
 							</div>
 						</div>
-					</div>
+						<div class="card">
-					<div class="col-md-6 col-lg-7 files">
+							<div class="card-body text-center">
-						<div class="row" ng-cloak>
+								<div class="form-group">
-							<div ng-if="data.https" class="col-xl-12">
+									<div class="mb-1">
-								<div class="commands">
+										<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
-									<pre><code class="hljs bash"><span class="hljs-comment"># HTTPS: create Diffie-Hellman keys</span>
+									</div>
-<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">2048</span>
+									<button class="btn btn-primary" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="assets/img/clipboard.svg" alt="Copy to clipboard"> Copy URL</button>
-
+									<div class="clipboard-success" ng-if="clipboardCopy === 'url'">Copied!</div>
-<span class="hljs-comment"># HTTPS: create ACME-challenge common directory</span>
+								</div>
-<span class="hljs-section">sudo</span> <span class="hljs-attribute">-u</span> {{ data.user }} <span class="hljs-section">sh</span> <span class="hljs-attribute">-c</span> "<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> /var/www/_letsencrypt"
+								<div class="form-group">
-
+									<button class="btn btn-sm btn-danger" ng-click="reset()"><img src="assets/img/refresh.svg" alt="Reset"> Reset</button>
-<span class="hljs-comment"># HTTPS: certbot (obtain certificates)</span>
-<span class="hljs-section">certbot certonly</span> <span class="hljs-attribute">--webroot</span> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> {{ data.domain }} <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> www.{{ data.domain }}<span ng-if="data.cdn"> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> cdn.{{ data.domain }}</span> <span class="hljs-attribute">--email</span> {{ data.email }} <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">--agree-tos</span> <span class="hljs-attribute">--force-renewal</span></code></pre>
 								</div>
 							</div>
-							<div class="file" ng-class="data.file_structure === 'separated' || data.https || (data.php !== 'off' && data.wordpress) ? 'col-xl-6' : 'col-xl-12'">
+						</div>
+					</div>
+					<div class="col-md-6 col-lg-7 files">
+						<div class="row grid">
+							<div class="grid-sizer col-xl-6"></div>
+							<div ng-if="isHTTPS()" class="grid-item col-xl-12" ng-cloak>
+								<div class="commands">
+									<pre><code class="hljs bash" ng-include="'templates/commands.html'"></code></pre>
+								</div>
+							</div>
+							<div class="file grid-item" ng-class="isModularized() || isHTTPS() || isWordPress() ? 'col-xl-6' : 'col-xl-12'">
 								<strong>/etc/nginx/nginx.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-nginx" ngclipboard-success="clipboardSuccess('nginx.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === 'nginx.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/nginx.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/nginx.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-nginx" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.file_structure === 'separated'">
+							<div class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
-								<strong>/etc/nginx/sites-enabled/{{ data.domain }}.conf</strong>
+								<strong>/etc/nginx/sites-enabled/{{ domain() }}.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-domain" ngclipboard-success="clipboardSuccess('example.com')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === 'example.com'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/example.com.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/example.com.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-domain" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.https">
+							<div class="col-xl-6 grid-item file" ng-if="isHTTPS()" ng-cloak>
 								<strong>/etc/nginx/_ssl.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-ssl" ngclipboard-success="clipboardSuccess('_ssl.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_ssl.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_ssl.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_ssl.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-ssl" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.file_structure === 'separated' && data.https">
+							<div class="col-xl-6 grid-item file" ng-if="isModularized() && isLetsEncrypt()" ng-cloak>
 								<strong>/etc/nginx/_letsencrypt.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-letsencrypt" ngclipboard-success="clipboardSuccess('_letsencrypt.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_letsencrypt.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_letsencrypt.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-letsencrypt" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.file_structure === 'separated'">
+							<div class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
 								<strong>/etc/nginx/_general.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-general" ngclipboard-success="clipboardSuccess('_general.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_general.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_general.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_general.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-general" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.php !== 'off' && data.file_structure === 'separated'">
+							<div class="col-xl-6 grid-item file" ng-if="isPHP() && isModularized()" ng-cloak>
 								<strong>/etc/nginx/_php.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-php" ngclipboard-success="clipboardSuccess('_php.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_php.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_php.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_php.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-php" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.php !== 'off' && (data.file_structure === 'separated' || (data.php !== 'off' && data.wordpress))">
+							<div class="col-xl-6 grid-item file" ng-if="isPHP() && (isModularized() || isWordPress())" ng-cloak>
 								<strong>/etc/nginx/_php_fastcgi.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-php_fastcgi" ngclipboard-success="clipboardSuccess('_php_fastcgi.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_php_fastcgi.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_php_fastcgi.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_php_fastcgi.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-php_fastcgi" class="code highlighted"></div>
 							</div>
-							<div class="col-xl-6 file" ng-if="data.php !== 'off' && data.wordpress && data.file_structure === 'separated'">
+							<div class="col-xl-6 grid-item file" ng-if="isWordPress() && isModularized()" ng-cloak>
 								<strong>/etc/nginx/_wordpress.conf</strong>
 								<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-wordpress" ngclipboard-success="clipboardSuccess('_wordpress.conf')">
-									<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
+									<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
 								</button>
 								<span class="clipboard-success" ng-if="clipboardCopy === '_wordpress.conf'">Copied!</span>
 								<div class="code source">
-									<pre><code class="nginx" ng-include="'templates/_wordpress.conf.html'" onload="refreshHighlighting()"></code></pre>
+									<pre><code class="nginx" ng-include="'templates/conf/_wordpress.conf.html'" onload="refreshHighlighting()"></code></pre>
 								</div><div id="file-wordpress" class="code highlighted"></div>
 							</div>
 						</div>
@@ -349,6 +383,7 @@
 					<div class="col-md-3 sidebar">
 						<iframe class="github-star" src="https://ghbtns.com/github-btn.html?user=valentinxxx&repo=nginxconfig.io&type=star&count=true&size=large"></iframe>
 						<div class="adsbygoogle-container">
+							<div class="note">▾ advertisement ▾</div>
 							<ins class="adsbygoogle"
 									style="display:block"
 									data-ad-client="ca-pub-6543577519725877"
@@ -356,7 +391,6 @@
 							<script>
 								(window.adsbygoogle = window.adsbygoogle || []).push({});
 							</script>
-							<div class="note">⌃ advertisement ⌃</div>
 						</div>
 					</div>
 				</div>
@@ -364,7 +398,7 @@
 		</main>
 		<footer>
 			<div class="container-fluid">
-				Lovingly made at <img src="https://cdn.nginxconfig.io/assets/img/balaton.svg" alt="Lake Balaton" class="balaton"><span class="text-muted">(<a href="https://en.wikipedia.org/wiki/Lake_Balaton" target="_blank">Lake Balaton, Hungary</a>)</span>
+				Lovingly made at <img src="assets/img/balaton.svg" alt="Lake Balaton" class="balaton"><span class="text-muted">(<a href="https://en.wikipedia.org/wiki/Lake_Balaton" target="_blank">Lake Balaton, Hungary</a>)</span>
 				<div class="crypto">
 					BTC: <strong>1CeKtgNStn5BGk46gt14kNMhsnJoFGUfkN</strong><br>
 					ETH: <strong>0xe84Bc747dc81329894e610747B99C6bd51437269</strong><br>
@@ -381,11 +415,12 @@
 			gtag('js', new Date());
 			gtag('config', 'UA-3084378-31');
 		</script>
-		<script src="https://cdn.nginxconfig.io/assets/js/highlight.min.js?v=9.12.0"></script>
+		<script src="assets/js/highlight.min.js?v=9.12.0"></script>
-		<script src="https://cdn.nginxconfig.io/assets/js/clipboard.min.js?v=1.7.1"></script>
+		<script src="assets/js/clipboard.min.js?v=1.7.1"></script>
-		<script src="https://cdn.nginxconfig.io/assets/js/angular.min.js?v=1.6.8"></script>
+		<script src="assets/js/angular.min.js?v=1.6.8"></script>
-		<script src="https://cdn.nginxconfig.io/assets/js/ngclipboard.min.js?v=1.1.3"></script>
+		<script src="assets/js/ngclipboard.min.js?v=1.1.3"></script>
-		<script src="https://cdn.nginxconfig.io/assets/js/angular-tooltips.min.js?v=1.2.2"></script>
+		<script src="assets/js/angular-tooltips.min.js?v=1.2.2"></script>
-		<script src="https://cdn.nginxconfig.io/assets/js/app.js"></script>
+		<script src="assets/js/masonry.pkgd.min.js?v=4.2.1"></script>
+		<script src="assets/js/app.js?v=COMMIT_HASH"></script>
 	</body>
 </html>

public/templates/_general.conf.html

@@ -1,44 +0,0 @@
-# headers
-add_header X-Frame-Options "SAMEORIGIN" always;
-add_header X-XSS-Protection "1; mode=block" always;
-add_header X-Content-Type-Options "nosniff" always;
-add_header X-UA-Compatible "IE=Edge" always;
-add_header Cache-Control "no-transform" always;
-
-# . files
-location ~ /\. {
-	deny all;
-}<span ng-if="data.expires_assets !== '' && data.expires_assets !== data.expires_media">
-
-# assets
-location ~* \.(?:{{ extensions.assets }})$ {
-	expires {{ data.expires_assets }};<span ng-if="data.access_log !== ''">
-	access_log off;</span>
-}</span><span ng-if="data.expires_media !== ''">
-
-# {{ data.expires_assets !== '' && data.expires_assets === data.expires_media ? 'assets, ' : '' }}media
-location ~* \.(?:{{ data.expires_assets !== '' && data.expires_assets === data.expires_media ? extensions.assets + '|' : '' }}{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }})$ {
-	expires {{ data.expires_media }};<span ng-if="data.access_log !== ''">
-	access_log off;</span>
-}</span><span ng-if="data.expires_svg !== '' && data.expires_svg !== data.expires_fonts">
-
-# svg
-location ~* \.{{ extensions.svg }}$ {
-	add_header Access-Control-Allow-Origin "*";
-	expires {{ data.expires_svg }};<span ng-if="data.access_log !== ''">
-	access_log off;</span>
-}</span><span ng-if="data.expires_fonts !== ''">
-
-# {{ data.expires_svg !== '' && data.expires_svg === data.expires_fonts ? 'svg, ' : '' }}fonts
-location ~* \.(?:{{ data.expires_svg !== '' && data.expires_svg === data.expires_fonts ? extensions.svg + '|' : '' }}{{ extensions.fonts }})$ {
-	add_header Access-Control-Allow-Origin "*";
-	expires {{ data.expires_fonts }};<span ng-if="data.access_log !== ''">
-	access_log off;</span>
-}</span>
-<span ng-if="data.gzip">
-# gzip
-gzip on;
-gzip_vary on;
-gzip_proxied any;
-gzip_comp_level 6;
-gzip_types {{ gzipTypes }};</span>

public/templates/_php.conf.html

@@ -1,9 +0,0 @@
-<span ng-if="data.file_structure === 'separated'"># index
-index {{ data.index_html ? 'index.html ' : '' }}index.php;
-
-</span># handle .php
-location ~ \.php$ {<span ng-if="data.file_structure === 'separated'">
-	include _php_fastcgi.conf;
-	</span><span ng-if="data.file_structure === 'unified'">
-<ng-include ng-include-tabs="{{ data.file_structure === 'unified' ? 3 : 1 }}" src="'templates/_php_fastcgi.conf.html'" onload="refreshHighlighting()"></ng-include></span>
-}

public/templates/commands.html

@@ -0,0 +1,10 @@
+<span class="hljs-comment"># HTTPS: 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">2048</span><!--
+
+✔ Let's Encrypt --><span ng-if="isLetsEncrypt()">
+
+<span class="hljs-comment"># HTTPS: create ACME-challenge common directory</span>
+<span class="hljs-section">sudo</span> <span class="hljs-attribute">-u</span> {{ data.user }} <span class="hljs-section">sh</span> <span class="hljs-attribute">-c</span> "<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> /var/www/_letsencrypt"
+
+<span class="hljs-comment"># HTTPS: certbot (obtain certificates)<br># disable before first run: <strong>ssl_certificate</strong>, <strong>ssl_certificate_key</strong>, <strong>ssl_trusted_certificate</strong></span>
+<span class="hljs-section">certbot certonly</span> <span class="hljs-attribute">--webroot</span> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> {{ domain() }} <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> www.{{ domain() }}<span ng-if="isCDN()"> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> cdn.{{ domain() }}</span> <span class="hljs-attribute">--email</span> {{ data.email ? data.email : 'hello@' + 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">--agree-tos</span> <span class="hljs-attribute">--force-renewal</span></span>

public/templates/conf/_general.conf.html

@@ -0,0 +1,52 @@
+# headers
+add_header X-Frame-Options "SAMEORIGIN" always;
+add_header X-XSS-Protection "1; mode=block" always;
+add_header X-Content-Type-Options "nosniff" always;
+add_header X-UA-Compatible "IE=Edge" always;
+add_header Cache-Control "no-transform" always;
+
+# . files
+location ~ /\. {
+	deny all;
+}<span ng-if="data.expires_assets && data.expires_assets !== data.expires_media">
+
+# assets
+location ~* \.(?:{{ extensions.assets }})$ {
+	expires {{ data.expires_assets }};<!--
+
+	✘ accessLog --><span ng-if="isAccessLog()">
+	access_log off;</span>
+}</span><span ng-if="data.expires_media">
+
+# {{ data.expires_assets && data.expires_assets === data.expires_media ? 'assets, ' : '' }}media
+location ~* \.(?:{{ data.expires_assets && data.expires_assets === data.expires_media ? extensions.assets + '|' : '' }}{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }})$ {
+	expires {{ data.expires_media }};<!--
+
+	✘ accessLog --><span ng-if="isAccessLog()">
+	access_log off;</span>
+}</span><span ng-if="data.expires_svg && data.expires_svg !== data.expires_fonts">
+
+# svg
+location ~* \.{{ extensions.svg }}$ {
+	add_header Access-Control-Allow-Origin "*";
+	expires {{ data.expires_svg }};<!--
+
+	✘ accessLog --><span ng-if="isAccessLog()">
+	access_log off;</span>
+}</span><span ng-if="data.expires_fonts">
+
+# {{ data.expires_svg && data.expires_svg === data.expires_fonts ? 'svg, ' : '' }}fonts
+location ~* \.(?:{{ data.expires_svg && data.expires_svg === data.expires_fonts ? extensions.svg + '|' : '' }}{{ extensions.fonts }})$ {
+	add_header Access-Control-Allow-Origin "*";
+	expires {{ data.expires_fonts }};<!--
+
+	✘ accessLog --><span ng-if="isAccessLog()">
+	access_log off;</span>
+}</span>
+<span ng-if="isGzip()">
+# gzip
+gzip on;
+gzip_vary on;
+gzip_proxied any;
+gzip_comp_level 6;
+gzip_types {{ gzipTypes }};</span>

public/templates/conf/_php.conf.html

@@ -0,0 +1,14 @@
+<!--
+	✔ modularized --><span ng-if="isModularized()"># index
+index {{ isIndexHtml() ? 'index.html ' : '' }}index.php;
+
+</span><!--
+
+--># handle .php
+location ~ \.php$ {<!--
+	✔ modularized || ✔ WordPress --><span ng-if="isModularized() || isWordPress()">
+	include _php_fastcgi.conf;</span><!--
+
+	✔ unified && ✘ WordPress --><span ng-if="isUnified() && !isWordPress()">
+<ng-include ng-include-tabs="{{ isUnified() ? 3 : 1 }}" src="'templates/conf/_php_fastcgi.conf.html'" onload="refreshHighlighting()"></ng-include></span>
+}

public/templates/conf/_wordpress.conf.html

@@ -21,7 +21,7 @@ location ~* ^/wp-content/plugins/.*\.(?!{{ extensions.assets }}|{{ extensions.fo
 # WordPress stuff
 location ~* ^/(?:xmlrpc\.php|wp-links-opml\.php|wp-config\.php|wp-config-sample\.php|wp-comments-post\.php|readme\.html|license\.txt)$ {
 	deny all;
-}<span ng-if="data.limit_req">
+}<span ng-if="isLimitReq()">
 
 # wp-login.php throttle
 location = /wp-login.php {

public/templates/conf/example.com.conf.html

@@ -0,0 +1,168 @@
+server {
+	listen {{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+	listen [::]:{{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+
+	server_name {{ isWWW() ? 'www.' : '' }}{{ domain() }};<!--
+
+	✔ PHP --><span ng-if="isPHP()">
+	set $base /var/www/{{ domain() }};
+	root $base{{ data.document_root }};</span><!--
+
+	✘ PHP --><span ng-if="!isPHP()">
+	root /var/www/{{ domain() }}{{ data.document_root }};</span><!--
+
+	✔ HTTPS --><span ng-if="isHTTPS()">
+
+	# SSL certificate
+	ssl_certificate {{ sslCertificate() }};
+	ssl_certificate_key {{ sslCertificateKey() }};<!--
+
+	✔ Let's Encrypt --><span ng-if="isLetsEncrypt()">
+	ssl_trusted_certificate /etc/letsencrypt/live/{{ domain() }}/fullchain.pem;</span>
+
+	# SSL config
+	include _ssl.conf;</span><!--
+
+	✔ unified && ✔ PHP --><span ng-if="isUnified() && isPHP()">
+
+	# index
+	index {{ isIndexHtml() ? 'index.html ' : '' }}index.php;</span><!--
+
+	(✔ PHP && ✔ index.php) || ✔ index.html --><span ng-if="isIndexPhp() || isIndexHtml()">
+
+	# $uri{{ isIndexHtml() ? ', index.html' : '' }}{{ isIndexPhp() ? ', index.php' : '' }}
+	location / {
+		try_files $uri $uri/ {{ isIndexHtml() ? '/index.html' : '' }}{{ isIndexHtml() && isIndexPhp() ? ' ' : '' }}{{ isIndexPhp() ? '/index.php?$query_string' : '' }};
+	}</span><!--
+
+	✔ unified --><span ng-if="isModularized()">
+</span><!--
+
+
+
+	✔ modularized && ✔ Let's Encrypt --><span ng-if="isModularized() && isLetsEncrypt()">
+	include _letsencrypt.conf;</span><!--
+
+	✔ modularized --><span ng-if="isModularized()">
+	include _general.conf;</span><!--
+
+	✔ modularized && ✔ WordPress --><span ng-if="isModularized() && isWordPress()">
+	include _wordpress.conf;</span><!--
+
+	✔ modularized && ✔ PHP --><span ng-if="isModularized() && isPHP()">
+	include _php.conf;</span><!--
+
+
+
+	✔ unified && ✔ Let's Encrypt --><span ng-if="isUnified() && isLetsEncrypt()">
+
+<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include></span><!--
+
+	✔ unified --><span ng-if="isUnified()">
+
+<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_general.conf.html'" onload="refreshHighlighting()"></ng-include></span><!--
+
+	✔ unified && ✔ WordPress --><span ng-if="isUnified() && isWordPress()">
+
+<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_wordpress.conf.html'" onload="refreshHighlighting()"></ng-include></span><!--
+
+	✔ modularized && ✔ PHP --><span ng-if="isUnified() && isPHP()">
+
+<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_php.conf.html'" onload="refreshHighlighting()"></ng-include></span>
+}<!--
+
+
+
+✔ CDN --><span ng-if="isCDN()">
+
+# CDN
+server {
+	listen {{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+	listen [::]:{{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+
+	server_name cdn.{{ domain() }};
+	root /var/www/{{ domain() }}{{ data.document_root }};<span ng-if="!isAccessLog()">
+
+	access_log off;</span><!--
+
+	✔ HTTPS --><span ng-if="isHTTPS()">
+
+	# SSL certificate
+	ssl_certificate {{ sslCertificate() }};
+	ssl_certificate_key {{ sslCertificateKey() }};<!--
+
+	✔ Let's Encrypt --><span ng-if="isLetsEncrypt()">
+	ssl_trusted_certificate /etc/letsencrypt/live/{{ domain() }}/fullchain.pem;</span>
+
+	# SSL config
+	include _ssl.conf;</span><!--
+
+	✔ modularized && ✔ Let's Encrypt --><span ng-if="isModularized() && isLetsEncrypt()">
+	include _letsencrypt.conf;</span><!--
+
+	✔ unified && ✔ Let's Encrypt --><span ng-if="isUnified() && isLetsEncrypt()">
+
+<ng-include ng-include-tabs="2" src="'templates/conf/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include></span>
+
+	# disable access_log
+	access_log off;<!--
+
+	✔ Gzip --><span ng-if="isGzip()">
+
+	# gzip
+	gzip on;
+	gzip_vary on;
+	gzip_proxied any;
+	gzip_comp_level 6;
+	gzip_types {{ gzipTypes }};</span>
+
+	# allow safe files
+	location ~* \.(?:{{ extensions.assets }}|{{ extensions.fonts }}|{{ extensions.svg }}|{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}|{{ extensions.docs }})$ {
+		add_header Access-Control-Allow-Origin "*";
+		add_header Cache-Control "public";
+		expires 30d;
+	}
+
+	# deny everything else
+	location / {
+		deny all;
+	}
+}</span>
+<!--
+
+
+
+-->
+# {{ isWWW() ? 'non-www, ' : '' }}subdomains redirect
+server {
+	listen {{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+	listen [::]:{{ isHTTPS() ? '443 ssl' : '80' }}{{ isHTTP2() ? ' http2' : '' }};
+
+	server_name {{ isWWW() ? domain() + ' ' : '' }}*.{{ domain() }};<!--
+
+	✔ HTTPS --><span ng-if="isHTTPS()">
+
+	# SSL certificate
+	ssl_certificate /etc/letsencrypt/live/{{ domain() }}/fullchain.pem;
+	ssl_certificate_key /etc/letsencrypt/live/{{ domain() }}/privkey.pem;
+	ssl_trusted_certificate /etc/letsencrypt/live/{{ domain() }}/fullchain.pem;
+
+	# SSL config
+	include _ssl.conf;</span>
+
+	return 301 https://{{ isWWW() ? 'www.' : '' }}{{ domain() }}$request_uri;
+}</span><!--
+
+
+
+✔ HTTPS --><span ng-if="isHTTPS()">
+
+# HTTP redirect
+server {
+	listen 80;
+	listen [::]:80;
+
+	server_name {{ domain() }} *.{{ domain() }};
+
+	return 301 https://{{ isWWW() ? 'www.' : '' }}{{ domain() }}$request_uri;
+}</span>

public/templates/conf/nginx.conf.html

@@ -12,30 +12,32 @@ http {
 	charset utf-8;
 	sendfile on;
 	tcp_nopush on;
-	tcp_nodelay on;
+	tcp_nodelay on;<!--
-	types_hash_max_size 2048;<span ng-if="!data.server_tokens">
-	server_tokens off;</span><span ng-if="!data.log_not_found">
-	log_not_found off;</span>
 
+	✘ serverTokens --><span ng-if="!isServerTokens()">
+	server_tokens off;</span><!--
+
+	✘ logNotFound --><span ng-if="!isLogNotFound()">
+	log_not_found off;</span>
+	types_hash_max_size 2048;
 	client_max_body_size {{ data.client_max_body_size }}M;
-	client_body_buffer_size 128k;
 
 	# mime
 	include mime.types;
 	default_type application/octet-stream;
 
-	# logging<span ng-if="data.access_log !== ''">
+	# logging
-	access_log {{ data.access_log }};</span>
+	access_log {{ isAccessLog() ? data.access_log : 'off' }};
 	error_log {{ data.error_log }} warn;<span ng-if="data.limit_req">
 
 	# limits
 	limit_req_log_level warn;
 	limit_req_zone $binary_remote_addr zone=login:10m rate=10r/m;</span>
 
-	# include configs
+	# load configs
-	include /etc/nginx/conf.d/*.conf;<span ng-if="data.file_structure === 'separated'">
+	include /etc/nginx/conf.d/*.conf;<span ng-if="data.file_structure === 'modularized'">
 	include /etc/nginx/sites-enabled/*;</span><span ng-if="data.file_structure === 'unified'">
 
-	# {{ !data.non_www ? 'www.' : '' }}{{ data.domain }}
+	# {{ !data.non_www ? 'www.' : '' }}{{ domain() }}
-<ng-include ng-include-tabs="1" src="'templates/example.com.conf.html'" sonload="refreshHighlighting()"></ng-include></span>
+<ng-include ng-include-tabs="1" src="'templates/conf/example.com.conf.html'" sonload="refreshHighlighting()"></ng-include></span>
 }

public/templates/example.com.conf.html

@@ -1,167 +0,0 @@
-<span ng-if="data.https">server {
-	listen 443 ssl{{ data.http2 ? ' http2' : '' }};
-	listen [::]:443 ssl{{ data.http2 ? ' http2' : '' }};
-
-	server_name {{ !data.non_www ? 'www.' : '' }}{{ data.domain }};<span ng-if="data.php !== 'off'">
-	set $base /var/www/{{ data.domain }};
-	root $base{{ data.document_root }};</span><span ng-if="data.php === 'off'">
-	root /var/www/{{ data.domain }}{{ data.document_root }};</span>
-
-	ssl_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;
-	ssl_certificate_key /etc/letsencrypt/live/{{ data.domain }}/privkey.pem;
-	ssl_trusted_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;<span ng-if="data.file_structure === 'unified' && data.php !== 'off'">
-
-	# index
-	index {{ data.index_html ? 'index.html ' : '' }}index.php;</span><span ng-if="(data.php !== 'off' && data.index_php) || data.index_html">
-
-	# $url{{ data.index_html ? ', index.html' : '' }}{{ data.php !== 'off' && data.index_php ? ', index.php' : '' }}
-	location / {
-		try_files $uri $uri/ {{ data.index_html ? '/index.html' : '' }}{{ data.index_html && data.php !== 'off' && data.index_php ? ' ' : '' }}{{ data.php !== 'off' && data.index_php ? '/index.php?$query_string' : '' }};
-	}</span>
-
-	include _ssl.conf;<span ng-if="data.file_structure === 'separated'">
-	include _letsencrypt.conf;
-	include _general.conf;<span ng-if="data.php !== 'off' && data.wordpress">
-	include _wordpress.conf;</span><span ng-if="data.php !== 'off'">
-	include _php.conf;</span></span><span ng-if="data.file_structure === 'unified'">
-
-<ng-include ng-include-tabs="2" src="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include>
-
-<ng-include ng-include-tabs="2" src="'templates/_general.conf.html'" onload="refreshHighlighting()"></ng-include><span ng-if="data.php !== 'off' && data.wordpress">
-
-<ng-include ng-include-tabs="2" src="'templates/_wordpress.conf.html'" onload="refreshHighlighting()"></ng-include></span><span ng-if="data.php !== 'off'">
-
-<ng-include ng-include-tabs="2" src="'templates/_php.conf.html'" onload="refreshHighlighting()"></ng-include></span></span>
-}<span ng-if="data.cdn">
-
-# CDN
-server {
-	listen 443 ssl{{ data.http2 ? ' http2' : '' }};
-	listen [::]:443 ssl{{ data.http2 ? ' http2' : '' }};
-
-	server_name cdn.{{ data.domain }};
-	root /var/www/{{ data.domain }}{{ data.document_root }};<span ng-if="data.access_log !== ''">
-
-	access_log off;</span>
-
-	ssl_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;
-	ssl_certificate_key /etc/letsencrypt/live/{{ data.domain }}/privkey.pem;
-	ssl_trusted_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;<span ng-if="data.gzip">
-
-	# gzip
-	gzip on;
-	gzip_vary on;
-	gzip_proxied any;
-	gzip_comp_level 6;
-	gzip_types {{ gzipTypes }};</span>
-
-	include _ssl.conf;<span ng-if="data.file_structure === 'separated'">
-	include _letsencrypt.conf;</span><span ng-if="data.file_structure === 'unified'">
-
-<ng-include ng-include-tabs="2" src="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include></span>
-
-	location ~* \.(?:{{ extensions.assets }}|{{ extensions.fonts }}|{{ extensions.svg }}|{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}|{{ extensions.docs }})$ {
-		add_header Access-Control-Allow-Origin "*";
-		add_header Cache-Control "public";
-		expires 30d;
-	}
-
-	location / {
-		deny all;
-	}
-}</span>
-
-# HTTPS {{ !data.non_www ? 'domain, ' : '' }}subdomains redirect
-server {
-	listen 443 ssl{{ data.http2 ? ' http2' : '' }};
-	listen [::]:443 ssl{{ data.http2 ? ' http2' : '' }};
-
-	server_name {{ !data.non_www ? data.domain + ' ' : '' }}*.{{ data.domain }};
-
-	ssl_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;
-	ssl_certificate_key /etc/letsencrypt/live/{{ data.domain }}/privkey.pem;
-	ssl_trusted_certificate /etc/letsencrypt/live/{{ data.domain }}/fullchain.pem;
-
-	include _ssl.conf;<span ng-if="data.file_structure === 'separated'">
-	include _letsencrypt.conf;</span><span ng-if="data.file_structure === 'unified'">
-
-<ng-include ng-include-tabs="2" src="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include></span>
-
-	return 301 https://{{ !data.non_www ? 'www.' : '' }}{{ data.domain }}$request_uri;
-}
-
-# HTTP redirect
-server {
-	listen 80;
-	listen [::]:80;
-
-	server_name {{ data.domain }} *.{{ data.domain }};
-<span ng-if="data.file_structure === 'separated'">
-	include _letsencrypt.conf;</span><span ng-if="data.file_structure === 'unified'">
-<ng-include ng-include-tabs="2" src="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></ng-include></span>
-
-	return 301 https://{{ !data.non_www ? 'www.' : '' }}{{ data.domain }}$request_uri;
-}</span><span ng-if="!data.https">server {
-	listen 80;
-	listen [::]:80;
-
-	server_name {{ !data.non_www ? 'www.' : '' }}{{ data.domain }};<span ng-if="data.php !== 'off'">
-	set $base /var/www/{{ data.domain }};
-	root $base{{ data.document_root }};</span><span ng-if="data.php === 'off'">
-	root /var/www/{{ data.domain }}{{ data.document_root }};</span><span ng-if="data.file_structure === 'unified' && data.php !== 'off'">
-
-	# index
-	index {{ data.index_html ? 'index.html ' : '' }}index.php;</span><span ng-if="(data.php !== 'off' && data.index_php) || data.index_html">
-
-	# $url{{ data.index_html ? ', index.html' : '' }}{{ data.php !== 'off' && data.index_php ? ', index.php' : '' }}
-	location / {
-		try_files $uri $uri/ {{ data.index_html ? '/index.html' : '' }}{{ data.index_html && data.php !== 'off' && data.index_php ? ' ' : '' }}{{ data.php !== 'off' && data.index_php ? '/index.php?$query_string' : '' }};
-	}</span>
-<span ng-if="data.file_structure === 'separated'">
-	include _general.conf;<span ng-if="data.php !== 'off' && data.wordpress">
-	include _wordpress.conf;</span><span ng-if="data.php !== 'off'">
-	include _php.conf;</span></span><span ng-if="data.file_structure === 'unified'">
-<ng-include ng-include-tabs="2" src="'templates/_general.conf.html'" onload="refreshHighlighting()"></ng-include><span ng-if="data.php !== 'off' && data.wordpress">
-
-<ng-include ng-include-tabs="2" src="'templates/_wordpress.conf.html'" onload="refreshHighlighting()"></ng-include></span><span ng-if="data.php !== 'off'">
-
-<ng-include ng-include-tabs="2" src="'templates/_php.conf.html'" onload="refreshHighlighting()"></ng-include></span></span>
-}<span ng-if="data.cdn">
-
-# CDN
-server {
-	listen 80;
-	listen [::]:80;
-
-	server_name cdn.{{ data.domain }};
-	root /var/www/{{ data.domain }}{{ data.document_root }};<span ng-if="data.access_log !== ''">
-
-	access_log off;</span><span ng-if="data.gzip">
-
-	# gzip
-	gzip on;
-	gzip_vary on;
-	gzip_proxied any;
-	gzip_comp_level 6;
-	gzip_types {{ gzipTypes }};</span>
-
-	location ~* \.(?:{{ extensions.assets }}|{{ extensions.fonts }}|{{ extensions.svg }}|{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}|{{ extensions.docs }})$ {
-		add_header Access-Control-Allow-Origin "*";
-		add_header Cache-Control "public";
-		expires 30d;
-	}
-
-	location / {
-		deny all;
-	}
-}</span>
-
-# {{ !data.non_www ? 'domain, ' : '' }}subdomains redirect
-server {
-	listen 80;
-	listen [::]:80;
-
-	server_name {{ !data.non_www ? data.domain + ' ' : '' }}*.{{ data.domain }};
-
-	return 301 http://{{ !data.non_www ? 'www.' : '' }}{{ data.domain }}$request_uri;
-}</span>