@knight-lab/timelinejs 3.8.16 → 3.8.20

package/website/templates/_footer.html

@@ -1,54 +0,0 @@
-<footer class="footer-knightlab--dark">
-    <div class="container">
-        <div class='grid grid-center'>
-            <div class='column-2 column-4-phone column-4-tablet'>
-                <a href="http://knightlab.northwestern.edu" target="_blank">
-                    <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-knightlab-stacked-dark-small.png" style="margin-left:auto;">
-                </a>
-                <ul class="list--social text-align-center">
-                    <li><a class="link--no-style" href="http://www.twitter.com/knightlab" target="_blank" title="Knight Lab on Twitter"><span class="icon-twitter"></span></a></li>
-                    <li><a class="link--no-style" href="https://www.facebook.com/knightlab" target="_blank" title="Knight Lab on Facebook"><span class="icon-facebook"></span></a></li>
-                    <li><a class="link--no-style" href="https://github.com/NUKnightLab/" target="_blank" title="Knight Lab on GitHub"><span class="icon-github"></span></a></li>
-                </ul>
-            </div>
-            <div class='column-4 column-5-tablet column-6-phone footer-description'>
-                <p>
-                    The <a title="Northwestern University" href="http://www.northwestern.edu/" target="_blank">Northwestern University</a> Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
-                </p>
-                <div class="grid-size-2 grid-size-2-phone">
-                    <div class="grid-item">
-                        <a title="Medill School of Journalism, Media, Integrated Marketing Communications" href="http://www.medill.northwestern.edu/" target="_blank">
-                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-medill-dark.png">
-                        </a>
-                    </div>
-                    <div class="grid-item">
-                        <a title="McCormick School of Engineering" href="http://www.mccormick.northwestern.edu/" target="_blank">
-                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-mccormick-dark.png">
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="grid grid-center">
-            <div class="grid-item">
-            <address itemscope="" itemtype="http://data-vocabulary.org/Organization">
-                <span style="display:none;" itemprop="name" title="Knight Lab | Advancing news media innovation through exploration and experimentation." class="address-name">Knight Lab</span>
-                <span itemprop="tel" class="tel">(847) 467-4971</span>
-                <span itemprop="address" itemscope="" itemtype="http://data-vocabulary.org/Address" class="address">
-                    <span itemprop="street-address" class="street-address">1845 Sheridan Road</span>
-                    <span class="room-num">Fisk #109 &amp; #111</span>
-                    <div class="address-group">
-                        <span itemprop="locality">Evanston,</span> <span itemprop="region">IL</span> <span itemprop="postal-code">60208 </span>
-                        <span style="display:none;" itemprop="geo" itemscope="" itemtype="http://www.data-vocabulary.org/Geo/" class="geo">
-                            Latitude: <span itemprop="latitude">42.056893</span><br>Longitude:
-                            <span itemprop="longitude">-87.676735</span>
-                        </span>
-                        <a style="display:none;" href="http://knightlab.northwestern.edu" itemprop="url" class="url">Northwesten University Knight Lab | Advancing media innovation through exploration and experimentation.</a>
-                    </div>
-                </span>
-            </address>
-            <span class="copyright">© Copyright <script type="text/javascript"> document.write(new Date().getFullYear());</script> Northwestern University</span>
-            </div>
-        </div>
-    </div>
-</footer>

package/website/templates/_head.html

