@pkgjs/statusboard 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/template/css/index.css +66 -15
  3. package/template/css/page.css +4 -7
  4. package/template/css/project-list.css +14 -5
  5. package/template/js/index.js +21 -24
  6. package/template/js/project-list.js +65 -63
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pkgjs/statusboard",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "A dashboard for project status",
5
5
  "author": "Wes Todd <wes@wesleytodd.com>",
6
6
  "keywords": [
package/template/css/index.css CHANGED
@@ -1,12 +1,63 @@
1
1
  @import './normalize.css';
2
2
  @import './normalize-content.css';
3
3
 
4
+ body {
5
+ background-color: rgb(249, 250, 251);
6
+ }
7
+
8
+ main {
9
+ width: 100vw;
10
+ max-width: 100vw;
11
+ padding: 1.5rem;
12
+ }
13
+
14
+ #main-index {
15
+ display: grid;
16
+ gap: 1.5rem;
17
+ grid-template-areas: "issues issues users";
18
+ }
19
+
20
+ .issues-list {
21
+ grid-area: issues;
22
+ display: flex;
23
+ gap: 1.5rem;
24
+ flex-direction: column;
25
+
26
+ a {
27
+ color: rgb(113, 113, 122);
28
+ }
29
+
30
+ h1 {
31
+ margin-bottom: 0;
32
+ color: rgb(9, 9, 11);
33
+ }
34
+
35
+ ul {
36
+ li {
37
+ border: 1px solid #ddd;
38
+ border-radius: .5rem;
39
+ display: flex;
40
+ flex-direction: column;
41
+ gap: 0.5rem;
42
+ padding: 1rem;
43
+ }
44
+ }
45
+
46
+ .issue-title {
47
+ font-weight: 600;
48
+ color: rgb(9, 9, 11);
49
+ }
50
+ }
51
+ .users-list {
52
+ grid-area: users;
53
+ }
54
+
4
55
  .users-list li {
5
56
  display: flex;
6
57
  align-items: center;
7
58
 
8
59
  a {
9
- display: flex;
60
+ display: flex;
10
61
  align-items: center;
11
62
  }
12
63
  }
@@ -27,24 +78,24 @@
27
78
 
28
79
  .issues-list,
29
80
  .users-list {
30
- min-width: 20rem;
31
- padding-left: 1rem;
32
- padding-bottom: 1rem;
81
+ background-color: #fff;
82
+ border-radius: .5rem;
83
+ height: 100%;
84
+ padding: 1.5rem;
85
+ font-size: 13px;
33
86
 
34
87
  ul {
35
- list-style: circle;
88
+ list-style: none;
36
89
  padding: 0;
37
90
  margin: 0;
38
-
39
- li {
40
- padding: .25rem 0;
41
- }
91
+ display: flex;
92
+ gap: 1.5rem;
93
+ flex-direction: column;
42
94
  }
43
95
  }
44
96
 
