Skip to content

Commit 909fa52

Browse files
lwesterhoflwesterhof
committed
Landingpage: add citation texts
1 parent 4b1c192 commit 909fa52

1 file changed

Lines changed: 124 additions & 26 deletions

File tree

‎templates/landingpage.html.j2‎

Lines changed: 124 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,83 @@
3737
<script src="/static/js/download.js" type="module"></script>
3838
{% endif %}
3939

40+
<script>
41+
document.addEventListener('DOMContentLoaded', () => {
42+
const data = {
43+
title: '{{ title }}',
44+
author: [
45+
{% for creator in creators %}
46+
{ family: '{{ creator.Name.Family_Name }}', given: '{{ creator.Name.Given_Name }}'},
47+
{% endfor %}
48+
],
49+
publication_date: '{{ publication_date }}',
50+
publisher: 'Utrecht University',
51+
version: '{{ version }}',
52+
doi: '{{ persistent_identifier_datapackage.Identifier }}'
53+
}
54+
55+
const year = data.publication_date.split('-')[0]
56+
const accessDate = new Intl.DateTimeFormat('en-GB', {
57+
day: 'numeric',
58+
month: 'long',
59+
year: 'numeric'
60+
}).format(new Date())
61+
const doiUrl = `https://doi.org/${data.doi}`
62+
const versionStr = data.version ? ` (Version ${data.version})` : ''
63+
64+
// Format authors helper function.
65+
const formatAuthors = (sep, fmt) => {
66+
const formats = {
67+
'F,I': a => `${a.family}, ${a.given.charAt(0)}.`,
68+
'I.F': a => `${a.given.charAt(0)}. ${a.family}`,
69+
'FI': a => `${a.family} ${a.given.charAt(0)}`,
70+
'FG': a => `${a.given} ${a.family}`
71+
}
72+
return data.author.map(formats[fmt]).join(sep)
73+
}
74+
const formatMlaAuthors = () => {
75+
const formatted = data.author.map(a => `${a.given} ${a.family}`)
76+
return formatted.length === 1
77+
? formatted[0]
78+
: formatted.slice(0, -1).join(', ') + ', and ' + formatted.at(-1)
79+
}
80+
81+
// Define author styles.
82+
const authors = {
83+
apa: formatAuthors(', & ', 'F,I'),
84+
mla: formatMlaAuthors(),
85+
harvard: formatAuthors(' and ', 'F,I'),
86+
ieee: formatAuthors(', ', 'I.F'),
87+
vancouver: formatAuthors(', ', 'FI'),
88+
chicago: formatAuthors(', & ', 'F,I')
89+
}
90+
91+
// Define citation styles.
92+
const citations = {
93+
apa: `${authors.apa} (${year}). ${data.title}${versionStr} [Dataset]. ${data.publisher}. ${doiUrl}`,
94+
mla: `${authors.mla}. "${data.title}${versionStr}." ${data.publisher}, ${year}. doi:${data.doi}. Accessed ${accessDate}.`,
95+
chicago: `${authors.chicago}. ${year}. "${data.title}${versionStr}." ${data.publisher}. ${doiUrl}.`,
96+
harvard: `${authors.harvard} (${year}) '${data.title}${versionStr}', ${data.publisher}, Available at: ${doiUrl} (Accessed: ${accessDate}).`,
97+
ieee: `[1] ${authors.ieee}, "${data.title}${versionStr}," ${data.publisher}, ${year}, doi:${data.doi}.`,
98+
vancouver: `1. ${authors.vancouver}. ${data.title}${versionStr} [dataset]. ${data.publisher}; ${year} [cited ${accessDate}]. Available from: ${doiUrl}.`
99+
}
100+
101+
document.getElementById('style').addEventListener('change', e => {
102+
document.getElementById('output').innerHTML = citations[e.target.value]
103+
})
104+
document.getElementById('output').innerHTML = citations.apa
105+
106+
document.getElementById('copyBtn').addEventListener('click', function() {
107+
const text = document.getElementById('output').textContent
108+
text && navigator.clipboard.writeText(text).then(() => {
109+
const btn = this, orig = btn.innerHTML
110+
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>'
111+
setTimeout(() => { btn.innerHTML = orig }, 1500)
112+
})
113+
})
114+
})
115+
</script>
116+
40117
{% if matomo_tracking_enabled %}
41118
<!-- Matomo tracker -->
42119
<script>
@@ -160,34 +237,55 @@
160237
</section>
161238
</div>
162239

163-
{% if base_doi %}
164-
<div class="col-lg-4 mt-4">
165-
<div class="p-3 version">
166-
<h4>Versions</h4>
167-
<div>
168-
<table class="table table-sm">
169-
<tbody>
170-
{% for version in versions %}
171-
<tr>
172-
<td>
173-
<a href="https://doi.org/{{ version[1] }}">https://doi.org/{{ version[1] }}</a>
174-
</td>
175-
<td>
176-
<small title="{{ version[2] }}">{{ version[0] }}</small>
177-
</td>
178-
</tr>
179-
{% endfor %}
180-
</tbody>
181-
</table>
182-
<small>
183-
<b>Base DOI:</b>
184-
<a href="https://doi.org/{{ base_doi }}">https://doi.org/{{ base_doi }}</a><br>
185-
This DOI represents all versions of this publication and will resolve to the latest publication.
186-
</small>
187-
</div>
240+
<div class="col-lg-4 mt-4">
241+
{% if base_doi %}
242+
<div class="p-3 version">
243+
<h4>Versions</h4>
244+
<div>
245+
<table class="table table-sm">
246+
<tbody>
247+
{% for version in versions %}
248+
<tr>
249+
<td>
250+
<a href="https://doi.org/{{ version[1] }}">https://doi.org/{{ version[1] }}</a>
251+
</td>
252+
<td>
253+
<small title="{{ version[2] }}">{{ version[0] }}</small>
254+
</td>
255+
</tr>
256+
{% endfor %}
257+
</tbody>
258+
</table>
259+
<small>
260+
<b>Base DOI:</b>
261+
<a href="https://doi.org/{{ base_doi }}">https://doi.org/{{ base_doi }}</a><br>
262+
This DOI represents all versions of this publication and will resolve to the latest publication.
263+
</small>
188264
</div>
189265
</div>
190-
{% endif %}
266+
{% endif %}
267+
<div class="p-3 mt-3 version">
268+
<h4>Citation</h4>
269+
<small id="output" class="font-monospace"></small>
270+
<br>
271+
<div class="d-flex justify-content-between mt-2">
272+
<select id="style" class="form-select form-select-sm">
273+
<option value="apa">APA</option>
274+
<option value="mla">MLA</option>
275+
<option value="chicago">Chicago</option>
276+
<option value="harvard">Harvard</option>
277+
<option value="ieee">IEEE</option>
278+
<option value="vancouver">Vancouver</option>
279+
</select>
280+
<button id="copyBtn" class="btn btn-sm btn-outline-secondary flex-shrink-0" type="button" title="Copy citation">
281+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
282+
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
283+
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
284+
</svg>
285+
</button>
286+
</div>
287+
</div>
288+
</div>
191289
</div>
192290

193291
<hr>

0 commit comments

Comments
 (0)