statixite 1.0.0

data/app/assets/javascripts/statixite/application.js

@@ -0,0 +1,8 @@
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap/dist/js/bootstrap
+//= require notifyjs/dist/notify
+//= require statixite/notify-defaults
+//= require statixite/array-helpers
+//= require statixite/loader
+//= require vue/dist/vue

data/app/assets/javascripts/statixite/array-helpers.js

@@ -0,0 +1,13 @@
+// last element in array
+if (!Array.prototype.last){
+  Array.prototype.last = function(){
+    return this[this.length - 1];
+  };
+};
+
+// first element in array
+if (!Array.prototype.first){
+  Array.prototype.first = function(){
+    return this[0];
+  };
+};

data/app/assets/javascripts/statixite/editor.js

@@ -0,0 +1,244 @@
+var jsonContainer = document.getElementById("jsoneditor");
+var jsonEditor = new JSONEditor(jsonContainer, {
+  change: function() {
+    mdEditor.$data.front_matter = jsonEditor.get();
+  }
+});
+function ValidURL(str) {
+  var pattern = new RegExp('^(https?:\/\/)?$') // protocol
+  if(!pattern.test(str)) {
+    return false;
+  } else {
+    return true;
+  }
+}
+var mdEditor = new Vue({
+  el: "#editor",
+  data: {
+    input: '# hello',
+    boldText: '',
+    italicText: '',
+    listItems: [],
+    listItem: '',
+    link: {},
+    video: {},
+    photos: [],
+    selectedText: '',
+    front_matter: {
+      title: ''
+    },
+    slug: ''
+  },
+  filters: {
+    marked: marked
+  },
+  created: function () {
+    var that = this;
+    $(document).ready(function() {
+      Dropzone.autoDiscover = false;
+      var mediaDropzone;
+      mediaDropzone = new Dropzone("#media-dropzone", { addRemoveLinks: false });
+      mediaDropzone.on("success", function(file, responseText) {
+        $.ajax({
+          url: '/statixite/sites/' + responseText.media.site_id + '/media',
+          data: {
+            format: 'json'
+          },
+          success: function(response) {
+            that.photos = response;
+            $.getScript('/statixite/sites/' + response[0].site_id + '/media');
+          }
+        });
+        //that.photos.unshift(responseText.media);
+        this.removeFile(file);
+        that.input += "\n<!-- Beg Image -->\n";
+        that.input += "<img src='" + responseText.media.file.url + "' alt='' style='max-width: 100%; height: auto;'/>\n";
+        that.input += "<!-- End Image -->\n";
+      });
+    });
+    $(document).on('click', '.pagination a', {}, function() {
+      var link = this;
+      $.ajax({
+        url: link.href,
+        data: {
+          format: 'json'
+        },
+        success: function(response) {
+          that.photos = response;
+        }
+      });
+    });
+  },
+  methods: {
+    addBoldText: function() {
+      this.input = this.input + " **" + this.boldText + "**";
+      this.boldText = '';
+      $('#boldText').modal('hide');
+    },
+    addItalicText: function() {
+      this.input = this.input + " *" + this.italicText + "*";
+      this.italicText = '';
+      $('#italicText').modal('hide');
+    },
+    addListItem: function() {
+      this.listItems.push(this.listItem);
+      this.listItem = '';
+    },
+    addList: function() {
+      this.input = this.input + "\n";
+      for ( i in this.listItems ) {
+        this.input += "* " + this.listItems[i] + "\n"
+      }
+      this.listItems = [];
+      $('#listModal').modal('hide');
+    },
+    addLink: function() {
+      var text = mdEditor.getSelectedText;
+      this.input += " [" + this.link.text + "](" + this.link.url +")";
+      this.link = {};
+      $('#linkModal').modal('hide');
+    },
+    addVideo: function() {
+      var videoEmbed;
+      var divStyle = 'height: 0; margin-bottom: 0.88889rem; overflow: hidden; padding-bottom: 67.5%; padding-top: 1.38889rem; position: relative;';
+      var iframeStyle = 'height: 100%; position: absolute; top: 0; width: 100%; left: 0;';
+      switch(mdEditor.domain) {
+        case 'youtu.be':
+          var videoArray = this.video.url.split('/');
+          var videoId = videoArray[videoArray.length - 1];
+          videoEmbed = '<div style="' + divStyle + '"><iframe style="' + iframeStyle + '" src="https://www.youtube.com/embed/' + videoId +'" frameborder="0" allowfullscreen></iframe></div>';
+          break;
+        case 'www.youtube.com':
+          if ( this.video.url.includes('embed') ) {
+            videoEmbed = '<div style="' + divStyle + '"><iframe style="' + iframeStyle + '" src="' + this.video.url +'" frameborder="0" allowfullscreen></iframe></div>'
+          } else {
+            var videoArray = this.video.url.split('v=');
+            var videoId = videoArray[videoArray.length - 1];
+            videoEmbed = '<div style="' + divStyle + '"><iframe style="' + iframeStyle + '" src="https://www.youtube.com/embed/' + videoId +'" frameborder="0" allowfullscreen></iframe></div>';
+          }
+          break;
+        case 'vimeo.com':
+          var videoArray = this.video.url.split('/');
+          var videoId = videoArray[videoArray.length - 1];
+          videoEmbed = '<div style="' + divStyle + '"><iframe style="' + iframeStyle +'" src="https://player.vimeo.com/video/' + videoId + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
+        default:
+          break;
+      }
+      if ( videoEmbed ) {
+        this.input += "\n";
+        this.input += "<!-- Video -->\n";
+        this.input += videoEmbed;
+        this.input += "\n<!-- End Video -->\n";
+        this.input += "\n";
+      }
+      this.video.url = '';
+      $('#videoModal').modal('hide');
+    },
+    cancelModal: function() {
+      this.boldText = '';
+      this.italicText = '';
+      this.listItems = [];
+      this.listItem = '';
+      this.link = {};
+    },
+    insertMedia: function(e, media) {
+      e.preventDefault();
+      var file_url = media.file.url
+      this.input += "\n<!-- Beg Image -->\n";
+      if ( ValidURL(media.file.url) ) {
+        this.input += "<img src='" + media.file.url + "' alt='' style='max-width: 100%; height: auto;'/>\n";
+      } else {
+        this.input += "<img src='" + file_url.split("clone")[1] + "' alt='' style='max-width: 100%; height: auto;'/>\n";
+      }
+      this.input += "<!-- End Image -->\n";
+      $.notify('Inserted', 'success');
+    },
+    addPost: function(e, submit) {
+      e.preventDefault();
+      var that = this;
+      var $form = $("#postForm");
+      if ( submit ) {
+        if ( window.location.href.match(/posts\/new/) ) {
+          var method = 'POST';
+        } else {
+          var method = 'PUT';
+        }
+        $.ajax({
+          type: method,
+          dataType: 'json',
+          contentType: 'application/json',
+          url: $form.attr('action'),
+          data: JSON.stringify(that.getFormValues($form)),
+          success: function(response) {
+            $.notify('Post Saved', 'success');
+            setTimeout(function(){
+              if ( window.location.href.match(/posts\/new/) ) {
+                window.location.href = '/statixite/sites/' + response.site_id + '/posts/' + response.id + '/edit';
+              }
+            }, 2000);
+          },
+          error: function(xhr, status, error) {
+            if ( xhr.responseJSON.errors.title ) {
+              $.notify('Title ' + xhr.responseJSON.errors.title[0], 'error');
+            } else {
+              $.notify('Something went wrong', 'error')
+            }
+          }
+        });
+      }
+    },
+    getFormValues: function($form){
+      return {
+        post: {
+          type: 'Post',
+          title: this.title,
+          front_matter: this.front_matter,
+          content: this.input
+        }
+      }
+    }
+  },
+  computed: {
+    domain: function() {
+      if (this.video.url.indexOf("://") > -1) {
+        videoDomain = this.video.url.split('/')[2];
+      }
+      else {
+        videoDomain = this.video.url.split('/')[0];
+      }
+      videoDomain = videoDomain.split(':')[0];
+      return videoDomain;
+    },
+    getSelectedText: function() {
+        if (window.getSelection) {
+            return window.getSelection().toString();
+        } else if (document.selection) {
+            return document.selection.createRange().text;
+        }
+        return '';
+    },
+    title: {
+      get: function() {
+        return this.front_matter.title;
+      },
+      set: function(newValue) {
+        return newValue;
+      }
+    }
+  },
+  ready: function() {
+    this.front_matter = $('#frontMatterData').data('front-matter');
+    if ( this.front_matter.title == undefined ) {
+      this.front_matter.title = "";
+    }
+    if ( this.front_matter.date == undefined ) {
+      var today = new Date();
+      this.front_matter.date = today.toISOString().slice(0,10);
+    }
+    if ( this.front_matter.layout == undefined ) {
+      this.front_matter.layout = 'post';
+    }
+    jsonEditor.set(this.front_matter);
+  }
+})
+

