fredwe.github.io/index.html at master · FredWe/fredwe.github.io · 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
<!doctype html>

<html>
  <head>
    <title>Blogiss - Blogified GitHub Issues</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      pre{
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1 class="title">
        <a href="index.html"><strong>Blogiss Homepage</strong></a>
      </h1>
      <p class="description">
        Free & Fast blogging with <strong>Github issues</strong>.
      </p>
    </div>
    <ul class="posts"></ul>
    <div id="loading">
      Loading...
    </div>
  </body>
  <script>
    var createPost = function (item) {
      var li = document.createElement('li')
      var pre = document.createElement('pre')
      var title = document.createElement('h2')
      pre.innerHTML = item.body.replace(/!\[.*?\]\s*?\(\s*?(\S+?)\)/g, (whole, url) => `<img src="${url}"/>`)
      title.textContent = item.title
      li.appendChild(title)
      li.appendChild(pre)
      return li
    }
    var showPosts = function (arr) {
      var posts = document.body.querySelector('.posts')
      arr.forEach(function (it) {
        posts.appendChild(createPost(it))
      })
      var loading = document.getElementById('loading')
      if (loading.parentNode) {
        loading.parentNode.removeChild(loading)
      }
    }
    var getIssues = function (conf) {
      return window.fetch(`https://api.github.com/repos/${conf['USER']}/${conf['REPO']}/issues`)
      .then(function (response) {
        return response.json()
      }).then(function (issues) {
        issues = issues.filter(item => item.user.login.toLowerCase() === conf['USER'].toLowerCase())
        showPosts(issues)
      })
    }
    var loadConfig = window.fetch('config.json')
    .then(function (confRes) {
      // Convert to JSON
      return confRes.json()
    })

    loadConfig.then(getIssues)
  </script>
</html>