From f4402e1e140d9d12d1be544d68c7e341ed74bd4f Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Thu, 13 Jul 2023 15:58:58 +0200
Subject: [PATCH 1/7] Fetch and display events from blobserver

---
 layouts/events/list.html | 567 +++++++++++++++++++++------------------
 static/css/styles.css    |   1 +
 2 files changed, 303 insertions(+), 265 deletions(-)

diff --git a/layouts/events/list.html b/layouts/events/list.html
index 3753231..f04181b 100644
--- a/layouts/events/list.html
+++ b/layouts/events/list.html
@@ -118,196 +118,225 @@ <h5 class="modal-title" id="suggestionModalLabel">Events & training suggestion</
   </div>
 </section>
 
-{{ $location := slice }}
-{{ $level := slice }}
-{{ $category := slice }}
-{{ $upcoming_events := slice }}
-{{ range sort $.Site.Data.events.items ".date_start" "asc" }}
-{{ $banner_date := cond (isset . "date_start") .date_start .registration_deadline }}
-{{ if ge ($banner_date | time.Format "20060102") (now | time.Format "20060102") }}
-{{ with .location }} {{ $location = $location | append . }} {{ end }}
-{{ with .level }} {{ $level = $level | append . }} {{ end }}
-{{ with .category }} {{ $category = $category | append . }} {{ end }}
-{{ $upcoming_events = $upcoming_events | append . }}
-{{ end }}
-{{ end }}
-{{ $location = $location | uniq }}
-{{ $level = $level | uniq }}
-{{ $category = $category | uniq }}
-{{ if ge (len $upcoming_events) 1 }}
-<section>
-  <div class="row mt-3 mb-5">
-    <div class="col-lg-2" id="events-filters">
-      <h5>Location</h5>
-      {{ range sort $location }}
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="{{ . }}" name="location"
-          value="{{ delimit (split . " ") "-" | lower }}">
-        <label class="form-check-label" for="{{ . }}">{{ cond (eq . "Online") "Online/Hybrid" . }}</label>
-      </div>
-      {{ end }}
-
-      {{ if ge (len $category) 1 }}
-      <h5 class="mt-3">Category</h5>
-      {{ range sort $category }}
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="{{ . }}" name="category"
-          value="{{ delimit (split . " ") "-" | lower }}">
-        <label class="form-check-label" for="{{ . }}">{{ . }}</label>
-      </div>
-      {{ end }}
-      {{ end }}
-
-      {{ if ge (len $level) 1 }}
-      <h5 class="mt-3">Level</h5>
-      {{ range sort $level }}
-      <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="{{ . }}" name="level"
-          value="{{ delimit (split . " ") "-" | lower }}">
-        <label class="form-check-label" for="{{ . }}">{{ . }}</label>
-      </div>
-      {{ end }}
-      {{ end }}
-    </div>
-
-    <div class="col-lg">
-      <div class="row g-2" id="events-container">
-        {{ range $ind, $cont := $upcoming_events }}
-
-        {{/* Add custom attributes for filtering purposes */}}
-        {{ $this_event_category := slice }}
-        {{ range .category }}
-        {{ $this_event_category = $this_event_category | append (delimit (split . " ") "-" | lower) }} {{ end }}
-        {{ $this_event_category = delimit $this_event_category " " }}
-        {{ $this_event_location := slice }}
-        {{ range .location }}
-        {{ $this_event_location = $this_event_location | append (delimit (split . " ") "-" | lower) }} {{ end }}
-        {{ $this_event_location = delimit $this_event_location " " }}
-        {{ $this_event_level := delimit (split .level " ") "-" | lower }}
+<section id="events-section">
+  <!-- The events content will filled by JS function below -->
+</section>
 
