{% comment %}

    Embed a TimelineJS feature, https://timeline.knightlab.com/

    E.G. --> {% include feature/timelinejs.html %}

    Embeds a TimelineJS built from a JSON file appropriate for any CollectionBuilder page (such as Home or About page).
    CB templates automatically generate a timelinejs json file in "assets/data/timelinejs.json" including all items in metadata with a value in "date" field.
    By default, this include uses this json file. 

    Options:
    - "json" = (optional) path or link to timelinejs json file. 

{% endcomment %}
{%- assign json = include.json | default: '/assets/data/timelinejs.json' | relative_url -%}
<!-- timelinejs, https://timeline.knightlab.com/ -->
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

<div id="timeline-embed" style="width: 100%; height: 800px" class="mb-4"></div>

<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script type="text/javascript">
    // 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', '{{ json }}');
</script>
