editor updates

edit/edit.go

@@ -36,6 +36,7 @@ func Execute(w http.ResponseWriter, r *http.Request) (int, error) {
 
 		// The main content of the file
 		mainContent := rawFile["content"].(string)
+		mainContent = "\n\n" + strings.TrimSpace(mainContent)
 
 		// Removes the main content from the rest of the frontmatter
 		delete(rawFile, "content")
@@ -86,7 +87,7 @@ func Execute(w http.ResponseWriter, r *http.Request) (int, error) {
 		file, err := parser.ReadFrom(reader)
 
 		inf := new(information)
-		inf.Content = string(file.Content())
+		inf.Content = strings.TrimSpace(string(file.Content()))
 		inf.FrontMatter, err = frontmatter.Pretty(file.FrontMatter())
 
 		if err != nil {

frontmatter/frontmatter.go

@@ -56,7 +56,7 @@ func rawToPretty(config interface{}, master string, parent string) interface{} {
 	var stringsNames []string
 
 	for index, element := range config.(map[string]interface{}) {
-		if utils.IsMap(element) {
+		if utils.IsMap(element) || utils.IsSlice(element) {
 			mapsNames = append(mapsNames, index)
 		} else {
 			stringsNames = append(stringsNames, index)

static/css/main.css

@@ -5,6 +5,10 @@ body {
   width: 100%;
 }
 
+h2 {
+  margin: .83em 0;
+}
+
 header {
   position: fixed;
   top: 0;
@@ -74,6 +78,10 @@ main {
   max-width: 800px;
 }
 
+.hidden {
+  display: none;
+}
+
 
 /* EDITOR STYLE */
 
@@ -86,7 +94,7 @@ main {
   height: calc(100% - 3em);
   width: 25%;
   background-color: #37474F;
-  color: #fff;
+  color: #ddd;
   box-sizing: border-box;
   padding: 1.5em 1em;
 }
@@ -101,36 +109,52 @@ main {
   box-sizing: border-box;
 }
 
-.editor .sidebar *:first-child {
+.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 {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
   resize: none;
-  border: 0;
-  padding: 1.5em 11em;
   font-family: monospace;
-  font-size: 1.05em;
+}
+
+.editor textarea:focus {
+  outline: 0;
 }
 
 .editor input {
   width: 100%;
-  background-color: #fff;
+  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 {
-  border: 1px solid #ddd;
+  color: rgba(255, 255, 255, 0.7);
+  border: 0;
 }
 
-.editor legend {
+.editor h3 {
   font-size: 1em;
   font-weight: bold;
+  margin: 0;
 }
 
 .action-bar {
@@ -175,12 +199,14 @@ form input:focus {
 form label {
   width: 10.5em;
   display: inline-block;
+  margin: .1em 0 0;
 }
 
 form fieldset {
   border: 0;
-  margin: 0;
+  margin: 1em 0 0;
-  padding: 0;
+  padding: 1em 0 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.25);
 }
 
 form legend {
@@ -197,8 +223,30 @@ button, input[type="submit"] {
   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;
+}

static/css/normalize.css

@@ -1,5 +1,6 @@
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 
+
 /**
  * 1. Set default font family to sans-serif.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
@@ -7,11 +8,15 @@
  */
 
 html {
-  font-family: sans-serif; /* 1 */
+  font-family: sans-serif;
-  -ms-text-size-adjust: 100%; /* 2 */
+  /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
 }
 
+
 /**
  * Remove default margin.
  */
@@ -20,9 +25,11 @@ body {
   margin: 0;
 }
 
+
 /* HTML5 display definitions
    ========================================================================== */
 
+
 /**
  * Correct `block` display not defined for any HTML5 element in IE 8/9.
  * Correct `block` display not defined for `details` or `summary` in IE 10/11
@@ -30,35 +37,24 @@ body {
  * Correct `block` display not defined for `main` in IE 11.
  */
 
-article,
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
   display: block;
 }
 
+
 /**
  * 1. Correct `inline-block` display not defined in IE 8/9.
  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  */
 
-audio,
+audio, canvas, progress, video {
-canvas,
+  display: inline-block;
-progress,
+  /* 1 */
-video {
+  vertical-align: baseline;
-  display: inline-block; /* 1 */
+  /* 2 */
-  vertical-align: baseline; /* 2 */
 }
 
+
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
@@ -69,19 +65,21 @@ audio:not([controls]) {
   height: 0;
 }
 
+
 /**
  * Address `[hidden]` styling not present in IE 8/9/10.
  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
  */
 
-[hidden],
+[hidden], template {
-template {
   display: none;
 }
 
+
 /* Links
    ========================================================================== */
 
+
 /**
  * Remove the gray background color from active links in IE 10.
  */
@@ -90,18 +88,20 @@ a {
   background-color: transparent;
 }
 
+
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 
-a:active,
+a:active, a:hover {
-a:hover {
   outline: 0;
 }
 
+
 /* Text-level semantics
    ========================================================================== */
 
+
 /**
  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  */
@@ -110,15 +110,16 @@ abbr[title] {
   border-bottom: 1px dotted;
 }
 
+
 /**
  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  */
 
-b,
+b, strong {
-strong {
   font-weight: bold;
 }
 
+
 /**
  * Address styling not present in Safari and Chrome.
  */
@@ -127,6 +128,7 @@ dfn {
   font-style: italic;
 }
 
+
 /**
  * Address variable `h1` font-size and margin within `section` and `article`
  * contexts in Firefox 4+, Safari, and Chrome.
@@ -137,6 +139,7 @@ h1 {
   margin: 0.67em 0;
 }
 
+
 /**
  * Address styling not present in IE 8/9.
  */
@@ -146,6 +149,7 @@ mark {
   color: #000;
 }
 
+
 /**
  * Address inconsistent and variable font size in all browsers.
  */
@@ -154,12 +158,12 @@ small {
   font-size: 80%;
 }
 
+
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 
-sub,
+sub, sup {
-sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -174,9 +178,11 @@ sub {
   bottom: -0.25em;
 }
 
+
 /* Embedded content
    ========================================================================== */
 
+
 /**
  * Remove border when inside `a` element in IE 8/9/10.
  */
@@ -185,6 +191,7 @@ img {
   border: 0;
 }
 
+
 /**
  * Correct overflow not hidden in IE 9/10/11.
  */
@@ -193,9 +200,11 @@ svg:not(:root) {
   overflow: hidden;
 }
 
+
 /* Grouping content
    ========================================================================== */
 
+
 /**
  * Address margin not present in IE 8/9 and Safari.
  */
@@ -204,6 +213,7 @@ figure {
   margin: 1em 40px;
 }
 
+
 /**
  * Address differences between Firefox and other browsers.
  */
@@ -214,6 +224,7 @@ hr {
   height: 0;
 }
 
+
 /**
  * Contain overflow in all browsers.
  */
@@ -222,26 +233,27 @@ pre {
   overflow: auto;
 }
 
+
 /**
  * Address odd `em`-unit font size rendering in all browsers.
  */
 
-code,
+code, kbd, pre, samp {
-kbd,
-pre,
-samp {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
+
 /* Forms
    ========================================================================== */
 
+
 /**
  * Known limitation: by default, Chrome and Safari on OS X allow very limited
  * styling of `select`, unless a `border` property is set.
  */
 
+
 /**
  * 1. Correct color not being inherited.
  *    Known issue: affects color of disabled elements.
@@ -249,16 +261,16 @@ samp {
  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  */
 
-button,
+button, input, optgroup, select, textarea {
-input,
+  color: inherit;
-optgroup,
+  /* 1 */
-select,
+  font: inherit;
-textarea {
+  /* 2 */
-  color: inherit; /* 1 */
+  margin: 0;
-  font: inherit; /* 2 */
+  /* 3 */
-  margin: 0; /* 3 */
 }
 
+
 /**
  * Address `overflow` set to `hidden` in IE 8/9/10/11.
  */
@@ -267,6 +279,7 @@ button {
   overflow: visible;
 }
 
+
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
@@ -274,11 +287,11 @@ button {
  * Correct `select` style inheritance in Firefox.
  */
 
-button,
+button, select {
-select {
   text-transform: none;
 }
 
+
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
@@ -287,33 +300,36 @@ select {
  *    `input` and others.
  */
 
-button,
+button, html input[type="button"],
-html input[type="button"], /* 1 */
+/* 1 */
-input[type="reset"],
+
-input[type="submit"] {
+input[type="reset"], input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
-  cursor: pointer; /* 3 */
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
 }
 
+
 /**
  * Re-set default cursor for disabled elements.
  */
 
-button[disabled],
+button[disabled], html input[disabled] {
-html input[disabled] {
   cursor: default;
 }
 
+
 /**
  * Remove inner padding and border in Firefox 4+.
  */
 
-button::-moz-focus-inner,
+button::-moz-focus-inner, input::-moz-focus-inner {
-input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
+
 /**
  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
@@ -323,6 +339,7 @@ input {
   line-height: normal;
 }
 
+
 /**
  * It's recommended that you don't attempt to style these elements.
  * Firefox's implementation doesn't respect box-sizing, padding, or width.
@@ -331,23 +348,25 @@ input {
  * 2. Remove excess padding in IE 8/9/10.
  */
 
-input[type="checkbox"],
+input[type="checkbox"], input[type="radio"] {
-input[type="radio"] {
+  box-sizing: border-box;
-  box-sizing: border-box; /* 1 */
+  /* 1 */
-  padding: 0; /* 2 */
+  padding: 0;
+  /* 2 */
 }
 
+
 /**
  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
  * `font-size` values of the `input`, it causes the cursor style of the
  * decrement button to change from `default` to `text`.
  */
 
-input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
-input[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
+
 /**
  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
@@ -355,23 +374,26 @@ input[type="number"]::-webkit-outer-spin-button {
  */
 
 input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
+  /* 1 */
   -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
+  -webkit-box-sizing: content-box;
+  /* 2 */
   box-sizing: content-box;
 }
 
+
 /**
  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
  * Safari (but not Chrome) clips the cancel button when the search input has
  * padding (and `textfield` appearance).
  */
 
-input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
+
 /**
  * Define consistent border, margin, and padding.
  */
@@ -382,16 +404,20 @@ fieldset {
   padding: 0.35em 0.625em 0.75em;
 }
 
+
 /**
  * 1. Correct `color` not being inherited in IE 8/9/10/11.
  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  */
 
 legend {
-  border: 0; /* 1 */
+  border: 0;
-  padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
+
 /**
  * Remove default vertical scrollbar in IE 8/9/10/11.
  */
@@ -400,6 +426,7 @@ textarea {
   overflow: auto;
 }
 
+
 /**
  * Don't inherit the `font-weight` (applied by a rule above).
  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
@@ -409,9 +436,11 @@ optgroup {
   font-weight: bold;
 }
 
+
 /* Tables
    ========================================================================== */
 
+
 /**
  * Remove most spacing between table cells.
  */
@@ -421,7 +450,6 @@ table {
   border-spacing: 0;
 }
 
-td,
+td, th {
-th {
   padding: 0;
 }

static/js/app.js

@@ -1,8 +1,31 @@
 $(document).ready(function() {
   $('.scroll').perfectScrollbar();
 
+  $("#preview").click(function(e) {
+    e.preventDefault();
+
+    var preview = $("#preview-area"),
+      editor = $('.editor textarea');
+
+    if ($(this).attr("previewing") == "true") {
+      preview.hide();
+      editor.fadeIn();
+      $(this).attr("previewing", "false");
+    } else {
+      var converter = new showdown.Converter(),
+        text = editor.val(),
+        html = converter.makeHtml(text);
+
+      editor.hide();
+      preview.html(html).fadeIn();
+      $(this).attr("previewing", "true");
+    }
+
+    return false;
+  });
+
   $('form').submit(function(event) {
-    var data = JSON.stringify($(this).serializeField())
+    var data = JSON.stringify($(this).serializeForm())
     var url = $(this).attr('action')
     var action = $(this).find("input[type=submit]:focus").val();
 
@@ -18,9 +41,9 @@ $(document).ready(function() {
       dataType: 'json',
       encode: true,
     }).done(function(data) {
-      alert("it workss");
+      alert("It was saved and/or published");
     }).fail(function(data) {
-      alert("it failed");
+      alert("Something went wrong");
     });
 
     event.preventDefault();
@@ -43,13 +66,22 @@ $(document).ready(function() {
       });
     return false;
   });
+
+
+
+  $(".add").click(function(e) {
+    e.preventDefault();
+    fieldset = $(this).closest("fieldset");
+    fieldset.append("<input name=\"" + fieldset.attr("name") + "\" id=\"" + fieldset.attr("name") + "\" value=\"\"></input><br>");
+    return false;
+  });
 });
 
 
-$.fn.serializeField = function() {
+$.fn.serializeForm = function() {
   var result = {};
   this.each(function() {
-    $(this).find(".container > *").each(function() {
+    $(this).find(".data > *").each(function() {
       var $this = $(this);
       var name = $this.attr("name");
 
@@ -61,7 +93,7 @@ $.fn.serializeField = function() {
             result[this.name].push(this.value);
           });
         } else {
-          result[name] = $this.serializeField();
+          result[name] = $this.serializeForm();
         }
       } else {
         $.each($this.serializeArray(), function() {

templates/base_full.tmpl

@@ -17,6 +17,7 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.5/js/min/perfect-scrollbar.jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.2.3/showdown.min.js"></script>
   <script src="/admin/static/js/app.js"></script>
 </head>
 

templates/edit.tmpl

@@ -1,16 +1,15 @@
 {{ define "content" }} {{ with .Body }}
 
 <main class="editor">
-  <form method="POST" action="_self">
+  <form method="POST" action="">
-    <div class="sidebar scroll">
+    <div class="sidebar data scroll">
       <h2>Metadata</h2>
       {{ template "frontmatter" .FrontMatter }}
     </div>
 
-    <div class="container">
+    <div class="container data">
-      <textarea name="content" class="scroll">
+      <textarea name="content" class="scroll">{{ .Content }}</textarea>
-        {{ .Content }}
+      <div id="preview-area" class="scroll hidden"></div>
-      </textarea>
     </div>
 
     <div class="action-bar">

templates/frontmatter.tmpl

@@ -2,9 +2,8 @@
   {{ range $key, $value := . }}
     {{ if or (eq $value.Type "object") (eq $value.Type "array") }}
       <fieldset name="{{ $value.Name }}" type="{{ $value.Type }}">
-        <legend>{{ splitCapitalize $value.Name }}</legend>
+        <h3>{{ splitCapitalize $value.Name }}   <button class="add"><i class="fa fa-plus"></i></button></h3>
         {{ template "frontmatter" $value.Content }}
-        <button><i class="fa fa-plus"></i> Add field</button>
       </fieldset>
     {{ else }}
     {{ if not (eq $value.Parent "array") }}