adsabs · mugdhapolimera · Mar 3, 2026
diff --git a/_data/tutorials.yml b/_data/tutorials.yml
@@ -0,0 +1,35 @@
+- id: tutorial-1
+  title: "Welcome to the SciX Training Hub"
+  description: "Get an overview of the SciX Training Hub and what you'll learn across this tutorial series."
+  video_id: jJ0ve_3ov0M
+  is_new: true
+
+- id: tutorial-2
+  title: "Searching for a Specific Paper"
+  description: "Learn how to quickly find a specific paper in SciX using author names, titles, identifiers, and more."
+  video_id: 7ELEYN5L49U
+  is_new: true
+
+- id: tutorial-3
+  title: "SciX Tutorial 3"
+  description: "Placeholder description — update this in _data/tutorials.yml."
+  video_id: WsYbgdaC2Es
+  is_new: false
+
+- id: tutorial-4
+  title: "SciX Tutorial 4"
+  description: "Placeholder description — update this in _data/tutorials.yml."
+  video_id: aOq_JxQId4M
+  is_new: false
+
+- id: tutorial-5
+  title: "SciX Tutorial 5"
+  description: "Placeholder description — update this in _data/tutorials.yml."
+  video_id: tZaLIAoavv8
+  is_new: false
+
+- id: tutorial-6
+  title: "SciX Tutorial 6"
+  description: "Placeholder description — update this in _data/tutorials.yml."
+  video_id: IPGv0vPxy4M
+  is_new: false
diff --git a/_includes/head_default_scix.html b/_includes/head_default_scix.html
@@ -78,5 +78,10 @@
     ga('send', 'pageview');
   </script>
 
+  <!-- Per-page extra CSS (set extra_css in front matter) -->
+  {% if page.extra_css %}
+  <link rel="stylesheet" href="{{ site.baseurl }}{{ page.extra_css }}" />
+  {% endif %}
+
   <!-- No body-hiding, no <noscript> needed -->
 </head>
diff --git a/_includes/left-nav_scix.html b/_includes/left-nav_scix.html
@@ -162,6 +162,7 @@ <h3 class="{% if page.url contains '/policies-scix/' %} active {% endif %}"> <i
 
 </div>
 
+    <h3 class="{% if page.url contains '/tutorials/' %} active {% endif %}"> <a href="{{ site.baseurl }}/scixhelp/tutorials/">Training Hub <span style="background:#5FBFAE;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px;vertical-align:middle;">New</span></a></h3>
     <h3 class="{% if '/whats_new/index.html' == page.url %} active {% endif %}"> <a href="{{ site.baseurl }}/scixhelp/whats_new/">What's New</a></h3>
     <h3 class="{% if '/faq/index.html' == page.url %} active {% endif %}"> <a href="{{ site.baseurl }}/scixhelp/faq-scix">Frequently Asked Questions </a></h3>
     <h3 class="{% if '/api/index.html' == page.url %} active {% endif %}"> <a href="{{ site.baseurl }}/scixhelp/api-scix">Using the SciX API </a></h3>

diff --git a/_layouts/tutorials_layout_scix.html b/_layouts/tutorials_layout_scix.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  {% include head_default_scix.html %}
+
+  <body>
+    {% include header_default_scix.html subtitle="help" subpath="scixhelp" %}
+
+    <div class="smart-container">
+      <div class="search-bar-container pull-right col-xs-12 col-md-6">
+        {% include search.html %}
+      </div>
+    </div>
+
+    <div class="page-content smart-container">
+      <div class="row row-offcanvas row-offcanvas-left">
+        <div class="col-xs-6 col-sm-6 col-md-3 left-nav sidebar-offcanvas">
+          {% include left-nav_scix.html %}
+        </div>
+
+        <div class="col-xs-12 col-md-9">
+          <button
+            class="btn btn-primary visible-sm-inline-block visible-xs-inline-block"
+            data-toggle="off-canvas"
+          >
+            toggle sidebar
+          </button>
+
+          {{ content }}
+        </div>
+      </div>
+    </div>
+
+    {% include footer_default_scix.html %}
+
+    <div
+      id="darkSwitch"
+      class="darkmode-toggle"
+      title="Turn on dark mode"
+    ></div>
+    <script src="/help/common/js/dark-mode-switch-scix.js"></script>
+  </body>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
+  <script
+    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
+    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
+    crossorigin="anonymous"
+  ></script>
+
+  <!-- YouTube IFrame API — must load before tutorials.js -->
+  <script src="https://www.youtube.com/iframe_api"></script>
+  <script src="{{ site.baseurl }}/help/common/js/tutorials.js"></script>
+
+  <script>
+    $(document).ready(function () {
+      $('body').on('click', 'button[data-toggle="off-canvas"]', function () {
+        $('.row-offcanvas').toggleClass('active');
+      });
+    });
+  </script>
+
+  <!-- Sidebar accordion highlight -->
+  <script>
+    $(document).ready(function () {
+      try {
+        var category = window.location.pathname.split('/')[2];
+      } catch (e) {
+        console.error("couldn't parse category name");
+      }
+      if ($('.help-nav').find('div#' + category + '-items').length === 0)
+        console.log('couldnt find accordion drawer for: ', category);
+      $('.help-nav')
+        .find('div#' + category + '-items')
+        .addClass('in')
+        .parent()
+        .find('.fa')
+        .removeClass('fa-caret-right')
+        .addClass('fa-caret-down');
+
+      $('.help-nav .collapse')
+        .on('show.bs.collapse', function () {
+          $(this)
+            .parent()
+            .find('.fa')
+            .removeClass('fa-caret-right')
+            .addClass('fa-caret-down');
+        })
+        .on('hide.bs.collapse', function () {
+          $(this)
+            .parent()
+            .find('.fa')
+            .removeClass('fa-caret-down')
+            .addClass('fa-caret-right');
+        });
+    });
+  </script>
+
+  <script>
+    (function (i, s, o, g, r, a, m) {
+      i['GoogleAnalyticsObject'] = r;
+      (i[r] =
+        i[r] ||
+        function () {
+          (i[r].q = i[r].q || []).push(arguments);
+        }),
+        (i[r].l = 1 * new Date());
+      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+      a.async = 1;
+      a.src = g;
+      m.parentNode.insertBefore(a, m);
+    })(
+      window,
+      document,
+      'script',
+      '//www.google-analytics.com/analytics.js',
+      'ga'
+    );
+
+    ga('create', 'UA-37369750-8', 'auto');
+    ga('send', 'pageview');
+  </script>
+</html>