@@ -1,38 +0,0 @@
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{%block title%}Timeline{%endblock%}</title>
-<meta name="keywords" content="">
-<meta name="description" content="Timeline JS is a free, easy-to-use tool for telling stories in a timeline format.">
-<link rel="stylesheet" href="https://cloud.typenetwork.com/projects/5433/fontface.css" />
-<link rel="stylesheet" href="https://cdn.knightlab.com/libs/orangeline/latest/css/orangeline.min.css" />
-<link rel="stylesheet" href="/static/css/site.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">
-<meta name="theme-color" content="#ffffff">
-<!-- /favicons -->
-
-<!-- Open Graph -->
-<meta property="og:type" content="article" />
-<meta property="og:title" content="Timeline JS" />
-<meta property="og:description" content="Easy-to-make, beautiful timelines." />
-<meta property="og:image" content="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png" />
-<meta property="og:url" content="https://timeline.knightlab.com/" />
-<meta property="og:site_name" content="Timeline JS" />
-<!-- /Open Graph -->
-
-<!-- Twitter Card -->
-<meta name="twitter:title" content="Timeline JS">
-<meta name="twitter:description" content="Easy-to-make, beautiful timelines.">
-<meta name="twitter:image" content="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png">
-<meta name="twitter:site" content="@knightlab">
-<meta name="twitter:creator" content="@TimelineJS">
-<!-- /Twitter Card -->
-
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
-<link rel="stylesheet" href="/static/css/desert.css" />

package/website/templates/_header.html

@@ -1,18 +0,0 @@
-<header class="header-product">
-    <h1 class="product-logo product-logo-large">Timeline <span>JS</span></h1>
-    <h2 class="product-tagline">Easy-to-make, beautiful timelines.</h2>
-    <a class="button button-secondary button-large button-small-phone" href="#make">Make a Timeline</a>
-    <nav id="navbar-secondary" class="navbar navbar-subnav column-hide-phone">
-        <ul>
-            <li class="logo">
-                <h2 class="product-logo product-logo-smallest">Timeline <span>JS</span></h2>
-            </li>
-        </ul>
-        <ul>
-                <li><a class="button" href="#overview">Overview</a></li>
-                <li><a class="button" href="#examples">Examples</a></li>
-                <li><a class="button" href="#make">Make a Timeline</a></li>
-                <li><a class="button" href="#help">Help</a></li>
-        </ul>
-    </nav>
-</header>

package/website/templates/_help.html

