polis-client-js example

by patcon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polis Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Polis Conversation Viewer</h1>
  <div id="comments-container">Loading comments...</div>

  <!-- Load your script as an ES module -->
  <script type="module" src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 2rem;
  background-color: #f9f9f9;
  color: #333;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

#comments-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment {
  padding: 0.5rem 1rem;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

JavaScript

// Use an ESM CDN URL pointing to your built file
import { PolisClient } from "https://cdn.jsdelivr.net/gh/patcon/polis-client@main/typescript/dist/index.js";

const container = document.getElementById("comments-container");

async function loadComments() {
  try {
    const polis = new PolisClient({
      baseUrl: "https://corsproxy.io/?url=https://pol.is/api/v3",
    });
    const comments = await polis.getComments("2demo");

    container.innerHTML = ""; // clear loading text

    if (!comments || comments.length === 0) {
      container.textContent = "No comments found.";
      return;
    }

    comments.forEach((comment) => {
      const div = document.createElement("div");
      div.className = "comment";
      div.textContent = comment.text || comment.body || JSON.stringify(comment);
      container.appendChild(div);
    });
  } catch (err) {
    console.error(err);
    container.textContent = "Failed to load comments. See console for details.";
  }
}

loadComments();