Merge branch 'main' into TeSS

.github/workflows/jekyll.yml

@@ -1,10 +1,10 @@
-
 name: Jekyll site CI
 
 on:
+  push:
   pull_request:
-    branches: [ master, main ]
-
+    branches: [ main, master ]
+  workflow_dispatch:
 
 permissions:
   contents: read
@@ -14,7 +14,6 @@ permissions:
 jobs:
   build:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -44,6 +43,28 @@ jobs:
           PAGES_REPO_NWO: ${{ github.repository }}
           JEKYLL_ENV: ${{ steps.name.outputs.jekyll_env }}
           JEKYLL_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          JEKYLL_BUILD_BRANCH: ${{ github.ref_name }}
+          JEKYLL_BASE_PATH: ${{ steps.pages.outputs.base_path }}
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v1
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+
+    if: |
+      github.event_name == 'workflow_dispatch' ||
+      (github.event_name == 'push' && github.event.repository.default_branch == github.ref_name)
+    concurrency:
+      group: "pages"
+      cancel-in-progress: true
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitpod.yml

@@ -0,0 +1,12 @@
+mainConfiguration: https://github.com/elixir-europe-training/ELIXIR-Training-SPLASH 
+
+tasks:
+  - name: Setup and splash
+    command: docker compose up -d
+
+ports:
+  - name: Jekyll
+    description: SPLASH website
+    port: 4000
+    onOpen: open-preview
+    visibility: public

README.md