@@ -1,50 +0,0 @@
-    <section class="section container" id="help">
-    <div class="grid">
-        <div class="column-8">
-            <h2>Help</h2>
-            <p>
-                Need help? First, please be sure to look at our list of <a href="#faq">frequently asked questions</a> below. If you're brand new to Timeline JS, you may also want to watch our <a href="https://vimeo.com/143407878" target="_blank">introductory video</a>.
-            </p>
-            <p>
-                If you don't find an answer there, try our <a href="https://knightlab.zendesk.com/forums/22551396-TimelineJS">support forums</a> or use our <a href="https://knightlab.zendesk.com/anonymous_requests/new">tech support web form.</a> <strong>Please be clear</strong> with your question, <strong>include a link to your spreadsheet</strong>, and if appropriate, a link to a page which shows the issue with which you need help. <strong>We can only answer support questions in English.</strong> We try to be prompt, but please understand that we do not have a dedicated tech support staff.
-            </p>
-            <p class="note">
-                <strong>Find a bug?</strong> If you are confident you have found a bug, please report it as <a href="https://github.com/NUKnightLab/TimelineJS3/issues">a GitHub issue</a>. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with <a href="https://knightlab.zendesk.com/hc/en-us/requests/new">the tech support system</a>.
-            </p>
-        </div>
-        <div class="column-4">
-            <h3>Technical documentation</h3>
-            <p>Go further with Timeline:</p>
-            <ul>
-                    <li><a href="/docs/using-spreadsheets.html">Use our spreadsheet template</a></li>
-                    <li><a href="/docs/media-types.html">Supported Media Types</a></li>
-                    <li><a href="/docs/json-format.html">JSON data format reference</a></li>
-                    <li><a href="/docs/overriding-styles.html">Using the TimelineJS CSS selectors</a></li>
-                    <li><a href="/docs/options.html">Timeline Configuration Options</a></li>
-                    <li><a href="/docs/instantiate-a-timeline.html">Using TimelineJS in Javascript</a></li>
-            </ul>
-        </div>
-    </div>
-    <div class="grid" id="faq">
-        {# TODO: extract faq.html content into faq.json #}
-        <div class="grid-item">
-            <h3>Frequently asked questions</h3>
-            <ul class="accordion">
-            {% for faq in faqs %}
-            {#
-                Add/edit faqs in the faqs.json file.
-                Depends upon inject_index_data in app.py for these to be available to render.
-            #}
-                <li>
-                    <input type="checkbox" checked>
-                    <i></i>
-                    <h3 id="{{ faq.slug }}">{{ faq.question }}</h3>
-                    <div class="accordion-content">
-                        {{ faq.answer|safe }}
-                    </div>
-                </li>
-            {% endfor %}
-            </ul>
-        </div>
-    </div>
-    </section>

package/website/templates/_make.html

@@ -1,291 +0,0 @@
-<section class="section-color section-color-complement" id="make">
-    <div class="container">
-        <h2>Make a Timeline</h2>
-        <p>
-            TimelineJS works on any site or blog. Make your own in four easy steps. <br> <em>Having trouble? Watch our <a href="https://vimeo.com/143407878">video</a>, or see the <a href="#help">help section below</a>.</em>
-        </p>
-        <ol class="instructional-steps">
-            <li class="step grid">
-                <div class="step-number column-2">
-                    <h6>Create your spreadsheet</h6>
-                </div>
-                <div class="step-details column-10">
-                    <p>Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Make a Copy" button.</p>
-                    <p>Drop dates, text and links to media into the appropriate columns. For more about working with our template, see <a href="/docs/using-spreadsheets.html">Making a timeline from a Google Spreadsheet</a></p>
-                    <a class="button button-complement" href="https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy" target="_blank">Get the Spreadsheet Template &nbsp;<span class="icon-new-tab"></span></a>
-                    <p class="note">Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
-                </div>
-            </li>
-            <li class="step grid" id="make-step-2">
-                <div class="step-number column-2">
-                    <h6>Publish to the web</h6>
-                </div>
-                <div class="step-details column-10">
-                    <div class="grid">
-                        <div class="grid-item">
-                            <p>
-                                <img class="img-shadow make-step-2" src="static/img/make/publish_to_web_small.png" /> Under the File menu, select “Publish to the Web.” </p>
-                            <p class="note">
-                                <strong>Don't set your Timeline Google Sheet to "anyone with the link can edit."</strong> It isn't necessary, and could lead to someone changing your timeline without your consent.
-                            </p>
-
-
-                            <p style="clear: both;">
-                                <img class="img-shadow make-step-2" src="static/img/make/publish_to_web_button_small-od1.png" /> In the next window, change the menu that reads "entire document" to "od1." Then, click the blue "publish" button. When asked,
-                                "Are you sure…?" click OK. <em>Ignore the URL that appears in the center of the window.</em> Just close the window using the <em>X</em> in the top right corner.
-
-                            </p>
-                            <p style="clear: both;">
-                                <img class="img-shadow" src="static/img/make/publish_to_web_browser_url.png" /> After you close the window, copy the URL in your browser's address bar. You'll use this in the next step.
-                            </p>
-
-                        </div>
-                    </div>
-            </li>
-
-            <li class="step grid" id="make-step-3">
-                <div class="step-number column-2">
-                    <h6>Generate your timeline</h6>
-                </div>
-                <div class="step-details column-10">
-                    <p>Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)</p>
-                    <form>
-
-                        <div class="grid grid-left ">
-                            <div class="input-group-label column-12">
-                                <label class="input-group-addon" for="inlinelabel">Google Spreadsheet URL</label>
-                                <input type="text" id="embed-source-url" placeholder="1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI" name="inlinelabel">
-                                <p id="embed-source-url-message" class="note note-alert note-error"></p>
-                            </div>
-                            <div class="input-group-label column-3">
-                                <label class="input-group-addon" for="inlinelabel">Width</label>
-                                <input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini">
-                            </div>
-                            <div class="input-group-label column-3">
-                                <label class="input-group-addon" for="inlinelabel">Height</label>
-                                <input type="text" value="650" placeholder="650" id="embed-height" class="input-mini">
-                            </div>
-                        </div>
-                    </form>
-
-                    <div class="panel">
-                        <form>
-                            <fieldset>
-                                <h5 style="margin-top:0;">Optional settings
-                                    <a id="show-options">(show)<span class="caret"></span></a>
-                                    <a id="hide-options">(hide)<span class="caret"></span></a>
-                                </h5>
-                                <p class="small"><em>Set language, fonts, starting slide and more.</em></p>
-                                <div class="more-options">
-                                    <div class="grid">
-                                        <!-- Language-->
-                                        <div class="grid-item">
-                                            <h6>Language</h6>
-                                            <select id="embed-language">
-                                                        <option value="en" data-lang="English">English</option>
-                                                        <option value="en-24hr" data-lang="English (24-hour time)">English (24-hour time)</option>
-                                                        <option value="ar" data-lang="Arabic">العربية</option>
-                                                        <option value="af" data-lang="Afrikaans">Afrikaans</option>
-                                                        <option value="id" data-lang="Indonesian">Bahasa Indonesia</option>
-                                                        <option value="ms" data-lang="Malay">Bahasa Melayu</option>
-                                                        <option value="be" data-lang="Belarusian">Беларуская мова</option>
-                                                        <option value="bg" data-lang="Bulgarian">български език</option>
-                                                        <option value="ca" data-lang="Catalan">Català</option>
-                                                        <option value="cz" data-lang="Czech">Čeština</option>
-                                                        <option value="da" data-lang="Danish">Dansk</option>
-                                                        <option value="hi" data-lang="Hindi">हिन्दी</option>
-                                                        <option value="de" data-lang="German">Deutsch</option>
-                                                        <option value="et" data-lang="Estonian">Eesti keel</option>
-                                                        <option value="el" data-lang="Greek">ελληνικά</option>
-                                                        <option value="es" data-lang="Spanish">Español</option>
-                                                        <option value="eo" data-lang="Esperanto">Esperanto</option>
-                                                        <option value="eu" data-lang="Basque">Euskara</option>
-                                                        <option value="fo" data-lang="Faroese">Føroyskt</option>
-                                                        <option value="fr" data-lang="French">Français</option>
-                                                        <option value="fy" data-lang="Frisian">Frysk</option>
-                                                        <option value="ga" data-lang="Irish">Gaeilge</option>
-                                                        <option value="gl" data-lang="Galician">Galego</option>
-                                                        <option value="ko" data-lang="Korean">한국어</option>
-                                                        <option value="hr" data-lang="Croatian">Hrvatski</option>
-                                                        <option value="hy" data-lang="Armenian">Հայերէն</option>
-                                                        <option value="is" data-lang="Icelandic">Íslenska</option>
-                                                        <option value="it" data-lang="Italian">Italiano</option>
-                                                        <option value="he" data-lang="Hebrew">עברית</option>
-                                                        <option value="ka" data-lang="Georgian">ქართული</option>
-                                                        <option value="lv" data-lang="Latvian">Latviešu valoda</option>
-                                                        <option value="lb" data-lang="Luxembourgish">Lëtzebuergesch</option>
-                                                        <option value="lt" data-lang="Lithuanian">Lietuvių kalba</option>
-                                                        <option value="ro" data-lang="Romanian">Limba română</option>
-                                                        <option value="hu" data-lang="Hungarian">Magyar</option>
-                                                        <option value="my" data-lang="Myanmar"> မြန်မာ</option>
-                                                        <option value="nl" data-lang="Dutch">Nederlands</option>
-                                                        <option value="ne" data-lang="Nepali">नेपाली</option>
-                                                        <option value="ja" data-lang="Japanese">日本語</option>
-                                                        <option value="no" data-lang="Norwegian">Norsk</option>
-                                                        <option value="th" data-lang="Thai">ภาษาไทย</option>
-                                                        <option value="pl" data-lang="Polish">Polski</option>
-                                                        <option value="pt" data-lang="Portuguese">Português</option>
-                                                        <option value="pt-br" data-lang="Portuguese - Brazilian">Português (Brasil)</option>
-                                                        <option value="rm" data-lang="Romansh">Rumantsch</option>
-                                                        <option value="ru" data-lang="Russian">Русский язык</option>
-                                                        <option value="si" data-lang="Sinhalese">සිංහල</option>
-                                                        <option value="sl" data-lang="Slovenian">Slovenščina</option>
-                                                        <option value="sk" data-lang="Slovak">Slovenčina</option>
-                                                        <option value="sr" data-lang="Serbian - Latin">Srpski</option>
-                                                        <option value="sr-cy" data-lang="Serbian - Cyrillic">српски</option>
-                                                        <option value="fi" data-lang="Finnish">Suomi</option>
-                                                        <option value="sv" data-lang="Swedish">Svenska</option>
-                                                        <option value="zh-tw" data-lang="Taiwanese">Taiwanese</option>
-                                                        <option value="tl" data-lang="Tagalog">Tagalog</option>
-                                                        <option value="ta" data-lang="Tamil">தமிழ்</option>
-                                                        <option value="te" data-lang="Telugu">తెలుగు</option>
-                                                        <option value="tr" data-lang="Turkish">Türkçe</option>
-                                                        <option value="uk" data-lang="Ukrainian">Українська</option>
-                                                        <option value="ur" data-lang="Urdu">اُردُو</option>
-                                                        <option value="vi" data-lang="Vietnamese">Tiếng Việt</option>
-                                                        <option value="fa" data-lang="Farsi">فارسی</option>
-                                                        <option value="zh-cn" data-lang="Chinese">中文</option>
-                                                    </select>
-                                        </div>
-
-                                        <!-- Fonts-->
-                                        <div class="grid-item" style="position: relative">
-                                            <h6>Fonts</h6>
-                                            <div id="embed-font-dropdown">
-                                                <p style="padding-top:4px;"><img id="font-pair-preview" src="static/img/make/default.png"></p>
-                                                <ul id="embed-font">
-                                                    <li data-value="Default" id="embed-font-active" style="padding-top: 1rem"><img src="static/img/make/default.png" alt="PT Narrow and PT Serif"></li>
-                                                    <li data-value="Abril-DroidSans"><img src="static/img/make/abril-droidsans.png" alt="Abril and Droid Sans"></li>
-                                                    <li data-value="Amatic-Andika" checked=""><img src="static/img/make/amatic-andika.png" alt="Amatic and Andika"></li>
-                                                    <li data-value="Bevan-PontanoSans"><img src="static/img/make/bevan-pontanosans.png" alt="Bevan and Pontano Sans"></li>
-                                                    <li data-value="Bitter-Raleway"><img src="static/img/make/bitter-raleway.png" alt="Bitter and Raleway"></li>
-                                                    <li data-value="Clicker-Garamond"><img src="static/img/make/clicker-garamond.png" alt="Clicker and Garamond"></li>
-                                                    <li data-value="Dancing-Ledger"><img src="static/img/make/dancing-ledger.png" alt="Dancing and Ledger"></li>
-                                                    <li data-value="Fjalla-Average"><img src="static/img/make/fjalla-average.png" alt="Fjalla and Average"></li>
-                                                    <li data-value="Georgia-Helvetica"><img src="static/img/make/georgia-helvetica.png" alt="Georgia and Helvetica"></li>
-                                                    <li data-value="Lustria-Lato"><img src="static/img/make/lustria-lato.png" alt="Lustria and Lato"></li>
-                                                    <li data-value="Medula-Lato"><img src="static/img/make/medula-lato.png" alt="Medula One and Lato"></li>
-                                                    <li data-value="OldStandard"><img src="static/img/make/oldstandard.png" alt="Old Standard"></li>
-                                                    <li data-value="OpenSans-GentiumBook"><img src="static/img/make/opensans-gentiumbook.png" alt="Open Sans and Gentium Book"></li>
-                                                    <li data-value="Playfair-FaunaOne"><img src="static/img/make/playfair-faunaone.png" alt="Playfair and Fauna One"></li>
-                                                    <li data-value="Playfair"><img src="static/img/make/playfair.png" alt="Playfair SC and Playfair"></li>
-                                                    <li data-value="PT"><img src="static/img/make/pt.png" alt="PT Sans, PT Sans Narrow, and PT Serif"></li>
-                                                    <li data-value="Roboto-Megrim"><img src="static/img/make/roboto-megrim.png" alt="Roboto and Megrim"></li>
-                                                    <li data-value="Rufina-Sintony"><img src="static/img/make/rufina-sintony.png" alt="Rufina and Sintony"></li>
-                                                    <li data-value="UnicaOne-Vollkorn"><img src="static/img/make/unicaone-vollkorn.png" alt="Unica One and Vollkorn"></li>
-                                                </ul>
-
-                                            </div>
-                                        </div>
-                                        <div class="grid-item">
-                                            <h6>Map Type</h6>
-                                            <div id="embed-maptype">
-                                                <p class="small">Currently all Google's base maps are supported. When creating a Google map, style it the way you would like it to appear, and then paste the resulting link into your Google Spreadsheet.</p>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="grid-size-3 grid-left">
-                                        <div class="grid-item">
-                                            <h6>Default start slide</h6>
-                                            <div class="input-group-label">
-                                                <label class="input-group-addon" for="inlinelabel">Slide</label>
-                                                <input type="text" value="0" placeholder="0" id="embed-startatslide" class="input-mini">
-                                            </div>
-                                            <p class="small"><em>You can tell TimelineJS to start at a specific slide number.</em></p>
-                                        </div>
-                                        <div class="grid-item">
-                                            <h6>Initial zoom level</h6>
-                                            <div class="input-group-label">
-                                                <label class="input-group-addon" for="inlinelabel">Zoom Level</label>
-                                                <input type="text" value="2" placeholder="2" id="embed-initialzoom" class="input-mini">
-                                            </div>
-                                            <p class="small"><em>The zoom level at which the timeline portion of TimelineJS will display on load. Specify a value from 0-10 (default is 2). Smaller numbers show a greater span of time.</em></p>
-                                        </div>
-                                    </div>
-
-
-                                    <div class="grid grid-no-gutters">
-                                        <div class="column-12">
-                                            <h6>Misc</h6>
-                                        </div>
-                                    </div>
-
-                                    <div class="grid-size-3 grid-left">
-                                        <div class="grid-item">
-                                            <label class="checkbox">
-                                                        <input id="embed-startatend" type="checkbox" value="option1">Start at the end <br/><small style="display:block;margin-left:1.4rem;"><em>Begins the timeline on the last slide.</em></small>
-                                                    </label>
-                                        </div>
-                                        <div class="grid-item">
-                                            <label class="checkbox">
-                                                        <input id="embed-timenavtop" type="checkbox" value="option1">Show nav on top
-                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>Switches the vertical order of the timeline navigation and the media.</em></small>
-                                                    </label>
-                                        </div>
-                                        <div class="grid-item">
-                                            <label class="checkbox">
-                                                        <input id="embed-debug" type="checkbox" value="option1">Debug
-                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>In debug mode, the JavaScript console will display logging messages.</em></small>
-                                                    </label>
-                                        </div>
-                                        <div class="grid-item">
-                                            <label class="checkbox">
-                                                         <input id="embed-hash-bookmark" type="checkbox" value="option1">Use hash bookmarks
-                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>Assigns a hash bookmark to each slide's URL, allowing deep linking to slides. (For directly linked Timelines only -- does not work for iframe embeds)</em></small>
-                                                    </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </fieldset>
-                        </form>
-                    </div>
-                </div>
-            </li>
-
-            <li class="step grid">
-                <div class="step-number column-2">
-                    <h6>Share your timeline</h6>
-                </div>
-                <div class="step-details column-10">
-                    <h6>Share Link</h6>
-                    <p class="small">Use this to link directly to your timeline. </p>
-                    <p class="small"><em>If you're embedding on Medium.com or other oembed-aware services, just paste this link on a line by itself where you want your timeline to appear.</em></p>
-
-                    <!-- <ul class="list--social">
-                                <li>
-                                    <a class="link--no-style" href="#" ><span class="icon-twitter text-color-complement"></span></a>
-                                </li>
-                                <li>
-                                    <a class="link--no-style" href="#"><span class="icon-facebook text-color-complement"></span></a>
-                                </li>
-                            </ul> -->
-                    <form>
-                        <textarea id="sharable-url" rows="3" type="text" "readonly" name="textplaceholder" value="" style="height:4rem;">
-https://cdn.knightlab.com/libs/timeline/latest/embed/?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Bevan-PotanoSans&maptype=toner&width=600&height=600
-                                </textarea>
-                    </form>
-                    <h6>Embed</h6>
-                    <p class="small">Copy this embed code and paste it on your site where you want your timeline to appear (just like a YouTube video). </p>
-                    <form>
-                        <textarea id="embed_code" rows="3" readonly="readonly" type="text" name="textplaceholder" value="" style="height:5rem;">
-&lt;iframe src=&apos;https://cdn.knightlab.com/libs/timeline/latest/embed/?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&amp;font=Bevan-PotanoSans&amp;maptype=toner&amp;width=600&amp;height=600&apos; width=&apos;600&apos; height=&apos;600&apos; frameborder=&apos;0&apos;&gt;&lt;/iframe&gt;
-                                </textarea>
-                    </form>
-                    <a class="button button-complement" href="#preview-embed" id="iframe-preview-button">Preview</a>&nbsp;
-                    <a class="button button-light" href="#" id="preview-embed-link" target="_blank">Open Preview in a new window  &nbsp;<span class="icon-new-tab"></span></a>
-                </div>
-            </li>
-        </ol>
-        </div>
-        <div id="preview-embed">
-            <div class="container">
-                <h3>Preview Embed</h3>
-            </div>
-            <section id="demo" class="container-fluid">
-                <div id="preview-embed-iframe" class="product-demo">
-                    <iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650" width="100%" height="650" frameborder="0"></iframe>
-                </div>
-            </section>
-        </div>
-</section>

package/website/templates/_nav.html

@@ -1,24 +0,0 @@
- <!-- Add the class "sticky" to "top-bar" to make the navbar sticky. -->
- <nav class="top-bar" data-topbar role="navigation">
-   <div class="row">
-    <ul class="title-area">
-      <li class="name">
-        <h1><a href="/index.html">TimelineJS</a></h1>
-      </li>
-      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
-    </ul>
-
-    <section class="top-bar-section">
-      <!-- Right Nav Section -->
-      <ul class="right">
-        <li class="logo"><a href="//knightlab.northwestern.edu/" alt="Northwestern University Knight Lab"><img width="130" src="https://cdn.knightlab.com/libs/purpleline/latest/img/logos/logo_horizontal_NOtagline_383x91_transparent_NOpadding.png"></a></li>
-      </ul>
-      <!-- Left Nav Section -->
-      <ul class="left">
-        <li><a href="/index.html#make">Make</a></li>
-        <li><a href="/index.html#examples">Examples</a></li>
-        <li class="active"><a href="/docs/index.html">Documentation</a></li>
-      </ul>
-    </section>
-  </div>
-</nav>

package/website/templates/_overview.html

@@ -1,32 +0,0 @@
-    <section id="overview" class="container">
-            <div class="grid-size-2 grid-size-1-phone">
-                <div class="grid-item">
-                    <p>
-                        TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, <a href="https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml">like the one we used for the Timeline above</a>. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.
-                    </p>
-                    <figure>
-                        <div class="embed embed-16by9">
-                            <iframe class="embed-item" src="https://player.vimeo.com/video/143407878"></iframe>
-                        </div>
-                        <figcaption class="credit">Knight Lab</figcaption>
-                        <figcaption>
-                            Watch this brief video for an overview of how to make a timeline.
-                        </figcaption>
-                    </figure>
-                </div>
-                <div class="grid-item">
-                    <h3 style="margin-top:0;">Tips &amp; tricks</h3>
-                    <ol>
-                        <li>Keep it short. We recommend not having more than 20 slides for a reader to click through.</li>
-                        <li>Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.</li>
-                        <li>Write each event as a part of a larger narrative.</li>
-                        <li>Include events that build up to major occurrences — not just the major events.</li>
-                    </ol>
-                    <h3>Media sources</h3>
-                    <p>
-                        TimelineJS can pull in media from a variety of sources.
-                        Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
-                    </p>
-                </div>
-            </div>
-    </section>

package/website/templates/_roadmap.html

@@ -1,27 +0,0 @@
-<section id="roadmap">
-<div class="row">
-    <div class="small-12 medium-8 columns">
-      <h2>Roadmap</h2>
-      <p>
-      We know that TimelineJS is very popular, so we want to make sure that you understand our plans. TimelineJS3 will be in "beta" until approximately September 2015. Once we're confident that there are no serious issues,
-      we'll move this website to replace the current <a href="http://timeline.knightlab.com">timeline.knightlab.com</a>, so that everyone who makes new timelines will use the new software.
-      </p>
-      <p>
-        Don't worry: even when we do that, <strong>your existing timelines made with either the new or old version will continue to work</strong>, with no action required. Also, as we make improvements to TimelineJS3, the timelines you make now will automatically take advantage of them.
-      </p>
-      <p>
-        However, we have already been tapering off work on any changes to the original TimelineJS, and that will continue as we focus on TimelineJS3. If you discover issues with the original TimelineJS, we will make sure that they aren't issues in TimelineJS3 and we'll encourage you to switch. We've made the new version work with the old spreadsheets, so that should be pretty painless.
-      </p>
-    </div>
-    <div class="small-12 medium-4 columns panel">
-      <h4>Why is it TimelineJS3?</h4>
-      <p>Some people have wondered why we are calling this TimelineJS3. Was there a TimelineJS2?</p>
-      <p>As with other software, we are frequently making changes to our code, and each time we make a new release,
-we update the version number. While we never publicly talked about "TimelineJS2," the version number of the current software is <code>2.36.0</code>. 
-      </p>
-      <p>
-        Once TimelineJS3 is out of beta, we'll just call it TimelineJS, but it will still have version numbers. So TimelineJS3's version numbering begins with <code>3.0.0</code>.
-      </p>
-  </div>
-</div>
-</section>

package/website/templates/_storytelling_tools.html

@@ -1,35 +0,0 @@
-<section class="moth--product">
-    <h3>Storytelling Tools</h3>
-    <p class="product-tagline">We build easy-to-use tools that can help you tell better stories.</p>
-    <div class="grid grid-size-4 grid-size-2-tablet grid-size-1-phone">
-        <div class="grid-item">
-            <a href="http://timeline.knightlab.com/" class="button button-dark">
-                <img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png">
-                <h4 class="product-logo product-logo-small">Timeline <span>JS</span></h4>
-                <p class="product-tagline">Easy-to-make, beautiful timelines.</p>
-            </a>
-        </div>
-        <div class="grid-item">
-            <a href="http://storymap.knightlab.com/" class="button button-dark">
-                <img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-storymap.png">
-                <h4 class="product-logo product-logo-small">StoryMap <span>JS</span></h4>
-                <p class="product-tagline">Maps that tell stories.</p>
-            </a>
-        </div>
-        <div class="grid-item">
-            <a href="http://juxtapose.knightlab.com/" class="button button-dark">
-                <img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-juxtapose.jpg">
-                <h4 class="product-logo product-logo-small">Juxtapose <span>JS</span></h4>
-                <p class="product-tagline">Easy-to-make frame comparisons.</p>
-            </a>
-        </div>
-        <div class="grid-item">
-            <a href="http://soundcite.knightlab.com/" class="button button-dark">
-                <img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-soundcite.png">
-                <h4 class="product-logo product-logo-small">Soundcite <span>JS</span></h4>
-                <p class="product-tagline">Seamless inline audio.</p>
-            </a>
-        </div>
-    </div>
-    <a href="http://knightlab.northwestern.edu/projects/" class="button button-dark" style="margin-top:1rem;z-index:22;">View More</a>
-</section>