generate-readme.js

const fs = require('fs');

const CANVAS_TABLE = '<!-- INSERT_CANVAS_TABLE -->';
const README_TEMPLATE = './README.template.md';
const TARGET_FILE = 'README.md';
const PROJECTS_DATA = './data.json';

(() => {
  const input = fs.readFileSync(README_TEMPLATE, 'utf-8').split('\n');

  const output = [
    '<!-- This file is auto generated do not edit this file directly -->',
    '<!-- Edit the README.template.md file instead -->',
  ]

  for (let i = 0; i < input.length; i++) {
    if (input[i].includes(CANVAS_TABLE)) {
      output.push(generateTable(PROJECTS_DATA))
    } else {
      output.push(input[i]);
    }
  }

  fs.writeFileSync(TARGET_FILE, output.join('\n'));
})()



function generateTable(data) {
  let jsonData;
  let output = [];
  let str = '';
  const COLUMNS = 6;
  let count = COLUMNS + 1;

  try {
    jsonData = JSON.parse(fs.readFileSync(data, 'utf-8'));
  } catch (err) {
    throw new Error(err);
  }

  output.push('<table>');
  
  for (let i = 0; i < jsonData.length; i++) {
    let markup = `
      <td align="center">
        <a href="${jsonData[i].demo}">
          <img src="${jsonData[i].img}" width="150" alt="${jsonData[i].demo}"/><br />
          <sup><b>${jsonData[i].title}</b></sup>
        </a>
        <br />
        <a href="${jsonData[i].src}">
          <img alt="source code" width="18px;" src="./thumbnails/github_icon.png" />
        </a>
      </td>
    `

    // construct the string
    if (count > COLUMNS) {
      // if index is not 1st one then add a closing tag
      i !== 0 && (str += '</tr>');
      str += '<tr>';
      str += markup;
      count = 1;
    } else {
      str += markup;
    }
    count++;
  }

  // add the last closing </tr>
  str += '</tr>';
  str = str.replace(/^\s+/igm, '');
  output.push(...[str, '</table>']);

  return output.join('\n');
}