Add CSV data into SS from google drive

README.md

Link data stored in your Google Drive as CSV file into Squarespace.

You need to add the script provide in this gist to your Squarespace site using Code-injectin option and add the cde to the footer section.

Configurable options : IMPORTANT

targetNode:

This is a list element ( <ul> element in HTML) that you need to populate

googleDriveLink:

Add your file to google drive, and then use "get Link" option to generate link. Please make sure that its readable by anyone with access to link.

The below code shows an exmaple where its targetting a ul list and adding links to it dynamically from a csv where where we have two columns. Name and link. The name contains the display name of the item and the link column contains the url

example.csv

footer-script.html

<script>
document.addEventListener('DOMContentLoaded', function() {
  
  var targetNode = document.querySelector("#block-yui_3_17_2_1_1682120310141_3202 ul");
  
  var googleDriveLink = "https://drive.google.com/file/d/1KtZ8xAWOsO79Li6MraAtwldtZimhV57W/view?usp=share_link"
  
  if (targetNode !== null) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', convertDriveLink(googleDriveLink), true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = xhr.responseText;
        processData(data);
      }
    };
    xhr.send();
  }
  
  function processData(data) {
    items = getDataAsDict(data);
    if(items.length)
    	items.forEach(item=>{createLinks(item.name, item.link)});
  } 
  
  function convertDriveLink(link) {
    const fileId = link.match(/\/d\/(.+?)\//)[1];
    return `https://corsproxy.io/?https://drive.google.com/uc?id=${fileId}&export=download`;
  }
  
  function getDataAsDict(allText){
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];
    for (var i=1; i<allTextLines.length; i++) {
      var data = allTextLines[i].split(',');
      if (data.length == headers.length) {
        var tarr = {};
        for (var j=0; j<headers.length; j++) {
          tarr[headers[j]] = data[j].trim();
        }
        lines.push(tarr);
      }
    }
    return lines
  }
  
  function createLinks(text, href){
    var li = document.createElement("li");
    var p = document.createElement('p')
    var link = document.createElement('a')
    link.innerHTML = text
    link.href = href
    link.target = "_blank"
    p.appendChild(link);
    li.appendChild(p);
    targetNode.appendChild(li);
  }
  
});
</script>