<div id="sitemap">

  <p>Explore all the posts on Life in Little Ways.</p>

  <div id="sitemap-list">Loading posts...</div>

</div>

<script>

(function () {

  var container = document.getElementById("sitemap-list");

  var feedUrl = "/feeds/posts/default?alt=json&max-results=500";

  fetch(feedUrl)

    .then(function (response) {

      if (!response.ok) throw new Error("Feed unavailable");

      return response.json();

    })

    .then(function (data) {

      var entries = data.feed.entry || [];

      var posts = entries.map(function (entry) {

        var link = entry.link.find(function (item) {

          return item.rel === "alternate";

        });

        return {

          title: entry.title.$t,

          url: link ? link.href : "#"

        };

      });

      posts.sort(function (a, b) {

        return a.title.localeCompare(b.title);

      });

      var list = document.createElement("ul");

      posts.forEach(function (post) {

        var item = document.createElement("li");

        var link = document.createElement("a");

        link.href = post.url;

        link.textContent = post.title;

        item.appendChild(link);

        list.appendChild(item);

      });

      container.textContent = "";

      if (posts.length) {

        container.appendChild(list);

      } else {

        container.textContent = "No posts found.";

      }

    })

    .catch(function () {

      container.textContent =

        "Unable to load posts. Please try again later.";

    });

})();

</script>