elixir-toolkit-theme 5.0.0 → 6.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28d3405180b694d3008b2189a0bb9a16ee0ea46295d1d9e1f54b0c0615dc08c1
-  data.tar.gz: b84be0a971922c139d39379443cddd58f07514d5578c7d38364dc1361c63484f
+  metadata.gz: 2dfacff95bae6c8507e6ce18b3866b9fe3f0990f793c7f03637d6ad02dadf375
+  data.tar.gz: '019b16850550c4a7eb5e8a5fb33a9522b8b9755a1d0a6ee2b97e2631fcfe4bc4'
 SHA512:
-  metadata.gz: e72c7d4ed2724a743f37e71223547bdfa2dbd472d050ecb4a8e130d6081bf3c4a1bd9fbd2d4136c58616484bd7bb189a472ca203953944a08f41914175e89180
-  data.tar.gz: 3effd307d58a441330ef53c2b76377d41dac38552bf881e0c87d4f1d844acdf21fc9e1130945ffbb6a8d0389c8a921b59dfe453f4948741de552c405d25c40a6
+  metadata.gz: 36fbf492144ad890932cdd109580df03a65b072ff9e72ea664bef077dbf4023535abc8a57df6179b8fb7c69a24cd9d04a88068819caf279e00f88005180dd568
+  data.tar.gz: 67af3c8587bd09cfbf8424e5cadfdd2802f3b5f2dacd198d948f3351ef207bba3cab43b97f7db1061f5bcaa6d77253aff4951c9966345f351c5e7f2cde2b6d9c

data/README.md

@@ -28,16 +28,16 @@ Its key features:
 
 ## Enabling the theme on your Jekyll project
 
-The quickest way to use the elixir-toolkit-theme is setting it as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) in your `config.yml` file:
+The quickest way to use the latest version of elixir-toolkit-theme is setting it as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) in your `config.yml` file:
 
 ```yaml
 remote_theme: ELIXIR-Belgium/elixir-toolkit-theme
 ```
 
-You can lock it onto a specific version using:
+You can lock it onto a specific version (recommended!) using:
 
 ```yaml
-remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@5.0.0
+remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@6.0.0
 ```
 
 ### Using Ruby Gems (alternative)
@@ -50,7 +50,7 @@ gem "elixir-toolkit-theme"
 You can lock it onto a specific version like this:
 
 ```ruby
-gem "elixir-toolkit-theme", "~> 5.0.0"
+gem "elixir-toolkit-theme", "~> 6.0.0"
 ```
 
 And add this line to your Jekyll site's `_config.yml`:
