Implement lab_life as a carousel

_includes/js-selector.html

@@ -66,7 +66,7 @@
 {% include jsdelivr-combine.html urls=urls %}
 
 {% case page.layout %}
-  {% when 'home', 'categories', 'post', 'page' %}
+  {% when 'home', 'categories', 'post', 'page', 'lab_life' %}
     {% assign js = page.layout %}
   {% when 'archives', 'category', 'tag' %}
     {% assign js = 'misc' %}
@@ -81,6 +81,11 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
 
+{% if page.layout == 'lab_life' %}
+<script src="/assets/lib/splide/splide.min.js"></script>
+<link href="/assets/lib/splide/splide.min.css" rel="stylesheet">
+{% endif %}
+
 {% if page.math %}
   <!-- MathJax -->
   <script>

_includes/sidebar.html

@@ -50,7 +50,7 @@
 
               {% for sub_tab_name in tab.sub_pages %}
                 {% assign sub_tab = site.tabs | where: "title", sub_tab_name | first %}
-                <li class="{% if sub_tab.url == page.url %}{{ " active" }}{% endif %}">
+                <li class="mb-1{% if sub_tab.url == page.url %}{{ " active" }}{% endif %}">
                   <a href="{{ sub_tab.link | (default: sub_tab.url | relative_url) }}" 
                     class="dropdown-item nav-link">
                     {% capture sub_tab_name %}{{ sub_tab.url | split: '/' }}{% endcapture %}

_javascript/lab_life.js

@@ -0,0 +1,41 @@
+$(function () {
+  const main = new Splide('#main-slider', {
+    rewind: true,
+    keyboard: true,
+    type: 'fade',
+    heightRatio: 0.82,   // TODO make this look good on mobile
+    pagination: false,
+    lazyLoad: 'nearby'
+    // arrows: false,
+    // cover: true
+  });
+
+  const thumbnails = new Splide('#thumbnail-slider', {
+    lazyLoad: 'sequential',
+    rewind: true,
+    fixedWidth: 104,
+    fixedHeight: 58,
+    isNavigation: true,
+    gap: 10,
+    focus: 'center',
+    pagination: false,
+    cover: true,
+    dragMinThreshold: {
+      mouse: 4,
+      touch: 10
+    },
+    breakpoints: {
+      640: {
+        fixedWidth: 66,
+        fixedHeight: 38
+      }
+    }
+  });
+
+  main.sync(thumbnails);
+  main.mount();
+  thumbnails.mount();
+
+  $('#main-slider').removeClass('d-none');
+  $('#thumbnail-slider').removeClass('d-none');
+});

_layouts/lab_life.html

@@ -0,0 +1,30 @@
+---
+layout: page
+refactor: false
+---
+
+<section class="splide" aria-label="Lab life image carousel" id="main-slider" class="d-none">
+    <div class="splide__track">
+        <ul class="splide__list">
+            {% for image in page.images %}
+            <li class="splide__slide d-flex align-items-center justify-content-center bg-dark flex-column">
+                <img data-splide-lazy="{{image.src}}" class="h-100 object-fit-contain" alt="{{image.caption}}">
+                <div class="text-light my-3 mx-5 text-center">{{image.caption}}</div>
+
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</section>
+
+<section class="splide" aria-label="Lab life thumbnail slider" id="thumbnail-slider" class="d-none">
+    <div class="splide__track">
+        <ul class="splide__list">
+            {% for image in page.images %}
+            <li class="splide__slide">
+                <img data-splide-lazy="{{image.src}}" class="h-100">
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</section>

_sass/addon/commons.scss

@@ -1637,4 +1637,8 @@ $btn-mb: 0.5rem;
 
 .pheader, .subpheader  {
   font-family: $font-family-heading;
+}
+
+.object-fit-contain {
+  object-fit: contain;
 }

_tabs/lab_life.md

@@ -1,15 +1,76 @@
 ---
-layout: page
+layout: lab_life
 # refactor: false
 title: Lab Life
 icon: fas fa-umbrella-beach
 order: 4
