people.html

---
layout: default
title: People
---

<header class="intro">
  <h1>People</h1>
</header>

<div class="people-body">
  <ul class="listing">
    {% assign people = site.people | sort: 'listing-priority' %}
    {% for person in people %}
    <li>
      <p><a href="{{ site.baseurl }}{{ person.url }}">{{ person.name }}</a> - {{ person.role }}</p>
    </li>
    {% endfor %}
  </ul>
</div>

<div id="redirectToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
  style="position: absolute; top: 76px; right: 20px;">
  <div class="toast-header">
    <strong class="mr-auto">Going back</strong>
    <small><span id="countdown"></span> seconds</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Dismiss to delay the redirect to the homepage
  </div>
</div>

<!-- JavaScript part -->
<script type="text/javascript">
  // Total seconds to wait
  var seconds = 30;

  function countdown() {
    seconds = seconds - 1;
    try {
      if (seconds == 10) {
        $('.toast').toast({
          delay: 11000
        });
        $('#redirectToast').toast('show');
        $('#redirectToast').on('hidden.bs.toast', function () {
          seconds = 30;
        });
      }
    } catch (error) {
      console.error(error);
      // expected output: ReferenceError: nonExistentFunction is not defined
      // Note - error messages will vary depending on browser
    }
    if (seconds < 0) {
      // Redirection link here
      window.location = "{{ site.baseurl }}";
    } else {
      // Update remaining seconds
      document.getElementById("countdown").innerHTML = seconds;
      // Count down using javascript
      window.setTimeout("countdown()", 1000);
    }
  }

  // Run countdown function
  countdown();
</script>