TimelineJS include for Jekyll

timelinejs-include.md

{% include timelinejs.html json-source="" %}

timelinejs.html

<!-- CSS and Fonts -->
<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.opensans-gentiumbook.css">

<!--

The second link sets the font combination – currently OpenSans/Gentium Book. Here are all the values which you might use there:

font.abril-droidsans.css
font.amatic-andika.css
font.bevan-pontanosans.css
font.bitter-raleway.css
font.clicker-garamond.css
font.dancing-ledger.css
font.default.css
font.fjalla-average.css
font.georgia-helvetica.css
font.knightlab.css
font.lustria-lato.css
font.medula-lato.css
font.oldstandard.css
font.opensans-gentiumbook.css
font.playfair-faunaone.css
font.playfair.css
font.pt.css
font.roboto-megrim.css
font.rufina-sintony.css
font.ubuntu.css
font.unicaone-vollkorn.css
-->

<!-- Timeline.js from the KnightLab CDN -->
<script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<!-- The script  -->
<script type="text/javascript">
  var options = {
    is_embed: true,
    is_full_embed: true,
    initial_zoom: 2
  }

  // The TL.Timeline constructor takes at least two arguments:
  // the id of the Timeline container (no '#'), and
  // the URL to your JSON data file or Google spreadsheet.
  // the id must refer to an element "above" this code,
  // and the element must have CSS styling to give it width and height
  // optionally, a third argument with configuration options can be passed.
  // See below for more about options.
  timeline = new TL.Timeline('timeline-embed',
    '{{ include.json-source }}');
</script>

One should, theoretically, be able to input a YAML file (easier to write and inspect) instead of JSON by importing the YAML library:

  const fs = require('fs')
  const YAML = require('yaml')
  const file = fs.readFileSync('{{ include.yaml-source }}', 'utf8')
  var timeline_json = YAML.parse(file);
  timeline = new TL.Timeline('timeline-embed', timeline_json, options);