@knight-lab/timelinejs 3.8.18 → 3.8.19

package/{CHANGELOG → CHANGELOG.md}

@@ -1,122 +1,158 @@
+3.8.19 (2022-01-07)
+------------------
+* #724 - Alternate syntax for compatibility with Vite, probably other tooling.
+
 3.8.18 (2021-06-08)
+------------------
 * #699 - remove duplicate definition of _onStorySliderLoaded in Timeline.js
 * #700 - remove duplicate definition of _onTimeNavLoaded in Timeline.js
 * #705 - Export Timeline class and include generated CSS in npm package
 
 3.8.17 (2021-04-19)
+------------------
 * #696 - implement pause on audio/video media types
 * Add support for direct webm video URLs
 * Update several npm dependencies
 
 3.8.16 (2021-04-02)
+------------------
 * Add hash change listener so that timelines with `hash_bookmark` option respond to hash changes after loading. (#692)
 
 3.8.15 (2021-02-17)
+------------------
 * Fix straggling JSON syntax error in en.json example file.
 * Fix bug introduced with cosmological date formatting to do with inconsistencies between Language.js and en.json
 
 3.8.14 (2021-02-14)
+------------------
 * Make en.json proper JSON (remove comments) now that new codepath is causing it to be DOMContentLoaded
 * Add better error handling to Net.js just in case.
 * Resolve not to release code on Friday afternoon
 
 3.8.13 (2021-02-12)
+------------------
 * #682: adjust language loading to make sure its done before drawing timeline.
 
 3.8.12 (2021-01-25)
+------------------
 * #363,670: remove synchronous XMLHttpRequests
 * #672: support Spotify podcasts
 * #649: better handling of a/href tags to open in new windows, or to follow specified target values
 
 3.8.11 (2020-11-23)
+------------------
 * Improve error messaging re issues retrieving configuration data from Google.
 
 3.8.10 (2020-11-03)
+------------------
 * Change Instagram handling to catch up to their API changes. (#664)
 
 3.8.9 (2020-10-23)
+------------------
 * Fix pattern matching and URL parsing for using Google Drive documents.
 * Adjust rules for loading font to support relative/fragment URLs for `font` config option
 
 3.8.8 (2020-10-20)
+------------------
 * fix error in TL.lookupMediaType  
 
 3.8.7 (2020-10-20) INVALID RELEASE DO NOT USE
+------------------
 * clearer error messaging if time is used without date
 * strip all whitespace from both ends of header cells
 * expose TL.lookupMediaType as a publicly accessible function (formerly TL.MediaType before 3.7.0)
 
 3.8.6 (2020-09-29)
+------------------
 * #659: Prevent blank column headers from derailing Timeline load
 
 3.8.5 (2020-09-28)
+------------------
 * check for null when validating date inputs from CSV
 
 3.8.4 (2020-09-28)
+------------------
 * #655: treat all-whitespace Google Sheets values as blank and don't try to process them
 * #656: chomp excess whitespace around header values/object keys.
 * #658: clean integer values for dates -- strip whitespace and comma
 
 3.8.3 (2020-09-25)
+------------------
 * Make CSV parser always return strings (fixes bug where V1 Sheets with year-only dates were assumed to be strings)
 * Log instead of throw error when trying to add an event in TimelineConfig that has no start date
 
 3.8.2 (2020-09-25)
+------------------
 * Fix a bug in ConfigFactory date processing which was adding unintended "January 1, 0" end dates.
 
 3.8.1 (2020-09-23)
+------------------
 * Change Timeline's Google Sheets access method in advance of the discontinuation of Google Sheets API v3. See https://knightlab.northwestern.edu/2020/09/16/timelinejs-update-2/index.html for more information. All self-hosted timeline users should update to this version before 2020-09-30.
 
 3.8.0 (2020-09-23)
+------------------
 * Discarded release: failed to merge key changes into master branch.
 
 3.7.9 (2020-09-17)
+------------------
 * #654: Attempt to avoid 'overlapping' slides. Mixed feedback on if this is a complete solution.
 
 3.7.8 (2020-09-02)
+------------------
 * #651: Restore document loading check with proper binding
 
 3.7.7 (2020-08-26)
+------------------
 * #651: rollback document loading check after error reports
 
 3.7.6 (2020-08-25)
+------------------
 * Add a check of the document's loading status, and defer layout until DOMContentLoaded, in response to reports of timelines where all slide content overlaps.
 * Introduce a 'ready' event, which TimelineJS will fire after all other initialization is complete.
 * Support a Timeline option, `soundcite`, which triggers the loading of Knight Lab's SoundciteJS code, enabling the use of SoundCite markup in all HTML-capable Timeline fields.
 * Fix error messages in Imgur media type
 
 3.7.5 (2020-07-22)
+------------------
 * More fixes to handling default font case
 * add missing import for Wistia media type
 
 3.7.4 (2020-07-21)
+------------------
 * Fix #645: restore removeId to public API for a Timeline
 * Fix: only load font.default.css when no other font is specified; otherwise
        cascade rules are inconsistent with old behavior.
 
 3.7.3 (2020-07-16)
+------------------
 * Fix stupid bugs introduced with incomplete testing.
 
 3.7.2 (2020-07-16)
+------------------
 * Fix variable naming error when handling thrown exceptions in adding eras
 * Fix name of div in developer "embed" template to restore ability to switch data source for dev view
 * don't routinely sanitize media URLs; instead, place that responsibility on Media subclasses for which the 'url' is actually used with markup
 
 3.7.1 (2020-07-10)
+------------------
 * Protect against undefined/null options in constructor
 * Pass a valid message container for 'swipe to navigate' #644
 
 3.7.0 (2020-07-09)
+------------------
 * Internal rewrite to use modern JavaScript
 * Sanitize HTML inputs
 
 3.6.6 (2020-03-11)
+------------------
 * Replace Flickr API key
 
 3.6.5 (2019-05-01)
+------------------
 * Revert construction of Google feeds URL to pre-3.6.4 pattern which should be more universally correct.
 
 3.6.4 (2019-04-30)
+------------------
 * Fall back to Google Sheets API v4 when 500 error found using v3 (Workaround for Google API failure)
 * Issue #598 - use 24-hr time for Portuguese
 * PR #599 allow text selection on all devices
@@ -124,29 +160,37 @@
 * PR #609 fixes #577 link hover on slides w/ background images
 
 3.6.2 (2018-12-20)
+------------------
 * PR #592 adds missing woff2 font to fix nav arrows on MS Edge
 * PR #594 Updated Czech (Čeština) translations
 
 3.6.1 (2018-10-10)
+------------------
 * Correct translation of "July" in Slovenian.
 
 3.6.0 (2018-06-11)
+------------------
 * Configure Google Analytics tracking to anonymize_ip for GDPR compliance
 
 3.5.4 (2017-12-15)
+------------------
 * PR #331 fixes bug that was causing duplications of groups
 * Fix to allow missing media in JSON #565
 
 3.5.3 (2017-11-07)
+------------------
 * Remove 1px offset that causes white line along top of Timeline
 
 3.5.2 (2017-10-26)
+------------------
 * PR #554 adds direction to .tl-rtl
 
 3.5.1 (2017-05-03)
+------------------
 * PR #522 use https in wistia
 
 3.5.0 (2017-05-03)
+------------------
 * PR #510 Twitter image support
 * PR #520, #515 Imgur image support
 * PR #514 Wistia video support (URL only)
@@ -154,6 +198,7 @@
 
 3.4.9 (2017-04-10)
 ------------------
+------------------
 * PR #468 support audio and video files (.mp4, .mp3, .wav, .m4a)
 * PR #460 improve spotify documentation and support album and artist pages
 * PR #454 use the `lang` attribute set in the embed url as the lang for the iframe
@@ -161,24 +206,28 @@
 
 3.4.8 (2017-03-31)
 ------------------
+------------------
 * Fix missing accent in French translation
 * Add additional Thai translation
 
 3.4.7 (2016-01-12)
+------------------
 * PR #447 Enable Vimeo fullscreen controls
 
 3.4.6 (2016-12-12)
+------------------
 * Revert PR #387 which was causing slide cutoff on small screens
 
 3.4.5 (2016-12-07)
+------------------
 * PR #428 - Reinstate table display for IE. #427
 
 3.4.3 (2016-11-15)
-------------------------
+------------------
 * Revert PR #374, reopen #277. Fix left black bar across full screen timelines.
 
 3.4.2 (2016-11-15)
-------------------------
+------------------
 * PR #374 - Adds margin-top for large screen disply. Fixes #277
 * PR #401 - Adds Vietnamese translation
 * PR #419 - Removes year zero from the timeline. Fixes #328
@@ -186,16 +235,16 @@
 * PR #389 - Adds YouTube end-time feature. #388
 
 3.4.1 (2016-10-04)
-------------------------
+------------------
 * PR #400 - pause Vine, DailyMotion, and Soundcloud media on slide exit (thanks @Hammman and @JustaBitDope)
 * PR #413 - French language support additions
 
 3.4.0 (2016-08-30)
--------------------------
+-------------------
 * Complete (?) RTL language support, removed Urdu Unicode translation bugs
 
 3.3.17 (2016-08-22)
--------------------------
+-------------------
 * #372 Italian translation for "Swipe to Navigate"
 * #376 Throw an error if URL is neither a Google Spreadsheet nor a source of parseable JSON
 * Chinese (traditional) (zh-cn) translation for "Swipe to Navigate"
@@ -203,18 +252,18 @@
 * added Burmese translation
 
 3.3.16 (2016-05-31)
--------------------------
+-------------------
 * #365 Scope vcard styles to avoid impacting pages which embed timelines without iframe
 * #366 Fix headline problem with <p> tag
 
 3.3.15 (2016-05-11)
--------------------------
+-------------------
 * Apply MediaType handling to thumbnails for the slider, so that people can use the same kinds of urls they use for regular media.
 * Establish correct indication of "BCE" in Swedish.
 * Establish correct indication of "BYA" abbreviations in Finnish and Hungarian.
 
 3.3.14 (2016-03-22)
--------------------------
+-------------------
 * Fix bug in handling imgur URLs which were to an imgur page and not directly to an image.
 
 3.3.13 (2016-02-25)

package/RELEASING.md

@@ -1,8 +1,8 @@
-# Steps to cut a new release of the TimelineJS JavaScript lbirary
+# Steps to cut a new release of the TimelineJS JavaScript library
 
 The primary action for "releasing" TimelineJS is pushing a new version to `cdn.knightlab.com` but as of mid-2020, we also publish new versions to the `npmjs` package registry.
 
-1. Before cutting a release, test thoroughly. Is this an opportunity to add new unit tests? Develop functional testing? If nothing else, `npm run compare` provides a way to see how some historical timelines would function with the new code.
+1. Before cutting a release, test thoroughly. Is this an opportunity to add new unit tests? Develop functional testing? If nothing else, `npm run compare` provides a way to see how some historical timelines would function with the new code. (Note that because of Google Sheets API changes, compare now compares back to the oldest release in the 3.8.x series instead of the pre-webpack version)
 1. Update `package.json` to have the correct version.
 1. Update `CHANGELOG` to indicate the release date. Hopefully you've been incrementally updating the file with relevant changes so that this is just editing the version "header"
 1. Push all changes to GitHub

package/dist/css/fonts/font.bevan-pontanosans.css

@@ -24,7 +24,7 @@ https://www.google.com/fonts/specimen/Pontano+Sans
   font-family: 'Bevan';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/bevan/v12/4iCj6KZ0a9NXjG8dWC4.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/bevan/v18/4iCj6KZ0a9NXjG8dWC4.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Pontano Sans';

package/dist/css/fonts/font.bitter-raleway.css

@@ -24,25 +24,25 @@ https://www.google.com/fonts/specimen/Raleway
   font-family: 'Bitter';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/bitter/v17/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8RHYOLjOWA.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/bitter/v19/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8RHYOLjOWA.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 200;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtaorCIPrQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtaorCIPrQ.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrQ.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pbCIPrQ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pbCIPrQ.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.clicker-garamond.css

@@ -30,7 +30,7 @@ https://www.google.com/fonts/specimen/EB+Garamond
   font-family: 'EB Garamond';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/ebgaramond/v15/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkBI96.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/ebgaramond/v19/~ChoKC0VCIEdhcmFtb25kOgsI9NCduwcVAADIQxAHIAA=.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.dancing-ledger.css

@@ -24,13 +24,13 @@ https://www.google.com/fonts/specimen/Ledger
   font-family: 'Dancing Script';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/dancingscript/v16/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup5.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup5.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Dancing Script';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/dancingscript/v16/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7B1i03Sup5.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7B1i03Sup5.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Ledger';

package/dist/css/fonts/font.lustria-lato.css

@@ -24,13 +24,13 @@ https://www.google.com/fonts/specimen/Lato
   font-family: 'Lato';
   font-style: italic;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAXC-v.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/lato/v20/S6u8w4BMUTPHjxsAXC-v.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Lustria';

package/dist/css/fonts/font.medula-lato.css

@@ -24,19 +24,19 @@ https://www.google.com/fonts/specimen/Lato
   font-family: 'Lato';
   font-style: italic;
   font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/lato/v20/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Medula One';

package/dist/css/fonts/font.opensans-gentiumbook.css

@@ -36,13 +36,15 @@ http://www.google.com/webfonts/specimen/Gentium+Book+Basic
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
+  font-stretch: normal;
+  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
+  font-stretch: normal;
+  src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVc.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.playfair-faunaone.css

@@ -25,13 +25,13 @@ https://www.google.com/fonts/specimen/Unica+One
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v25/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v25/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Playfair Display SC';

package/dist/css/fonts/font.playfair.css

@@ -24,13 +24,13 @@ https://www.google.com/fonts/specimen/Playfair+Display+SC
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v25/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/playfairdisplay/v25/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Playfair Display SC';

package/dist/css/fonts/font.roboto-megrim.css

@@ -30,13 +30,13 @@ https://www.google.com/fonts/specimen/Megrim
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 300;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmb2Rm.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/robotoslab/v16/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmb2Rm.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rm.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/robotoslab/v16/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rm.ttf) format('truetype');
 }
 /*	Font Base
 ----------------------------------------------------- */

