{"size": 3264, "ext": "js", "max_stars_repo_path": "template/js/project-list.js", "max_stars_repo_name": "Eomm/statusboard", "max_stars_repo_stars_event_min_datetime": "2019-08-16T06:20:20.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-23T08:37:54.000Z", "max_issues_repo_path": "template/js/project-list.js", "max_issues_repo_name": "darcyclarke/statusboard", "max_issues_repo_issues_event_min_datetime": "2019-08-29T15:48:46.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-23T08:14:46.000Z", "max_forks_repo_path": "template/js/project-list.js", "max_forks_repo_name": "darcyclarke/statusboard", "max_forks_repo_forks_event_min_datetime": "2019-08-29T01:12:55.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-23T07:20:29.000Z"}
{"max_stars_count": 15, "max_issues_count": 10, "max_forks_count": 13, "avg_line_length": 37.9534883721, "max_line_length": 186, "alphanum_fraction": 0.4702818627}
'use strict'
/* eslint-env browser */
const { LitElement, html } = require('es5-lit-element')

class ProjectList extends LitElement {
  static get properties () {
    return {
      config: { type: Object },
      projects: { type: Object }
    }
  }
  render () {
    return html`
      <link rel="stylesheet" href="${this.config.files.css.projectList}" />
      <h2>Projects</h2>
      <table class="project-list">
        ${this.projects.map((project) => html`
          <tr>
            <td>
              <a href="https://www.github.com/${project.repoOwner}" target="_blank">${project.repoOwner}</a>
              / <a href="${(project.repoDetails && project.repoDetails.url) || `https://www.github.com/${project.repoOwner}/${project.repoName}`}" target="_blank">${project.repoName}</a>
            </td>
            <td title="Stars">
              <a href="https://npmjs.org/package/${project.packageName}">
                <img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
              </a>
            </td>
            <td title="Watchers">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/watchers/${project.repo}" />
              </a>
            </td>
            <td title="Issues">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/open-issues/${project.repo}" />
              </a>
            </td>
            <td title="PRs">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/open-prs/${project.repo}" />
              </a>
            </td>
            <td title="commits">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/commits/${project.repo}" />
              </a>
            </td>
            <td title="License">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/license/${project.repo}" />
              </a>
            </td>
            <td title="Contributors">
              <a href="https://www.github.com/${project.repo}">
                <img src="https://badgen.net/github/contributors/${project.repo}" />
              </a>
            </td>
            <td>
              ${project.packageJson && (html`
                <a href="https://npmjs.org/package/${project.packageName}">
                  <img src="https://badgen.net/npm/v/${project.packageName}" />
                </a>
              `)}
            </td>
            <td>
              ${project.packageJson && (html`
                <a href="https://npmjs.org/package/${project.packageName}">
                  <img src="https://badgen.net/npm/dm/${project.packageName}" />
                </a>
              `)}
            </td>
            <td>
              ${project.travis && (html`
                <a href="https://travis-ci.org/${project.repo}">
                  <img src="https://badgen.net/travis/${project.repo}" />
                </a>
              `)}
            </td>
          </tr>
        `)}
      </table>
    `
  }
}
customElements.define('statusboard-project-list', ProjectList)
