cms.html

---
layout: default
type: "Create new post"
include_header: cms_header.html
nav_item: cms
permalink: /cms.html
init_scripts:
  - '/assets/js/bootstrap.min.js'
  - '/assets/js/jquery-2.1.4.min.js'
extra_styles:
  - '/assets/css/bootstrap.css'
  - '/assets/css/bootstrap-theme.css'
---
  <div class="mxn2 clearfix mb2 border-bottom border-light-gray circle-line py3">
	<div class="container" id="container1" >
        <br>
	{% if site.data.config.github.repo == none %}
		<div class="alert alert-danger" role="alert"><code>github.repo</code> is not set.</div>
	{% endif %}
	{% if site.data.config.github.branch == none %}
		<div class="alert alert-danger" role="alert"><code>github.branch</code> is not set.</div>
	{% endif %}
	<div id="messages"></div>
	<form id="theform" method="get">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="Post Title" id="p_title" name="title">
		</div>
                <div class="form-group">
                        <input type="text" class="form-control" placeholder="Post Tags" id="p_tags" name="title">
                </div>
		<div class="form-group">
			<textarea class="form-control" rows="10" id="p_body" placeholder="Type your post here." name="body"></textarea>
		</div>
		<div class="form-inline">
			<div class="form-group">
				<label for="username" class="sr-only">Username</label>
				<input type="text" class="form-control" id="username" placeholder="Username">
			</div>
			<div class="form-group">
				<label for="password" class="sr-only">password</label>
				<input type="password" class="form-control" id="password" placeholder="Password">
			</div>
			<input type="button" class="btn btn-default" id="go" value="Post" /> 
		</div>
		<div class="collapse" id="submitform">
		<br>
		</div>
	</form>
	</div>

	<script>
	function get_query(){
            // Source: http://fellowtuts.com/jquery/getting-query-string-values-in-javascript/
	    var url = document.location.href;
	    if (url.indexOf('?') == -1) return false ;
	    var qs = url.substring(url.indexOf('?') + 1).split('&');
	    for(var i = 0, result = {}; i < qs.length; i++){
	        qs[i] = qs[i].split('=');
	        result[qs[i][0]] = decodeURIComponent(qs[i][1].replace(/\+/g, '%20'));
	    }
	    return result;
	}

	function getSelectionText() {
		
		return text;
	}

	function post_file(title) {
		var d = new Date()
		var dd = d.getDate()
		if ( dd < 10 ) dd = '0' + dd ;
		var mm = d.getMonth()+1 ;
		if ( mm < 10 ) mm = '0' + mm ;
		var yyyy = d.getFullYear() ;
		filename = yyyy+'-'+mm+'-'+dd ;
		if (!title) {
			filename = filename + '-' + +d.getTime() ;
		} else {
			var slugified = title.toLowerCase().replace(/\W+/g, '-') ;
			if (slugified!='-') {
				filename = filename + '-' + slugified ;
			} else {
				filename = filename + '-' + d.getTime();
			}
		}
		return filename
	}
	function post_date() {
		var d = new Date()
		return d.toISOString()
	}

	var API_NEW_POST = 'https://api.github.com/repos/{{ site.data.config.github.repo }}/contents/_posts/' ;

	$("#go").click(function() {
		var user = $('#username').val() ;
		var password = $('#password').val() ;
		var title = $('#p_title').val() ;
                var tags= $('#p_tags').val() ;

		var p_body = '---\n' ;
		p_body = p_body + 'layout: post \n' ;
		p_body = p_body + 'title:  "' + title +'" \n';
		p_body = p_body + 'date:   '+ post_date() +' \n' ;
		/* Setting the category here is not the most elegant way...
		p_body = p_body + 'categories: tests \n'; 
		*/
                p_body = p_body + 'tags: [' + tags +'] \n';
		p_body = p_body + '---\n';
		p_body = p_body + '\n' + $('#p_body').val();

		var posted_ok = false ;
	    $.ajax({
	        dataType: "json",
	        contentType: 'application/json; charset=UTF-8',
	        url: API_NEW_POST+post_file(title)+'.md',
	        type: "PUT",
	        data: JSON.stringify({
	        	content: btoa(unescape(encodeURIComponent(p_body))),
	        	message: 'posted via web',
	        	branch: '{{ site.data.config.github.branch }}'
	        }),
	        beforeSend: function(xhr) { 
	        	xhr.setRequestHeader("Authorization", "Basic " + btoa(user+":"+password)); 
	    	},
	        success: function(data) {
	        	posted_ok = true ;
	        	$('#container1').html('<h3>Successfully posted ...</h3><br>See the <a href="/writing">posts</a> ') ;
	        },
	        error: function(request, status, error) {
	        	responseText = jQuery.parseJSON( request.responseText );
        		$('#messages').append($('<div class="alert alert-danger alert-dismissible" role="alert">')
                        .append('<strong>' + request.status + '</strong>: ' + responseText.message )
        		.append('<br>Failed auth, wrong personal access tokens. ')
        		.append('</div>'));
	        	
	        },
	      })
	       ;
	});

	query_params = get_query();

	if (query_params) {
		src_body = '';
		if (query_params['title']) {
			src_title = query_params['title'] ;
			$('#p_title').val(src_title) ;
		}
		if (query_params['tags']) {
			src_body = '> ' + query_params['tags'] ;
		}
		if (query_params['body']) {
			src_body = query_params['body'] ;
		}
		if (query_params['url']) {
			src_body = src_body + ' &#x2014;['+src_title+'](' + query_params['url'] + ')\n' ;
		}
		$('#p_body').val(src_body) ;
	}

	</script>
  </div>
  <p>
        <i class="fa fa-fw fa-lg fa-info-circle"></i>
        This is a simple way to post with limited capabilities.
  </p>