Reference Google Spreadsheet (CSV) in Jekyll Data

I am managing a website displaying a lot of tabular data (language stuff) and running on Jekyll. I really like to display content based on a CSV file stored in the _data folder of Jekyll.

I would like to be able to edit / add / remove content from this CSV directly on Google and then reference it to Jekyll (like a shortcut or something that sync the CSV content from Google to my static folder).

Which way would be the simplest to reference an external file (either in the _data folder or directly in my templace). I can find the CSV file with this kind of link but downloading it every time is a hassle (https://docs.google.com/spreadsheets/d//export?format=csv).

How can Jekyll understand data from external stored file (maybe in javascript ?).

Thank you.

Solution

Getting datas from google docs is becoming harder ;-(

I've tried with jquery.ajax but I met the CORS limitation.

Then I found tabletop and it works !

go to your google spreadsheet and File > Publish to the web > Start publishing
note the publish url
download tabletop script and save it to eg: js/tabletop.js

put a link at the bottom of your _includes/header.html eg

<script src="`{{ site.baseurl }}`/js/tabletop.js"></script>

in a data.html page put

---
title: csv to json
layout: page
---
<div id="csvDatas"></div>

you can now get your datas with a js/script.js file that you've also included at the very end of you _includes/footer.html

var csvParse = function() {

    // put you document url here
    var sharedDocUrl = 'https://docs.google.com/spreadsheets/d/1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8/pubhtml'

    // can also be only the ID
    // var sharedDocUrl = '1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8'

    var targetDiv = 'csvDatas';

    // holds datas at a closure level
    // this then can be accessed by closure's functions
    var dataObj;

    function showInfo(data, tabletop) {
        dataObj    = data;
        var table  = generateTable();
        var target = document.getElementById(targetDiv);
        target.appendChild(table);
    }

    function generateTable(){
        var table = document.createElement("table");
        var head  = generateTableHeader();
        table.appendChild(head);
        var body  = generateTableBody();
        table.appendChild(body);
        return table;
    }

    function generateTableHeader(){
        var d         = dataObj[0];
        var tHead     = document.createElement("thead");
        var colHeader = [];
        $.each(d, function( index, value){
            console.log(index + ' : ' + value);
            colHeader.push(index);
        });
        var row = generateRow(colHeader, 'th');
        tHead.appendChild(row);
        return tHead;
    }

    // this can be factorized with generateTableHeader
    function generateTableBody(){
        var tBody = document.createElement("tbody");
        $.each(dataObj, function( index, value ){
            var rowVals = [];
            $.each(value, function(colnum, colval){
                rowVals.push(colval);
            });
            var row = generateRow(rowVals);
            tBody.appendChild(row);
        });
        return tBody;
    }

    function generateRow(headersArray, cellTag){
        cellTag = typeof cellTag !== 'undefined' ? cellTag : 'td';
        var row = document.createElement("tr");
        $.each(headersArray, function( index, value){
            if( value != "rowNumber"){
                var cell     = document.createElement(cellTag);
                var cellText = document.createTextNode(value);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
        });
        return row;
    }

    return {
        init: function() {

            if( $('#' + targetDiv).length ){
                Tabletop.init( { key: sharedDocUrl  ,
                         callback: showInfo,
                         simpleSheet: true } );
            }else{
                console.log('Not the good page to parse csv datas');
            }
        }
    };
}();

$( document ).ready(function() {
    csvParse.init();
});