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

wip

pull/125/head
Bálint Szekeres 2019-10-13 16:22:16 +02:00
parent 3e80efc88f
commit 2df3759015
8 changed files with 179 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1 @@
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5887 29V23.3845C20.5836 23.3845 25.1924 17.4935 22.9053 11.2235C22.0737 8.91529 20.2024 7.05495 17.8807 6.22814C11.5739 3.9544 5.64836 8.57078 5.64836 14.4963H0C0 5.02237 9.21757 -2.38452 19.1975 0.716039C23.5637 2.05961 27.029 5.53912 28.4151 9.8799C31.5338 19.8361 24.1182 29 14.5887 29Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5881 23.419H8.97437V17.838H14.5881V23.419Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.9739 27.7253H4.64233V23.419H8.9739V27.7253Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.64438 23.419H1.00586V19.8361H4.60972V23.419H4.64438Z" fill="#0069FF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 809 B

100
public/index.html
View File

@ -19,6 +19,20 @@
</head>
<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController" ng-csp ng-class="['layout-' + layout]">
<header>
<div ng-if="toggleLayoutVisible()" class="layout-toggle" ng-cloak>
<button class="btn btn-sm btn-secondary" ng-click="toggleLayout()">Layout: {{ layout }}</button>
</div>
<div ng-if="layout === 'do'" ng-cloak>
<nav class="do" ng-include="'partials/nav-do.html'"></nav>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h1>NGINX Config</h1>
<h2>The easiest way to configure a performant, secure,<wbr> and stable nginx server.</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="loader" ng-if="!masonryInit">
<div class="spinner">
@ -27,7 +41,7 @@
</div>
</div>
<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
<img ng-if="layout === 'default'" src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
<div class="sites">
<div class="title">Sites:</div>
@ -40,93 +54,20 @@
</div>
</div>
<div class="presets">
<div class="presets" ng-if="layout === 'default'">
<div class="title">Presets:</div>
<div class="group">
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('frontend')"
ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
tooltips
tooltip-template="• disabled PHP<br>• index.html fallback routing"
tooltip-side="bottom"
>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('backend')"
ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing"
tooltip-side="bottom"
>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('django')"
ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
tooltips
tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
tooltip-side="bottom"
>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isProxy() && !isRoot() }"
ng-click="setPreset('nodejs')"
tooltips
tooltip-template="• enabled reverse proxy"
tooltip-side="bottom"
>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
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-light"
ng-click="setPreset('wordpress')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('drupal')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('magento')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
</div>
<div class="group" ng-include="'partials/presets.html'"></div>
</div>
</div>
</header>
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="col-lg-9" ng-class="{ 'col-lg-12': layout === 'do' }">
<div class="sites" ng-include="'partials/config-site.html'"></div>
<div class="common" ng-include="'partials/config-global.html'"></div>
</div>
<div class="col-lg-3">
<div ng-if="layout !== 'do'" class="col-lg-3" ng-cloak>
<aside class="sidebar">
<div class="github">
<div class="github-cover">
@ -287,6 +228,9 @@
gtag('js', new Date());
gtag('config', 'UA-3084378-31');
</script>
<script>
var LAYOUT = 'do';
</script>
<script src="assets/js/vendor.min.js?v=COMMIT_HASH"></script>
<script src="assets/js/app.min.js?v=COMMIT_HASH"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>

11
public/partials/nav-do.html Normal file
View File

@ -0,0 +1,11 @@
<div class="announcement">
<div class="container">
<span class="badge">NEW</span>
<a href="https://blog.digitalocean.com/introducing-memory-optimized-droplets/" target="_blank">Now available: Memory-Optimized Droplets ❯</a>
</div>
</div>
<div class="menu">
<div class="container">
<div class="logo" ng-include="'assets/img/do.svg'"></div>
</div>
</div>

72
public/partials/presets.html Normal file
View File

@ -0,0 +1,72 @@
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('frontend')"
ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
tooltips
tooltip-template="• disabled PHP<br>• index.html fallback routing"
tooltip-side="bottom"
>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('backend')"
ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing"
tooltip-side="bottom"
>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('django')"
ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
tooltips
tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
tooltip-side="bottom"
>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isProxy() && !isRoot() }"
ng-click="setPreset('nodejs')"
tooltips
tooltip-template="• enabled reverse proxy"
tooltip-side="bottom"
>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
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-light"
ng-click="setPreset('wordpress')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('drupal')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('magento')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>

8
resources/js/app.js
View File

@ -701,6 +701,14 @@
}
};
$scope.toggleLayoutVisible = function() {
return $window.location.hostname !== 'nginxconfig.io';
};
$scope.toggleLayout = function() {
$scope.layout = ($scope.layout === 'default' ? 'do' : 'default');
};
///////////////////////////

8
resources/scss/_header.scss
View File

@ -7,6 +7,7 @@
}
header {
position: relative;
background-color: #000;
padding: 0.5rem 0;
text-align: center;
@ -14,6 +15,13 @@ header {
color: #fff;
font-size: 2.2rem;
.layout-toggle {
position: absolute;
right: 10px;
top: 0;
z-index: 100;
}
.container {
position: relative;
}

1
resources/scss/app.scss
View File

@ -16,3 +16,4 @@
@import 'utilities';
@import 'layout/do';

56
resources/scss/layout/_do.scss Normal file
View File

@ -0,0 +1,56 @@
body.layout-do {
header {
padding: 0;
background-color: #031b4e;
nav {
background-color: #fff;
color: #5b6987;
text-align: left;
.announcement {
font-size: 0.875rem;
padding: 10px 0;
border-bottom: 1px solid #e5e8ed;
.badge {
background-color: #00d7d2;
border-radius: 3px;
color: #fff;
padding: 3px 6px;
margin-right: 10px;
}
a {
color: inherit;
}
}
.menu {
padding: 10px 0;
.logo {
background-color: #e5e5e5;
border-radius: 3px;
width: 47px;
height: 47px;
position: relative;
margin-right: 20px;
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -50%);
}
}
}
}
}
section.tabs {
.tab-content {
background-color: #fafafa;
}
}
}