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

scss

pull/23/head
Szekeres Bálint 2018-07-01 15:07:38 +02:00
parent 49b2140f62
commit c54393d1ba
15 changed files with 386 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package.json
View File

@ -2,7 +2,7 @@
"name": "nginxconfig.io",
"version": "1.0.0",
"homepage": "https://nginxconfig.io",
"description": "Online nginx configuration generator",
"description": "🎛️ nginx config generator generator on steroids.",
"repository": {
"type": "git",
"url": "git+https://github.com/valentinxxx/nginxconfig.io.git"
@ -10,16 +10,28 @@
"bugs": {
"url": "https://github.com/valentinxxx/nginxconfig.io/issues"
},
"keywords": ["nginx", "config", "configuration", "generator"],
"keywords": [
"nginx",
"config",
"configuration",
"generator"
],
"author": "Bálint Szekeres <balint@szekeres.me> (https://balint.szekeres.me)",
"license": "MIT",
"dependencies": {},
"dependencies": {
"angular-tooltips": "^1.2.2",
"bootstrap": "^4.1.1",
"highlight.js": "^9.12.0",
"node-sass": "^4.9.0"
},
"devDependencies": {
"cypress": "^2.1.0",
"forever": "^0.15.3",
"http-server": "^0.11.1"
},
"scripts": {
"build": "node-sass --source-map=public/assets/css/app.min.css.map resources/scss/app.scss public/assets/css/app.min.css",
"build:prod": "node-sass --output-style=compressed resources/scss/app.scss public/assets/css/app.min.css",
"dev": "forever start ./node_modules/.bin/http-server && cypress open && forever stop ./node_modules/.bin/http-server",
"test": "forever start ./node_modules/.bin/http-server && cypress run --record && forever stop ./node_modules/.bin/http-server"
}

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

@ -164,7 +164,7 @@
if (_sourceCode.nextSibling.children.length && _sourceCode.nextSibling.children[0].children.length) {
hljs.highlightBlock(_sourceCode.nextSibling.children[0].children[0]);
}
_sourceCode.classList.add('hidden');
_sourceCode.setAttribute('hidden', '');
$scope.doMasonry();
}, 0, true, sourceCode);
@ -264,7 +264,7 @@
};
$scope.initMasonry = function() {
masonry = new Masonry('main .files .grid', {
masonry = new Masonry('main .grid', {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,

84
public/index.html
View File

@ -4,10 +4,7 @@
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.min.css?v=4.0.0">
<link rel="stylesheet" href="assets/css/highlight-github.min.css?v=9.12.0">
<link rel="stylesheet" href="assets/css/angular-tooltips.min.css?v=1.2.2">
<link rel="stylesheet" href="assets/css/app.css?v=COMMIT_HASH">
<link rel="stylesheet" href="assets/css/app.min.css?v=COMMIT_HASH">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<title>nginxconfig.io</title>
<meta name="description" content="Online nginx configuration generator">
@ -24,26 +21,16 @@
<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
</div>
</header>
<main>
<div class="container-fluid">
<div class="presets">
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('frontend')" tooltips tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltip-side="bottom">Frontend <img src="assets/img/angular.svg" alt="Angular"> <img src="assets/img/react.svg" alt="React"> <img src="assets/img/vuejs.svg" alt="Vue.js"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('backend')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltip-side="bottom">Backend <img src="assets/img/php.svg" alt="PHP"> <img src="assets/img/laravel.svg" alt="Laravel"> <img src="assets/img/symfony.svg" alt="Symfony"> <img src="assets/img/codeigniter.svg" alt="CodeIgniter"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('spa')" tooltips tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing" tooltip-side="bottom">Single-page application</button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('wordpress')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltip-side="bottom">WordPress <img src="assets/img/wordpress.svg" alt="WordPress"></button>
</div>
<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"
data-ad-slot="4527334349"></ins>
<script>
(window.adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<section class="presets">
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('frontend')" tooltips tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltip-side="bottom">Frontend <img src="assets/img/angular.svg" alt="Angular"> <img src="assets/img/react.svg" alt="React"> <img src="assets/img/vuejs.svg" alt="Vue.js"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('backend')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltip-side="bottom">Backend <img src="assets/img/php.svg" alt="PHP"> <img src="assets/img/laravel.svg" alt="Laravel"> <img src="assets/img/symfony.svg" alt="Symfony"> <img src="assets/img/codeigniter.svg" alt="CodeIgniter"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('spa')" tooltips tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing" tooltip-side="bottom">Single-page application</button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('wordpress')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltip-side="bottom">WordPress <img src="assets/img/wordpress.svg" alt="WordPress"></button>
</section>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-lg-2">
<aside class="options">
<div class="card">
<div class="card-body">
<div class="form-group">
@ -402,8 +389,10 @@
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-7 files">
</aside>
</div>
<div class="col-md-6 col-lg-7 files">
<main>
<div class="row grid">
<div class="grid-sizer col-xl-6"></div>
<div ng-if="(isHTTPS() && (isCertLetsEncrypt() || !isSSLProfileModern()))" class="grid-item col-xl-12" ng-cloak>
@ -411,7 +400,7 @@
<pre><code class="hljs bash" ng-include="'templates/commands.html?v=COMMIT_HASH'"></code></pre>
</div>
</div>
<div class="file grid-item" ng-class="isModularized() || isWordPress() ? 'col-xl-6' : 'col-xl-12'" ng-cloak>
<section class="file grid-item" ng-class="isModularized() || isWordPress() ? 'col-xl-6' : 'col-xl-12'" ng-cloak>
<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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -420,8 +409,8 @@
<div class="code source" data-filename="nginx.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginx.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-nginx" class="code highlighted"></div>
</div>
<div class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
<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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -430,8 +419,8 @@
<div class="code source" data-filename="sites-enabled/{{ domain() }}.conf">
<pre><code class="nginx" ng-include="'templates/conf/example.com.conf.html?v=COMMIT_HASH?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-domain" class="code highlighted"></div>
</div>
<div class="col-xl-6 grid-item file" ng-if="isModularized() && isCertLetsEncrypt()" ng-cloak>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized() && isCertLetsEncrypt()" 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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -440,8 +429,8 @@
<div class="code source" data-filename="_letsencrypt.conf">
<pre><code class="nginx" ng-include="'templates/conf/_letsencrypt.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-letsencrypt" class="code highlighted"></div>
</div>
<div class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
</section>
<section 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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -450,8 +439,8 @@
<div class="code source" data-filename="_general.conf">
<pre><code class="nginx" ng-include="'templates/conf/_general.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-general" class="code highlighted"></div>
</div>
<div class="col-xl-6 grid-item file" ng-if="isPHP() && (isModularized() || isWordPress())" ng-cloak>
</section>
<section 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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -460,8 +449,8 @@
<div class="code source" data-filename="_php_fastcgi.conf">
<pre><code class="nginx" ng-include="'templates/conf/_php_fastcgi.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-php_fastcgi" class="code highlighted"></div>
</div>
<div class="col-xl-6 grid-item file" ng-if="isWordPress() && isModularized()" ng-cloak>
</section>
<section 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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
@ -470,19 +459,12 @@
<div class="code source" data-filename="_wordpress.conf">
<pre><code class="nginx" ng-include="'templates/conf/_wordpress.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-wordpress" class="code highlighted"></div>
</div>
</section>
</div>
<div class="url" ng-cloak>
<div class="input-group">
<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
<div class="input-group-append">
<button class="btn btn-primary btn-url" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="assets/img/clipboard.svg" alt="Copy to clipboard"> Copy URL</button>
</div>
</div>
<div class="clipboard-success text-center" ng-if="clipboardCopy === 'url'">Copied!</div>
</div>
</div>
<div class="col-md-3 sidebar">
</main>
</div>
<div class="col-md-3 sidebar">
<aside class="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="github-link">
<img src="assets/img/github.svg" alt="GitHub"> <a href="https://github.com/valentinxxx/nginxconfig.io" target="_blank"><small>valentinxxx /</small> <strong>nginxconfig.io</strong></a>
@ -501,10 +483,10 @@
<button class="btn btn-primary btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Download ZIP</button><br>
<button class="btn btn-sm btn-danger btn-reset" ng-click="reset()"><img src="assets/img/refresh.svg" alt="Reset"> Reset</button>
</div>
</div>
</aside>
</div>
</div>
</main>
</div>
<footer>
<div class="container-fluid">
Lovingly made at <img src="assets/img/balaton.svg" alt="Lake Balaton" class="balaton"> <a href="https://en.wikipedia.org/wiki/Lake_Balaton" target="_blank">Lake Balaton, Hungary</a>

23
resources/scss/_ads.scss Normal file
View File

@ -0,0 +1,23 @@
.adsbygoogle-container {
overflow: hidden;
.adsbygoogle {
display: block;
position: relative;
background-color: #f8f8f8;
&[data-adsbygoogle-status="done"] {
background-color: transparent;
}
aside.sidebar & {
height: 600px;
}
}
.note {
text-align: center;
color: #444;
font-size: 0.6rem;
}
}

7
resources/scss/_body.scss Normal file
View File

@ -0,0 +1,7 @@
body {
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

10
resources/scss/_footer.scss Normal file
View File

@ -0,0 +1,10 @@
footer {
padding: 2rem 0 0.5rem;
text-align: center;
font-size: 0.8rem;
.balaton {
height: 1.6rem;
vertical-align: middle;
}
}

13
resources/scss/_header.scss Normal file
View File

@ -0,0 +1,13 @@
header {
background-color: #000;
padding: 0.5rem 0;
text-align: center;
margin-bottom: 0.5rem;
color: #fff;
font-size: 2.2rem;
.logo {
height: 3rem;
margin: 0.5rem 0 0.3rem;
}
}

57
resources/scss/_main.scss Normal file
View File

@ -0,0 +1,57 @@
section.presets {
text-align: center;
margin-bottom: 0.5rem;
.btn {
&.btn-outline-dark{
&:hover {
background-color: #666;
}
}
img {
height: 1.1rem;
vertical-align: text-bottom;
}
}
}
main {
flex: 1 1 auto;
.commands {
margin-bottom: 1rem;
}
.file {
margin-bottom: 2rem;
.btn-clipboard {
font-size: 0;
padding: 0.2rem 0.4rem 0.05rem;
vertical-align: text-bottom;
}
}
.commands,
.file .code {
overflow-x: auto;
font-size: 0.75rem;
line-height: 1.25;
background-color: #f8f8f8;
pre {
margin-bottom: 0;
font-size: inherit;
code {
display: block;
padding: 0.6rem;
-moz-tab-size: 4;
tab-size: 4;
overflow: visible;
overflow-x: visible;
}
}
}
}

142
resources/scss/_sidebar.scss Normal file
View File

@ -0,0 +1,142 @@
aside.options {
.card {
background-color: #f8f8f8;
& + .card {
margin-top: 1rem;
}
.card-body {
padding: 0.25rem 0.5rem 0.5rem;
font-size: 0.9rem;
.form-group {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
.form-subgroup {
margin-left: 0.35rem;
border-left: 2px solid #ced4da;
padding-left: 0.5rem;
.form-subgroup {
margin-left: 0;
border-left: 1px solid #d7e0ea;
padding-left: 0.4rem;
}
.form-check + .form-subgroup {
margin-left: 5.5px;
}
}
.form-label {
margin-bottom: 0.15rem;
margin-left: 0.15rem;
}
.form-control {
&.domain {
&::placeholder {
color: #000;
}
&:placeholder-shown {
border-color: #3131ff;
}
}
&[type="text"],
&[type="email"] {
&:placeholder-shown {
background-color: #fefefe;
}
}
}
.form-check-label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.row {
&.no-gutters {
& + .no-gutters {
margin-top: 0.5rem;
}
.col-md-6 {
&:first-child {
padding-right: 3px;
}
&:last-child {
padding-left: 3px;
}
}
}
}
}
}
}
aside.sidebar {
@include media-breakpoint-up(lg) {
margin-top: -2.4rem;
}
.github-link {
text-align: center;
font-size: 1rem;
margin-bottom: 0.5rem;
small {
font-size: 90%;
}
img {
height: 1.2rem;
vertical-align: -4px;
}
}
.github-star {
width: 132px;
height: 30px;
display: block;
border: 0;
overflow: hidden;
margin: 0 auto 0.25rem;
}
.buttons {
text-align: center;
margin-top: 1.5rem;
.btn {
&.btn-download {
margin-bottom: 0.25rem;
img {
vertical-align: -2px;
margin-right: 0.1rem;
height: 1rem;
}
}
&.btn-reset {
img {
vertical-align: -3px;
height: 0.9rem;
}
}
}
}
}

6
resources/scss/_typography.scss Normal file
View File

@ -0,0 +1,6 @@
@import 'https://fonts.googleapis.com/css?family=Quicksand:400,700';
body {
font-family: 'Quicksand', sans-serif;
font-display: swap;
}

25
resources/scss/_utilities.scss Normal file
View File

@ -0,0 +1,25 @@
[ng-cloak] {
display: none;
}
.clipboard-success {
font-size: 0.8rem;
color: #28a745;
font-weight: 700;
}
tooltip {
tip {
min-width: 150px;
padding: 4px 12px;
}
tip-tip {
line-height: 1.1;
display: block;
&._small {
font-size: 0.9rem;
}
}
}

16
resources/scss/app.scss Normal file
View File

@ -0,0 +1,16 @@
@import 'vendor/bootstrap';
@import 'vendor/highlight-js';
@import 'vendor/angular-tooltips';
@import 'typography';
@import 'body';
@import 'header';
@import 'main';
@import 'sidebar';
@import 'footer';
@import 'utilities';
@import 'tooltips';
@import 'ads';

1
resources/scss/vendor/_angular-tooltips.scss vendored Normal file
View File

@ -0,0 +1 @@
@import '../../../node_modules/angular-tooltips/lib/angular-tooltips';

35
resources/scss/vendor/_bootstrap.scss vendored Normal file
View File

@ -0,0 +1,35 @@
@import '../../../node_modules/bootstrap/scss/functions';
@import '../../../node_modules/bootstrap/scss/variables';
@import '../../../node_modules/bootstrap/scss/mixins';
// @import '../../../node_modules/bootstrap/scss/root';
@import '../../../node_modules/bootstrap/scss/reboot';
// @import '../../../node_modules/bootstrap/scss/type';
// @import '../../../node_modules/bootstrap/scss/images';
@import '../../../node_modules/bootstrap/scss/code';
@import '../../../node_modules/bootstrap/scss/grid';
// @import '../../../node_modules/bootstrap/scss/tables';
@import '../../../node_modules/bootstrap/scss/forms';
@import '../../../node_modules/bootstrap/scss/buttons';
// @import '../../../node_modules/bootstrap/scss/transitions';
// @import '../../../node_modules/bootstrap/scss/dropdown';
// @import '../../../node_modules/bootstrap/scss/button-group';
@import '../../../node_modules/bootstrap/scss/input-group';
@import '../../../node_modules/bootstrap/scss/custom-forms';
// @import '../../../node_modules/bootstrap/scss/nav';
// @import '../../../node_modules/bootstrap/scss/navbar';
@import '../../../node_modules/bootstrap/scss/card';
// @import '../../../node_modules/bootstrap/scss/breadcrumb';
// @import '../../../node_modules/bootstrap/scss/pagination';
// @import '../../../node_modules/bootstrap/scss/badge';
// @import '../../../node_modules/bootstrap/scss/jumbotron';
// @import '../../../node_modules/bootstrap/scss/alert';
// @import '../../../node_modules/bootstrap/scss/progress';
// @import '../../../node_modules/bootstrap/scss/media';
// @import '../../../node_modules/bootstrap/scss/list-group';
// @import '../../../node_modules/bootstrap/scss/close';
// @import '../../../node_modules/bootstrap/scss/modal';
// @import '../../../node_modules/bootstrap/scss/tooltip';
// @import '../../../node_modules/bootstrap/scss/popover';
// @import '../../../node_modules/bootstrap/scss/carousel';
// @import '../../../node_modules/bootstrap/scss/utilities';
// @import '../../../node_modules/bootstrap/scss/print';

1
resources/scss/vendor/_highlight-js.scss vendored Normal file
View File

@ -0,0 +1 @@
@import '../../../node_modules/highlight.js/styles/github';