-        <div class="col-md-6 col-lg-4 event" data-event-location="{{ $this_event_location }}"
-          data-event-category="{{ $this_event_category }}" data-event-level="{{ $this_event_level }}">
-          <div class="p-3 border rounded h-100">
-            <div class="d-flex justify-content-between">
-              <div>
-                <span class="badge event-type mb-1">{{ .type }}</span>
-                <h5><a class="" role="button" data-bs-toggle="modal"
-                    data-bs-target="#descriptionModal{{ $ind }}">{{ .title }}</a></h5>
-              </div>
-              <div>
-                <div class="px-2 pb-1 m-2 d-flex flex-column rounded event-date">
-                  {{ $banner_date := cond (isset . "date_start") .date_start .registration_deadline }}
-                  <div class="px-2 fs-3 mx-auto">{{ time.Format "2" $banner_date }}</div>
-                  <div class="px-2 mx-auto">{{ time.Format "January" $banner_date }}</div>
-                  {{ if and (not .date_start) (.registration_deadline) }}
-                  <div class="px-2 mx-auto">(deadline)</div>
-                  {{ end }}
-                </div>
-              </div>
-            </div>
-            {{ if .date_start }}
-            <div class="row mt-3">
-              <div class="col">
-                <b>Date and time:</b> {{ .date_start | time.Format ":date_medium" }}
-                {{ if .time_start }} {{ .time_start }}{{ end }}
-                {{ if or .date_end .time_end }} - {{ end }}
-                {{ if and (.date_end) (ne .date_end .date_start) }}{{ .date_end | time.Format ":date_medium" }}{{ end}}
-                {{ if .time_end }} {{ .time_end }}{{ end }}
-              </div>
-            </div>
-            {{ end }}
-            {{ if .registration_deadline }}
-            <div class="row mt-1">
-              <div class="col">
-                <b>Registration deadline:</b> {{ .registration_deadline | time.Format ":date_medium" }}
-              </div>
-            </div>
-            {{ end }}
-            {{ if .organisers }}
-            <div class="row">
-              <div class="col">
-                <b>Organiser(s):</b> {{ .organisers }}
-              </div>
-            </div>
-            {{ end }}
-            {{ if .venue }}
-            <div class="row">
-              <div class="col">
-                <b>Venue:</b> {{ .venue }}
-              </div>
-            </div>
-            {{ end }}
-            <div class="row mt-3">
-              <div class="col">
-                <button type="button" class="btn btn-details btn-sm" data-bs-toggle="modal"
-                  data-bs-target="#descriptionModal{{ $ind }}">
-                  See details
-                </button>
-                <div class="modal fade" id="descriptionModal{{ $ind }}" tabindex="-1"
-                  aria-labelledby="descriptionModalLabel{{ $ind }}" aria-hidden="true">
-                  <div class="modal-dialog">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h5 class="modal-title" id="descriptionModalLabel">{{ .title }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="row">
-                          <div class="col">
-                            <b>Event type:</b> <span class="badge event-type mb-1">{{ .type }}</span>
-                          </div>
-                        </div>
-                        {{ if .date_start }}
-                        <div class="row mt-1">
-                          <div class="col">
-                            <b>Date and time:</b> {{ .date_start | time.Format ":date_medium" }}
-                            {{ if .time_start }} {{ .time_start }}{{ end }}
-                            {{ if or .date_end .time_end }} - {{ end }}
-                            {{ if and (.date_end) (ne .date_end .date_start) }}{{ .date_end | time.Format ":date_medium" }}{{ end}}
-                            {{ if .time_end }} {{ .time_end }}{{ end }}
-                          </div>
-                        </div>
-                        {{ end }}
-                        {{ if .registration_deadline }}
-                        <div class="row mt-1">
-                          <div class="col">
-                            <b>Registration deadline:</b> {{ .registration_deadline | time.Format ":date_medium" }}
-                          </div>
-                        </div>
-                        {{ end }}
-                        {{ if .organisers }}
-                        <div class="row mt-1">
-                          <div class="col">
-                            <b>Organiser(s):</b> {{ .organisers }}
-                          </div>
-                        </div>
-                        {{ end }}
-                        {{ if .venue }}
-                        <div class="row mt-1">
+<script>
+ // Functions need to be run when the DOM is ready
+  document.addEventListener("DOMContentLoaded", function (event) {
+    // Takes a URL and calls the callback function pass the data fetched
+    function getDataFromUrl(url, load_callback, loadend_callback) {
+      var req = new XMLHttpRequest();
+      req.overrideMimeType("application/json");
+      req.open("GET", url, true);
+      // The function call for fetching data and display
+      req.onload = function () {
+        load_callback(JSON.parse(req.responseText).items);
+      };
+      // The function call for adding filtering
+      req.onloadend = function () {
+        loadend_callback();
+      };
+      req.send(null);
+    }; // function "getDataFromUrl" ends here
+    
+    function addEvents(dataArray) {
+      var eventList = [], local = [], level = [], category = []
+      // Not insterested if the deadline have already passed
+      dataArray.forEach((event) => {
+        event.banner_date = event.date_start || event.registration_deadline;
+        if (typeof event.banner_date !== 'undefined'){
+          if (new Date(event.banner_date) >= new Date().setHours(0,0,0,0)){
+            eventList.push(event);
+            if (typeof event.location !== 'undefined'){
+              event.location.forEach((lc) => {if(!local.includes(lc)){local.push(lc)}});
+            };
+            if (typeof event.category !== 'undefined'){
+              event.category.forEach((ct) => {if(!category.includes(ct)){category.push(ct)}});
+            };
+            if (typeof event.level !== 'undefined'){
+              if(!level.includes(event.level)){level.push(event.level);}
+            };
+          };
+        };
+      }); // dataArray for each ends here
+      
+      // Sort the arrays
+      eventList = eventList.sort((a,b) => (a.banner_date > b.banner_date) ? 1 : (a.banner_date < b.banner_date) ? -1 : 0);
+      local = local.sort();
+      level = level.sort();
+      category = category.sort();
+      
+      // If no event to show, display appropriate message
+      if (eventList.length === 0) {
+        var eventsHTML = `<div class="alert alert-secondary mt-4">
+                          We are currently unaware of any upcoming events or training opportunities relevant for data-driven 
+                          life science. If you know of any relevant events or training opportunities that should be shown 
+                          here, please suggest them to us using the "Submit an event" button above.
+                        </div>`
+      } else {
+        var eventsHTML = `<div class="row mt-3 mb-5">
+                          <div class="col-lg-2" id="events-filters">`;
+        if (local.length > 0){
+          eventsHTML += `<h5>Location</h5>`;
+          local.forEach((lc) => {
+            eventsHTML += `<div class="form-check">   
+                            <input class="form-check-input" type="checkbox" id="${lc}" name="location" value="${lc.replaceAll(" ", "-").toLowerCase()}">
+                            <label class="form-check-label" for="${lc}">${(lc == "Online") ? "Online/Hybrid" : lc}</label>
+                           </div>`;
+          });
+        };
+        if (category.length > 0){
+          eventsHTML += `<h5 class="mt-3">Category</h5>`;
+          category.forEach((ct) => {
+            eventsHTML += `<div class="form-check">   
+                            <input class="form-check-input" type="checkbox" id="${ct}" name="category" value="${ct.replaceAll(" ", "-").toLowerCase()}">
+                            <label class="form-check-label" for="${ct}">${ct}</label>
+                           </div>`;
+          });
+        };
+        if (level.length > 0){
+          eventsHTML += `<h5 class="mt-3">Level</h5>`;
+          level.forEach((lv) => {
+            eventsHTML += `<div class="form-check">   
+                            <input class="form-check-input" type="checkbox" id="${lv}" name="level" value="${lv.replaceAll(" ", "-").toLowerCase()}">
+                            <label class="form-check-label" for="${lv}">${lv}</label>
+                           </div>`;
+          });
+        };
+        eventsHTML += `</div>
+                       <div class="col-lg">
+                         <div class="row g-2" id="events-container">`;
+        eventList.forEach((event, ind) => {
+          var this_event_local, this_event_category, this_event_level;
+          var event_date = new Date(event.banner_date);
+          if (typeof event.location !== 'undefined'){
+            this_event_local = event.location.map(lc => lc.replaceAll(" ", "-").toLowerCase()).join(" ");
+          };
+          if (typeof event.category !== 'undefined'){
+            this_event_category = event.category.map(ct => ct.replaceAll(" ", "-").toLowerCase()).join(" ");
+          };
+          if (typeof event.level !== 'undefined'){
+            this_event_level = event.level.replaceAll(" ", "-").toLowerCase();
+          };
+          eventsHTML += `<div class="col-md-6 col-lg-4 event" data-event-location="${this_event_local}"
+                          data-event-category="${this_event_category}" data-event-level="${this_event_level}">
+                          <div class="p-3 border rounded h-100">
+                            <div class="d-flex justify-content-between">
+                              <div>
+                                <span class="badge event-type mb-1">${event.type}</span>
+                                <h5><a class="" role="button" data-bs-toggle="modal"
+                                    data-bs-target="#descriptionModal${ind}">${event.title}</a></h5>
+                              </div>
+                              <div>
+                                <div class="px-2 pb-1 m-2 d-flex flex-column rounded event-date">
+                                <div class="px-2 fs-3 mx-auto">${event_date.getDate()}</div>
+                                <div class="pb-1 px-2 mx-auto">${event_date.toLocaleString('default', {'month': 'long'})}</div>
+                                </div>
+                              </div>
+                            </div>`;
+          var event_date_time = [], date_format_options = {'month': 'short', day:'numeric', year: 'numeric'};
+          event.date_start && event_date_time.push(new Date(event.date_start).toLocaleString('en-US', date_format_options));
+          event.time_start && event_date_time.push(event.time_start);
+          (event.date_end || event.time_end) && event_date_time.push("-")
+          event.date_end && event_date_time.push(new Date(event.date_end).toLocaleString('en-US', date_format_options));
+          event.time_end && event_date_time.push(event.time_end);
+          if (event_date_time.length > 0){
+            eventsHTML += `<div class="row mt-3">
+                             <div class="col">
+                               <b>Date and time:</b> ${event_date_time.join(" ")}
+                             </div>
+                           </div>`;
+          }
+          if (event.registration_deadline){
+            eventsHTML += `<div class="row mt-1">
+                             <div class="col">
+                               <b>Registration deadline:</b> ${new Date(event.registration_deadline).toLocaleString('en-US', date_format_options)}
+                             </div>
+                           </div>`;
+          }
+          if (event.organisers){
+            eventsHTML += `<div class="row">
+                             <div class="col">
+                               <b>Organiser(s):</b> ${event.organisers}
+                             </div>
+                           </div>`;
+          }
+          if (event.venue){
+            eventsHTML += `<div class="row">
+                             <div class="col">
+                               <b>Venue:</b> ${event.venue}
+                             </div>
+                           </div>`;
+          }
+          eventsHTML += `<div class="row mt-3">
                           <div class="col">
-                            <b>Venue:</b> {{ .venue }}
-                          </div>
-                        </div>
-                        {{ end }}
-                        {{ if .description }}
-                        <div class="row mt-3">
-                          <div class="col"><b>Description:</b><br>
-                            {{ .description | markdownify }}
-                          </div>
-                        </div>
-                        {{ end }}
-                        <div class="row mt-3">
+                            <button type="button" class="btn btn-details btn-sm" data-bs-toggle="modal"
+                              data-bs-target="#descriptionModal${ind}">
+                              See details
+                            </button>
+                            <div class="modal fade" id="descriptionModal${ind}" tabindex="-1"
+                              aria-labelledby="descriptionModalLabel${ind}" aria-hidden="true">
+                              <div class="modal-dialog">
+                                <div class="modal-content">
+                                  <div class="modal-header">
+                                    <h5 class="modal-title" id="descriptionModalLabel">${event.title}</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                  </div>
+                                  <div class="modal-body">
+                                    <div class="row">
+                                      <div class="col">
+                                        <b>Event type:</b> <span class="badge event-type mb-1">${event.type}</span>
+                                      </div>
+                                    </div>`;
+          if (event_date_time.length > 0){
+            eventsHTML += `<div class="row mt-1">
+                             <div class="col">
+                               <b>Date and time:</b> ${event_date_time.join(" ")}
+                             </div>
+                           </div>`;
+          }
+          if (event.registration_deadline){
+            eventsHTML += `<div class="row mt-1">
+                             <div class="col">
+                               <b>Registration deadline:</b> ${new Date(event.registration_deadline).toLocaleString('en-US', date_format_options)}
+                             </div>
+                           </div>`;
+          }
+          if (event.organisers){
+            eventsHTML += `<div class="row mt-1">
+                             <div class="col">
+                               <b>Organiser(s):</b> ${event.organisers}
+                             </div>
+                           </div>`;
+          }
+          if (event.venue){
+            eventsHTML += `<div class="row mt-1">
+                             <div class="col">
+                               <b>Venue:</b> ${event.venue}
+                             </div>
+                           </div>`;
+          }
+          if (event.description){
+            eventsHTML += `<div class="row mt-3">
+                             <div class="col">
+                               <b>Description:</b><br> ${event.description}
+                             </div>
+                           </div>`;
+          }
+          eventsHTML += `<div class="row mt-3">
                           <p>For more information, see the event webpage at the link below.</p>
                           <div class="col-md">
-                            <a target="_blank" href="{{ .event_url }}"><i class="bi bi-globe"></i> Event webpage</a>
-                          </div>
-                          {{ if .registration_url }}
-                          <div class="col-md">
-                            <a target="_blank" href="{{ .registration_url }}"><i class="bi bi-globe"></i>
+                            <a target="_blank" href="${event.event_url}"><i class="bi bi-globe"></i> Event webpage</a>
+                          </div>`;
+          if (event.registration_url){
+            eventsHTML += `<div class="col-md">
+                            <a target="_blank" href="${event.registration_url}"><i class="bi bi-globe"></i>
                               Registration</a>
-                          </div>
-                          {{ end }}
-                        </div>
+                          </div>`;
+          }
+          eventsHTML += `</div>
                       </div>
                       <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -318,91 +347,99 @@ <h5 class="modal-title" id="descriptionModalLabel">{{ .title }}</h5>
               </div>
             </div>
           </div>
-        </div>
-        {{ end }}
-        <div id="no-filtered-events" style="display:none;">
-          <p class="text-center">No events found for selected criteria.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-{{ else }}
-<div class="alert alert-secondary mt-4">We are currently unaware of any upcoming events or training opportunities
-  relevant for data-driven
-  life science. If you know of any relevant events or training opportunities that should be shown here, please recommend
-  them to us using
-  the "Submit an event" button above.</div>
-{{ end }}
-
-<script>
-  // set origin url in the form
-  document.getElementById('originUrl').value = location.href;
-
-  // Validate the form by checking mandatory fields and recaptcha
-  var form = document.querySelector('.needs-validation');
-  form.addEventListener('submit', function (event) {
-    if (form.checkValidity() === false) {
-      event.preventDefault();
-      alert("Please fill out all required fields.");
-      event.stopPropagation();
-      form.classList.add('was-validated')
-    }
-    var recaptcha = $("#g-recaptcha-response").val();
-    if (recaptcha === "") {
-      event.preventDefault();
-      alert("Please tick 'I'm not a robot' above the 'Submit the form' button.");
-    }
-  });
-
-  // Filter jobs based on selected criteria
-  $('div#events-filters input:checkbox').on('change', function () {
-    var selected_filters = new Object();
-
-    // Collect and create a list with selected values
-    var event_location = $('input:checkbox[name="location"]:checked').map(function () { return this.value }).get();
-    if (event_location.length) { selected_filters['data-event-location'] = event_location };
+        </div>`;
+        }); // for each events iteration to create html ends here
+        eventsHTML += `<div id="no-filtered-events" style="display:none;">
+                      <p class="text-center">No events found for selected criteria.</p>
+                    </div>
+                    </div>
+                  </div>
+                </div>`;
+        
+      }; // Creating of events display html ends here
+      
+      var eventsSection = document.getElementById('events-section');
+      eventsSection.innerHTML = eventsHTML;
+    }; // function "addEvents" ends here
+    
+    function enableFiltering (){
+      // Filter jobs based on selected criteria
+      $('div#events-filters input:checkbox').on('change', function () {
+        var selected_filters = new Object();
 
-    var event_category = $('input:checkbox[name="category"]:checked').map(function () { return this.value }).get();
-    if (event_category.length) { selected_filters['data-event-category'] = event_category };
+        // Collect and create a list with selected values
+        var event_location = $('input:checkbox[name="location"]:checked').map(function () { return this.value }).get();
+        if (event_location.length) { selected_filters['data-event-location'] = event_location };
 
-    var event_level = $('input:checkbox[name="level"]:checked').map(function () { return this.value }).get();
-    if (event_level.length) { selected_filters['data-event-level'] = event_level };
+        var event_category = $('input:checkbox[name="category"]:checked').map(function () { return this.value }).get();
+        if (event_category.length) { selected_filters['data-event-category'] = event_category };
 
-    // Hide all displayed jobs and message
-    $('div#events-container div.event').hide();
-    $('div#no-filtered-events').hide();
+        var event_level = $('input:checkbox[name="level"]:checked').map(function () { return this.value }).get();
+        if (event_level.length) { selected_filters['data-event-level'] = event_level };
 
-    // Show relavant jobs based on selected criteria
-    if (!Object.keys(selected_filters).length) {
-      $('div#events-container div.event').show();
-    } else {
-      var all_selected_events = [];
-      // Iterate over all selected criteria and collect the events
-      for (var [filter_name, filter_list] of Object.entries(selected_filters)) {
-        var s_events = new Set;
-        filter_list.forEach(function (filter_value) {
-          $(`div#events-container div[${filter_name}*=${filter_value}]`).each(function () { s_events.add(this); });
-        });
-        all_selected_events.push(s_events);
-      };
-      // When multiple criteria selectd it should act as AND not OR
-      selected_events = all_selected_events.reduce(function (x, y) {
-        var z = new Set;
-        x.forEach(v => y.has(v) && z.add(v));
-        return z;
-      });
-      // Set display for event with selected criteria
-      if (selected_events.size) {
-        selected_events.forEach(function (sEvent) { sEvent.style.display = ''; })
-      } else {
-        // Display a message if no events available for selected criteria
-        $('div#no-filtered-events').show();
-      };
-    };
+        // Hide all displayed jobs and message
+        $('div#events-container div.event').hide();
+        $('div#no-filtered-events').hide();
 
-  });
+        // Show relavant jobs based on selected criteria
+        if (!Object.keys(selected_filters).length) {
+          $('div#events-container div.event').show();
+        } else {
+          var all_selected_events = [];
+          // Iterate over all selected criteria and collect the events
+          for (var [filter_name, filter_list] of Object.entries(selected_filters)) {
+            var s_events = new Set;
+            filter_list.forEach(function (filter_value) {
+              $(`div#events-container div[${filter_name}*=${filter_value}]`).each(function () { s_events.add(this); });
+            });
+            all_selected_events.push(s_events);
+          };
+          // When multiple criteria selectd it should act as AND not OR
+          selected_events = all_selected_events.reduce(function (x, y) {
+            var z = new Set;
+            x.forEach(v => y.has(v) && z.add(v));
+            return z;
+          });
+          // Set display for event with selected criteria
+          if (selected_events.size) {
+            selected_events.forEach(function (sEvent) { sEvent.style.display = ''; })
+          } else {
+            // Display a message if no events available for selected criteria
+            $('div#no-filtered-events').show();
+          };
+        };
+      }); // Checkbox "on change" trigger ends here
+    
+    }; // function "enableFiltering" ends here
+    
+    // Call the function to fetch, parse and display events
+    getDataFromUrl(
+      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Fdata_platform_events.json"),
+      addEvents,
+      enableFiltering
+    );
+    
+    // Events suggestion form related function
+    // set origin url in the form
+    document.getElementById('originUrl').value = location.href;
 
+    // Validate the form by checking mandatory fields and recaptcha
+    var form = document.querySelector('.needs-validation');
+    form.addEventListener('submit', function (event) {
+      if (form.checkValidity() === false) {
+        event.preventDefault();
+        alert("Please fill out all required fields.");
+        event.stopPropagation();
+        form.classList.add('was-validated')
+      }
+      var recaptcha = $("#g-recaptcha-response").val();
+      if (recaptcha === "") {
+        event.preventDefault();
+        alert("Please tick 'I'm not a robot' above the 'Submit the form' button.");
+      }
+    }); // Forms validation block ends here
+    
+  }); // Document "DOMContentLoaded" trigger ends here
 </script>
 
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index b6676d1..6fc1985 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -217,6 +217,7 @@ h5 a:hover {
 
 .btn-details:hover {
     color: #3F3F3F;
+    background-color: #4C979F;
 }
 
 .latest-news {

From a183267a7027902b935de76a1974b913eb5138d3 Mon Sep 17 00:00:00 2001
From: Jan Lorenz <jan.lorenz@scilifelab.se>
Date: Fri, 14 Jul 2023 16:19:15 +0200
Subject: [PATCH 2/7] Done

The Swedish one was already correctly displayed in LinkedIn etc.
---
 content/_index.md          | 2 +-
 layouts/partials/head.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/_index.md b/content/_index.md
index 4aa85c3..6403937 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,5 +1,5 @@
 ---
-title: Home
+title: SciLifeLab Data Platform
 ---
 
 The *SciLifeLab Data Platform* is a technical environment offering data-centric tools and databases as well as an overarching website with the goal to support and accelerate data-driven life science research in Sweden. The services hosted on the Platform are available to all life science researchers in Sweden. The platform is maintained by the SciLifeLab Data Centre.
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dd69e2a..c727646 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -2,7 +2,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Site meta -->
-  <title>{{ if ne .Title "Home"}}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
+  <title>{{ if ne .Title "SciLifeLab Data Platform"}}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
   <meta name="description" content='{{ if .IsHome }}{{ .Param "description" }}{{ else }}{{ .Description }}{{ end }}'>
   <meta http-equiv="content-language" content="en">
 

From 1f83ba59174678532930b4ece21dbcc79dc8353e Mon Sep 17 00:00:00 2001
From: Kazi Jahurul Islam <jahurul.sust@gmail.com>
Date: Fri, 14 Jul 2023 17:08:03 +0200
Subject: [PATCH 3/7] Enable dynamic updating for funding opportunities on the
 platform

- Issue: FREYA-376
---
 layouts/funding_calls/list.html | 286 ++++++++++++++++++++------------
 1 file changed, 176 insertions(+), 110 deletions(-)

diff --git a/layouts/funding_calls/list.html b/layouts/funding_calls/list.html
index 1cd74a8..3c7a16a 100644
--- a/layouts/funding_calls/list.html
+++ b/layouts/funding_calls/list.html
@@ -73,130 +73,196 @@ <h5 class="modal-title" id="suggestionModalLabel">Suggestion for funding source<
 
 <h4>Funding from SciLifeLab</h4>
 
-{{/* Get list of open DDLS funding calls */}}
-{{ $open_funding_calls := slice }}
-{{ range sort $.Site.Data.funding_calls.ddls ".deadline" "asc" }}
-{{ if ge (.deadline | time.Format "20060102") (now | time.Format "20060102") }}
-{{ $open_funding_calls = $open_funding_calls | append . }}
-{{ end }}
-{{ end }}
-
-{{ if ge (len $open_funding_calls) 1 }}
+<section id="fundings-calls-section">
+  <!-- The fundings and calls content will be filled by JS function below -->
+</section>
+
 <section>
-  <div class="row g-2 mt-3 mb-4">
-    {{ range $ind, $funding := $open_funding_calls }}
-    <div class="col-md-6 col-lg-4">
-      <div class="p-3 border rounded h-100">
-        <div class="d-flex justify-content-between">
-          <div>
-            <h5><a class="" role="button" data-bs-toggle="modal"
-                data-bs-target="#descriptionModal{{ $ind }}">{{ .title }}</a></h5>
-          </div>
-          <div class="px-2 mx-2 mb-2 d-flex flex-column rounded event-date">
-            <div class="px-2 fs-3 mx-auto">{{ time.Format "2" .deadline }}</div>
-            <div class="pb-1 px-2 mx-auto">{{ time.Format "January" .deadline }}</div>
-          </div>
-        </div>
-        {{ if .funder }}<div class="row">
-          <div class="col">
-            <b>Funder:</b> {{ .funder }}
-          </div>
-        </div>{{ end }}
-        <div class="row mt-3">
-          <div class="col">
-            <button type="button" class="btn btn-details btn-sm" data-bs-toggle="modal"
-              data-bs-target="#descriptionModal{{ $ind }}">
-              See details
-            </button>
-            <div class="modal fade" id="descriptionModal{{ $ind }}" tabindex="-1"
-              aria-labelledby="descriptionModalLabel{{ $ind }}" aria-hidden="true">
-              <div class="modal-dialog modal-lg">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <h5 class="modal-title" id="descriptionModalLabel">{{ .title }}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  <h4>Other potential sources of funding</h4>
+  <div class="mt-3 mb-4">
+    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
+    <div class="row g-2 mt-3 mb-4" id="other-fundings-calls-section">
+      <!-- The other fundings and calls content will be filled by JS function below -->
+    </div>
+  </div>
+</section>
+
+<script>
+// Functions need to be run when the DOM is ready
+document.addEventListener("DOMContentLoaded", function (event) {
+    
+    // Takes a URL and calls the callback function pass the data fetched
+    function getDataFromUrl(url, load_callback, loadend_callback) {
+      var req = new XMLHttpRequest();
+      req.overrideMimeType("application/json");
+      req.open("GET", url, true);
+      // The function call for fetching data and display
+      req.onload = function () {
+        load_callback(JSON.parse(req.responseText).ddls);
+      };
+      // The function call for adding filtering
+      req.onloadend = function () {
+        loadend_callback(JSON.parse(req.responseText).other_sources);
+      };
+      req.send(null);
+    };
+
+    // Code for funding sources starts here
+    function addFundingsCalls(dataArray) {
+      var dataList = [];
+      // Not insterested if the deadline have already passed
+      dataArray.forEach((item) => {
+        if (new Date(item.deadline) >= new Date().setHours(0,0,0,0)){
+          dataList.push(item);
+        }
+      });
+      // Sort the arrays
+      dataList = dataList.sort((a,b) => (a.deadline > b.deadline) ? 1 : (a.deadline < b.deadline) ? -1 : 0);
+      
+      // If no jobs to show, display appropriate message
+      if(dataList.length !== 0) {
+        var blockHTML = `<div class="row g-2 mt-3 mb-4">`;
+        
+          dataList.forEach((item, ind) => {
+            blockHTML += `
+            <div class="col-md-6 col-lg-4">
+              <div class="p-3 border rounded h-100">`;
+
+                blockHTML += `
+                <div class="d-flex justify-content-between">
+                  <h5>
+                    <a class="" role="button" data-bs-toggle="modal" data-bs-target="#descriptionModal${ind}">${item.title}</a>
+                  </h5>
+                  <div class="px-2 mx-2 mb-2 d-flex flex-column rounded event-date">
+                    <div class="px-2 fs-3 mx-auto">${ new Date(item.deadline).getDate() }</div>
+                    <div class="pb-1 px-2 mx-auto">${ new Date(item.deadline).toLocaleString('default', {'month': 'long'}) }</div>
                   </div>
-                  <div class="modal-body">
-                    <div class="row mt-1">
-                      <div class="col">
-                        <b>Application deadline:</b> {{ .deadline | time.Format ":date_medium" }}
-                      </div>
-                    </div>
+                </div>`;
 
-                    {{ if .funder }}
-                    <div class="row mt-2">
-                      <div class="col">
-                        <b>Funder:</b> {{ .funder }}
-                      </div>
+                if(item.funder) {
+                  blockHTML += `
+                  <div class="row">
+                    <div class="col">
+                      <b>Funder:</b> ${item.funder}
                     </div>
-                    {{ end }}
+                  </div>`; 
+                }
 
-                    {{ if .description }}
-                    <div class="row mt-2">
-                      <div class="col"><b>Brief description:</b><br>
-                        {{ .description | markdownify }}
-                      </div>
-                    </div>
-                    {{ end }}
+                blockHTML += `
+                <div class="row mt-3">
+                  <div class="col">
+                    <button type="button" class="btn btn-details btn-sm" data-bs-toggle="modal"
+                      data-bs-target="#descriptionModal${ind}">
+                      See details
+                    </button>
+                    <div class="modal fade" id="descriptionModal${ind}" tabindex="-1"
+                      aria-labelledby="descriptionModalLabel${ind}" aria-hidden="true">
+                      <div class="modal-dialog modal-lg">
+                        <div class="modal-content">
+                          <div class="modal-header">
+                            <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                          </div>
+                          <div class="modal-body">
+                            <div class="row mt-1">
+                              <div class="col">
+                                <b>Application deadline:</b> ${ new Date(item.deadline).toLocaleString('en-US', {'month': 'short', day:'numeric', year: 'numeric'}) }
+                              </div>
+                            </div>`;
 
-                    {{ if .applicant }}
-                    <div class="row mt-2">
-                      <div class="col"><b>Who can apply?</b><br>
-                        {{ .applicant | markdownify }}
-                      </div>
-                    </div>
-                    {{ end }}
+                            if(funder){ 
+                            blockHTML += `
+                            <div class="row mt-2">
+                              <div class="col">
+                                <b>Funder:</b> ${ item.funder }
+                              </div>
+                            </div>`;
+                            } 
+
+                            if(item.description) {
+                              blockHTML += `
+                              <div class="row mt-2">
+                                <div class="col"><b>Brief description:</b><br>
+                                  ${item.description}
+                                </div>
+                              </div>`;
+                            }
 
-                    <div class="row mt-3">
-                      <p>For more information, visit the link below.</p>
-                      <div class="col-md">
-                        <a target="_blank" href="{{ .url }}"><i class="bi bi-globe"></i> Call webpage</a>
+                            if(item.applicant){
+                              blockHTML += `
+                              <div class="row mt-2">
+                                <div class="col"><b>Who can apply?</b><br>
+                                  ${item.applicant}
+                                </div>
+                              </div>`;
+                            }
+                            
+
+                            blockHTML += `<div class="row mt-3">
+                              <p>For more information, visit the link below.</p>
+                              <div class="col-md">
+                                <a target="_blank" href="${item.url}"><i class="bi bi-globe"></i> Call webpage</a>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                  </div>
-                </div>
+                </div>`;
+
+            blockHTML += `
+              </div>
+            </div>`;
+          });
+          
+        blockHTML += `</div>`;
+      } else {
+        var blockHTML = `<div class="alert alert-secondary mt-4">
+                          We are currently unaware of any upcoming fundings or calls opportunities relevant for data-driven 
+                          life science. If you know of any relevant fundings or calls opportunities that should be shown 
+                          here, please suggest them to us using the "Tell us about an open funding source" button above.
+                        </div>`
+      }
+      
+      var dynamicSection = document.getElementById('fundings-calls-section');
+      dynamicSection.innerHTML = blockHTML;
+    };
+
+    // Code for other funding sources starts here
+    function addOtherFundings(dataOthers) {
+      
+      if(dataOthers.length !== 0) {
+        var blockHTML = '';
+        dataOthers.forEach((item, ind) => {
+          blockHTML += `
+          <div class="col-md-6 col-lg-4">
+            <div class="p-3 border rounded h-100">
+              <div class="row">
+                <div class="col-auto"><img src="${item.logo}" height="50" width="50"></div>
+                <div class="col ps-0"><h5><a target="_blank" href="${ item.url}">${item.funder}</a></h5></div>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    {{ end }}
-  </div>
-</section>
-{{ else }}
-<div class="alert alert-secondary mt-4">
-  There are currently no open funding calls from SciLifeLab related to data-driven life science.
-</div>
-{{ end }}
+          </div>`;
+        });
+      }
 
-<!-- Code for other funding sources starts here -->
+      var othersSection = document.getElementById('other-fundings-calls-section');
+      othersSection.innerHTML = blockHTML;
+    }
 
-{{/* Get list of other funding sources */}}
-{{ $other_funding_sources := $.Site.Data.funding_calls.other_sources }}
-{{ if ge (len $other_funding_sources) 1 }}
-<section>
-  <h4>Other potential sources of funding</h4>
-  <div class="mt-3 mb-4">
-    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
-    <div class="row g-2 mt-3 mb-4">
-      {{ range $other_funding_sources }}
-      <div class="col-md-6 col-lg-4">
-        <div class="p-3 border rounded h-100">
-          <div class="row">
-            <div class="col-auto"><img src="{{ .logo }}" height="50" width="50"></div>
-            <div class="col ps-0"><h5><a target="_blank" href="{{ .url }}">{{ .funder }}</a></h5></div>
-          </div>
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
-</section>
-{{ end }}
+    // Call the function to fetch, parse and display jobs
+    getDataFromUrl(
+      decodeURIComponent("https://blobserver.dc.scilifelab.se/blob/data_platform_funding_calls.json"),
+      addFundingsCalls,
+      addOtherFundings
+    );
+
+  });
+</script>
 
 <script>
   document.getElementById('originUrl').value = location.href;

From ddee703abea03ccf3dc3207598264351f27edf7e Mon Sep 17 00:00:00 2001
From: Kazi Jahurul Islam <jahurul.sust@gmail.com>
Date: Fri, 14 Jul 2023 17:17:31 +0200
Subject: [PATCH 4/7] refactor javascript code

refactor javascript code to merge form validation and dynamic funding source
---
 layouts/funding_calls/list.html | 39 ++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/layouts/funding_calls/list.html b/layouts/funding_calls/list.html
index 3c7a16a..985719d 100644
--- a/layouts/funding_calls/list.html
+++ b/layouts/funding_calls/list.html
@@ -261,26 +261,29 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
       addOtherFundings
     );
 
-  });
-</script>
 
