add content for certified technology provider

src/config/_default/config.yml

@@ -81,6 +81,8 @@ params:
             URL: /services/data-sharing
           - text: Data Visualization
             URL: /services/data-visualization
+          - text: Certification
+            URL: /services/certification
       - title: Quickstart
         title_URL: /quickstart
         rows:
@@ -151,6 +153,11 @@ menu:
       URL: /services/data-visualization
       weight: 3
 
+    - parent: services
+      name: Certification
+      URL: /services/certification
+      weight: 4
+
     # --- Datasets ---
     - identifier: datasets
       URL: /datasets
@@ -179,7 +186,7 @@ menu:
     - identifier: community
       URL: /community
       name: Community
-      weight: 6
+      weight: 7
 
     - parent: community
       name: Data Providers
@@ -191,20 +198,26 @@ menu:
       URL: /community/#sm-tag-data-consumers
       weight: 2
 
+# [CTP] - uncomment below
+    # - parent: community
+    #   name: Certified Technology Provider
+    #   URL: /community/#sm-tag-certified-technology-provider
+    #   weight: 3
+
     - parent: community
-      name: Partneships
+      name: Partnerships
       URL: /community/#sm-tag-partnerships
-      weight: 3
+      weight: 4
 
     - parent: community
       name: Contributor of the Year
       URL: /community/contributor-of-the-year
-      weight: 4
+      weight: 5
 
     - parent: community
       name: Get Involved
       URL: /community/get-involved
-      weight: 5
+      weight: 6
 
     # --- Events ---
     - identifier: events

src/content/services/certification/_index.md

@@ -0,0 +1,24 @@
+---
+type: services/single
+position: "Services"
+aliases: /certification
+title: "Open Data Hub API Certified Technology Provider"
+
+rows:
+  - title: "<u>How to be certified?</u>"
+    description: >
+      1. Send a request to us to be certified. Do include the following details:
+          
+          a. Endpoint URL and technical description of your output API.
+          
+          b. Contact point for community updates, like the Data Consumer Contract.
+      
+      2. The Open Data Hub team develops a Data Collector.
+      
+      3. The Open Data Hub team verifies the compatibility and that the data gets collected in out Testing Environment.
+      
+      4. The Open Data Hub team sends a certificate of compatibility and adds your organization to the Certified Technology Provider register on OpenDataHub.com.
+    partial: text-contact.html
+    contact_email: "[email protected]"
+
+---

src/data/community.yml

@@ -5,7 +5,7 @@
 ########################### Data provider #########################
 providers:
   title: Data Providers
-  subtitle: These Companies and Organisations are official Data Providers for the Open Data Hub and share data with others, to enable the implementation of innovative digital solutions.
+  subtitle: These Companies and Organizations are official Data Providers for the Open Data Hub and share data with others, to enable the implementation of innovative digital solutions.
   items:
     - name: Autostrada del Brennero SpA
       img: "https://third-party.opendatahub.com/opendatahub-website/img/community/a22.png"
@@ -288,6 +288,15 @@ consumers:
       img: "https://third-party.opendatahub.com/opendatahub-website/img/community/whispers.png"
       link: https://www.whispers.at/
 
+########################### Certified Technology Providers #########################
+certified:
+  title: Certified Technology Providers
+  subtitle: These Companies and Organizations are Certified Technology Providers for the Open Data Hub API and share data with others, to enable the implementation of innovative digital solutions.
+  items:
+    - name: (Example) NOI S.p.A.
+      img: "https://third-party.opendatahub.com/opendatahub-website/img/community/NOI_1_BK_Com.png"
+      link: https://noi.bz.it
+
 ########################### Partnerships and Alliances #########################
 partnerships:
   title: Partnerships and Alliances

src/data/home.yml

@@ -25,6 +25,12 @@ community:
   title: "Join the **community**"
   btn_link: "/community"
   btn_label: "Join now"