45
- .project-link {
46
- display: inline-block;
47
- padding: .3rem;
48
- background: #efefef;
49
- border: .01rem solid #ddd;
50
- }
97
+ @media screen and (max-width: 690px) {
98
+ #main-index {
99
+ grid-template-areas: "issues" "users";
100
+ }
101
+ }
package/template/css/page.css CHANGED
@@ -3,14 +3,13 @@
3
3
  header {
4
4
  display: flex;
5
5
  align-items: center;
6
- position: fixed;
6
+ position: sticky;
7
7
  top: 0;
8
8
  left: 0;
9
9
  width: 100%;
10
10
  min-height: 2.75rem;
11
- background-image: linear-gradient(#fafafa, #f0f0f0);
12
- background-repeat: repeat-x;
13
- border-bottom: 1px solid #ddd;
11
+ background: #fff;
12
+ border-bottom: 1px solid rgb(228, 228, 231);
14
13
  padding: 0 1rem;
15
14
 
16
15
  .logo {
@@ -52,6 +51,4 @@ header {
52
51
  }
53
52
  }
54
53
 
55
- main {
56
- padding: 4.75rem 2rem 2rem;
57
- }
54
+
package/template/css/project-list.css CHANGED
@@ -1,18 +1,27 @@
1
1
  @import './normalize-content.css';
2
2
 
3
+ main {
4
+ width: 100vw;
5
+ max-width: 100vw;
6
+ padding: 1.5rem;
7
+ }
8
+
3
9
  .project-list {
10
+ background-color: #fff;
11
+ border-inline: 1px solid #ddd;
4
12
  width: 100%;
5
13
  border-spacing: 0;
6
14
  border-collapse: collapse;
7
15
 
8
- td {
9
- padding: .5rem;
16
+ tr {
10
17
  border-top: 1px solid #ddd;
11
- border-bottom: 1px solid #fff;
18
+ border-bottom: 1px solid #ddd;
12
19
  }
13
- tr:nth-child(even) td {
14
- background: #f9f9f9;
20
+
21
+ td {
22
+ padding: .5rem;
15
23
  }
24
+
16
25
  tr td:nth-child(1) {
17
26
  min-width: 8rem;
18
27
  max-width: 12rem;
package/template/js/index.js CHANGED
@@ -54,17 +54,13 @@ require('nighthawk')({
54
54
 
55
55
  render(html`
56
56
  <statusboard-page .config="${config}">
57
- <style>
58
- main { display: flex; }
59
- main section { padding: 0 1rem; }
60
- </style>
61
- <main>
62
- <section>
57
+ <main id="main-index">
58
+ <section class="issues-list">
63
59
  <h1><a href="${config.baseUrl}/issues">Top Issues</a></h1>
64
60
 
65
61
  ${res.locals.issues.map(([tag, issues]) => {
66
62
  return html`
67
- <div class="issues-list">
63
+ <div>
68
64
  <h3><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h3>
69
65
  <ul>
70
66
  ${issues.map((issue) => {
@@ -74,7 +70,7 @@ require('nighthawk')({
74
70
  <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
75
71
  / <a href="https://www.github.com/${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
76
72
  </span>
77
- : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
73
+ <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
78
74
  </li>
79
75
  `
80
76
  })}
@@ -118,10 +114,9 @@ require('nighthawk')({
118
114
  <statusboard-page .config="${config}">
119
115
  <main>
120
116
  ${res.locals.issues.map(([tag, issues]) => html`
121
- <section>
117
+ <section class="issues-list">
122
118
  <h1><a href="${config.baseUrl}/issues/${tag.name}">${tag.name}</a></h1>
123
-
124
- <div class="issues-list">
119
+ <div >
125
120
  <ul>
126
121
  ${issues.map((issue) => html`
127
122
  <li>
@@ -129,7 +124,7 @@ require('nighthawk')({
129
124
  <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
130
125
  / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
131
126
  </span>
132
- : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
127
+ <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
133
128
  </li>
134
129
  `)}
135
130
  </ul>
@@ -146,19 +141,21 @@ require('nighthawk')({
146
141
  }, null)
147
142
  render(html`
148
143
  <statusboard-page .config="${config}">
149
- <h1>Issues: ${req.params.label}</h1>
150
144
  <div class="issues-list">
151
- <ul>
152
- ${issues.map((issue) => html`
153
- <li>
154
- <span class="project-link">
155
- <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
156
- / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
157
- </span>
158
- : <a href="${issue.issue.url}" target="_blank">${issue.issue.title}</a>
159
- </li>
160
- `)}
161
- </ul>
145
+ <h1>Issues: ${req.params.label}</h1>
146
+ <div>
147
+ <ul>
148
+ ${issues.map((issue) => html`
149
+ <li>
150
+ <span class="project-link">
151
+ <a href="https://www.github.com/${issue.project.repoOwner}" target="_blank">${issue.project.repoOwner}</a>
152
+ / <a href="${issue.project.repo}" target="_blank">${issue.project.repoName}</a>
153
+ </span>
154
+ <a href="${issue.issue.url}" target="_blank" class="issue-title">${issue.issue.title}</a>
155
+ </li>
156
+ `)}
157
+ </ul>
158
+ </div>
162
159
  </div>
163
160
  </statusboard-page>
164
161
  `, document.body)
package/template/js/project-list.js CHANGED
@@ -13,73 +13,75 @@ class ProjectList extends LitElement {
13
13
  render () {
14
14
  return html`
15
15
  <link rel="stylesheet" href="${this.config.files.css.projectList}" />
16
- <h2>Projects</h2>
17
- <table class="project-list">
18
- ${this.projects.map((project) => html`
19
- <tr>
20
- <td>
21
- <a href="https://www.github.com/${project.repoOwner}" target="_blank">${project.repoOwner}</a>
22
- / <a href="${(project.repoDetails && project.repoDetails.url) || `https://www.github.com/${project.repoOwner}/${project.repoName}`}" target="_blank">${project.repoName}</a>
23
- </td>
24
- <td title="Stars">
25
- <a href="https://npmjs.org/package/${project.packageName}">
26
- <img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
27
- </a>
28
- </td>
29
- <td title="Watchers">
30
- <a href="https://www.github.com/${project.repo}">
31
- <img src="https://badgen.net/github/watchers/${project.repo}" />
32
- </a>
33
- </td>
34
- <td title="Issues">
35
- <a href="https://www.github.com/${project.repo}">
36
- <img src="https://badgen.net/github/open-issues/${project.repo}" />
37
- </a>
38
- </td>
39
- <td title="PRs">
40
- <a href="https://www.github.com/${project.repo}">
41
- <img src="https://badgen.net/github/open-prs/${project.repo}" />
42
- </a>
43
- </td>
44
- <td title="commits">
45
- <a href="https://www.github.com/${project.repo}">
46
- <img src="https://badgen.net/github/commits/${project.repo}" />
47
- </a>
48
- </td>
49
- <td title="License">
50
- <a href="https://www.github.com/${project.repo}">
51
- <img src="https://badgen.net/github/license/${project.repo}" />
52
- </a>
53
- </td>
54
- <td title="Contributors">
55
- <a href="https://www.github.com/${project.repo}">
56
- <img src="https://badgen.net/github/contributors/${project.repo}" />
57
- </a>
58
- </td>
59
- <td>
60
- ${project.packageJson && (html`
16
+ <main>
17
+ <h2>Projects</h2>
18
+ <table class="project-list">
19
+ ${this.projects.map((project) => html`
20
+ <tr>
21
+ <td>
22
+ <a href="https://www.github.com/${project.repoOwner}" target="_blank">${project.repoOwner}</a>
23
+ / <a href="${(project.repoDetails && project.repoDetails.url) || `https://www.github.com/${project.repoOwner}/${project.repoName}`}" target="_blank">${project.repoName}</a>
24
+ </td>
25
+ <td title="Stars">
61
26
  <a href="https://npmjs.org/package/${project.packageName}">
62
- <img src="https://badgen.net/npm/v/${project.packageName}" />
27
+ <img src="https://badgen.net/github/stars/${project.repo}?color=yellow" />
63
28
  </a>
64
- `)}
65
- </td>
66
- <td>
67
- ${project.packageJson && (html`
68
- <a href="https://npmjs.org/package/${project.packageName}">
69
- <img src="https://badgen.net/npm/dm/${project.packageName}" />
29
+ </td>
30
+ <td title="Watchers">
31
+ <a href="https://www.github.com/${project.repo}">
32
+ <img src="https://badgen.net/github/watchers/${project.repo}" />
33
+ </a>
34
+ </td>
35
+ <td title="Issues">
36
+ <a href="https://www.github.com/${project.repo}">
37
+ <img src="https://badgen.net/github/open-issues/${project.repo}" />
38
+ </a>
39
+ </td>
40
+ <td title="PRs">
41
+ <a href="https://www.github.com/${project.repo}">
42
+ <img src="https://badgen.net/github/open-prs/${project.repo}" />
43
+ </a>
44
+ </td>
45
+ <td title="commits">
46
+ <a href="https://www.github.com/${project.repo}">
47
+ <img src="https://badgen.net/github/commits/${project.repo}" />
48
+ </a>
49
+ </td>
50
+ <td title="License">
51
+ <a href="https://www.github.com/${project.repo}">
52
+ <img src="https://badgen.net/github/license/${project.repo}" />
70
53
  </a>
71
- `)}
72
- </td>
73
- <td>
74
- ${project.travis && (html`
75
- <a href="https://travis-ci.org/${project.repo}">
76
- <img src="https://badgen.net/travis/${project.repo}" />
54
+ </td>
55
+ <td title="Contributors">
56
+ <a href="https://www.github.com/${project.repo}">
57
+ <img src="https://badgen.net/github/contributors/${project.repo}" />
77
58
  </a>
78
- `)}
79
- </td>
80
- </tr>
81
- `)}
82
- </table>
59
+ </td>
60
+ <td>
61
+ ${project.packageJson && (html`
62
+ <a href="https://npmjs.org/package/${project.packageName}">
63
+ <img src="https://badgen.net/npm/v/${project.packageName}" />
64
+ </a>
65
+ `)}
66
+ </td>
67
+ <td>
68
+ ${project.packageJson && (html`
69
+ <a href="https://npmjs.org/package/${project.packageName}">
70
+ <img src="https://badgen.net/npm/dm/${project.packageName}" />
71
+ </a>
72
+ `)}
73
+ </td>
74
+ <td>
75
+ ${project.travis && (html`
76
+ <a href="https://travis-ci.org/${project.repo}">
77
+ <img src="https://badgen.net/travis/${project.repo}" />
78
+ </a>
79
+ `)}
80
+ </td>
81
+ </tr>
82
+ `)}
83
+ </table>
84
+ </main>
83
85
  `
84
86
  }
85
87
  }