-<script>
-  document.getElementById('originUrl').value = location.href;
+    // Funding Source suggestion form relted function
+    // set origin url in the form
+    document.getElementById('originUrl').value = location.href;
+
+    // Validate the form by checking mandatory fields and recaptcha
+    var form = document.querySelector('.needs-validation');
+    form.addEventListener('submit', function (event) {
+      if (form.checkValidity() === false) {
+        event.preventDefault();
+        alert("Please fill out all required fields.");
+        event.stopPropagation();
+        form.classList.add('was-validated')
+      }
+      var recaptcha = $("#g-recaptcha-response").val();
+      if (recaptcha === "") {
+        event.preventDefault();
+        alert("Please tick 'I'm not a robot' above the 'Submit the form' button.");
+      }
+    });
+
+  }); // Document "DOMContentLoaded" trigger ends here
 
-  var form = document.querySelector('.needs-validation');
-  form.addEventListener('submit', function (event) {
-    if (form.checkValidity() === false) {
-      event.preventDefault();
-      alert("Please fill out all required fields.");
-      event.stopPropagation();
-      form.classList.add('was-validated')
-    }
-    var recaptcha = $("#g-recaptcha-response").val();
-    if (recaptcha === "") {
-      event.preventDefault();
-      alert("Please tick 'I'm not a robot' above the 'Submit the form' button.");
-    }
-  });
 </script>
 
 {{ end }}