data/app/assets/javascripts/statixite/loader.js

@@ -0,0 +1,14 @@
+$(document).ajaxStart(function() {
+  $("#ajaxLoader").show();
+});
+
+$(document).ajaxStop(function() {
+  $("#ajaxLoader").hide();
+});
+
+$(document).ajaxError(function(event, jqXHR) {
+  if ( jqXHR.status == 401 ) {
+    window.location.replace('/users/sign_in');
+  }
+});
+

data/app/assets/javascripts/statixite/notify-defaults.js

@@ -0,0 +1,5 @@
+$(function() {
+  $.notify.defaults({
+    globalPosition: 'left middle'
+  });
+})

data/app/assets/stylesheets/statixite/application.less

@@ -0,0 +1,271 @@
+@import "bootstrap_and_overrides";
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+body {
+  padding-top: 50px;
+}
+
+body > .container {
+  padding: 60px 15px 0;
+}
+.container .text-muted {
+  margin: 20px 0;
+}
+
+.footer > .container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+  display: none;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 51px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #f5f5f5;
+    border-right: 1px solid #eee;
+    .nav-sidebar {
+      margin-right: -21px; /* 20px padding + 1px border */
+      margin-bottom: 20px;
+      //margin-left: -20px;
+      /* all links */
+      >li>a {
+          color: #999;
+          border-left: 2px solid transparent;
+          padding: 4px 20px;
+          font-size: 13px;
+          font-weight: 400;
+      }
+
+      /* nested links */
+      ul>li>a {
+          padding-top: 1px;
+          padding-bottom: 1px;
+          padding-left: 30px;
+          font-size: 12px;
+      }
+
+      /* active & hover links */
+      >.active>a,
+      >li>a:hover,
+      >li>a:focus {
+          color: @brand-primary;
+          text-decoration: none;
+          background-color: transparent;
+          border-left-color: @brand-primary;
+      }
+      /* all active links */
+      >.active>a,
+      >.active:hover>a,
+      >.active:focus>a {
+          font-weight: 700;
+      }
+      /* nested active links */
+      ul>.active>a,
+      ul>.active:hover>a,
+      ul>.active:focus>a {
+          font-weight: 500;
+      }
+    }
+    > li > a {
+      padding-right: 20px;
+      padding-left: 20px;
+    }
+
+  }
+}
+
+/*
+ * Main content
+ */
+
+.main {
+  padding: 20px;
+}
+@media (min-width: 768px) {
+  .main {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+.main iframe#site-preview {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    border:none;
+}
+
+/*
+ * Placeholder dashboard ideas
+ */
+
+.placeholders {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.placeholders h4 {
+  margin-bottom: 0;
+}
+.placeholder {
+  margin-bottom: 20px;
+}
+.placeholder img {
+  display: inline-block;
+  border-radius: 50%;
+}
+
+/* Markdown Editor */
+
+#editor textarea, #editor .preview {
+  display: inline-block;
+  width: 49%;
+  height: 600px;
+  vertical-align: top;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+#editor .preview {
+  overflow-y: auto
+}
+
+#editor textarea {
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
+#editor .panel-body {
+  padding: 0;
+}
+
+#dropzone {
+  background: #fff;
+  width: 100%;
+  height: auto;
+  line-height: 50px;
+  text-align: center;
+  font-weight: bold;
+  .in {
+    width: 100%;
+    height: auto;
+    line-height: 600px;
+    font-size: larger;
+  }
+  .hover {
+    background: #efefef;
+  }
+  .fade {
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+    opacity: 1;
+  }
+  .control-label {
+    display: none;
+  }
+}
+
+input#post_photos {
+  display: none;
+}
+
+.attachinary_container ul {
+  list-style-type: none;
+}
+
+.attachinary_container ul li {
+  display: inline;
+  padding: 5px;
+  float: left;
+}
+
+#codeEditor {
+  width: 100%;
+  height: 600px;
+  height: 70vh;
+}
+
+#codeEditor {
+  .modal-body {
+    padding: 0px;
+  }
+}
+
+div#templateTree {
+  .parent {
+    font-family: Menlo, Consolas, monospace;
+    color: #444;
+  }
+  .item {
+    cursor: pointer;
+    line-height: 40px;
+  }
+  ul {
+    padding-left: 1em;
+    line-height: 1.5em;
+    list-style-type: none;
+  }
+  .bold {
+    font-weight: bold;
+  }
+}
+div#ajaxLoader {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: 2000;
+  background-color: rgba(0,0,0,0.2);
+  .loader {
+    background: image-url('statixite/ring-alt.gif') no-repeat center center;
+    height: 100%;
+  }
+}