+images:
+  - src: "/img/lab_life/2023/ian_paper.jpg"
+    caption: "We celebrated Ian's Genome Biology paper playing Secret Hitler!"
+  - src: "/img/lab_life/2022/ceniklab_hike_oct_18_2022.jpg"
+    caption: "We opened the hiking season with the San Gabriel Trail."
+  - src: "/img/lab_life/2022/alia_farewell_08_05_2022.jpg"
+    caption: "Alia is going to graduate school. Congratulations and best of luck Alia!"
+  - src: "/img/lab_life/2022/dayea_birthday_2022.jpeg"
+    caption: "Happy birthday Dayea!"
+  - src: "/img/lab_life/2022/retreat_2022.jpg"
+    caption: "Molecular biosciences retreat 2022."
+  - src: "/img/lab_life/2022/retreat_2022_2.jpg"
+    caption: "Molecular biosciences retreat 2022."
+  - src: "/img/lab_life/2022/oddwood_happy_hour_20220408_1.jpg"
+    caption: "Happy hour at Oddwood."
+  - src: "/img/lab_life/2022/hakan_birthday_2022_2.jpg"
+    caption: "Hakan was pretending that he was blowing the candles."
+  - src: "/img/lab_life/2022/hakan_bd_cake_2022.jpg"
+    caption: "Birthday cake:"
+  - src: "/img/lab_life/2021/toris_farewell_2021.jpg"
+    caption: "Tori is going to medical school! We are sad to see her leave our lab and also we are happy and excited for the beginning of her medical career! Our recent lab outing was for her farewell."
+  - src: "/img/lab_life/2021/ceniklab_april_2021.jpg"
+    caption: "Our first lab social after 16 months! We are very happy to resume lab socials outside after immunization of our lab members."
+  - src: "/img/lab_life/2020/hakan_pre_assembly_1.jpg"
+    caption: "Hakan is very excited to assemble our new lab server. It is a 64 core monster to crunch billions of sequencing reads."
+  - src: "/img/lab_life/2020/hardware_parts.jpg"
+    caption: "Hakan is very excited to assemble our new lab server. It is a 64 core monster to crunch billions of sequencing reads."
+  - src: "/img/lab_life/2020/assembled_server.jpg"
+    caption: "Assembled server working."
+  - src: "/img/lab_life/2019/michael_birthday.jpg"
+    caption: "Happy birthday Michael!"
+  - src: "/img/lab_life/2019/lab_photo_november_2019.jpg"
+    caption: "Cenik Lab, November 2019"
+  - src: "/img/lab_life/2019/2019-08-02_14.02.16_lunch.jpg"
+    caption: "Who doesn't like tacos?"
+  - src: "/img/lab_life/2019/happ_bday_ian_2019.jpeg"
+    caption: "Happy Birthday Ian!"
+  - src: "/img/lab_life/2019/ian_bday_cake_2019.jpeg"
+    caption: "Happy Birthday Ian!"
+  - src: "/img/lab_life/2019/lab_warming_party_1_2019-06-21.jpg"
+    caption: "Lab warming party"
+  - src: "/img/lab_life/2019/lab_warming_party_2_2019-06-21.jpg"
+    caption: "Lab warming party"
+  - src: "/img/lab_life/2019/delicious_ribosome_2_2019-06-21.jpg"
+    caption: "Tori made some delicious ribosomes for the lab party!"
+  - src: "/img/lab_life/2019/delicious_ribosome_3_2019-06-21.jpg"
+    caption: "Tori made some delicious ribosomes for the lab party!"
+  - src: "/img/lab_life/2019/turkish_food_2019-06-20.jpg"
+    caption: "Turkish food is yummy!"
+  - src: "/img/lab_life/2019/enjoying_sweets.jpg"
+    caption: "Enjoying sweets"
+  - src: "/img/lab_life/2019/look_someone_is_taking_photo.jpg"
+    caption: "Look! Someone is taking a picture."
+  - src: "/img/lab_life/2019/after_move.jpg"
+    caption: "After the move"
+  - src: "/img/lab_life/2019/before_move.jpg"
+    caption: "Before the move"
+  - src: "/img/lab_life/2018/new_first_lab_meeting_2018-11-02.jpg"
+    caption: "Our first lab meeting"
 ---
+
 <!-- 2023 -->
-We celebrated Ian's Genome Biology paper playing Secret Hitler! 
+
+We celebrated Ian's Genome Biology paper playing Secret Hitler!
 <img src="/img/lab_life/2023/ian_paper.jpg">
 
-<br> 
+<br>
 
 <!-- 2022 -->
 
@@ -18,17 +79,14 @@ We opened the hiking season with the San Gabriel Trail.
 
 <br>
 
-
 Alia is going to graduate school. Congratulations and best of luck Alia!
 <img src="/img/lab_life/2022/alia_farewell_08_05_2022.jpg">
 
 <br>
 
-
 Happy birthday Dayea!
 <img src="/img/lab_life/2022/dayea_birthday_2022.jpeg">
 
-
 <br>
 Molecular biosciences retreat 2022.
 
@@ -37,12 +95,10 @@ Molecular biosciences retreat 2022.
 <br>
 <img src="/img/lab_life/2022/retreat_2022_2.jpg">
 
-
 <br>
 Happy hour at Oddwood.
 <img src="/img/lab_life/2022/oddwood_happy_hour_20220408_1.jpg">
 
-
 <br>
 Hakan was pretending that he was blowing the candles.
 <img src="/img/lab_life/2022/hakan_birthday_2022_2.jpg">
@@ -62,7 +118,6 @@ Our first lab social after 16 months!
 We are very happy to resume lab socials outside after immunization of our lab members.
 <img src="/img/lab_life/2021/ceniklab_april_2021.jpg">
 
-
 <!-- 2020 -->
 
 <br>
@@ -74,7 +129,6 @@ It is a 64 core monster to crunch billions of sequencing reads.
 Assembled server working.
 <img src="/img/lab_life/2020/assembled_server.jpg">
 
-
 <!-- 2019 -->
 
 <br>
@@ -94,7 +148,6 @@ Happy Birthday Ian!
 <img src="/img/lab_life/2019/happ_bday_ian_2019.jpeg">
 <img src="/img/lab_life/2019/ian_bday_cake_2019.jpeg">
 
-
 <br>
 Lab warming party
 <img src="/img/lab_life/2019/lab_warming_party_1_2019-06-21.jpg">
@@ -105,7 +158,6 @@ Tori made some delicious ribosomes for the lab party!
 <img src="/img/lab_life/2019/delicious_ribosome_2_2019-06-21.jpg">
 <img src="/img/lab_life/2019/delicious_ribosome_3_2019-06-21.jpg">
 
-
 <br>
 Turkish food is yummy!
 <img src="/img/lab_life/2019/turkish_food_2019-06-20.jpg">

rollup.config.js

@@ -42,5 +42,6 @@ export default [
   build('categories'),
   build('page'),
   build('post'),
-  build('misc')
+  build('misc'),
+  build('lab_life')
 ];