-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
377 lines (367 loc) · 29.2 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Making citing software easy" />
<meta name="author" content="Tom Wagg" />
<link rel="icon" href="img/software-citation-station-no-circle.ico" />
<title>The Software Citation Station</title>
<!-- Bootstrap -->
<link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap core JavaScript -->
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<!-- icons and fonts -->
<script src="https://kit.fontawesome.com/328d20ce71.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;700;900&display=swap" rel="stylesheet" />
<!-- random css -->
<link href="css/animate.min.css" rel="stylesheet" />
<link href="css/dark_mode.css" rel="stylesheet" />
<link href="css/software.css" rel="stylesheet" />
</head>
<body>
<button class="btn btn-dark corner-button hide" id="copy-template" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy to clipboard"><i class="fa fa-copy"></i></button>
<label for="dark-mode-checkbox" class="dark-mode-label">
<input type="checkbox" id="dark-mode-checkbox" />
<span class="dark-mode-ball"></span>
<svg viewBox="0 0 512 512" class="sun-svg">
<path
id="sun-svg"
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
></path>
</svg>
<svg viewBox="0 0 512 512" class="moon-svg">
<path id="moon-svg" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path>
</svg>
</label>
<script src="js/dark_mode.js"></script>
<div class="container-fluid mt-4 mb-5">
<div class="row align-items-center">
<div class="col-2 pe-0">
<img id="main-logo" src="img/software-citation-station-no-circle-blue.png" class="img-fluid" />
</div>
<div class="col-10 col-md-10">
<div class="display-3 fw-bold">The Software Citation Station</div>
<div class="fs-3">The one-stop shop for citing software used in your research</div>
</div>
</div>
<div class="row mt-5 mb-3">
<div id="left-col" class="col-12 col-lg-6 mb-2 mb-lg-0">
<div id="software-selection" class="rounded-box">
<div class="header-number">1</div>
<h3 class="header-title">
Select the software <button class="btn" id="expand" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Expand"><i class="fa fa-arrow-right"></i></button>
</h3>
<p class="header-desc">Use the buttons below to select the software that you used in your research. Right-click each for more information about the software</p>
<div class="input-group mb-1">
<input id="software-search" type="text" class="form-control" placeholder="Search for software" />
<button class="btn btn-primary" id="software-search-clear" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Clear search"><i class="fa fa-times"></i></button>
</div>
<div class="input-group mb-1">
<select class="form-select" id="software-category">
<option value="all">All categories</option>
</select>
<select class="form-select" id="software-language">
<option value="all">All languages</option>
</select>
<button class="btn btn-primary" id="software-filter-clear" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Clear filters"><i class="fa fa-times"></i></button>
</div>
<div class="btn-toolbar justify-content-center" role="toolbar">
<div class="btn-group me-2 mb-3" role="group">
<button class="btn btn-primary" id="software-clear">Clear selections</button>
</div>
</div>
<div id="software-list" class="text-center shadow-scroll">
<button id="software-btn-template" class="btn btn-primary hide me-2 software-button mb-2"><img class="software-logo me-1" src="img/python.png" /><span class="software-name">Software name</span></button>
<p id="software-loading">Loading software list <i class="fa fa-spinner fa-spin"></i></p>
</div>
<p id="software-search-empty" class="hide">Your search doesn't match any of the software in our list - perhaps this is an opportunity for you to <a id="new-software-from-search" href="#" class="link text-decoration-underline" style="font-weight: bold">contribute a new software package to our list</a>? Absolutely no need to own or contribute to the package, we appreciate submissions from users of packages too!</p>
</div>
</div>
<div id="right-col" class="col-12 col-lg-6">
<div id="version-box" class="rounded-box">
<div class="header-number">2</div>
<h3 class="header-title">Choose your versions</h3>
<p class="header-desc mb-1">
Choose the versions of the software that you've used
<i class="fa fa-question-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="<b>Why do I need to select a specific version?</b><br>Citing the exact version increases the <i>reproducibility of your work</i> and ensures you <i>credit all authors who contributed</i> to the code, even if they contributed after the release of the original citation." data-bs-html="true"></i>
</p>
<div class="justify-content-center text-center">
<div class="btn-group mb-2" role="group" id="version-selector">
<button class="btn btn-primary active" id="choose_version">Choose versions</button>
<button class="btn btn-primary" id="latest_version">Use latest versions</button>
</div>
</div>
<div id="version-list" class="row g-2">
<div id="version-picker-template" class="version-picker col-sm-6 col-lg-4 hide">
<div class="card text-center version-card">
<div class="card-body">
<img class="software-logo" src="" />
<pre class="card-title">NAME HERE</pre>
<div class="card-text waiter">Getting versions <i class="fa fa-spinner fa-spin"></i></div>
<select class="form-select form-select-sm version-select hide">
<option value="-">Select version</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom-col" class="col-12 mt-2">
<div class="row">
<div class="col-12 mb-2">
<div id="acknowledgement-box" class="rounded-box">
<div class="header-number">3</div>
<h3 class="header-title">Copy acknowledgement and bibtex</h3>
<p class="header-desc">Copy the acknowledgement that is created here into your LaTeX manuscript, and save the BibTeX.</p>
<pre id="acknowledgement" class="rounded-box mb-2">
<i>Acknowledgement will go here</i>
</pre>
<div id="bibtex-wrapper">
<pre id="bibtex" class="rounded-box shadow-scroll"><code><i>Bibtex will go here</i></code></pre>
</div>
<div class="text-center">
<button class="btn btn-primary hide download-button" id="download-template"><i class="fa fa-download"></i> Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row mt-5 text-center">
<div class="col-12 col-md-6">
<h2>Adding new software</h2>
<p class="mb-1">Use the button below to fill out a form to submit a new issue to the Software Citation Station! <i>Imposter syndrome disclaimer:</i> There's no need to own or contribute to the package, we appreciate submissions from <i>users</i> of packages just as much!</p>
<button id="launch-new-software" type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#new-software-modal">Submit new software</button>
</div>
<div class="col-12 col-md-6">
<h2>Updating existing software</h2>
<p class="mb-1">Please use the button below to create a new GitHub issue on the Software Citation Station!</p>
<a class="btn btn-primary mb-4" href="https://github.com/TomWagg/software-citation-station/issues/new?assignees=&labels=update-citation&projects=&template=02-update.md&title=" target="_blank">Update existing software</a>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col-12 col-md-9 text-center">
<h2>Can I link this tool in my documentation?</h2>
<div class="mb-2">
<p class="mb-0">Absolutely, in fact, we encourage it! You can even make a custom link so that your package is automatically selected - just add to the URL like this:</p>
<a href="https://www.tomwagg.com/software-citation-station/?auto-select=PACKAGENAME">https://www.tomwagg.com/software-citation-station/<span class="text-decoration-underline">?auto-select=PACKAGENAME</span></a>
</div>
<p class="mb-0">
Or, if you'd like it formatted in a nifty little badge like this one,
<a href="https://www.tomwagg.com/software-citation-station/?auto-select=PACKAGENAME"> <img src="https://img.shields.io/badge/Cite-PACKAGENAME-blue" /> </a>, click <a href="#" id="cite-badge" class="btn btn-primary" style="font-size: 0.7rem; padding: 0.2rem">this button</a> to copy some HTML that does that!
</p>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col-12 col-md-9 text-center">
<h2>Why is it important to cite software?</h2>
<p>Software is crucial for the advancement of astronomy and science especially in the context of rapidly growing datasets that increasingly require algorithm and pipeline development to process the data and produce results (<a class="ref-link" href="http://doi.org/10.17226/26141" target="_blank">Academies of Sciences, Engineering, and Medicine 2021</a>).</p>
<p>
However, software has not always been consistently cited, despite its importance to strengthen support for software development (<a class="ref-link" href="https://doi.org/10.1002/asi.23538" target="_blank">Howison & Bullard 2016</a>; <a class="ref-link" href="http://doi.org/10.48550/arXiv.1601.04734" target="_blank">Niemeyer et al. 2016</a>; <a class="ref-link" href="http://doi.org/https://doi.org/10.1016/j.joi.2017.08.003" target="_blank">Li et al. 2017</a>;
<a class="ref-link" href="http://doi.org/10.3847/1538-4365/ab7be6" target="_blank">Bouquin et al. 2020</a>; <a class="ref-link" href="http://doi.org/https://doi.org/10.1016/j.joi.2021.101139" target="_blank">Alsudais 2021</a>; <a class="ref-link" href="http://doi.org/10.48550/arXiv.2302.07500" target="_blank">Bouquin et al. 2023</a>).
</p>
<p>
You can read our paper about the importance of software (citations), resources for software citation, and a description of our tool at
<a href="https://arxiv.org/abs/2406.04405">this link</a>.
</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<h2>Who made this?</h2>
<div class="d-md-flex justify-content-center mt-3">
<div class="headshot-box me-md-3" data-href="https://www.tomwagg.com/">
<img src="img/tom.png" class="rounded-circle m-auto headshot" />
<p class="fs-5">Tom Wagg</p>
</div>
<div class="headshot-box" data-href="https://www.broekgaarden.nl/floor/wordpress/">
<img src="img/floor.jpeg" class="rounded-circle m-auto headshot" />
<p class="fs-5">Floor Broekgaarden</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="new-software-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-xl">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h5 class="modal-title">
<img src="img/software-citation-station-no-circle-blue.png" class="me-2" style="max-width: 50px" />
<span class="fw-bold">Add a new software package</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form class="form new-software-form m-auto text-start needs-validation" style="font-size: 0.7rem" novalidate>
<h6 class="fw-bold">Basic package information</h6>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-control-box required mb-2">
<label for="new-software-name" class="form-label">Software name</label>
<input type="text" class="form-control" id="new-software-name" placeholder="Name (e.g. 'Python')" required />
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control-box required mb-2">
<label for="new-software-docs" class="form-label">
Documentation link
<i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="If no documentation exists then at least link the code repository or website." data-bs-html="true"></i>
</label>
<input type="url" class="form-control" id="new-software-docs" placeholder="URL (e.g. 'https://docs.python.org/3/')" required />
<div class="valid-feedback">That's definitely a link, click <a href="" target="_blank" class="link-success fw-bold">here</a> to test it!</div>
<div class="invalid-feedback">That doesn't seem to be a valid URL.</div>
</div>
</div>
</div>
<div class="form-control-box required mb-2 position-relative">
<label for="new-software-description" class="form-label">Short description</label>
<textarea class="form-control" id="new-software-description" data-counted="true" maxlength="200" placeholder="e.g. 'A high-level, general-purpose interpreted programming language.'" required></textarea>
<label class="character-count">0/200</label>
</div>
<h6 class="fw-bold">Citation details</h6>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-control-box mb-2">
<label for="new-software-bibtex" class="form-label">BibTeX</label>
<textarea class="form-control" id="new-software-bibtex" placeholder="Paste all BibTeX to be cited"></textarea>
<div class="valid-feedback"></div>
<div class="invalid-feedback">That doesn't seem to be valid BibTeX.</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control-box mb-2">
<label for="new-software-custom-acknowledgement" class="form-label">
Custom acknowledgement (in LaTeX)
<i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="If your software package has specific text required for its citation then enter it here as LaTeX. See <code>COMPAS</code> or <code>MESA</code> for examples." data-bs-html="true"></i>
</label>
<textarea class="form-control" id="new-software-custom-acknowledgement" placeholder="LaTeX (e.g. 'This software wants to specifically cite \citet{thispackage} in this way.')"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-control-box required mb-2">
<label for="new-software-attribution" class="form-label">
Preferred citation method reference
<i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Include a link to a page that states the preferred citation method for the software (to ensure your input matches their wishes)" data-bs-html="true"></i>
</label>
<input type="url" class="form-control" id="new-software-attribution" placeholder="URL (e.g. https://numpy.org/citing-numpy/)" required />
<div class="valid-feedback">That's definitely a link, click <a href="" target="_blank" class="link-success fw-bold">here</a> to test it!</div>
<div class="invalid-feedback">That doesn't seem to be a valid URL.</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control-box mb-2">
<label for="new-software-doi" class="form-label"> Zenodo DOI <i>for all versions</i> <i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Enter the DOI <b>associated with all versions</b> of your software package. This can be found on the Zenodo page for your just after it says <span class='text-warning'>'Cite all versions?'</span>." data-bs-html="true"></i></label>
<input class="form-control" id="new-software-doi" placeholder="DOI (e.g. 10.5281/zenodo.595738)" />
<div class="valid-feedback">That DOI looks good, there are <span id="new-software-n-version"></span> versions associated with it.</div>
<div class="invalid-feedback">That DOI doesn't seem to exist.</div>
<div>Click <a id="new-zenodo-search" class="fw-bold" href="https://zenodo.org/search?q=" target="_blank">here</a> to search Zenodo for your package.</div>
</div>
</div>
</div>
<h6 class="fw-bold">Additional metadata</h6>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-control-box required mb-2">
<label for="new-software-language" class="form-label">Language</label>
<div class="input-group">
<select class="form-select form-select-sm" id="new-software-language"></select>
<input type="text" class="form-control hide" id="new-software-language-new" />
<div class="invalid-feedback">That doesn't seem to be a valid language.</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control-box required mb-2">
<label for="new-software-category" class="form-label">Category</label>
<div class="input-group">
<select class="form-select form-select-sm" id="new-software-category"></select>
<input type="text" class="form-control hide" id="new-software-category-new" />
<div class="invalid-feedback">That doesn't seem to be a valid category.</div>
</div>
</div>
</div>
</div>
<div class="form-control-box mb-2">
<label for="new-software-keywords" class="form-label">Keywords (comma-separated)</label>
<input type="text" class="form-control" id="new-software-keywords" />
<div class="valid-feedback"></div>
</div>
<div id="new-software-dependency-box" class="form-control-box mb-2">
<label for="new-software-dependencies" class="form-label">Dependencies (choose packages on which your new addition depends)</label>
<div id="new-software-dependencies">
<span id="dependency-template" class="badge rounded-pill text-bg-secondary dependency-toggle hide"></span>
</div>
<div class="valid-feedback"></div>
<div class="invalid-feedback">That doesn't seem to be a valid list of dependencies.</div>
</div>
</form>
<div class="loading-overlay overlay hide">
<div class="spinner-border mt-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="fs-3">Validating data...</p>
</div>
<div id="new-software-results" class="mt-5 text-start hide">
<h6 class="fw-bold">Generated citation data</h6>
<p class="mb-0">Here's the generated citation data for your software package. If you're happy with it then</p>
<ol>
<li>Click "Copy data and create issue"</li>
<li>Paste the information in the issue description</li>
<li>Upload a logo file and submit the issue</li>
<li>Add comments to the issue if you have additional questions or notes</li>
</ol>
<div class="text-center mb-2">
<button class="btn btn-primary" id="copy-new-software">
<i class="fa fa-copy"></i>
Copy data and create issue
</button>
<button class="btn btn-primary ms-lg-5 ms-md-0" id="back-new-software">
<i class="fa fa-pen"></i>
Back to editing
</button>
</div>
<pre id="new-software-citation" class="rounded-box"><code></code><div class="overlay"><p class="p-5 fs-3">Click to copy data and create issue</p></div></pre>
</div>
</div>
<div class="modal-footer justify-content-center p-0">
<button class="btn btn-primary w-100 rounded-0 rounded-bottom m-0" id="submit-new-software">Generate data</button>
</div>
</div>
</div>
</div>
<div id="details" class="details-no-close card text-center hide" style="width: 18rem; z-index: 100">
<div class="card-body details-no-close">
<img src="img/python.png" class="m-auto details-logo" style="max-height: 100px; max-width: 18rem" />
<h5 class="card-title fw-bold details-name">Python</h5>
<p class="card-text details-desc">A high-level, general-purpose interpreted programming language.</p>
<div><i class="fa fa-list"></i> <span class="details-category me-3">General</span> <i class="fa fa-language"></i> <span class="details-language">Python</span></div>
</div>
<div class="card-footer details-no-close">
<a href="#" class="card-link details-docs">Documentation</a>
<span> · </span>
<a href="#" class="card-link details-cite">Citation info</a>
<a href="#" class="card-link details-doi"><span> · </span>Zenodo</a>
</div>
</div>
<div id="toaster" class="toast-container position-fixed">
<div id="toast-template" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="img/software-citation-station-no-circle-blue.png" class="rounded me-2" style="max-height: 25px" />
<strong class="me-auto">Dependencies added</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Additional dependencies of <code class="main-package">PACKAGE</code> automatically selected: <code class="dependencies">DEPENDENCIES</code></div>
</div>
</div>
<div id="javascriptbox">
<script src="js/software.js"></script>
</div>
</body>
</html>