Initial commit

_includes/feature/timelinejs.html

@@ -0,0 +1,31 @@
+{% 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>