package/dist/css/fonts/font.unicaone-vollkorn.css

@@ -24,13 +24,13 @@ https://www.google.com/fonts/specimen/Unica+One
   font-family: 'Vollkorn';
   font-style: italic;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/vollkorn/v13/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmeObE.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/vollkorn/v17/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmeObE.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Vollkorn';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/vollkorn/v13/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df2MHGeHmmZ.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/vollkorn/v17/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df2MHGeHmmZ.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Unica One';

package/dist/embed/old-index.html

@@ -8,8 +8,21 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/purpleline/latest/img/favicon.png">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <!-- FAVICONS -->
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/manifest.json">
+    <link rel="mask-icon" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <!-- 
+      If we want to support loading different versions of timeline like we used to, 
+      this isn't good enough. We used that to get the non-minimized version, for debugging,
+      but now maybe sourcemaps are a better alternative?
+    -->
+    <script id='timeline-script-tag' type="text/javascript" src="https://cdn.knightlab.com/libs/timeline3/3.8.1/js/timeline.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/3.8.1/css/timeline.css">
+    <!-- Google Analytics should be handled by Timeline -->
+
     <base target="_blank">
 
     <!-- Style-->
@@ -36,25 +49,122 @@
     <div id="timeline-embed"></div>
     <!-- Override -->
     <script type="text/javascript">