\ No newline at end of file

From 7d89b111a341ca8efc347411d55719e1c1c5a293 Mon Sep 17 00:00:00 2001
From: Kazi Jahurul Islam <jahurul.sust@gmail.com>
Date: Mon, 17 Jul 2023 12:44:32 +0200
Subject: [PATCH 5/7] take the other funding source from data folder

chores:
- removed other funding source from blob server
- added other funding from data folder funding calls json
---
 layouts/funding_calls/list.html | 68 ++++++++++++++-------------------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/layouts/funding_calls/list.html b/layouts/funding_calls/list.html
index 985719d..2a915c1 100644
--- a/layouts/funding_calls/list.html
+++ b/layouts/funding_calls/list.html
@@ -77,22 +77,12 @@ <h4>Funding from SciLifeLab</h4>
   <!-- The fundings and calls content will be filled by JS function below -->
 </section>
 
-<section>
-  <h4>Other potential sources of funding</h4>
-  <div class="mt-3 mb-4">
-    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
-    <div class="row g-2 mt-3 mb-4" id="other-fundings-calls-section">
-      <!-- The other fundings and calls content will be filled by JS function below -->
-    </div>
-  </div>
-</section>
-
 <script>
 // Functions need to be run when the DOM is ready
 document.addEventListener("DOMContentLoaded", function (event) {
     
     // Takes a URL and calls the callback function pass the data fetched
-    function getDataFromUrl(url, load_callback, loadend_callback) {
+    function getDataFromUrl(url, load_callback) {
       var req = new XMLHttpRequest();
       req.overrideMimeType("application/json");
       req.open("GET", url, true);
@@ -100,10 +90,6 @@ <h4>Other potential sources of funding</h4>
       req.onload = function () {
         load_callback(JSON.parse(req.responseText).ddls);
       };
-      // The function call for adding filtering
-      req.onloadend = function () {
-        loadend_callback(JSON.parse(req.responseText).other_sources);
-      };
       req.send(null);
     };
 
@@ -222,9 +208,7 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
         blockHTML += `</div>`;
       } else {
         var blockHTML = `<div class="alert alert-secondary mt-4">
-                          We are currently unaware of any upcoming fundings or calls opportunities relevant for data-driven 
-                          life science. If you know of any relevant fundings or calls opportunities that should be shown 
-                          here, please suggest them to us using the "Tell us about an open funding source" button above.
+                            There are currently no open funding calls from SciLifeLab related to data-driven life science.
                         </div>`
       }
       
@@ -232,33 +216,11 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
       dynamicSection.innerHTML = blockHTML;
     };
 
-    // Code for other funding sources starts here
-    function addOtherFundings(dataOthers) {
-      
-      if(dataOthers.length !== 0) {
-        var blockHTML = '';
-        dataOthers.forEach((item, ind) => {
-          blockHTML += `
-          <div class="col-md-6 col-lg-4">
-            <div class="p-3 border rounded h-100">
-              <div class="row">
-                <div class="col-auto"><img src="${item.logo}" height="50" width="50"></div>
-                <div class="col ps-0"><h5><a target="_blank" href="${ item.url}">${item.funder}</a></h5></div>
-              </div>
-            </div>
-          </div>`;
-        });
-      }
-
-      var othersSection = document.getElementById('other-fundings-calls-section');
-      othersSection.innerHTML = blockHTML;
-    }
 
     // Call the function to fetch, parse and display jobs
     getDataFromUrl(
       decodeURIComponent("https://blobserver.dc.scilifelab.se/blob/data_platform_funding_calls.json"),
       addFundingsCalls,
-      addOtherFundings
     );
 
 
@@ -286,4 +248,30 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
 
 </script>
 
+
+
+<!-- Code for other funding sources starts here -->
+{{/* Get list of other funding sources */}}
+{{ $other_funding_sources := $.Site.Data.funding_calls.other_sources }}
+{{ if ge (len $other_funding_sources) 1 }}
+<section>
+  <h4>Other potential sources of funding</h4>
+  <div class="mt-3 mb-4">
+    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
+    <div class="row g-2 mt-3 mb-4">
+      {{ range $other_funding_sources }}
+      <div class="col-md-6 col-lg-4">
+        <div class="p-3 border rounded h-100">
+          <div class="row">
+            <div class="col-auto"><img src="{{ .logo }}" height="50" width="50"></div>
+            <div class="col ps-0"><h5><a target="_blank" href="{{ .url }}">{{ .funder }}</a></h5></div>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+
 {{ end }}
\ No newline at end of file

From 9e77a0be7fdfd0d44a8f6e203e083565a2a4ebfe Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Mon, 17 Jul 2023 13:02:31 +0200
Subject: [PATCH 6/7] Minor re-arrangement

---
 layouts/funding_calls/list.html | 55 ++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/layouts/funding_calls/list.html b/layouts/funding_calls/list.html
index 2a915c1..5bd5763 100644
--- a/layouts/funding_calls/list.html
+++ b/layouts/funding_calls/list.html
@@ -77,6 +77,31 @@ <h4>Funding from SciLifeLab</h4>
   <!-- The fundings and calls content will be filled by JS function below -->
 </section>
 
+<!-- Code for other funding sources starts here -->
+{{/* Get list of other funding sources */}}
+{{ $other_funding_sources := $.Site.Data.funding_calls.other_sources }}
+{{ if ge (len $other_funding_sources) 1 }}
+<section>
+  <h4>Other potential sources of funding</h4>
+  <div class="mt-3 mb-4">
+    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
+    <div class="row g-2 mt-3 mb-4">
+      {{ range $other_funding_sources }}
+      <div class="col-md-6 col-lg-4">
+        <div class="p-3 border rounded h-100">
+          <div class="row">
+            <div class="col-auto"><img src="{{ .logo }}" height="50" width="50"></div>
+            <div class="col ps-0"><h5><a target="_blank" href="{{ .url }}">{{ .funder }}</a></h5></div>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+<!-- Code for other funding sources ends here -->
+
 <script>
 // Functions need to be run when the DOM is ready
 document.addEventListener("DOMContentLoaded", function (event) {
@@ -88,7 +113,7 @@ <h4>Funding from SciLifeLab</h4>
       req.open("GET", url, true);
       // The function call for fetching data and display
       req.onload = function () {
-        load_callback(JSON.parse(req.responseText).ddls);
+        load_callback(JSON.parse(req.responseText).items);
       };
       req.send(null);
     };
@@ -220,7 +245,7 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
     // Call the function to fetch, parse and display jobs
     getDataFromUrl(
       decodeURIComponent("https://blobserver.dc.scilifelab.se/blob/data_platform_funding_calls.json"),
-      addFundingsCalls,
+      addFundingsCalls
     );
 
 
@@ -248,30 +273,4 @@ <h5 class="modal-title" id="descriptionModalLabel">${ item.title }</h5>
 
 </script>
 
-
-
-<!-- Code for other funding sources starts here -->
-{{/* Get list of other funding sources */}}
-{{ $other_funding_sources := $.Site.Data.funding_calls.other_sources }}
-{{ if ge (len $other_funding_sources) 1 }}
-<section>
-  <h4>Other potential sources of funding</h4>
-  <div class="mt-3 mb-4">
-    Below is a list of other sources of funding that may include calls relevant to data-driven life science.
-    <div class="row g-2 mt-3 mb-4">
-      {{ range $other_funding_sources }}
-      <div class="col-md-6 col-lg-4">
-        <div class="p-3 border rounded h-100">
-          <div class="row">
-            <div class="col-auto"><img src="{{ .logo }}" height="50" width="50"></div>
-            <div class="col ps-0"><h5><a target="_blank" href="{{ .url }}">{{ .funder }}</a></h5></div>
-          </div>
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
-</section>
 {{ end }}
-
-{{ end }}
\ No newline at end of file

From e20815948b745b3138142088264094cf72478c82 Mon Sep 17 00:00:00 2001
From: Kazi Jahurul Islam <jahurul.sust@gmail.com>
Date: Tue, 18 Jul 2023 11:45:35 +0200
Subject: [PATCH 7/7] added status link to check service status

Chores:
- Jira issue: FREYA-280
- added service status link in description
- added service status icon with link in each service card
---
 content/services/_index.md |  2 +-
 data/services.json         | 24 ++++++++++++++++--------
 layouts/services/list.html |  1 +
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/content/services/_index.md b/content/services/_index.md
index fbb761d..0628669 100644
--- a/content/services/_index.md
+++ b/content/services/_index.md
@@ -16,7 +16,7 @@ menu:
 
 The SciLifeLab Data Platform includes a technical environment for hosting tools and databases that can be deployed or accessed via the web. The hosting resources are [managed by the SciLifeLab Data Centre](/about/). Individual researchers, research groups, and research organisations are enouraged to [learn more and apply for hosting](./hosting/).
 
-Below, you will find information about [resources related to hosting](#for-researchers) and [for data-producing facilities](#for-facilities) that are either hosted or linked via the SciLifeLab Data Platform.
+Below, you will find information about [resources related to hosting](#for-researchers) and [for data-producing facilities](#for-facilities) that are either hosted or linked via the SciLifeLab Data Platform. Status and uptime of the services maintained by Scilifelab Data Centre can be found [here](https://status.dc.scilifelab.se/).
 
 <ul>
   <li><a href="#for-researchers">Services for researchers <i class="bi bi-arrow-down-square-fill"></i></a></li>
diff --git a/data/services.json b/data/services.json
index d879672..bad55f2 100644
--- a/data/services.json
+++ b/data/services.json
@@ -68,7 +68,8 @@
     "maintained_by": "SciLifeLab Data Centre",
     "maintained_by_url": "https://scilifelab.se/data",
     "support_email": "datacentre@scilifelab.se",
-    "support_github": "https://github.com/ScilifelabDataCentre/covid-portal/tree/develop"
+    "support_github": "https://github.com/ScilifelabDataCentre/covid-portal/tree/develop",
+    "support_status": "https://status.dc.scilifelab.se/793602036"
   },
   {
     "target": [
@@ -95,7 +96,8 @@
     "maintained_by": "NBIS, SciLifeLab Data Centre",
     "support_email": "data-management@scilifelab.se",
     "support_website": "https://data-guidelines.scilifelab.se/contact/",
-    "support_github": "https://github.com/ScilifelabDataCentre/RDM-guidelines"
+    "support_github": "https://github.com/ScilifelabDataCentre/RDM-guidelines",
+    "support_status": "https://status.dc.scilifelab.se/793602117"
   },
   {
     "target": [
@@ -203,7 +205,8 @@
     "url": "https://delivery.scilifelab.se/",
     "maintained_by": "SciLifeLab Data Centre",
     "maintained_by_url": "https://scilifelab.se/data",
-    "support_email": "datacentre@scilifelab.se"
+    "support_email": "datacentre@scilifelab.se",
+    "support_status": "https://status.dc.scilifelab.se/793448467"
   },
   {
     "target": [
@@ -224,7 +227,8 @@
     "url": "https://orderportal.scilifelab.se/",
     "maintained_by": "SciLifeLab Data Centre",
     "maintained_by_url": "https://scilifelab.se/data",
-    "support_email": "datacentre@scilifelab.se"
+    "support_email": "datacentre@scilifelab.se",
+    "support_status": "https://status.dc.scilifelab.se/793602084"
   },
   {
     "target": [
@@ -245,7 +249,8 @@
     "url": "https://anubis.scilifelab.se/",
     "maintained_by": "SciLifeLab Data Centre",
     "maintained_by_url": "https://scilifelab.se/data",
-    "support_email": "datacentre@scilifelab.se"
+    "support_email": "datacentre@scilifelab.se",
+    "support_status": "https://status.dc.scilifelab.se/793602009"
   },
   {
     "target": [
@@ -303,7 +308,8 @@
     "maintained_by": "TissUUmaps",
     "maintained_by_url": "https://tissuumaps.github.io/about_us/",
     "support_email": "biif@scilifelab.se",
-    "support_github": "https://github.com/TissUUmaps/TissUUmaps"
+    "support_github": "https://github.com/TissUUmaps/TissUUmaps",
+    "support_status": "https://status.dc.scilifelab.se/793601986"
   },
   {
     "target": [
@@ -336,7 +342,8 @@
     "thumbnail": "/img/service_thumbnails/aida.jpg",
     "maintained_by": "AIDA Data Hub",
     "maintained_by_url": "https://datahub.aida.scilifelab.se/about/",
-    "support_email": "aida-data-director@medtech4health.se"
+    "support_email": "aida-data-director@medtech4health.se",
+    "support_status": "https://status.dc.scilifelab.se/793602004"
   },
   {
     "target": [
@@ -388,7 +395,8 @@
     "thumbnail": "/img/service_thumbnails/dsw.jpg",
     "url": "https://dsw.scilifelab.se/",
     "maintained_by": "NBIS, SciLifeLab Data Centre",
-    "support_email": "datacentre@scilifelab.se"
+    "support_email": "datacentre@scilifelab.se",
+    "support_status": "https://status.dc.scilifelab.se/793602047"
   },
   {
     "target": [
diff --git a/layouts/services/list.html b/layouts/services/list.html
index f789b46..919ca26 100644
--- a/layouts/services/list.html
+++ b/layouts/services/list.html
@@ -71,6 +71,7 @@ <h5><a href="{{ .url }}" target="_self">{{ .name }}</a></h5>
         {{ with .support_email }}<a href="mailto:{{ . }}"><i class="bi bi-envelope-fill"></i></a> {{ end }}
         {{ with .support_website }}<a href="{{ . }}"><i class="bi bi-globe"></i></a> {{ end }}
         {{ with .support_github }}<a href="{{ . }}"><i class="bi bi-github"></i></a> {{ end }}
+        {{ with .support_status }}<a href="{{ . }}"><i class="bi bi-hdd-rack"></i></a> {{ end }}
       </div>
       {{ end }}
     </div>