comments_example.html

<div class="block content has-background-light p-4">
  <strong>Discussions around the web:</strong>

  <div id="comment" data-discussion-url="https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i">
    <ul></ul>
  </div>

  <p class="pt-2">Powered by <a href="https://discu.eu">discu.eu</a>.</p>
</div>

<script defer src="discussions.js"></script>
<script>
window.addEventListener('load', function(_event) {
  let discussionsUrl = new URL(document.getElementById("comment").dataset.discussionUrl);
  let networks = {
      'r': 'Reddit',
      'h': 'Hacker News',
      'l': 'Lobste.rs',
    };
  let repo = new discussionsRepo(discussionsUrl, networks);
  let renderer = new templateRenderer();
  new Discussions(repo, renderer).maybeHandle();
}); 
</script>

<template id="comment-line">
  <li class="comment-line">
    <a href=""><span class="platform"></span> (<span class="count"></span> comments)</a>
  </li>
</template>

<template id="comment-loading">
  <p class="loading">
  Looking up discussions on social networks...
  </p>
</template>

<template id="comment-empty">
  <p class="empty">
  Article is not submitted to Reddit, Lobste.rs or Hacker News.
  </p>
</template>

<template id="comment-error">
  <p class="is-error">
  An error occurred while loading the discussions.
  </p>
</template>