@pkgjs/statusboard 0.0.14 → 0.1.1

package/.github/workflows/build.yml

@@ -1,16 +1,53 @@
-name: Index and build site
-on: push
+name: Generate Statusboard
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
-  build:
+  index:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
-    - name: Create GH Pages
-      uses: pkgjs/gh-pages@master
+    - name: Checkout
+      uses: actions/checkout@v4
+    - name: Setup Pages
+      uses: actions/configure-pages@v5
+    - uses: actions/setup-node@v4
       with:
-        nojekyll: true
-        repo: pkgjs/statusboard
-        commit: pages build from ${{ github.sha }}
-        build: npm i && npm run build
+        node-version: 20
+    - uses: actions/cache@v4
+      id: cache
+      with:
+        path: |
+          ~/.npm
+          ~/.cache
+          ./dist
+          ./node_modules
+        key: ${{ runner.os }}-build-${{ github.sha }}
+    - if: steps.cache.outputs.cache-hit != 'true'
+      run: npm install
+      shell: bash
+    - run: npm run build
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: './gh-pages'
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v4

package/.github/workflows/test.yml

@@ -0,0 +1,51 @@
+name: Run Tests
+
+on: 
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: "${{ github.workflow }} ✨ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+  cancel-in-progress: false
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --only=dev
+
+      - name: Run lint
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 19, 20, 21, 22, 23]
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run tests
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: npm test

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,4 @@
+# Code of Conduct
+
+The Node.js Code of Conduct, which applies to this project, can be found at
+https://github.com/nodejs/admin/blob/master/CODE_OF_CONDUCT.md.