@@ -1,7 +1,3 @@
-[![theme badge](https://img.shields.io/badge/ELIXIR%20toolkit%20theme-jekyll-blue?color=0d6efd)](https://github.com/ELIXIR-Belgium/elixir-toolkit-theme)
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/elixir-europe-training/)
 
-# ELIXIR Toolkit Theme example
-
-Example of ELIXIR toolkit theme as a remote jekyll theme
-=======
-# ELIXIR-TrP-Training-SPLASH
+Built with the [ELIXIR Toolkit Theme](https://github.com/ELIXIR-Belgium/elixir-toolkit-theme).

_config.yml

@@ -44,6 +44,13 @@ defaults:
     values:
       type: "pages"
       sidebar: lifecycle
+  -
+    scope:
+      path: "pages/resources/resources.md"
+    values:
+      type: "resource_page"
+      layout: "page"
+      sidebar: resources
   -
     scope:
       path: "pages/resources"

_data/sidebars/resources.yml

@@ -15,3 +15,5 @@ subitems:
     url: /elixir-lesson-template
   - title: E-learning
     url: /elearning
+  - title: FAIR Training Focus Group
+    url: /fair-training-focus-group

_includes/index/roles-and-resources.html

@@ -1,17 +1,35 @@
-<div class="row text-white mt-5">
-    <a class="col mx-1 py-3 mb-5 rounded text-center btn btn-primary" href="tess">
-        <div>TeSS</div>
-    </a> 
-    <a class="col mx-1 py-3 mb-5 rounded text-center btn btn-primary" href="train-the-trainer" style="color: white;">
-        <div>Train-the-Trainer</div>
-    </a>
-    <a class="col mx-1 py-3 mb-5 rounded text-center btn btn-primary" href="tango" style="color: white;">
-        <div>Tango</div>
-    </a>
-    <a class="col mx-1 py-3 mb-5 rounded text-center btn btn-primary" href="fair-training-handbook" style="color: white;">
-        <div>FAIR Training Handbook</div>
-    </a>
-    <a class="col mx-1 py-3 mb-5 rounded text-center btn btn-primary" href="learning-paths" style="color: white;">
-        <div>Learning Paths</div>
-    </a>
+<div class="row mb-5 py-5">
+    <div class="col-12">
+        <div class="text-center display-6 mb-5">Explore our Resources</div>
+    </div>
+    <div class="col text-center">
+        <img src="assets/img/icons/resource_icon.svg" class="resource-icon mb-3">
+        <a class="btn btn-resource d-block py-3 rounded-pill" href="tess">
+            TeSS
+        </a> 
+    </div>
+    <div class="col text-center">
+        <img src="assets/img/icons/resource_icon.svg" class="resource-icon mb-3">
+        <a class="btn btn-resource d-block py-3 rounded-pill" href="train-the-trainer">
+            Train-the-Trainer
+        </a> 
+    </div>
+    <div class="col text-center">
+        <img src="assets/img/icons/resource_icon.svg" class="resource-icon mb-3">
+        <a class="btn btn-resource d-block py-3 rounded-pill" href="tango">
+            Tango
+        </a> 
+    </div>
+    <div class="col text-center">
+        <img src="assets/img/icons/resource_icon.svg" class="resource-icon mb-3">
+        <a class="btn btn-resource d-block py-3 rounded-pill" href="fair-training-handbook">
+            FAIR Training Handbook
+        </a> 
+    </div>
+    <div class="col text-center">
+        <img src="assets/img/icons/resource_icon.svg" class="resource-icon mb-3">
+        <a class="btn btn-resource d-block py-3 rounded-pill" href="learning-paths">
+            Learning Paths
+        </a> 
+    </div>
 </div>

_includes/index/splash-in-numbers.html

@@ -1,8 +1,5 @@
 
-<div class="row mb-5">
-    <div class="col-12">
-        <h2>SPLASH in Numbers</h2>
-    </div>
+<div class="row mb-5 py-5">
     {% assign numbers = site.data.index.numbers %}
     {% for number in numbers %}
     <div class="col-12 col-md-6 col-xl-3 mb-4">
@@ -22,25 +19,8 @@ <h2>SPLASH in Numbers</h2>
     /** 
      * Animate numbers when in viewport
      */
-
-    // inViewport jQuery plugin
-    // https://stackoverflow.com/a/26831113/383904
-    $(function ($, win) {
-        $.fn.inViewport = function (cb) {
-            return this.each(function (i, el) {
-                function visPx() {
-                    var H = $(this).height(),
-                        r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
-                    return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
-                } visPx();
-                $(win).on("resize scroll", visPx);
-            });
-        };
-    }(jQuery, window));
-
-
     jQuery(function ($) { // DOM ready and $ in scope
-        $(".count-number").inViewport(function (px) { // Make use of the `px` argument!!!
+        $('.count-number').inViewport(function (px) { // Make use of the `px` argument!!!
             if (px > 0 && !this.initNumAnim) {
                 this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
                 $(this).prop('Counter', 0).animate({

_includes/index/welcome.html

@@ -1,6 +1,17 @@
-<div class="row justify-content-center mb-5">
+<div class="row row-banner justify-content-center mb-5">
     <div class="col-12 text-center">
-        <img src="assets/img/banner.png" alt="banner">
+        <div class="display-4 text-white fw-bold">SPLASH</div>
+        <p class="lead text-white mb-0">
+            Pushing the boundaries of training development
+        </p>
+    </div>
+</div>
+<div class="row mb-5">
+    <div class="col-12">
+        <div class="px-3 py-5 text-center">
+            <p class="lead">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque augue tempus magna suscipit fringilla. Quisque neque nunc, fringilla a elit sed, tempor facilisis velit. Nulla facilisi. Sed ut sapien venenatis, tincidunt orci vitae, tristique magna. Curabitur tincidunt commodo odio vel faucibus.
+            </p>
+        </div>
     </div>
-
 </div>

_includes/scripts.html

@@ -0,0 +1,16 @@
+<script>
+    // inViewport jQuery plugin
+    // https://stackoverflow.com/a/26831113/383904
+    $(function ($, win) {
+        $.fn.inViewport = function (cb) {
+            return this.each(function (i, el) {
+                function visPx() {
+                    var H = $(this).height(),
+                        r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
+                    return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
+                } visPx();
+                $(win).on('resize scroll', visPx);
+            });
+        };
+    }(jQuery, window));
+</script>

_includes/testimonials.html

@@ -4,7 +4,9 @@
 {%- assign testimonials = site.data.testimonials %}
 {% endif %}
 {% if testimonials.size > 0 %}
+    {% unless include.hideHeading %}
     <h2>Testimonials</h2>
+    {% endunless %}
     <div id="carouselTestimonials" class="carousel carousel-testimonials bg-primary rounded slide">
         <div class="carousel-indicators">
             {% assign maxIndex = testimonials.size | minus: 1 %}

_sass/_custom_classes.scss

@@ -22,6 +22,7 @@ header {
         right: 0;
         left: 0;
         z-index: 1030;
+        padding-top: 1rem;
 
         .navbar-brand {
             min-height: 54px;
@@ -86,6 +87,45 @@ footer {
     background: $red;
 }
 
+.row-banner {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    position: relative;
+    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
+
+    &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%);
+        height: 100%;
+        width: 100vw;
+        background: url('../../assets/img/banner.png') center center no-repeat;
+        background-color: $gray-800;
+        background-size: cover;
+        z-index: -1;
+    }
+}
+
+.row-bg-light {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    position: relative;
+
+    &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%);
+        height: 100%;
+        width: 100vw;
+        background-color: $gray-100;
+        z-index: -1;
+    }
+}
+
 .count {
     position: relative;
     overflow: hidden;
@@ -148,4 +188,20 @@ footer {
         }
     }
 
-}
+}
+
+.resource-icon {
+    width: 6rem;
+}
+
+.btn-resource {
+    @include button-outline-variant($blue);
+    border-color: transparent;
+    font-weight: bold;
+    font-size: 1.25rem;
+
+    &:hover {
+        color: $white;
+        border-color: transparent;
+    }
+}

docker-compose.yml

@@ -2,10 +2,11 @@ version: "3.5"
 
 services:
   jekyll:
+    container_name: splash
     build:
       context: ./
     ports:
-      - 4000:4000
+      - 127.0.0.1:4000:4000
     volumes:
       - .:/usr/src/app
     stdin_open: true