<commit_before><!-- Make a Timeline -->
<section id="make">

  <div class="row">
    <div class="small-12 columns">
      <h2>Make a Timeline</h2>
      <p>TimelineJS works on any site or blog. Make your own in four easy steps.</p>
    </div>
  </div>

  <!-- Step 1 -->
  <div id="make-step-1" class="step row">
    <h2 class="small-2 medium-1 columns">1</h2>
    <div class="small-10 medium-11 columns">
      <h4><span>1. </span>Create your spreadsheet</h4>
      <p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public" target="_blank" >template</a>.
      Drop dates, text and links to media into the appropriate columns. For more about working with our template, <a href="docs/using-spreadsheets.html">see our help docs.</a></p>
      <p><b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
      <div class="row">
        <p class="small-12 medium-4 columns"><a class="button" href="https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public" target="_blank" class="btn">Google Spreadsheet Template</a></p>
        <p class="small-12 medium-8 columns"><small>If you have a spreadsheet from the original version of TimelineJS, you can use it and <a href="#make-step-3" data-scroll="true">skip ahead to step 3</a>.</small></p>
      </div>
    </div>
  </div>

  <!-- Step 2 -->
  <div id="make-step-2" class="step row">
    <h2 class="small-2 medium-1 columns">2</h2>
    <div class="small-10 medium-5 columns">
      <h4><span>2. </span>Publish to the web</h4>
      <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_small.png" alt="Publish to Web"></p>
      <p>Under the File menu, select <em>&ldquo;Publish to the Web.&rdquo;</em></p>
      <p>In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.</p>
      <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
    </div>
    <div class="small-12 medium-6 columns">
        <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_button_small.png" alt="Publish to Web 2"></p>
        <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_url_small.png" alt="Publish to Web 3"></p>
      </div>
    </div>
  </div>

  <!-- Step 3 -->
  <form id="make-step-3" class="step row">
    <h2 class="small-2 medium-1 columns">3</h2>
    <div class="small-10 medium-11 columns">
      <h4><span>3. </span>Copy/paste spreadsheet URL into the generator box below</h4>
      <div class="row">
        <div class="small-12 medium-3 columns">
          <label for="embed-source-url" class="right inline">Google Spreadsheet URL</label>
        </div>
        <div class="small-12 medium-6 columns">
          <input type="text" id="embed-source-url" placeholder="1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI">
          <span id="embed-source-url-note" class="left help-inline">You can also use a URL from the original TimelineJS.</span>
        </div>
        <div class="small-12 medium-3 columns">
          <p class="left inline"><small>(Make sure you've published it.)</small></p>
        </div>
      </div>
      <!-- Size-->
      <div class="row">
        <div class="small-3 columns">
          <label class="right inline">Size</label>
        </div>
        <div class="small-9 columns">
          <div class="row collapse">
            <div class="small-6 medium-3 large-1 columns">
              <span class="prefix">Width</span>
            </div>
            <div class="small-6 medium-3 large-1 columns">
              <input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini">
            </div>
            <div class="small-12 medium-3 large-1 columns"></div>
            <div class="small-6 medium-3 large-1 columns">
              <span class="prefix">Height</span>
            </div>
            <div class="small-6 medium-3 large-1 columns end">
              <input type="text" value="650" placeholder="650" id="embed-height" class="input-mini">
            </div>
        </div>
      </div>

      <!-- Extra Options -->
      <form>
        <fieldset>
          <legend>Optional settings
            <a class="show-options" href="#">(show)<span class="caret"></span></a>
            <a class="hide-options" href="#">(hide)<span class="caret"></span></a>
          </legend>
          <p><em>Set language, fonts, starting slide and more.</em></p>
          <div class="more-options">
            <div class="row">
            <!-- Language-->
              <div class="small-12 medium-4 columns">
                <label name="language" for="embed-language">Language</label>
                <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="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="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="de" data-lang="German">Deutsch</option>
                  <option value="et" data-lang="Estonian">Eesti keel</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="hr" data-lang="Croatian">Hrvatski</option>
                  <option value="is" data-lang="Icelandic">Íslenska</option>
                  <option value="it" data-lang="Italian">Italiano</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="nl" data-lang="Dutch">Nederlands</option>
                  <option value="no" data-lang="Norwegian">Norsk</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="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="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="tr" data-lang="Turkish">Türkçe</option>
                  <option value="be" data-lang="Belarusian">Беларуская мова</option>
                  <option value="sr-cy" data-lang="Serbian - Cyrillic">српски</option>
                  <option value="bg" data-lang="Bulgarian">български език</option>
                  <option value="ru" data-lang="Russian">Русский язык</option>
                  <option value="uk" data-lang="Ukrainian">Українська</option>
                  <option value="el" data-lang="Greek">ελληνικά</option>
                  <option value="hy" data-lang="Armenian">Հայերէն</option>
                  <option value="ar" data-lang="Arabic">العربية</option>
                  <option value="fa" data-lang="Farsi">فارسی</option>
                  <option value="ka" data-lang="Georgian">ქართული</option>
                  <option value="he" data-lang="Hebrew">עברית / עִבְרִית</option>
                  <option value="hi" data-lang="Hindi">हिन्दी</option>
                  <option value="zh-cn" data-lang="Chinese">中文</option>
                  <option value="ja" data-lang="Japanese">日本語</option>
                  <option value="ko" data-lang="Korean">한국어 [韓國語]</option>
                  <option value="ne" data-lang="Nepali">नेपाली</option>
                  <option value="si" data-lang="Sinhalese">සිංහල</option>
                  <option value="ta" data-lang="Tamil">தமிழ்</option>
                  <option value="te" data-lang="Telugu">తెలుగు</option>
                  <option value="th" data-lang="Thai">ภาษาไทย</option>
                </select>
            </div>
            <!-- Fonts-->
            <div class="small-12 medium-5 columns">
              <ul id="embed-font-dropdown">
                <li>
                  <label name="fonts" for="embed-font">Fonts (<a href="#">change</a>)</label>
                  <p><img id="font-pair-preview" src="static/img/make/default.png" /></p>
                  <ul id="embed-font">
                    <li data-value="Default" id="embed-font-active"><i class="fa fa-check"></i> <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="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>
              </ul>
            </div><commit_msg>order languages by romanized name; closes #168<commit_after><!-- Make a Timeline -->
<section id="make">

  <div class="row">
    <div class="small-12 columns">
      <h2>Make a Timeline</h2>
      <p>TimelineJS works on any site or blog. Make your own in four easy steps.</p>
    </div>
  </div>

  <!-- Step 1 -->
  <div id="make-step-1" class="step row">
    <h2 class="small-2 medium-1 columns">1</h2>
    <div class="small-10 medium-11 columns">
      <h4><span>1. </span>Create your spreadsheet</h4>
      <p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public" target="_blank" >template</a>.
      Drop dates, text and links to media into the appropriate columns. For more about working with our template, <a href="docs/using-spreadsheets.html">see our help docs.</a></p>
      <p><b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
      <div class="row">
        <p class="small-12 medium-4 columns"><a class="button" href="https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public" target="_blank" class="btn">Google Spreadsheet Template</a></p>
        <p class="small-12 medium-8 columns"><small>If you have a spreadsheet from the original version of TimelineJS, you can use it and <a href="#make-step-3" data-scroll="true">skip ahead to step 3</a>.</small></p>
      </div>
    </div>
  </div>

  <!-- Step 2 -->
  <div id="make-step-2" class="step row">
    <h2 class="small-2 medium-1 columns">2</h2>
    <div class="small-10 medium-5 columns">
      <h4><span>2. </span>Publish to the web</h4>
      <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_small.png" alt="Publish to Web"></p>
      <p>Under the File menu, select <em>&ldquo;Publish to the Web.&rdquo;</em></p>
      <p>In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.</p>
      <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
    </div>
    <div class="small-12 medium-6 columns">
        <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_button_small.png" alt="Publish to Web 2"></p>
        <p><img class="polaroid" src="{{ static_url }}/img/make/publish_to_web_url_small.png" alt="Publish to Web 3"></p>
      </div>
    </div>
  </div>

  <!-- Step 3 -->
  <form id="make-step-3" class="step row">
    <h2 class="small-2 medium-1 columns">3</h2>
    <div class="small-10 medium-11 columns">
      <h4><span>3. </span>Copy/paste spreadsheet URL into the generator box below</h4>
      <div class="row">
        <div class="small-12 medium-3 columns">
          <label for="embed-source-url" class="right inline">Google Spreadsheet URL</label>
        </div>
        <div class="small-12 medium-6 columns">
          <input type="text" id="embed-source-url" placeholder="1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI">
          <span id="embed-source-url-note" class="left help-inline">You can also use a URL from the original TimelineJS.</span>
        </div>
        <div class="small-12 medium-3 columns">
          <p class="left inline"><small>(Make sure you've published it.)</small></p>
        </div>
      </div>
      <!-- Size-->
      <div class="row">
        <div class="small-3 columns">
          <label class="right inline">Size</label>
        </div>
        <div class="small-9 columns">
          <div class="row collapse">
            <div class="small-6 medium-3 large-1 columns">
              <span class="prefix">Width</span>
            </div>
            <div class="small-6 medium-3 large-1 columns">
              <input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini">
            </div>
            <div class="small-12 medium-3 large-1 columns"></div>
            <div class="small-6 medium-3 large-1 columns">
              <span class="prefix">Height</span>
            </div>
            <div class="small-6 medium-3 large-1 columns end">
              <input type="text" value="650" placeholder="650" id="embed-height" class="input-mini">
            </div>
        </div>
      </div>

      <!-- Extra Options -->
      <form>
        <fieldset>
          <legend>Optional settings
            <a class="show-options" href="#">(show)<span class="caret"></span></a>
            <a class="hide-options" href="#">(hide)<span class="caret"></span></a>
          </legend>
          <p><em>Set language, fonts, starting slide and more.</em></p>
          <div class="more-options">
            <div class="row">
            <!-- Language-->
              <div class="small-12 medium-4 columns">
                <label name="language" for="embed-language">Language</label>
                <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="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="fa" data-lang="Farsi">فارسی</option>
                  <option value="zh-cn" data-lang="Chinese">中文</option>
                </select>
            </div>
            <!-- Fonts-->
            <div class="small-12 medium-5 columns">
              <ul id="embed-font-dropdown">
                <li>
                  <label name="fonts" for="embed-font">Fonts (<a href="#">change</a>)</label>
                  <p><img id="font-pair-preview" src="static/img/make/default.png" /></p>
                  <ul id="embed-font">
                    <li data-value="Default" id="embed-font-active"><i class="fa fa-check"></i> <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="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>
              </ul>
            </div>
{'fraction_non_alphanumeric': 0.17010974822466107, 'fraction_numerical': 0.010208198837959974, 'mean_word_length': 2.440927391364709, 'pattern_counts': {'":': 0, '<': 689, '<?xml version=': 0, '>': 689, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3839993', 'n_tokens_mistral': 8207, 'n_tokens_neox': 7818, 'n_words': 1521}