package/CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing
+
+## Code of Conduct
+
+The Node.js project has a
+[Code of Conduct](https://github.com/nodejs/admin/blob/master/CODE_OF_CONDUCT.md)
+to which all contributors must adhere.
+
+See [details on our policy on Code of Conduct](https://github.com/nodejs/node/blob/master/doc/guides/contributing/code-of-conduct.md).
+
+<a id="developers-certificate-of-origin"></a>
+## Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+* (a) The contribution was created in whole or in part by me and I
+  have the right to submit it under the open source license
+  indicated in the file; or
+
+* (b) The contribution is based upon previous work that, to the best
+  of my knowledge, is covered under an appropriate open source
+  license and I have the right under that license to submit that
+  work with modifications, whether created in whole or in part
+  by me, under the same open source license (unless I am
+  permitted to submit under a different license), as indicated
+  in the file; or
+
+* (c) The contribution was provided directly to me by some other
+  person who certified (a), (b) or (c) and I have not modified
+  it.
+
+* (d) I understand and agree that this project and the contribution
+  are public and that a record of the contribution (including all
+  personal information I submit with it, including my sign-off) is
+  maintained indefinitely and may be redistributed consistent with
+  this project or the open source license(s) involved.

package/LICENSE

@@ -1,21 +1,10 @@
 MIT License
 
-Copyright Node.js contributors. All rights reserved.
+Copyright (c) 2020 Contributors https://github.com/pkgjs/statusboard/graphs/contributors
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -5,6 +5,9 @@ of GitHub projects.  When you have work spread across multiple repos
 and multiple orginizations, it is often hard to track things.  This
 is what `@pkgjs/statusboard` aims to solve.
 
+This repository is managed by the [Package Maintenance Working Group](https://github.com/nodejs/package-maintenance), see [Governance](https://github.com/nodejs/package-maintenance/blob/master/Governance.md).
+
+
 ## Example
 
 https://expressjs.github.io/statusboard/

package/lib/config.js

@@ -16,7 +16,7 @@ const DEFAULTS = {
   baseUrl: '',
   port: 5005,
   template: builder,
-  indicies: indicies,
+  indicies,
   title: 'StatusBoard',
   description: 'Project StatusBoard',
   issueLabels: ['top priority', 'good first issue', 'help wanted', 'discussion', 'meeting']

package/lib/db/build-index.js

@@ -6,8 +6,8 @@ const { Project } = require('../project')
 
 module.exports = async function buildIndex (config, db) {
   // Loop projects
-  for await (let evt of iterateProjects(config)) {
-    let { type, project, detail } = evt
+  for await (const evt of iterateProjects(config)) {
+    const { type, project, detail } = evt
     let key = `${project.repoOwner}:${project.repoName}:${type}`
     switch (type) {
       case 'ISSUE':
@@ -32,21 +32,21 @@ async function * iterateProjects (config) {
   const [octokit, graphQL] = await github(config.github)
 
   // Load projects
-  for (let proj of config.projects) {
-    for await (let evt of loadProject(octokit, graphQL, proj, config)) {
+  for (const proj of config.projects) {
+    for await (const evt of loadProject(octokit, graphQL, proj, config)) {
       yield evt
     }
   }
 
   // Load projects for org
-  for (let org of config.orgs) {
+  for (const org of config.orgs) {
     try {
-      for await (let repo of github.getOrgRepos(graphQL, org.name)) {
+      for await (const repo of github.getOrgRepos(graphQL, org.name)) {
         const proj = new Project({
           repoOwner: repo.owner,
           repoName: repo.name
         })
-        for await (let evt of loadProject(octokit, graphQL, proj, config, repo)) {
+        for await (const evt of loadProject(octokit, graphQL, proj, config, repo)) {
           yield evt
         }
       }
@@ -67,6 +67,9 @@ async function * loadProject (octokit, graphQL, project, config, _repo) {
     }
   }
 
+  // Check config for repoBranch
+  project.repoBranch = project.repoBranch ?? repo.branch
+
   let pkg
   try {
     pkg = await files.getPackageJson(project)
@@ -130,7 +133,7 @@ async function * loadProject (octokit, graphQL, project, config, _repo) {
   }
 
   try {
-    for await (let issue of github.getRepoIssues(graphQL, project.repoOwner, project.repoName)) {
+    for await (const issue of github.getRepoIssues(graphQL, project.repoOwner, project.repoName)) {
       yield projectDetail('ISSUE', project, issue)
     }
   } catch (e) {
@@ -138,7 +141,7 @@ async function * loadProject (octokit, graphQL, project, config, _repo) {
   }
 
   try {
-    for await (let activity of github.getRepoActivity(octokit, project.repoOwner, project.repoName)) {
+    for await (const activity of github.getRepoActivity(octokit, project.repoOwner, project.repoName)) {
       yield projectDetail('ACTIVITY', project, activity)
     }
   } catch (e) {
@@ -146,7 +149,7 @@ async function * loadProject (octokit, graphQL, project, config, _repo) {
   }
 
   try {
-    for await (let commit of github.getRepoCommits(graphQL, project.repoOwner, project.repoName)) {
+    for await (const commit of github.getRepoCommits(graphQL, project.repoOwner, project.repoName, project.repoBranch)) {
       yield projectDetail('COMMIT', project, commit)
     }
   } catch (e) {

package/lib/files.js

@@ -1,5 +1,4 @@
 'use strict'
-const fetch = require('node-fetch')
 const yaml = require('js-yaml')
 const GHRAW = 'https://raw.githubusercontent.com/'
 

package/lib/github.js

@@ -1,8 +1,11 @@
 'use strict'
 const inquirer = require('inquirer')
-const Octokit = require('@octokit/rest')
-  .plugin(require('@octokit/plugin-throttling'))
-  .plugin(require('@octokit/plugin-retry'))
+const { retry } = require('@octokit/plugin-retry')
+const { throttling } = require('@octokit/plugin-throttling')
+const { Octokit } = require('@octokit/rest')
+
+const OctokitRest = Octokit
+  .plugin(retry, throttling)
 
 const { graphql } = require('@octokit/graphql')
 
@@ -32,6 +35,9 @@ const repoQuerySnip = `{
     name
   }
   homepageUrl
+  defaultBranchRef {
+    name
+  }
 }`
 
 const issueQuerySnip = `pageInfo {
@@ -75,7 +81,7 @@ async function getOctokit (opts = {}) {
   let {
     token,
     log,
-    onAbuseLimit,
+    onSecondaryRateLimit,
     onRateLimit
   } = opts
 
@@ -94,10 +100,10 @@ async function getOctokit (opts = {}) {
 
   log = log || console
 
-  const octokit = Octokit({
+  const octokit = new OctokitRest({
     auth,
     throttle: {
-      onAbuseLimit: onAbuseLimit || ((err) => {
+      onSecondaryRateLimit: onSecondaryRateLimit || ((err) => {
         log.error(err)
       }),
       onRateLimit: onRateLimit || ((err, options) => {
@@ -133,6 +139,7 @@ class Repo {
     this.license = repo.licenseInfo && (repo.licenseInfo.spdx_id || repo.licenseInfo.name)
     this.language = repo.primaryLanguage ? repo.primaryLanguage.name : repo.primaryLanguage
     this.homepage = repo.homepageUrl
+    this.branch = repo.defaultBranchRef.name
   }
 }
 
@@ -145,7 +152,7 @@ module.exports.getRepo =
         ${repoQuerySnip}
       }`,
        org: owner,
-       repo: repo
+       repo
      })
      return new Repo(owner, resp.repository)
    } catch (error) {
@@ -203,8 +210,8 @@ async function getRemainingPullRequests (graphQL, owner, repo, cursor) {
       }
       `,
       org: owner,
-      repo: repo,
-      cursor: cursor
+      repo,
+      cursor
     })
     const { pageInfo, edges } = resp.organization.repository.pullRequests
     const pullRequests = !pageInfo.hasNextPage ? edges : edges.concat(await getRemainingPullRequests(graphQL, owner, repo, pageInfo.endCursor))
@@ -229,7 +236,7 @@ async function getPullRequests (graphQL, owner, repo) {
         }
       }`,
       org: owner,
-      repo: repo
+      repo
     })
     const { pageInfo, edges } = resp.organization.repository.pullRequests
     const pullRequests = !pageInfo.hasNextPage ? edges : edges.concat(await getRemainingPullRequests(graphQL, owner, repo, pageInfo.endCursor))
@@ -255,8 +262,8 @@ async function getRemainingIssues (graphQL, owner, repo, cursor) {
       }
       `,
       org: owner,
-      repo: repo,
-      cursor: cursor
+      repo,
+      cursor
     })
     const { pageInfo, edges } = resp.organization.repository.issues
     const issues = !pageInfo.hasNextPage ? edges : edges.concat(await getRemainingIssues(graphQL, owner, repo, pageInfo.endCursor))
@@ -271,7 +278,7 @@ async function getRemainingIssues (graphQL, owner, repo, cursor) {
 module.exports.getRepoIssues =
   async function * getRepoIssues (graphQL, owner, repo) {
     try {
-      let resp = await graphQL({
+      const resp = await graphQL({
         query: `query ($org: String!, $repo: String!) {
           organization(login: $org) {
             repository(name: $repo) {
@@ -282,14 +289,14 @@ module.exports.getRepoIssues =
           }
         }`,
         org: owner,
-        repo: repo
+        repo
       })
       const { pageInfo, edges } = resp.organization.repository.issues
       const issues = !pageInfo.hasNextPage ? edges : edges.concat(await getRemainingIssues(graphQL, owner, repo, pageInfo.endCursor))
 
       issues.push.apply(issues, await getPullRequests(graphQL, owner, repo))
 
-      for (let i of issues) {
+      for (const i of issues) {
         yield new Issue(owner, repo, i.node)
       }
     } catch (error) {
@@ -330,7 +337,7 @@ async function * getRepoActivity (octokit, owner, repo) {
       throw e
     }
 
-    for (let a of resp.data) {
+    for (const a of resp.data) {
       yield new Activity(owner, repo, a)
     }
   }
@@ -361,7 +368,7 @@ module.exports.getReadme =
         }
         `,
         org: owner,
-        repo: repo
+        repo
       })
       let readmeText
       Object.values(resp.repository).forEach(element => {
@@ -393,8 +400,8 @@ async function getRemainingRepos (graphQL, org, cursor) {
           }
         }
       }`,
-      org: org,
-      cursor: cursor
+      org,
+      cursor
     })
 
     const { pageInfo, nodes } = resp.organization.repositories
@@ -411,7 +418,7 @@ async function getRemainingRepos (graphQL, org, cursor) {
 module.exports.getOrgRepos =
   async function * getOrgRepos (graphQL, org) {
     try {
-      let resp = await graphQL({
+      const resp = await graphQL({
         query: `query($org: String!)
         {
           organization(login: $org) {
@@ -425,13 +432,13 @@ module.exports.getOrgRepos =
             }
           }
         }`,
-        org: org
+        org
       })
 
       const { pageInfo, nodes } = resp.organization.repositories
       const repos = !pageInfo.hasNextPage ? nodes : nodes.concat(await getRemainingRepos(graphQL, org, pageInfo.endCursor))
 
-      for (let r of repos) {
+      for (const r of repos) {
         yield new Repo(org, r)
       }
     } catch (error) {
@@ -462,12 +469,12 @@ class Commit {
   }
 }
 
-async function getRemainingCommits (graphQL, owner, repo, cursor) {
+async function getRemainingCommits (graphQL, owner, repo, cursor, branch) {
   try {
-    let resp = await graphQL({
-      query: `query ($org: String!, $repo: String!, $cursor: String!) {
+    const resp = await graphQL({
+      query: `query ($org: String!, $repo: String!, $cursor: String!, $branch: String!) {
         repository(name: $repo, owner: $org) {
-          object(expression: "master") {
+          object(expression: $branch) {
             ... on Commit {
               history(first: 100, after: $cursor) {
                 nodes {
@@ -498,11 +505,12 @@ async function getRemainingCommits (graphQL, owner, repo, cursor) {
       }
       `,
       org: owner,
-      repo: repo,
-      cursor: cursor
+      repo,
+      cursor,
+      branch
     })
     const { pageInfo, nodes } = resp.repository.object.history
-    const commits = !pageInfo.hasNextPage ? nodes : nodes.concat(await getRemainingCommits(graphQL, owner, repo, pageInfo.endCursor))
+    const commits = !pageInfo.hasNextPage ? nodes : nodes.concat(await getRemainingCommits(graphQL, owner, repo, pageInfo.endCursor, branch))
 
     return commits
   } catch (error) {
@@ -512,12 +520,12 @@ async function getRemainingCommits (graphQL, owner, repo, cursor) {
 }
 
 module.exports.getRepoCommits =
-async function * getRepoCommits (graphQL, owner, repo) {
+async function * getRepoCommits (graphQL, owner, repo, branch) {
   try {
-    let resp = await graphQL({
-      query: `query ($org: String!, $repo: String!) {
+    const resp = await graphQL({
+      query: `query ($org: String!, $repo: String!, $branch: String!) {
         repository(name: $repo, owner: $org) {
-          object(expression: "master") {
+          object(expression: $branch) {
             ... on Commit {
               history(first: 100) {
                 nodes {
@@ -548,12 +556,13 @@ async function * getRepoCommits (graphQL, owner, repo) {
       }
       `,
       org: owner,
-      repo: repo
+      repo,
+      branch
     })
     const { pageInfo, nodes } = resp.repository.object.history
-    const commits = !pageInfo.hasNextPage ? nodes : nodes.concat(await getRemainingCommits(graphQL, owner, repo, pageInfo.endCursor))
+    const commits = !pageInfo.hasNextPage ? nodes : nodes.concat(await getRemainingCommits(graphQL, owner, repo, pageInfo.endCursor, branch))
 
-    for (let c of commits) {
+    for (const c of commits) {
       yield new Commit(owner, repo, c)
     }
   } catch (error) {

package/lib/npm.js

@@ -1,5 +1,5 @@
 'use strict'
-const libnpm = require('libnpm')
+const pacote = require('pacote')
 
 const Packument = module.exports.Packument =
 class Packument {
@@ -12,7 +12,7 @@ class Packument {
 }
 
 module.exports.getPackument = async function getNpmPackument (packageName) {
-  const resp = await libnpm.packument(packageName)
+  const resp = await pacote.packument(packageName)
   return new Packument(resp)
 }
 
@@ -30,6 +30,6 @@ class Manifest {
   }
 }
 module.exports.getManifest = async function getNpmManifest (packageName) {
-  const resp = await libnpm.manifest(packageName)
+  const resp = await pacote.manifest(packageName)
   return new Manifest(resp)
 }

package/lib/project.js

@@ -23,7 +23,7 @@ module.exports.Project = class Project {
     this.repo = repo
     this.repoOwner = repoOwner
     this.repoName = repoName
-    this.repoBranch = proj.repoBranch || 'master'
+    this.repoBranch = proj.repoBranch
     this.repoDirectory = proj.repoDirectory || '/'
     this.packageName = null
   }

package/lib/template/index.js

@@ -6,7 +6,7 @@ module.exports = async function (config, db) {
   const accumulator = {}
 
   // Read full index
-  for await (let { key, value } of readFullIndex(db)) {
+  for await (const { key, value } of readFullIndex(db)) {
     await Promise.all(Object.keys(indicies).map(async (index) => {
       accumulator[index] = await indicies[index](accumulator[index], config, key, value)
     }))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pkgjs/statusboard",
-  "version": "0.0.14",
+  "version": "0.1.1",
   "description": "A dashboard for project status",
   "author": "Wes Todd <wes@wesleytodd.com>",
   "keywords": [
@@ -19,7 +19,8 @@
     "statusboard": "./bin/statusboard"
   },
   "scripts": {
-    "test": "standard && mocha",
+    "lint": "standard",
+    "test": "mocha",
     "prepublushOnly": "npm t",
     "postpublish": "git push origin && git push origin --tags",
     "clean": "./bin/statusboard clean -C ./test/fixtures/config -d ./gh-pages/data.db",
@@ -29,34 +30,35 @@
     "serve": "./bin/statusboard serve -o ./gh-pages -C ./test/fixtures/config -d ./gh-pages/data.db"
   },
   "devDependencies": {
-    "mocha": "^6.1.4",
-    "serve": "^11.1.0",
-    "standard": "^12.0.1"
+    "mocha": "^10.8.2",
+    "standard": "^17.1.2"
   },
   "dependencies": {
-    "@octokit/graphql": "^4.3.1",
-    "@octokit/plugin-retry": "^2.2.0",
-    "@octokit/plugin-throttling": "^2.6.0",
-    "@octokit/rest": "^16.28.2",
+    "@octokit/graphql": "^7.1.0",
+    "@octokit/plugin-retry": "^6.0.1",
+    "@octokit/plugin-throttling": "^8.2.0",
+    "@octokit/rest": "^20.1.1",
     "@primer/octicons": "^9.1.1",
-    "@wesleytodd/buildcss": "0.0.5",
+    "@wesleytodd/buildcss": "0.0.6",
     "@wesleytodd/buildjs": "0.0.8",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "cptmpl": "0.0.4",
-    "dotenv": "^8.0.0",
+    "dotenv": "^16.4.7",
     "es5-lit-element": "^2.2.1",
+    "es5-lit-html": "^1.1.1",
     "express": "^4.17.1",
     "fs-extra": "^8.1.0",
-    "inquirer": "^6.4.1",
+    "inquirer": "^12.4.2",
     "install": "^0.13.0",
     "js-yaml": "^3.13.1",
     "level": "^5.0.1",
-    "libnpm": "^2.0.1",
     "lit-element": "^2.2.1",
     "nighthawk": "^2.3.0-1",
-    "node-fetch": "^2.6.0",
-    "npm": "^6.10.3",
-    "regenerator-runtime": "^0.13.3",
-    "yargs": "^13.3.0"
+    "pacote": "^20.0.0",
+    "regenerator-runtime": "^0.14.1",
+    "yargs": "^17.7.2"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

package/template/css/index.css

@@ -1,12 +1,63 @@
 @import './normalize.css';
 @import './normalize-content.css';
 
+body {
+  background-color: rgb(249, 250, 251);
+}
+
+main {
+  width: 100vw;
+  max-width: 100vw;
+  padding: 1.5rem;
+}
+
+#main-index {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-areas: "issues issues users";
+}
+
+.issues-list {
+  grid-area: issues;
+  display: flex;
+  gap: 1.5rem;
+  flex-direction: column;
+
+  a {
+    color: rgb(113, 113, 122);
+  }
+
+  h1 {
+    margin-bottom: 0;
+    color: rgb(9, 9, 11);
+  }
+
+  ul {
+      li {
+        border: 1px solid #ddd;
+        border-radius: .5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 1rem;
+    }
+  }
+
+  .issue-title {
+    font-weight: 600;
+    color: rgb(9, 9, 11);
+  }
+}
+.users-list {
+  grid-area: users;
+}
+
 .users-list li {
   display: flex;
   align-items: center;
 
   a {
-    display: flex;
+    display: flex;   
     align-items: center;
   }
 }
@@ -27,24 +78,24 @@
 
 .issues-list,
 .users-list {
-  min-width: 20rem;
-  padding-left: 1rem;
-  padding-bottom: 1rem;
+  background-color: #fff;
+  border-radius: .5rem;
+  height: 100%;
+  padding: 1.5rem;
+  font-size: 13px;
 
   ul {
-    list-style: circle;
+    list-style: none;
     padding: 0;
     margin: 0;
-
-    li {
-      padding: .25rem 0;
-    }
+    display: flex;
+    gap: 1.5rem;
+    flex-direction: column;
   }
 }
 
-.project-link {
-  display: inline-block;
-  padding: .3rem;
-  background: #efefef;
-  border: .01rem solid #ddd;
-}
+@media screen and (max-width: 690px) {
+  #main-index {
+    grid-template-areas: "issues" "users";
+  }
+}

package/template/css/page.css

@@ -3,14 +3,13 @@
 header {
   display: flex;
   align-items: center;
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 2.75rem;
-  background-image: linear-gradient(#fafafa, #f0f0f0);
-  background-repeat: repeat-x;
-  border-bottom: 1px solid #ddd;
+  background: #fff;
+  border-bottom: 1px solid rgb(228, 228, 231);
   padding: 0 1rem;
 
   .logo {
@@ -52,6 +51,4 @@ header {
   }
 }
 
-main {
-  padding: 4.75rem 2rem 2rem;
-}
+

package/template/css/project-list.css

@@ -1,18 +1,27 @@
 @import './normalize-content.css';
 
+main {
+  width: 100vw;
+  max-width: 100vw;
+  padding: 1.5rem;
+}
+
 .project-list {
+  background-color: #fff;
+  border-inline: 1px solid #ddd;
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
 
-  td {
-    padding: .5rem;
+  tr {
     border-top: 1px solid #ddd;
-    border-bottom: 1px solid #fff;
+    border-bottom: 1px solid #ddd;
   }
-  tr:nth-child(even) td {
-    background: #f9f9f9;
+
+  td {
+    padding: .5rem;
   }
+
   tr td:nth-child(1) {
     min-width: 8rem;
     max-width: 12rem;

package/template/indicies.js

@@ -93,7 +93,7 @@ module.exports = {
 
       labels[label.name] = labels[label.name] || []
       const d = {
-        label: label,
+        label,
         issue: detail,
         project
       }

package/template/js/index.js

@@ -54,17 +54,13 @@ require('nighthawk')({
 
     render(html`
       <statusboard-page .config="${config}">
-        <style>
-          main { display: flex; }
-          main section { padding: 0 1rem; }
-        </style>
-        <main>
-          <section>
+        <main id="main-index">
+          <section class="issues-list">
             <h1><a href="${config.baseUrl}/issues">Top Issues</a></h1>
 
             ${res.locals.issues.map(([tag, issues]) => {
               return html`
-                <div class="issues-list">
+                <div>
                   <h3><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h3>
                   <ul>
                     ${issues.map((issue) => {
@@ -74,7 +70,7 @@ require('nighthawk')({
                               <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
                               / <a href="https://www.github.com/${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
                             </span>
-                            : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
+                            <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
                           </li>
                       `
                     })}
@@ -118,10 +114,9 @@ require('nighthawk')({
       <statusboard-page .config="${config}">
         <main>
           ${res.locals.issues.map(([tag, issues]) => html`
-            <section>
+            <section class="issues-list">
               <h1><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h1>
-
-              <div class="issues-list">
+              <div >
                 <ul>
                   ${issues.map((issue) => html`
                       <li>
@@ -129,7 +124,7 @@ require('nighthawk')({
                           <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
                           / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
                         </span>
-                        : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
+                        <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
                       </li>
                   `)}
                 </ul>
@@ -146,19 +141,21 @@ require('nighthawk')({
     }, null)
     render(html`
       <statusboard-page .config="${config}">
-        <h1>Issues: ${req.params.label}</h1>
         <div class="issues-list">
-          <ul>
-            ${issues.map((issue) => html`
-                <li>
-                  <span class="project-link">
-                    <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
-                    / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
-                  </span>
-                  : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
-                </li>
-            `)}
-          </ul>
+          <h1>Issues: ${req.params.label}</h1>
+          <div>
+            <ul>
+              ${issues.map((issue) => html`
+                  <li>
+                    <span class="project-link">
+                      <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
+                      / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
+                    </span>
+                    <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
+                  </li>
+              `)}
+            </ul>
+          </div>
         </div>
       </statusboard-page>
     `, document.body)

package/template/js/page.js

@@ -8,6 +8,7 @@ class Page extends LitElement {
       config: { type: Object }
     }
   }
+
   render () {
     return html`
       <link rel="stylesheet" href="${this.config.files.css.page}" />

package/template/js/project-list.js

@@ -9,76 +9,79 @@ class ProjectList extends LitElement {
       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`
+      <main>
+        <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/npm/v/${project.packageName}" />
+                  <img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
                 </a>
-              `)}
-            </td>
-            <td>
-              ${project.packageJson && (html`
-                <a href="https://npmjs.org/package/${project.packageName}">
-                  <img src="https://badgen.net/npm/dm/${project.packageName}" />
+              </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>
-              ${project.travis && (html`
-                <a href="https://travis-ci.org/${project.repo}">
-                  <img src="https://badgen.net/travis/${project.repo}" />
+              </td>
+              <td title="Contributors">
+                <a href="https://www.github.com/${project.repo}">
+                  <img src="https://badgen.net/github/contributors/${project.repo}" />
                 </a>
-              `)}
-            </td>
-          </tr>
-        `)}
-      </table>
+              </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>
+      </main>
     `
   }
 }