-        var lang = window.location.href.match(/&lang=([a-zA-Z]*)&?/);
+        function ready(fn) {
+            if (document.readyState != 'loading') {
+                fn();
+            } else {
+                document.addEventListener('DOMContentLoaded', fn);
+            }
+        }
+
+        function setPageLanguage() {
+            var lang = window.location.href.match(/&lang=([a-zA-Z]*?)&?/);
+
+            if (lang) {
+                document.getElementsByTagName('html')[0].setAttribute('lang', lang[1]);
+            }
 
-        if (lang) {
-            document.getElementsByTagName('html')[0].setAttribute('lang', lang[1]);
         }
-        var trim_point = window.location.href.indexOf('embed/index.html');
-        if (trim_point > 0) {
-            var embed_path = window.location.href.substring(0, trim_point); // supports https access via https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/index.html
-        } else {
-            var embed_path = "https://cdn.knightlab.com/libs/timeline3/3.6.6/";
+
+        function computeEmbedPath() {
+            var trim_point = window.location.href.indexOf('embed/index.html');
+            if (trim_point > 0) {
+                return window.location.href.substring(0, trim_point); // supports https access via https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/index.html
+            }
+            return "https://cdn.knightlab.com/libs/timeline3/latest/";
+        }
+
+        function addOembedTag() {
+            // it's not clear that any tools execute this JS to get the URL, but maybe?
+            var oembed_link = document.createElement('link');
+            oembed_link['rel'] = 'alternate';
+            oembed_link['type'] = 'application/json+oembed';
+            oembed_link['href'] = 'https://oembed.knightlab.com/timeline/?url=' + encodeURIComponent(window.location.href);
+            document.head.appendChild(oembed_link);
+        }
+
+        function createEmbedDiv(containerId, width, height) {
+
+            if (typeof(width) != 'string' && typeof(width) != 'number') {
+                width = '100%'
+            }
+
+            if (typeof(height) != 'string' && typeof(height) != 'number') {
+                height = '100%'
+            }
+
+            // default containerId would be 'timeline-embed'
+            t = document.createElement('div');
+            t.style.position = 'relative';
+
+            te = document.getElementById(containerId);
+            te.appendChild(t);
+            te.classList.add("tl-timeline-embed");
+
+            if (width.toString().match("%")) {
+                te.style.width = width.split("%")[0] + "%";
+            } else {
+                width = Number(width) - 2;
+                te.style.width = (width) + 'px';
+            }
+
+            if (height.toString().match("%")) {
+                te.style.height = height;
+                te.classList.add("tl-timeline-full-embed");
+            } else if (width.toString().match("%")) {
+                te.classList.add("tl-timeline-full-embed");
+                height = Number(height) - 16;
+                te.style.height = (height) + 'px';
+            } else {
+                height = height - 16;
+                te.style.height = (height) + 'px';
+            }
         }
-        var oembed_link = document.createElement('link');
-        oembed_link['rel'] = 'alternate';
-        oembed_link['type'] = 'application/json+oembed';
-        oembed_link['href'] = 'https://oembed.knightlab.com/timeline/?url=' + encodeURIComponent(window.location.href);
-        document.head.appendChild(oembed_link);
+
+        /**
+         * Parse all URL parameters as possible Timeline options.
+         * Timeline itself will use or ignore these based on actual
+         * supported options.
+         */
+        function optionsFromUrlParams() {
+            var param_str = window.location.href.slice(window.location.href.indexOf('?') + 1);
+
+            if (param_str.match('#')) {
+                param_str = param_str.split('#')[0];
+            }
+
+            param_str = param_str.split('&');
+
+            var url_vars = {}
+
+            for (var i = 0; i < param_str.length; i++) {
+                var uv = param_str[i].split('=');
+                url_vars[uv[0]] = uv[1];
+            }
+
+            return url_vars;
+        };
+
+        ready(function() {
+            setPageLanguage();
+            var embed_path = computeEmbedPath();
+            addOembedTag();
+
+            var options = optionsFromUrlParams();
+            createEmbedDiv('timeline-embed', options.width, options.height);
+            // ga_property_id is not something we let users override
+            options.ga_property_id = 'UA-27829802-4';
+            if (typeof(options.source) == 'undefined') {
+                options.source = '1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk' // women in computing
+            }
+
+            options.soundcite = true;
+
+            window.options = options
+            window.timeline = new TL.Timeline('timeline-embed', options.source, options)
+
+        })
     </script>
-    <script type="text/javascript" src="https://cdn.knightlab.com/libs/timeline3/3.6.6/js/timeline-embed-cdn.js"></script>
-    <!-- END Timeline Embed-->
 </body>
 
-</html>
+</html>