liveshared/index.html at main · zaunere/liveshared · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Share Sessions</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; background: #f9f9f9; }
    h1 { text-align: center; margin-bottom: 1.5rem; color: #333; }
    form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    form input { padding: 0.75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
    form input:invalid { border-color: #e55353; }
    form input:focus { border-color: #0366d6; outline: none; }
    form button { align-self: flex-start; padding: 0.75rem 1.5rem; font-size: 1rem; background: #0366d6; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s ease; }
    form button:hover { background: #024fa2; }
    .session { background: #fff; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .session h2 { margin: 0 0 0.5rem; font-size: 1.2rem; color: #0366d6; }
    .session a { color: #28a745; text-decoration: none; }
    .session a:hover { text-decoration: underline; }
    .session p { margin: 0.5rem 0; color: #555; }
    .session small { color: #777; }
    .error { color: #e55353; font-size: 0.9rem; }
  </style>
</head>
<body>
  <h1>Live Share Sessions</h1>

  <form id="postSession" novalidate>
    <input type="url" id="sessionUrl" placeholder="Paste Live Share URL" required
           pattern="^(https?:\/\/)?(prod\.liveshare\.vsengsaas\.visualstudio\.com\/join\?|vsls:\/\/)[^\s]+$">
    <input type="text" id="sessionDesc" placeholder="Brief description" required maxlength="100">
    <span id="errorMsg" class="error" hidden>Enter a valid Live Share URL.</span>
    <button type="submit">Post Session</button>
  </form>

  <div id="sessions">Loading sessions…</div>

  <script>
    const owner = 'OWNER';
    const repo = 'REPO';
    const form = document.getElementById('postSession');
    const urlInput = document.getElementById('sessionUrl');
    const descInput = document.getElementById('sessionDesc');
    const errorMsg = document.getElementById('errorMsg');

    form.addEventListener('submit', e => {
      e.preventDefault();
      // Validate URL pattern
      if (!urlInput.checkValidity()) {
        errorMsg.hidden = false;
        urlInput.focus();
        return;
      }
      errorMsg.hidden = true;
      const url = encodeURIComponent(urlInput.value.trim());
      const desc = encodeURIComponent(descInput.value.trim());
      const title = encodeURIComponent(`Live Share: ${decodeURIComponent(url)}`);
      const body = encodeURIComponent(`**URL**  \n${decodeURIComponent(url)}\n\n**Desc**  \n${decodeURIComponent(desc)}`);
      const issueUrl = `https://github.com/${owner}/${repo}/issues/new?labels=live-share&title=${title}&body=${body}`;
      window.open(issueUrl, '_blank');
    });

    // Load sessions
    fetch(`https://api.github.com/repos/${owner}/${repo}/issues?labels=live-share&state=open`)
      .then(res => res.json())
      .then(issues => {
        const container = document.getElementById('sessions');
        if (!Array.isArray(issues) || issues.length === 0) {
          container.innerHTML = '<p>No sessions currently.</p>';
          return;
        }
        container.innerHTML = issues.map(issue => {
          const match = issue.body.match(/https?:\/\/[^\s]+|vsls:\/\/[^\s]+/);
          const link = match ? match[0] : '#';
          const desc = issue.body.split(/\r?\n/).slice(1).join(' ').trim();
          return `
            <div class="session">
              <h2>${issue.title}</h2>
              <p><a href="${link}" target="_blank">Join →</a></p>
              <p>${desc}</p>
              <small>by @${issue.user.login}</small>
            </div>`;
        }).join('');
      })
      .catch(() => {
        document.getElementById('sessions').innerHTML = '<p>Cannot load sessions.</p>';
      });
  </script>
</body>
</html>