-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
238 lines (208 loc) · 8.04 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!-- TODO: aria stuff I guess -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Next PR Number - Forget guessing or checking afterhand</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
<meta property="og:title" content="Next PR Number">
<meta property="og:description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ichard26.github.io/next-pr-number/">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Next PR Number">
<meta name="twitter:description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
<link rel="canonical" href="https://ichard26.github.io/next-pr-number/">
<link rel="icon" href="https://ichard26.github.io/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://ichard26.github.io/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://ichard26.github.io/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://ichard26.github.io/apple-touch-icon.png">
<link rel="mask-icon" href="https://ichard26.github.io/safari-pinned-tab.svg">
<script defer type="module" src="main.js"></script>
<script data-host="https://microanalytics.io" data-dnt="true" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async="" defer=""></script>
<style>
:root {
--background-color: #f5f5f5;
--primary-accent-color: #1e7c7f;
--primary-dark-accent-color: #135b5e;
--primary-light-accent-color: #69c4c7;
--disabled-accent-color: darkslategray;
--error-color: #c70101;
--admonition-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDloLTJWN2gybTAgMTBoLTJ2LTZoMm0tMS05QTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTAgMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48L3N2Zz4K");
}
html, body {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
body {
display: flex;
box-sizing: border-box;
max-width: 330px;
padding: 40px 20px 5px 20px;
margin: 0 auto 0 auto;
flex-direction: column;
background-color: var(--background-color);
}
a {
color: var(--primary-accent-color);
}
/* For browsers that don't recognize <output> */
output {
display: block;
}
.admonition {
/* The containing container for .admonition-header::before will be the root viewport if
* position is set to static here. The containing container is important as it
* determines where the right/left/top/bottom offset starts from for absolutely
* positioned elements. */
position: relative;
border-radius: 0.2rem;
overflow: hidden;
box-shadow: 0 0.2rem 0.5rem rgb(0 0 0 / 5%), 0 0 0.0625rem rgb(0 0 0 / 10%);
font-size: 0.85rem;
}
.admonition-header {
margin: 0;
padding: 0.5rem;
/* Give some extra room for the icon (since normal document flow isn't being used for
* it). */
padding-left: 2rem;
background-color: var(--primary-accent-color);
color: white;
font-weight: bold;
}
.admonition-header::before {
/* Apparently this is necessary so content (or mask-image) works. *shrug* */
display: block;
/* We need to pretend there is content and give this pseudo element some area so
* mask-image works. */
width: 1rem;
height: 1rem;
content: '';
/* To position the icon correctly, we need to avoid using normal document flow since
* that would put this pseudo on its own line (due to display: block). */
position: absolute;
left: 0.5rem;
/* ... and now for the actual icon, gosh that took a lot of preamble. */
background-color: white;
-webkit-mask-image: var(--admonition-icon);
mask-image: var(--admonition-icon);
}
.admonition-body {
margin: 0.7rem;
}
h1, h2, .repo-input, .get-button, .output-text-container, footer {
padding: 10px 15px;
margin: auto;
box-sizing: border-box;
text-align: center;
}
h2 {
font-size: 1.3rem;
font-weight: 400;
}
.input-form {
padding: 15px 0;
}
.repo-input, .get-button {
width: 100%;
border: 2px solid var(--primary-accent-color);
font-size: 1rem;
}
.repo-input {
border-bottom-width: 1px;
}
.repo-input:read-only, .get-button:disabled {
transition: filter 300ms, border-color 300ms, color 300ms;
filter: grayscale(80%);
border-color: var(--disabled-accent-color);
}
.repo-input:read-only {
color: var(--disabled-accent-color);
border-bottom: none;
}
.get-button {
background-color: var(--primary-accent-color);
color: white;
border-top-width: 1px;
}
.get-button:hover:enabled {
transition: background-color 250ms;
background-color: var(--primary-dark-accent-color);
}
.get-button:active {
transition: background-color 50ms;
background-color: var(--primary-light-accent-color);
}
.output-text-container p {
margin-top: 0;
}
.result-text {
font-size: 1.4rem;
color: var(--primary-accent-color);
}
footer {
margin-top: auto;
margin-bottom: 0;
font-size: 0.85rem;
}
footer p {
margin: 3px;
}
#tip-admonition {
position: absolute;
top: 15px;
left: 15px;
/* Using clamp so it doesn't look stupid on super wide screens. */
width: clamp(200px, 22vw, 400px);
}
/* I really don't wanna make the admonition mobile friendly so let's hide it */
@media (max-width: 900px) {
#tip-admonition {
display: none;
}
}
.error {
color: var(--error-color);
}
</style>
</head>
<body>
<main>
<h1>Next PR Number</h1>
<h2>Get the number the next pull request will be assigned with for a public GitHub repository.</h2>
<div class="input-form">
<input class="repo-input" placeholder="{owner}/{name} or GitHub URL" type="text" autocapitalize="off" autofocus>
<button class="get-button">Get</button>
</div>
<div class="output-text-container">
<i><p class="working-status-text"></p></i>
<output class="result-text"></output>
</div>
</main>
<footer>
<p>
Design inspired by
<a href="https://github.com/Mariatta/check_python_cla">Mariatta's Check Python CLA</a>
</p>
<hr>
<p>© 2023
<a href="https://ichard26.github.io/">Richard Si</a>
-
<a href="https://github.com/ichard26/next-pr-number">Source</a>
-
<a href="https://ichard26.github.io/privacy/">Privacy</a>
</p>
</footer>
<div id="tip-admonition" class="admonition">
<p class="admonition-header">Tip!</p>
<p class="admonition-body">You can use URL query parameters to prefill the repository. For example:
<a href="https://ichard26.github.io/next-pr-number/?owner=ichard26&name=next-pr-number" target="_blank">
ichard26.github.io/next-pr-number/?owner=ichard26&name=next-pr-number
</a>
</p>
<div>
</body>
</html>