Merge pull request #321 from ScilifelabDataCentre/adaptive_banner

Add dynamic banners

layouts/index.html

@@ -197,6 +197,39 @@ <h3>Apps recently deployed on SciLifeLab Serve</h3>
       };
       req.send(null);
     }
+
+    // Update banner title for homepage from the blobserver
+    function updateBanner(data) {
+      try {
+        // Get the current language
+        const lang = document.documentElement.lang;
+
+        // Find the active title for the 'portal' target
+        const title = data.banner_titles.find(title => title.target === 'data-platform' && title.active);
+        if (title && title[lang]) {
+            const titleElement = document.querySelector('h2#home-banner');
+            titleElement.textContent = title[lang];
+        } else {
+            console.warn('No title found for the language.');
+        }
+      } catch (error) {
+        console.error('An error occurred while updating banner titles:', error);
+      } finally {
+        // Show the hidden banner regardless of whether titles were fetched successfully
+        const banner1 = document.getElementById("home-banner");
+        if (banner1) {
+          banner1.classList.remove("d-none");
+        } else {
+          console.warn('Banner element with ID "home-banner" not found.');
+        }
+      }
+    }; // function updateBanner ends here
+
+    // Call the function to update banner, if any mentioned in blob server
+    getDataFromUrl(
+      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Ffreya-banner.json"),
+      updateBanner
+    )
 
     // Creates html entry for latest events
     function addEvents(data){

layouts/partials/header.html

@@ -3,7 +3,9 @@
   <header class="header" style="background-image: url('/img/illustrations/circle_zoomed.png'); color: white; ">
     <div class="container">
       <div class="py-2 my-1">
-        <h2><a class="banner-title-link" href="/news/#20240418">Welcome to the SciLifeLab Data Platform</a></h2>
+        <h2 {{ if .IsHome }}class="d-none" id="home-banner"{{ end }}>
+          <a class="banner-title-link" href="/news/#20240418">Welcome to the SciLifeLab Data Platform</a>
+        </h2>
       </div>
     </div>
   </header>