+
+certified:
+  title: "Open Data Hub API Certified Technology Provider"
+  btn_link: "/services/certification"
+  btn_label: "Get Certified Now"
+
   # logos:
 
   #   - img: "https://third-party.opendatahub.com/opendatahub-website/img/community/alperia.png"

src/themes/odh-fbe/layouts/community/list.html

@@ -22,6 +22,18 @@
 	{{ partial "logos.html" site.Data.community.consumers }}
 	</section>
 
+<!-- CERTIFIED TECHNOLOGY PROVIDER -->
+<!-- [CTP] - uncomment below -->
+	<!-- <a id="sm-tag-certified-technology-provider"></a>
+	<section class="pb-4">
+		{{ partial "title-section.html" site.Data.community.certified }}
+	{{ partial "logos.html" site.Data.community.certified }}
+	</section> -->
+
+
+<!-- [CTP] - after uncommenting above, add "bg-darker" into class below -->
+<!-- <section class="bg-darker pb-4"> -->
+
 	<a id="sm-tag-partnerships"></a>
 <!-- Partnerships and Alliances -->
 	<section class="pb-4">

src/themes/odh-fbe/layouts/index.html

@@ -30,4 +30,8 @@
 <a id="sm-tag-community"></a>
 {{ partial "slideshow.html" ( dict "dataCommunity" site.Data.community "dataHome" site.Data.home ) }}
 
+<!-- [CTP] - uncomment below -->
+<!-- <a id="sm-tag-certified"></a>
+{{ partial "slideshow-generic.html" ( dict "siteCommunity" site.Data.community.certified "siteHome" site.Data.home.certified ) }} -->
+
 {{ end }}

src/themes/odh-fbe/layouts/partials/slideshow-generic.html

@@ -0,0 +1,31 @@
+{{/*
+	SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+	SPDX-License-Identifier: AGPL-3.0-or-later
+*/}}
+
+<section class="logo-slideshow">
+  <div class="container">
+    <script defer src="/js/slideshow-generic.js"></script>
+
+    <div class="d-none" id="slideshow-item">
+      {{ range .siteCommunity.items }}
+        <div class="single-provider">
+          <div class="name">{{ .name }}</div>
+          <div class="img">{{ .img }}</div>
+          <div class="link">{{ .link }}</div>
+        </div>
+      {{ end }}
+    </div>
+
+    <div class="col-12 text-center">
+      <h3>{{ .siteHome.title | markdownify }}</h3>
+    </div>
+
+    <div id="slideshow-container" class="my-3"></div>
+
+    <div class="col-12 text-center">
+      <a href="{{ .siteHome.btn_link }}" class="btn btn-primary">{{ .siteHome.btn_label | markdownify }}</a>
+    </div>
+  </div>
+</section>

src/themes/odh-fbe/layouts/partials/text-contact.html

@@ -0,0 +1,25 @@
+{{/*
+	SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+	SPDX-License-Identifier: AGPL-3.0-or-later
+*/}}
+
+{{"<!-- Double Column Text - Imgs -->" | safeHTML }}
+<section>
+	<div class="container">
+		<div class="col-12">
+			<h2>{{ .title | markdownify }}</h2>
+			<p>{{ .description | markdownify }}</p>
+		</div>
+	</div>
+</section>
+<section>
+	<div class="container">
+		<div class="row">
+            {{ partial "contact-mailto.html" . }}
+		</div>
+	</div>
+</section>
+{{"<!-- /Double Column Text - Icon -->" | safeHTML }}
+
+

src/themes/odh-fbe/static/css/custom.css

@@ -271,6 +271,17 @@ footer .w-fit {
   min-width: 100%;
 }
 
