easier translations of homepage

gbif · Nov 8, 2023 · 38d0dd2 · 38d0dd2
1 parent dccbe9f
commit 38d0dd2
Show file tree

Hide file tree

Showing 11 changed files with 305 additions and 76 deletions.
diff --git a/_config.yml b/_config.yml
@@ -27,6 +27,7 @@ baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://scientific-collections.gbif.org" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: gbif # if you have an account you want to link to. Else comment this line out
 github_username:  gbif # if you have an account you want to link to. Else comment this line out
+webApi: "https://graphql.gbif.org"
 
 # Build settings
 theme: minima

diff --git a/_config_dev.yml b/_config_dev.yml
@@ -1,2 +1,3 @@
 url: "https://grscicoll.hp.gbif-dev.org" # the base hostname & protocol for your staging site, e.g. https://hp-example.gbif-uat.org
-testSite: true #style the site to show that it is a test site
+testSite: true #style the site to show that it is a test site
+webApi: "https://graphql.gbif-dev.org"
diff --git a/_config_staging.yml b/_config_staging.yml
@@ -1,2 +1,3 @@
 url: "https://grscicoll.hp.gbif-staging.org" # the base hostname & protocol for your staging site, e.g. https://hp-example.gbif-staging.org
-testSite: true #style the site to show that it is a test site
+testSite: true #style the site to show that it is a test site
+webApi: "https://graphql.gbif-staging.org"
diff --git a/_config_uat.yml b/_config_uat.yml
@@ -1,6 +1,8 @@
 url: "https://grscicoll.hp.gbif-uat.org" # the base hostname & protocol for your staging site, e.g. https://hp-example.gbif-uat.org
 testSite: true #style the site to show that it is a test site
 
+webApi: "https://graphql.gbif-uat.org"
+
 include: # this include is only to NOT exclude translations, so that they are visible in UAT
   - es/
   - fr/