@@ -153,9 +153,11 @@ This will start the docker container and serve the website locally. Make sure th
 - [RDMkit](https://rdmkit.elixir-europe.org/) (CONVERGE)
 - [WorkflowHub](https://about.workflowhub.eu/) (EOSC-life project)
 - [RO-crate](https://www.researchobject.org/ro-crate/) (EOSC)
+- [GPG RO-Crate Profile](https://uoa-eresearch.github.io/GPG-ro-crate-profile/) (University of Auckland eResearch)
 - [Infectious Diseases Toolkit](https://www.infectious-diseases-toolkit.org/) (BY-COVID)
 - [FAIRDOM](https://fair-dom.org/) (FAIRDOM community)
 - [How-to-Guides](https://australianbiocommons.github.io/how-to-guides/) (Australian BioCommons)
+- [Australian Tree of Life documentation](https://australianbiocommons.github.io/atol/) (Australian BioCommons)
 - [SPLASH](https://elixir-europe-training.github.io/ELIXIR-Training-SPLASH/) (ELIXIR Training platform)
 - [1+MG Framework](https://framework.onemilliongenomes.eu/) (GDI)
 - [Human 'Omics Data Sharing Field Guide](https://australianbiocommons.github.io/human-omics-data-sharing-field-guide/) (Australian BioCommons)
@@ -164,15 +166,22 @@ This will start the docker container and serve the website locally. Make sure th
 - [TRE-FX](https://trefx.uk/) (DARE UK, HDR UK)
 - [Norwegian Life Science RDM LookUp](https://elixir.no/rdm-lookup/) (ELIXIR Norway)
 - [RSQkit: Research Software Quality kit](https://everse.software/RSQKit/) (EOSC-EVERSE)
-- [dHMp norge](https://dhp-stottepakke.github.io/pages/) (ELIXIR Norway)
+- [research-data.no](https://plan.research-data.no/pages/) (ELIXIR Norway & BOTT universities Norway)
 - [Learning-Library](https://patcapon39.github.io/Learning-Library/) (Australian BioCommons)
 - [ELIXIR-IT Training Platform](https://elixir-iib-training.github.io/site/training_courses) (ELIXIR IT)
 - [FAIRDOM-SEEK Documentation](https://docs.seek4science.org/) (SEEK community)
 - [FAIR Lesson Plan Handbook](https://elixir-europe-training.github.io/ELIXIR-TrP-FAIR-Converge/)  (ELIXIR Training platform)
-- [Data Steward Handbook](https://elixir-uk.github.io/elixir-ds-handbook) (ELIXIR RDM Community)
+- [Data Steward Handbook](https://elixir-europe.github.io/ds-handbook/) (ELIXIR RDM Community)
 - [Fed-A-Crate](https://elixir-europe.github.io/fed-a-crate/how-to-contribute) (ELIXIR Fed-A-Crate project)
 - [Federated Learning toolkit (FLkit)](https://uhasselt-biomedicaldatasciences.github.io/federated-learning-toolkit/) (UHasselt)
 - [mTeSS-X](https://elixirtess.github.io/mTeSS-X/) (OSCARS project)
+- [Galaxy Codex](https://galaxyproject.github.io/galaxy_codex/) (Galaxy Community)
+- [ELIXIR Software Management Plan](https://elixir-europe.github.io/software-management-plans/community/) (ELIXIR SMP Community)
+- [FAIR Metroline](https://fairmetroline.org/) (Health-RI)
+- [Globus Community Australasia](https://aarnet.github.io/Globus-Community/) (AARNet)
+- [ELIXIR Research Software Ecosystem (RSEc)](https://research-software-ecosystem.github.io/) (ELIXIR Tools Platform)
+- [Knowledge Hub](https://knowledge.lnds.lu/) (Luxembourg National Data Service (LNDS))
+- [ELIXIR-ELITMa](https://elixir-europe-training.github.io/ELIXIR-ELITMa/) (ELIXIR Training platform)
 - Want your instance here? [Open an issue](https://github.com/ELIXIR-Belgium/elixir-toolkit-theme/issues)
 
 ## Dependencies
@@ -185,7 +194,6 @@ This theme would not be possible without following open source projects:
 - [lunr.js](https://github.com/olivernn/lunr.js) - Main tool behind the search bar enabling content search
 - [jQuery](https://github.com/jquery/jquery) - A fast, small, and feature-rich JavaScript library for easy scripting
 - [jekyll-table-of-contents](https://github.com/ghiculescu/jekyll-table-of-contents) - Lightweight JS script to render the table of contents
-- [jQuery Navgoco Menus](https://github.com/tefra/navgoco) - Multi-level slide navigation with accordion effect
 - [Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - The famous icon library
 - [flag-icons](https://github.com/lipis/flag-icons) - A curated collection of all country flags in SVG + css integration
 - [clipboard.js](https://github.com/zenorocha/clipboard.js) - Modern copy to clipboard. No Flash. Just 3kb gzipped clipboard.
@@ -203,4 +211,3 @@ If you like our work, you can add following badge to the readme of your project:
 ## License
 
 The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-

data/_data/countries.yml

@@ -12,7 +12,7 @@ AS: American Samoa
 AT: Austria
 AU: Australia
 AW: Aruba
-AX: "\xC5land Islands"
+AX: Åland Islands
 AZ: Azerbaijan
 BA: Bosnia and Herzegovina
 BB: Barbados
@@ -23,11 +23,11 @@ BG: Bulgaria
 BH: Bahrain
 BI: Burundi
 BJ: Benin
-BL: "Saint Barth\xE9lemy"
+BL: Saint Barthélemy
 BM: Bermuda
-BN: Brunei Darussalam
-BO: Bolivia (Plurinational State of)
-BQ: Bonaire, Sint Eustatius and Saba
+BN: Brunei
+BO: Bolivia
+BQ: Caribbean Netherlands
 BR: Brazil
 BS: Bahamas
 BT: Bhutan
@@ -37,7 +37,7 @@ BY: Belarus
 BZ: Belize
 CA: Canada
 CC: Cocos (Keeling) Islands
-CD: Congo (Democratic Republic of the)
+CD: DR Congo
 CF: Central African Republic
 CG: Congo
 CH: Switzerland
@@ -49,11 +49,11 @@ CN: China
 CO: Colombia
 CR: Costa Rica
 CU: Cuba
-CV: Cabo Verde
-CW: "Cura\xE7ao"
+CV: Cape Verde
+CW: Curaçao
 CX: Christmas Island
 CY: Cyprus
-CZ: Czech Republic
+CZ: Czechia
 DE: Germany
 DJ: Djibouti
 DK: Denmark
@@ -69,12 +69,12 @@ ES: Spain
 ET: Ethiopia
 FI: Finland
 FJ: Fiji
-FK: Falkland Islands (Malvinas)
-FM: Micronesia (Federated States of)
+FK: Falkland Islands
+FM: Micronesia
 FO: Faroe Islands
 FR: France
 GA: Gabon
-GB: United Kingdom of Great Britain and Northern Ireland
+GB: United Kingdom
 GD: Grenada
 GE: Georgia
 GF: French Guiana
@@ -87,7 +87,7 @@ GN: Guinea
 GP: Guadeloupe
 GQ: Equatorial Guinea
 GR: Greece
-GS: South Georgia and the South Sandwich Islands
+GS: South Georgia
 GT: Guatemala
 GU: Guam
 GW: Guinea-Bissau
@@ -105,7 +105,7 @@ IM: Isle of Man
 IN: India
 IO: British Indian Ocean Territory
 IQ: Iraq
-IR: Iran (Islamic Republic of)
+IR: Iran
 IS: Iceland
 IT: Italy
 JE: Jersey
@@ -118,12 +118,12 @@ KH: Cambodia
 KI: Kiribati
 KM: Comoros
 KN: Saint Kitts and Nevis
-KP: Korea (Democratic People's Republic of)
-KR: Korea (Republic of)
+KP: North Korea
+KR: South Korea
 KW: Kuwait
 KY: Cayman Islands
 KZ: Kazakhstan
-LA: Lao People's Democratic Republic
+LA: Laos
 LB: Lebanon
 LC: Saint Lucia
 LI: Liechtenstein
@@ -136,16 +136,16 @@ LV: Latvia
 LY: Libya
 MA: Morocco
 MC: Monaco
-MD: Moldova (Republic of)
+MD: Moldova
 ME: Montenegro
-MF: Saint Martin (French part)
+MF: Saint Martin
 MG: Madagascar
 MH: Marshall Islands
 MK: North Macedonia
 ML: Mali
 MM: Myanmar
 MN: Mongolia
-MO: Macao
+MO: Macau
 MP: Northern Mariana Islands
 MQ: Martinique
 MR: Mauritania
@@ -178,17 +178,17 @@ PH: Philippines
 PK: Pakistan
 PL: Poland
 PM: Saint Pierre and Miquelon
-PN: Pitcairn
+PN: Pitcairn Islands
 PR: Puerto Rico
-PS: Palestine, State of
+PS: Palestine
 PT: Portugal
 PW: Palau
 PY: Paraguay
 QA: Qatar
-RE: "R\xE9union"
+RE: Réunion
 RO: Romania
 RS: Serbia
-RU: Russian Federation
+RU: Russia
 RW: Rwanda
 SA: Saudi Arabia
 SB: Solomon Islands
@@ -206,14 +206,14 @@ SN: Senegal
 SO: Somalia
 SR: Suriname
 SS: South Sudan
-ST: Sao Tome and Principe
+ST: São Tomé and Príncipe
 SV: El Salvador
-SX: Sint Maarten (Dutch part)
-SY: Syrian Arab Republic
-SZ: Swaziland
+SX: Sint Maarten
+SY: Syria
+SZ: Eswatini
 TC: Turks and Caicos Islands
 TD: Chad
-TF: French Southern Territories
+TF: French Southern and Antarctic Lands
 TG: Togo
 TH: Thailand
 TJ: Tajikistan
@@ -222,27 +222,27 @@ TL: Timor-Leste
 TM: Turkmenistan
 TN: Tunisia
 TO: Tonga
-TR: Turkey
+TR: Türkiye
 TT: Trinidad and Tobago
 TV: Tuvalu
 TW: Taiwan
-TZ: Tanzania, United Republic of
+TZ: Tanzania
 UA: Ukraine
 UG: Uganda
 UM: United States Minor Outlying Islands
-US: United States of America
+US: United States
 UY: Uruguay
 UZ: Uzbekistan
 VA: Vatican City
 VC: Saint Vincent and the Grenadines
-VE: Venezuela (Bolivarian Republic of)
-VG: Virgin Islands (British)
-VI: Virgin Islands (U.S.)
+VE: Venezuela
+VG: British Virgin Islands
+VI: United States Virgin Islands
 VN: Vietnam
 VU: Vanuatu
 WF: Wallis and Futuna
 WS: Samoa
-XK: Republic of Kosovo
+XK: Kosovo
 YE: Yemen
 YT: Mayotte
 ZA: South Africa

data/_includes/affiliation-logo.html

@@ -0,0 +1,10 @@
+{%- if include.image_url -%}
+  <img src="{{ include.image_url | relative_url }}" alt="{{ include.name }}" class="affiliation-img">
+{%- elsif include.country_code -%}
+  <div class="ratio ratio-4x3">
+    <div class="rounded shadow-sm flag-icon flag-icon-{{ include.country_code | downcase }}">
+    </div>
+  </div>
+{%- else -%}
+  <span>{{ include.name }}</span>
+{%- endif -%}

data/_includes/affiliation-tiles-page.html

@@ -1,31 +1,31 @@
-{%- if page.affiliations and page.affiliations.size != 0 %}
-<span class="d-block h2-like fs-2">{{site.theme_variables.headings.affiliation-tiles-page | default: 'Affiliations' }}</span>
-<div class="mt-4 d-flex flex-wrap gap-2">
-    {%- assign affiliations = site.data.affiliations %}
-    {%- assign page_affiliations = page.affiliations | sort %}
-    {%- assign allcountries = site.data.countries %}
-    {%- for affiliation in page_affiliations %}
-    {%- if affiliation.size == 2 %}
-    {%- assign country = affiliation | upcase %}
-    {%- assign country_link = site.pages | where:"country_code",country | first %}
-    {%- if country_link %}
-    <a role="button" href="{{country_link.url | relative_url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm d-flex align-items-center contributor-link hover-primary">
-    {%- else %}
-    <a role="button" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm contributor-link d-flex align-items-center hover-primary disabled border-white" aria-disabled="true">
-    {%- endif %}
+{%- unless include.sort == false %}
+{%- assign affiliations_list = include.affiliations_list | sort %}
+{%- else %}
+{%- assign affiliations_list = include.affiliations_list %}
+{%- endunless %}
+<div class="d-flex flex-wrap gap-2">
+  {%- for affiliation_name in affiliations_list -%}
+    {%- comment -%} Check if it's a country code (2 characters) {%- endcomment -%}
+    {%- if affiliation_name.size == 2 -%}
+      
+      {%- assign country_code = affiliation_name | upcase %}
+      {%- assign country_link = site.pages | where:"country_code",country_code | first %}
+      {%- assign country_name = site.data.countries[country_code] %}
+
+      {%- if country_link %}
+        <a role="button" data-bs-toggle="tooltip" title="{{country_name}}" class="btn btn-sm d-flex align-items-center affiliation-link hover-primary" href="{{country_link.url | relative_url}}">
+      {%- else %}
+        <a role="button" data-bs-toggle="tooltip" title="{{country_name}}" class="btn btn-sm affiliation-link d-flex align-items-center disabled border-0" aria-disabled="true">
+      {%- endif %}
         <div class="d-flex justify-content-center affiliation-flag">
-            <div class="ratio ratio-4x3">
-                <div class="rounded shadow-sm flag-icon flag-icon-{{affiliation | downcase}}">
-                </div>
-            </div>
+          {%- include affiliation-logo.html country_code=country_code name=country_code -%}
         </div>
-    </a>
-    {%- else %}
-    {%- assign affiliation_info = affiliations | where:"name",affiliation | first %}
-    <a class="btn btn-sm contributor-link d-flex align-items-center justify-content-center hover-primary" data-bs-toggle="tooltip" title="{{affiliation_info.name}}" href="{{affiliation_info.url}}">
+      </a>
+    {%- else -%}
+      {%- assign affiliation_info = site.data.affiliations | where:"name",affiliation_name | first %}
+      <a class="btn btn-sm affiliation-link d-flex align-items-center justify-content-center hover-primary" data-bs-toggle="tooltip" title="{{affiliation_info.name}}" href="{{affiliation_info.url}}">
         <img src="{{affiliation_info.image_url | relative_url}}" alt="{{affiliation_info.name}}" class="affiliation-img">
-    </a>
-    {%- endif %}
-    {%- endfor %}
+      </a>
+    {%- endif -%}
+  {%- endfor -%}
 </div>
-{%- endif %}

data/_includes/citation-page.html

@@ -1,19 +1,21 @@
-{% if page.page_citation and page.title %}
-<h2>How to cite this page</h2>
-<p>
-    {% if page.contributors %}
-    {{ page.contributors | join: ", " }},
-    {% endif %}
-    "<em>{{ page.title }}</em>".
-    {% if site.url %}
-    {{ site.url | remove: "https://www." | remove: "http://www." | remove: "https://" | remove: "http://"  }}.
-    {% endif %}
-    {% assign page_url = page.url | absolute_url %}
-    <a href="{{ page_url }}">{{ page_url }}</a> <span id="current_date"></span>.
+
+<p class="mb-0">
+  {%- if include.contributors_list %}
+  {%- unless include.sort == false %}
+  {%- assign name_list = include.contributors_list | sort %}
+  {%- else %}
+  {%- assign name_list = include.contributors_list %}
+  {%- endunless %}
+  {{ name_list | join: ", " }},
+  {%- endif %}
+  "<em>{{ page.title | strip }}</em>".
+  {%- if site.url %}
+  {{ site.url | remove: "https://www." | remove: "http://www." | remove: "https://" | remove: "http://"  }}.
+  {%- endif %}
+  {%- assign page_url = page.url | absolute_url %}
+  <a href="{{ page_url }}">{{ page_url }}</a> <span id="current_date"></span>.
 </p>
 <script>
-    var current_date = new Date().toLocaleDateString('en-uk', { year:"numeric", month:"long", day:"numeric"})
-    document.getElementById("current_date").textContent = "(accessed " + current_date + ")";
-</script>
-{% endif %}
-
+  var current_date = new Date().toLocaleDateString('en-uk', { year:"numeric", month:"long", day:"numeric"})
+  document.getElementById("current_date").textContent = " (accessed " + current_date + ")";
+</script>

data/_includes/contributor-avatar.html

@@ -0,0 +1,16 @@
+{%- if include.image_url %}
+  <div class="contr-placeholder rounded-circle" style="background-image: url({{ include.image_url }});">
+  </div>
+{%- elsif include.git %}
+  <img src="https://avatars.githubusercontent.com/{{ include.git }}" class="img-fluid rounded-circle" alt="{{ include.name }}">
+{%- else -%}
+  <div class="contr-placeholder rounded-circle d-flex justify-content-center align-items-center{%- if include.small %} contributor-img-sm{% endif %}">
+    {%- assign name_parts = include.name | split: " " %}
+    {%- assign initials = "" %}
+    {%- for part in name_parts %}
+    {%- assign initial = part | slice: 0,1 | capitalize %}
+    {%- assign initials = initials | append: initial %}
+    {%- endfor -%}
+    <span class="fw-bold{%- unless include.small %} fs-2{% endunless %}">{{ initials }}</span>
+  </div>
+{%- endif %}

data/_includes/contributor-card.html

@@ -0,0 +1,33 @@
+<div class="card h-100">
+  <div class="position-relative">
+    <div class="p-3">
+      <div class="ratio ratio-1x1">
+        {%- include contributor-avatar.html name=include.name image_url=include.image_url git=include.git %}
+      </div>
+    </div>
+    {%- if include.role %}
+    <span class="badge position-absolute top-0 end-0">{{ include.role | capitalize }}</span>
+    {%- endif -%}
+  </div>
+  <div class="card-body text-center py-0">
+    <p class="card-title">{{ include.name }}</p>
+    {%- if include.affiliation %}
+    <p class="card-affiliation">{{ include.affiliation | join: " / " }}</p>
+    {%- endif -%}
+  </div>
+  {%- if include.git or include.email or include.orcid %}
+  <div class="card-footer">
+    <div class="d-flex justify-content-center gap-2">
+      {%- if include.git %}
+      <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://github.com/{{ include.git }}"><i class="fa-brands fa-github"></i><span class="visually-hidden">GitHub</span></a>
+      {%- endif -%}
+      {%- if include.email %}
+      <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="mailto:{{ include.email }}"><i class="fa-solid fa-envelope"></i><span class="visually-hidden">Email</span></a>
+      {%- endif -%}
+      {%- if include.orcid %}
+      <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://orcid.org/{{ include.orcid }}"><i class="fa-brands fa-orcid"></i><span class="visually-hidden">Orcid</span></a>
+      {%- endif %}
+    </div>
+  </div>
+  {%- endif %} 
+</div>

data/_includes/contributor-carousel-selection.html

@@ -1,12 +1,12 @@
 {%- assign carousel_counter = carousel_counter | plus: 1 %}
-{%- assign contributors = site.data.CONTRIBUTORS %}
+{%- assign contributors_lookup = site.data.CONTRIBUTORS %}
 {%- assign allcontrstr = nil %}
-{%- assign nr = include.col | default: 5 %}
+{%- assign nr = include.col | default: 4 %}
 {%- if include.custom %}
 {%- assign allcontrstr = include.custom %}
 {%- elsif include.role %}
 {%- assign rolefilter =  include.role | downcase %}
-{%- for contr in contributors %}
+{%- for contr in contributors_lookup %}
 {%- assign contrrole = contr[1]['role'] | downcase %}
 {%- if rolefilter == contrrole %}
 {%- if allcontrstr %}
@@ -27,7 +27,7 @@
 {%- endif %}
 {%- endif %}
 {%- endfor %}
-{%- for contr in contributors %}
+{%- for contr in contributors_lookup %}
 {%- if allcontrstr %}
 {%- assign allcontrstr = allcontrstr | append: ", " | append: contr[0] %}
 {%- else %}
@@ -40,70 +40,18 @@
 {%- assign allcontributors = allcontributors | sort %}
 {%- endunless %}
 {%- unless allcontributors.size == 0 %}
+<div class="position-relative">
 <div id="contributors-carousel-{{carousel_counter}}" class="carousel carousel-dark slide my-4" data-ride="carousel" data-bs-interval="7000">
     <div class="carousel-inner">
         {%- assign counter = 0 %}
-        {%- for contributor in allcontributors %}
+        {%- for contributor_name in allcontributors %}
         {%- if modulo == '0' or counter == 0 %}
         <div class="carousel-item {% if counter == 0 %}active{% endif %}">
             <div class="row row-cols-{{nr}} contributor-cards g-1 g-xl-4 ">
         {%- endif %}
+        {%- assign data = contributors_lookup[contributor_name] %}
                 <div class="col">
-                    <div class="card h-100">
-                        {%- assign id = contributors[contributor].git | default: 'no_github' %}
-                        <div class="position-relative">
-                            {%- if contributors[contributor].image_url %}
-                            <div class="p-3">
-                                <div class="ratio ratio-1x1">
-                                    <div class="contr-placeholder rounded-circle" style="background-image: url({{ contributors[contributor].image_url }});">
-                                    </div>
-                                </div>
-                            </div>
-                            {%- else %}
-                            {%- if contributors[contributor].git %}
-                            <img src="https://avatars.githubusercontent.com/{{id}}" class="card-img-top p-3 rounded-circle" alt="{{ contributor }}">
-                            {%- else %}
-                            <div class="p-3">
-                                <div class="ratio ratio-1x1">
-                                    <div class="contr-placeholder rounded-circle d-flex justify-content-center align-items-center">
-                                        {%- assign contr_name = contributor | split: " " %}
-                                        {%- assign initials = "" %}
-                                        {%- for name in contr_name %}
-                                        {%- assign initial = name | slice: 0,1 | capitalize %}
-                                        {%- assign initials = initials | append: initial %}
-                                        {%- endfor %}
-                                        <span class="fs-2 fw-bold">{{ initials }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            {%- endif %}
-                            {%- endif %}
-                            {%- if contributors[contributor].role %}
-                            <span class="badge position-absolute top-0 end-0">{{ contributors[contributor].role | capitalize }}</span>
-                            {%- endif %}
-                        </div>
-                        <div class="card-body text-center py-0">
-                            <p class="card-title">{{ contributor }}</p>
-                            {%- if contributors[contributor].affiliation %}
-                            <p class="card-affiliation">{{ contributors[contributor].affiliation | join: " / " }}</p>
-                            {%- endif %}
-                        </div>
-                        {%- if contributors[contributor].git or contributors[contributor].email or contributors[contributor].orcid %}
-                        <div class="card-footer">
-                            <div class="d-flex justify-content-center gap-1 gap-md-2">
-                                {%- if contributors[contributor].git %}
-                                <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://github.com/{{id}}"><i class="fa-brands fa-github"></i></a>
-                                {%- endif %}
-                                {%- if contributors[contributor].email %}
-                                <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="mailto:{{contributors[contributor].email}}"><i class="fa-solid fa-envelope"></i></a>
-                                {%- endif %}
-                                {%- if contributors[contributor].orcid %}
-                                <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://orcid.org/{{contributors[contributor].orcid}}"><i class="fa-brands fa-orcid"></i></a>
-                                {%- endif %}
-                            </div>
-                        </div>
-                        {%- endif %}
-                    </div>
+                    {%- include contributor-card.html name=contributor_name image_url=data.image_url git=data.git email=data.email orcid=data.orcid role=data.role affiliation=data.affiliation %}
                 </div>
         {%- assign counter = counter | plus:1 %}
         {%- capture modulo %}{{ counter | modulo:nr }}{% endcapture %}
@@ -112,14 +60,15 @@
         </div>
         {%- endif %}
         {%- endfor %}
-        <button class="carousel-control-prev" type="button" data-bs-target="#contributors-carousel-{{carousel_counter}}" data-bs-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="visually-hidden">Previous</span>
-        </button>
-        <button class="carousel-control-next" type="button" data-bs-target="#contributors-carousel-{{carousel_counter}}" data-bs-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="visually-hidden">Next</span>
-        </button>
     </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#contributors-carousel-{{carousel_counter}}" data-bs-slide="prev" style="width: 2rem; margin-left: -1rem; bottom: auto; height: 3rem;">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#contributors-carousel-{{carousel_counter}}" data-bs-slide="next" style="width: 2rem; margin-right: -1rem; bottom: auto; height: 3rem;">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>
 </div>
 {%- endunless %}