+#slideshow-container {
+  max-width: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  display: flex;
+}
+
+#slideshow-container .slide {
+  min-width: 100%;
+}
+
 .shift-left-once {
   transition: all 1.5s cubic-bezier(.53, 0, .41, 1);
   transform: translateX(-100%);

src/themes/odh-fbe/static/js/slideshow-generic.js

@@ -0,0 +1,146 @@
+// SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+function genericSlideshow() {
+
+    function dqs(query) {
+        return document.querySelector(query);
+    }
+
+    function eqs(element, query) {
+        return element.querySelector(query);
+    }
+
+    function dce(tagName) {
+        return document.createElement(tagName)
+    }
+
+    function shuffleArr(arr) {
+        for (let i = arr.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            const temp = arr[i];
+            arr[i] = arr[j];
+            arr[j] = temp;
+        }
+    }
+
+    function removeDuplicates(arr) {
+        let names = [];
+        arr = arr.filter((e) => {
+            const isDuplicate = names.includes(e.name);
+            if (!isDuplicate) {
+                names.push(e.name);
+                return true;
+            }
+            return false;
+        })
+        return arr;
+    }
+
+    function getLogos(data) {
+        let logos = [];
+
+        for (let i = 0; i < data.children.length; i++) {
+            const e = data.children[i];
+            const singleProvider = {};
+            singleProvider.name = eqs(e, ".name").innerHTML;
+            singleProvider.img = eqs(e, ".img").innerHTML;
+            singleProvider.link = eqs(e, ".link").innerHTML;
+            logos.push(singleProvider);
+        }
+
+        logos = removeDuplicates(logos);
+        return logos
+    }
+
+    function populateContainer(container, logos, logosNum, minLogosNum) {
+
+        shuffleArr(logos);
+        const slidesNum = logos.length / logosNum;
+
+        for (let i = 0; i < slidesNum; i++) {
+
+            const slide = dce("div");
+            slide.classList.add("slide", "px-2");
+
+            const row = dce("div");
+            row.classList.add("row");
+
+            slide.appendChild(row);
+
+            for (let j = 0; j < logosNum; j++) {
+
+                if (logos.length === 0) break
+
+                const {name, img, link} = logos.pop();
+
+                const div = dce("div");
+                div.classList.add("col-4", "col-lg-3");
+
+                const anchor = dce("a");
+                anchor.href = link;
+                anchor.target = "_blank"
+
+                const image = dce("img");
+                image.classList.add("img-responsive")
+                image.src = img;
+                image.alt = name;
+
+                anchor.appendChild(image);
+                div.appendChild(anchor);
+                row.appendChild(div);
+            }
+
+            container.appendChild(slide);
+            if (logos.length < minLogosNum) break
+
+        }
+
+        return container;
+    }
+
+    const data = dqs("#slideshow-item");
+    const arr = getLogos(data);
+    const logLen = arr.length;
+    const slidesContainer = dqs("#slideshow-container");
+
+    const logosNum = 12;
+    const minLogosNum = 1;
+    populateContainer(slidesContainer, arr, logosNum, minLogosNum);
+
+    const intervalSpeed = 7000;
+    const transformSpeed = 1500;
+
+    let firstChild;
+    let secondChild;
+    let intervalID;
+
+    function shiftRight() {
+        firstChild = dqs("#slideshow-container>:nth-child(1)")
+        secondChild = dqs("#slideshow-container>:nth-child(2)")
+
+        firstChild.classList.add("shift-left-once")
+        secondChild.classList.add("shift-left-once")
+
+        setTimeout(() => {
+            slidesContainer.removeChild(firstChild)
+            firstChild.classList.remove("shift-left-once")
+            secondChild.classList.remove("shift-left-once")
+            slidesContainer.appendChild(firstChild)
+        }, transformSpeed);
+    }
+
+    function automaticShift() {
+        setTimeout(() => {
+            shiftRight();
+            intervalID = setInterval(shiftRight, intervalSpeed); 
+        }, intervalSpeed);
+    }
+
+    if (logLen > 12) {
+        automaticShift();
+    }
+}
+
+genericSlideshow();