diff --git a/_includes/blocks/grscicollHeader.html b/_includes/blocks/grscicollHeader.html
@@ -0,0 +1,45 @@
+{% assign parallax = include.parallax | default: include.content.parallax | default: false %}
+{% assign fullHeight = include.fullHeight | default: include.content.fullHeight | default: false %}
+{% assign background = include.background | default: include.content.background %}
+{% assign preTitle = include.preTitle | default: include.content.preTitle %}
+{% assign title = include.title | default: include.content.title | default: "TITLE IS REQUIRED" %}
+{% assign description = include.description | default: include.content.description %}
+{% assign cta = include.cta | default: include.content.cta %}
+{% assign imageLicense = include.imageLicense | default: include.content.imageLicense %}
+{% assign hasBlackText = include.hasBlackText | default: include.content.hasBlackText | default: false %}
+{% assign overlayColor = include.overlayColor | default: include.content.overlayColor | default: "#00000055" %}
+{% assign hasTextShadow = include.hasTextShadow | default: include.content.hasTextShadow | default: false %}
+{% assign height = include.height | default: include.content.height | default: "100vh" %}
+{% assign floatingNavbar = page.navbar.floating | default: site.algae.navbar.floating | default: false %}
+
+{% assign useBackgroundImage = parallax %}
+
+
+{%- capture calcHeight -%}
+  {% if floatingNavbar %}
+    calc({{ height }})
+  {% else %}
+    calc({{ height }} - var(--navbar-height))
+  {% endif %}
+{%- endcapture -%}
+
+
+{% unless background or jekyll.environment == "production" %}
+<script>
+themeFeedback.push({title: "Missing background", description: "You haven't configured a background. To do so add <code>background: /some-image-name.jpg</code> in the frontmatter of this page."})
+</script>
+{% endunless %}
+{% assign background = background | default: "https://via.placeholder.com/500x300?text=Img%20required" %}
+
+
+<section {% if include.content.id %} id="{{ include.content.id }}" {% endif %} class="floatingHero
+  {% if include.content.klass %} {{ include.content.klass }} {% endif %}
+  {% if parallax %} parallax {% endif %} 
+  {% if hasBlackText %}{% else %} hasWhiteText {% endif %} 
+  {% if hasTextShadow %} hasTextShadow {% endif %} 
+  {% if fullHeight %} full-height {% else %} not-full-height {% endif %} 
+  overlay" 
+    style="{% if overlayColor %} color: {{ overlayColor }}; {% endif %} 
+    {% if height %} height: auto; min-height: {{ calcHeight }}; {% endif %} ">
+  {% include blocks/parts/grscicollFeature.html content=include.content useBackgroundImage=useBackgroundImage %}
+</section>
diff --git a/_includes/blocks/parts/grscicollFeature.html b/_includes/blocks/parts/grscicollFeature.html
@@ -0,0 +1,29 @@
+{% assign preTitle = include.preTitle | default: include.content.preTitle %}
+{% assign title = include.title | default: include.content.title %}
+{% assign description = include.description | default: include.content.description %}
+{% assign background = include.background | default: include.content.background %}
+{% assign cta = include.cta | default: include.content.cta %}
+{% assign center = include.center | default: include.content.center %}
+{% assign categories = include.categories | default: include.content.categories %}
+{% assign href = include.href | default: include.content.href %}
+{% assign blankTarget = include.blankTarget | default: include.content.blankTarget | default: false %}
+{% assign ratio = include.ratio %}
+{% assign useBackgroundImage = include.useBackgroundImage | default: false %}
+{% assign ignoreThumbor = include.ignoreThumbor | | default: include.content.ignoreThumbor | default: false %}
+
+{% assign imageLicense = include.imageLicense | default: include.content.imageLicense %}
+{% if include.imageLicense == false %}
+  {% assign imageLicense = include.imageLicense %}
+{% endif %}
+
+{% include blocks/parts/featureImage.html background=background href=href blankTarget=blankTarget imageLicense=imageLicense ratio=ratio useBackgroundImage=useBackgroundImage sizes=include.sizes ignoreThumbor=ignoreThumbor %}
+{% include blocks/parts/grscicollFeatureContent.html 
+  preTitle=preTitle 
+  href=href 
+  blankTarget=blankTarget 
+  title=title
+  description=description 
+  cta=cta
+  center=center
+  categories=categories
+  %}
diff --git a/_includes/blocks/parts/grscicollFeatureContent.html b/_includes/blocks/parts/grscicollFeatureContent.html
@@ -0,0 +1,173 @@
+{% assign preTitle = include.preTitle | default: include.content.preTitle %} {%
+assign title = include.title | default: include.content.title | default:"" |
+append: "" %} {% assign description = include.description | default:
+include.content.description %} {% assign imageLicense = include.imageLicense |
+default: include.content.imageLicense %} {% assign cta = include.cta | default:
+include.content.cta %} {% assign center = include.center | default:
+include.content.center %} {% assign categories = include.categories | default:
+include.content.categories %} {% assign href = include.href | default:
+include.content.href | default: false %} {% assign blankTarget =
+include.blankTarget | default: include.content.blankTarget | default: false %}
+
+<div
+  class="feature-content {% if center %} feature-content--centered {% endif %}"
+>
+  <div class="feature-text">
+    <h3 class="feature-title">
+      <div>
+        <div><span>G</span>lobal</div>
+        <div><span>R</span>egistry</div>
+        <div id="headline-offset-wrapper">
+          <span id="headline-offset">of </span><span>Sci</span>entific
+        </div>
+        <div><span>Coll</span>ections</div>
+      </div>
+    </h3>
+  </div>
+
+  <div class="feature-description">
+    <p class="tagLine">
+      {{ page.tagline | default: "A worldwide catalogue of scientific collections" | strip_html }}
+    </p>
+
+    <div class="searchWrapper">
+      <!-- Tab links -->
+      <div class="tab">
+        <button
+          class="tablinks active"
+          onclick="openTab(event, 'searchTab_name')"
+        >
+        {{ page.tabInstitutions | default: "Institution name" | strip_html }}
+        </button>
+        <a href="./specimen/search"
+          ><button
+            class="tablinks"
+            onclick="openTab(event, 'searchTab_catalogNumber')"
+          >
+          {{ page.tabSpecimens | default: "Institution name" | strip_html }}
+            <svg
+              style="position: relative; top: 2px"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path fill="none" d="M0 0h24v24H0z"></path>
+              <path
+                d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
+              ></path>
+            </svg></button
+        ></a>
+      </div>
+
+      <!-- Tab content -->
+      <div id="searchTab_name" class="tabcontent" style="display: block">
+        <form action="./institution/search" method="GET">
+          <input
+            name="q"
+            class="input"
+            type="text"
+            placeholder="{{ page.placeholderInstitutions | default: "Search institutions" | strip_html }}"
+            style="width: 100%"
+          />
+          <button type="submit" class="button is-ghost">
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path fill="none" d="M0 0h24v24H0z"></path>
+              <path
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              ></path>
+            </svg>
+          </button>
+        </form>
+      </div>
+
+      <div id="searchTab_catalogNumber" class="tabcontent">
+        <form action="/specimen/search" method="GET">
+          <input
+            id="home_specimen_input"
+            name="q"
+            class="input"
+            type="text"
+            placeholder="{{ page.placeholderSpecimens | default: "Search for digitized specimens" | strip_html }}"
+            style="width: 100%"
+          />
+          <button type="submit" class="button is-ghost">
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path fill="none" d="M0 0h24v24H0z"></path>
+              <path
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              ></path>
+            </svg>
+          </button>
+        </form>
+      </div>
+    </div>
+    <script>
+      window.setTimeout(function () {
+        let a = document.getElementById("headline-offset");
+        a.parentElement.style.marginLeft = "-" + a.offsetWidth + "px";
+        // a.parentElement.parentElement.style.paddingLeft = a.offsetWidth + 'px';
+      }, 300);
+
+      function openTab(evt, tabName) {
+        // Declare all variables
+        var i, tabcontent, tablinks;
+
+        // Get all elements with class="tabcontent" and hide them
+        tabcontent = document.getElementsByClassName("tabcontent");
+        for (i = 0; i < tabcontent.length; i++) {
+          tabcontent[i].style.display = "none";
+        }
+
+        // Get all elements with class="tablinks" and remove the class "active"
+        tablinks = document.getElementsByClassName("tablinks");
+        for (i = 0; i < tablinks.length; i++) {
+          tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        // Show the current tab, and add an "active" class to the button that opened the tab
+        document.getElementById(tabName).style.display = "block";
+        evt.currentTarget.className += " active";
+      }
+    </script>
+
+    <div class="gettingStarted">
+      <a href="/#video-intro" class="gettingStarted-video">
+        <span class="icon">
+          <i class="fa fa-play"></i>
+        </span>
+        {{ page.gettingStartedVideoTitle | default: "Getting started" | strip_html }}
+      </a>
+
+      <a
+        href="./institution/search?country={USER_COUNTRY}"
+        id="users-country-conditional"
+        class="hidden"
+      >
+        <span class="icon">
+          <i class="fa fa-crosshairs"></i>
+        </span>
+        {{ page.institutionsInCountryTemplate | markdownify }}
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/_includes/js/script.js b/_includes/js/script.js
@@ -0,0 +1,23 @@
+function updateUserCountry() {
+  // Make an HTTP GET request to the API endpoint
+  fetch('{{ site.webApi }}/unstable-api/user-info?lang=' + pageLang)
+    .then(response => response.json())
+    .then(data => {
+      if (data.country && data.countryName) {
+        // Update the country name
+        document.getElementById('users-country-name').textContent = data.countryName;
+
+        // Replace the link with the country code
+        const countryLink = document.getElementById('users-country-conditional');
+        countryLink.href = countryLink.href.replace('{USER_COUNTRY}', data.country);
+
+        // Remove the 'hidden' class
+        countryLink.classList.remove('hidden');
+      }
+    })
+    .catch(error => {
+      console.error('Error fetching user country: ', error);
+    });
+}
+const countryLink = document.getElementById('users-country-conditional');
+if (countryLink) updateUserCountry();
diff --git a/_sass/_home.scss b/_sass/_home.scss
@@ -1,3 +1,13 @@
+/* Basic utility class */
+.hidden {
+  display: none;
+}
+.gettingStarted {
+  p {
+    display: inline;
+  }
+}
+
 /* Style the tab */
 .tab {
   display: flex;

diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -7,7 +7,6 @@ $homepageActiveTabColor: $blue;
 @import "_home";
 @import "_stats";
 
-
 // BoxHero layout overwrites
 .boxHero {
   .feature-img-license {
@@ -104,6 +103,12 @@ html {
   .gettingStarted {
     margin-top: 1em;
     font-size: 14px; 
+    a {
+      text-decoration: none;
+    }
+  }
+  .gettingStarted-video {
+    margin-right: 24px;
   }
 }