grunt changes; readme update

README.md

@@ -4,10 +4,55 @@ This is an add-on for Caddy which wants to deliver a good UI to edit the content
 
 ## Try it
 
-You have to instal ```go-bindata``` before. Then execute the following command:
+### Prepare your machine
+
+If you want to try the Hugo add-on for Caddy (and improve it maybe), you'll have to install some tools.
+
++ [Go 1.4 or higher](https://golang.org/dl/)
++ [Caddydev](https://github.com/caddyserver/caddydev)
++ [go-bindata](https://github.com/jteeuwen/go-bindata)
+
+If you want to go deeper and make changes in front-end assets like JavaScript or CSS, you'll need some more tools.
+
++ [Ruby](https://www.ruby-lang.org/en/)
++ [SASS](http://sass-lang.com/install)
++ [Node.js and npm](https://nodejs.org)
++ [Grunt](http://gruntjs.com/)
+
+### Run it
+
+If you have already installed everything above to meet the requirements for what you want to do, let's start. Firstly, open the terminal and navigate to your clone of ```caddy-hugo```. Then execute:
 
 ```
-go-bindata -debug -pkg assets -o assets/assets.go templates/ assets/css/ assets/js/ assets/fonts/
+go-bindata [-debug] -pkg assets -o assets/assets.go templates/ assets/css/ assets/js/ assets/fonts/
 ```
 
-Now you're ready to test it using Caddydev.
+That command will create an ```assets.go``` file which contains all static files from those folders mentioned in the command. You may run with ```-debug``` option if you want, but it is only needed if you're going to make changes in front-end assets.
+
+Now, open the folder with your Hugo website and create a [Caddyfile](https://caddyserver.com/docs/caddyfile) similar to this one:
+
+```
+localhost:8080
+
+root public
+
+basicauth /admin admin admin
+
+errors {
+  404 404.html
+}
+
+hugo
+```
+
+After creating the file, navigate to that folder using the terminal and run the following command, replacing ```{CADDY-HUGO}``` with the location of your clone.
+
+```
+caddydev --source {CADDY-HUGO} hugo
+```
+
+Navigate to ```localhost:8080``` to see your blog running on Caddy and Hugo. Go to ```/admin``` to try the Admin UI. The default user name is ```admin```, so is the password. You may change in your Caddyfile.
+
+Everything is working now. Whenever you make a change in the back-end source code, you'll have to run the command above again.
+
+**For those who want to make changes in front-end**, make sure you have every needed tool installed and run ```npm install``` in the root of ```caddy-hugo``` clone. Then, run ```grunt watch```.

assets/css/src/main.css

@@ -2449,3 +2449,398 @@ th {
 .fa-fonticons:before {
   content: "\f280";
 }
+
+body {
+  font-family: 'Roboto', sans-serif;
+  color: #212121;
+  height: 100%;
+  width: 100%;
+}
+
+h2 {
+  margin: .83em 0;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3em;
+  width: 100%;
+  background-color: #263238;
+  padding: 0 1em;
+  box-sizing: border-box;
+  z-index: 999;
+  color: #eee;
+}
+
+header nav ul {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Chrome */
+  display: flex;
+}
+
+header nav ul li {
+  list-style-type: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+header nav ul li:last-child {
+  margin-left: auto;
+}
+
+header nav img {
+  height: 2em;
+}
+
+header nav ul li a {
+  padding: 0.5em 0.5em;
+  line-height: 2em;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: .5s ease background-color;
+}
+
+header nav ul li a:hover {
+  background-color: rgba(255, 255, 255, 0.57);
+}
+
+main {
+  position: fixed;
+  top: 3em;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 3em);
+  overflow: auto;
+}
+
+.content {
+  margin: 1.5em auto;
+  width: 80%;
+  max-width: 800px;
+}
+
+.hidden {
+  display: none;
+}
+
+/* EDITOR STYLE */
+.editor .sidebar {
+  position: fixed;
+  left: 0;
+  top: 3em;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 3em);
+  width: 25%;
+  background-color: #37474F;
+  color: #ddd;
+  box-sizing: border-box;
+  padding: 1.5em 1em;
+}
+
+.editor .container {
+  position: fixed;
+  top: 3em;
+  right: 0;
+  overflow: hidden;
+  height: calc(100% - 6em);
+  width: 75%;
+  box-sizing: border-box;
+}
+
+.editor .sidebar h2 {
+  margin-top: 0;
+}
+
+.editor #preview-area, .editor textarea {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  padding: 1.5em 10%;
+  font-size: 1.05em;
+}
+
+.editor #preview-area *:first-child {
+  margin-top: 0;
+}
+
+.editor textarea {
+  resize: none;
+  font-family: monospace;
+}
+
+.editor textarea:focus {
+  outline: 0;
+}
+
+.editor input {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25);
+  color: rgba(255, 255, 255, 0.3);
+  border: 0;
+  border-radius: 5px;
+  padding: .5em 1em;
+  box-sizing: border-box;
+}
+
+.editor input:focus {
+  color: rgba(255, 255, 255, 0.7);
+  border: 0;
+}
+
+.editor h3 {
+  font-size: 1em;
+  font-weight: bold;
+  margin: 0;
+}
+
+.action-bar {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 75%;
+  background-color: #455A64;
+  height: 3em;
+  display: flex;
+  padding: 0.5em 1em;
+  box-sizing: border-box;
+}
+
+.action-bar .left {
+  margin-right: auto;
+}
+
+.action-bar *:last-child {
+  margin-left: 1em;
+}
+
+/* FORMS ELEMENTS */
+form input {
+  color: rgba(0, 0, 0, 0.41);
+  width: 15em;
+  line-height: 1.25em;
+  margin: .5em 0;
+  border: 1px solid #fff;
+  transition: .5s ease-out all;
+  background-color: transparent;
+}
+
+form input:focus {
+  color: inherit;
+  outline: 0;
+  border-bottom: 1px solid #2196F3;
+}
+
+form label {
+  width: 10.5em;
+  display: inline-block;
+  margin: .1em 0 0;
+}
+
+form fieldset {
+  border: 0;
+  margin: 1em 0 0;
+  padding: 1em 0 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+form legend {
+  font-size: 1.5em;
+}
+
+button, input[type="submit"] {
+  border: 0;
+  color: #fff;
+  margin: 0;
+  padding: .5em 1em;
+  border-radius: 10px;
+  font-size: .9em;
+  width: auto;
+  line-height: 1em;
+  background-color: #BBB;
+  transition: .3s ease all;
+}
+
+button, input[type="submit"], button:active, input[type="submit"]:active, button:hover, input[type="submit"]:hover, button:focus, input[type="submit"]:focus {
+  outline: 0;
+}
+
+button:hover, input[type="submit"]:hover, button:active, input[type="submit"]:active {
+  background-color: #999;
+}
+
+button.default, input[type="submit"].default {
+  background-color: #2196F3;
+}
+
+button.default:hover, input[type="submit"].default:hover, button.default:active, input[type="submit"].default:active {
+  background-color: #1E88E5;
+}
+
+button.add {
+  vertical-align: middle;
+  border-radius: 50%;
+  height: 1.5em;
+  width: 1.5em;
+  font-size: .7em;
+  padding: 0;
+}
+
+/* perfect-scrollbar v0.6.5 */
+.ps-container {
+  -ms-touch-action: none;
+  overflow: hidden !important;
+}
+
+.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+  display: block;
+}
+
+.ps-container.ps-in-scrolling {
+  pointer-events: none;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+  background-color: #999;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+  background-color: #999;
+}
+
+.ps-container > .ps-scrollbar-x-rail {
+  display: none;
+  position: absolute;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+  bottom: 3px;
+  /* there must be 'bottom' for ps-scrollbar-x-rail */
+  height: 8px;
+}
+
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+  position: absolute;
+  /* please don't change 'position' */
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: background-color .2s linear;
+  -moz-transition: background-color .2s linear;
+  -o-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+  bottom: 0;
+  /* there must be 'bottom' for ps-scrollbar-x */
+  height: 8px;
+}
+
+.ps-container > .ps-scrollbar-y-rail {
+  display: none;
+  position: absolute;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+  right: 3px;
+  /* there must be 'right' for ps-scrollbar-y-rail */
+  width: 8px;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+  position: absolute;
+  /* please don't change 'position' */
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: background-color .2s linear;
+  -moz-transition: background-color .2s linear;
+  -o-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+  right: 0;
+  /* there must be 'right' for ps-scrollbar-y */
+  width: 8px;
+}
+
+.ps-container:hover.ps-in-scrolling {
+  pointer-events: none;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+  background-color: #999;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+  background-color: #999;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
+  opacity: 0.6;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+  background-color: #999;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+  background-color: #999;
+}

assets/js/src/app.js

@@ -67,8 +67,6 @@ $(document).ready(function() {
     return false;
   });
 
-
-
   $(".add").click(function(e) {
     e.preventDefault();
     fieldset = $(this).closest("fieldset");

gruntfile.js

@@ -9,11 +9,14 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     watch: {
-      files: [
+      sass: {
-        'assets/src/js/**/*.js',
+        files: ['assets/css/src/sass/**/*.scss'],
-        'assets/src/css/sass/**/*.scss'
+        tasks: ['sass', 'concat', 'cssmin']
-      ],
+      },
-      tasks: ['sass', 'concat', 'cssmin', 'uglify']
+      js: {
+        files: ['assets/js/src/**/*.js'],
+        tasks: ['uglify']
+      },
     },
     sass: {
       dist: {
@@ -34,7 +37,7 @@ module.exports = function(grunt) {
       css: {
         src: ['node_modules/normalize.css/normalize.css',
           'node_modules/font-awesome/css/font-awesome.css',
-          'assets/src/css/main.css'
+          'assets/css/src/main.css'
         ],
         dest: 'assets/css/src/main.css',
       },
@@ -66,7 +69,7 @@ module.exports = function(grunt) {
           'assets/js/app.min.js': ['node_modules/jquery/dist/jquery.js',
             'node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js',
             'node_modules/showdown/dist/showdown.js',
-            'assets/src/js/**/*.js'
+            'assets/js/src/**/*.js'
           ]
         }
       }