Built site for gh-pages

Author: Quarto GHA Workflow Runner

.nojekyll

@@ -1 +1 @@
-a003e475
+b62c7dc3

CONTRIBUTING.html

@@ -132,8 +132,8 @@
 </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/why.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Why make a website for your research?</span></a>
+  <a href="./pages/why/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Slides: Why make a website for your research?</span></a>
   </div>
 </li>
         <li class="sidebar-item sidebar-item-section">
@@ -147,69 +147,92 @@
       <ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 show">  
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/setup.html" class="sidebar-item-text sidebar-link">
+  <a href="./pages/setup/index.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Set-up</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/basic_structure.html" class="sidebar-item-text sidebar-link">
+  <a href="./pages/basic_structure/index.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Basic structure</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/making_a_change.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Making a change</span></a>
+  <a href="./pages/making_a_change/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 1. Making a change</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/markdown.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Markdown basics</span></a>
+  <a href="./pages/markdown/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 2. Markdown basics</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/quarto_features.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Quarto features</span></a>
+  <a href="./pages/quarto_features/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 3. Quarto features</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/media.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Images, videos and documents</span></a>
+  <a href="./pages/media/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 4. Images, videos and documents</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/inline_html.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Inline HTML</span></a>
+  <a href="./pages/inline_html/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 5. Inline HTML</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/customising.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Customising the site appearance</span></a>
+  <a href="./pages/customising/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Exercise 6. Customising the site appearance</span></a>
   </div>
 </li>
+      </ul>
+  </li>
+        <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="./pages/task/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Task: Create a site for your research</span></a>
+  </div>
+</li>
+        <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true">
+ <span class="menu-text">Optional extras</span></a>
+          <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true" aria-label="Toggle section">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth1 show">  
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/code.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Code</span></a>
+  <a href="./pages/blog/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Listings (e.g., blog)</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="./pages/sass_css/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">SASS and CSS</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/summary.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Summary</span></a>
+  <a href="./pages/code/index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Code</span></a>
   </div>
 </li>
       </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="./pages/examples.html" class="sidebar-item-text sidebar-link">
+  <a href="./pages/examples/index.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Examples</span></a>
   </div>
 </li>
@@ -247,7 +270,96 @@ <h2 data-number="1.1" class="anchored" data-anchor-id="all-contributors"><span c
 </section>
 
 </main> <!-- /main -->
-<script src="./styles/autopreview.js"></script>
+<script>
+(function () {
+  const slides = Array.from(document.querySelectorAll('.slide'));
+  const captionEl = document.getElementById('caption');
+  const counterEl = document.getElementById('counter');
+  const thumbsContainer = document.querySelector('.thumbnails');
+  const stage = document.querySelector('.slide-stage');
+  let current = 0;
+
+  // Build arrow buttons
+  function makeArrow(dir) {
+    const btn = document.createElement('button');
+    btn.className = `arrow arrow-${dir}`;
+    btn.setAttribute('aria-label', dir === 'left' ? 'Previous slide' : 'Next slide');
+    btn.innerHTML = dir === 'left'
+      ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>'
+      : '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+    btn.addEventListener('click', () => goTo(dir === 'left' ? current - 1 : current + 1));
+    return btn;
+  }
+  stage.appendChild(makeArrow('left'));
+  stage.appendChild(makeArrow('right'));
+
+  // Build thumbnails
+  const thumbEls = slides.map((slide, i) => {
+    const li = document.createElement('div');
+    li.className = 'thumb' + (i === 0 ? ' active' : '');
+    li.setAttribute('role', 'listitem');
+    li.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+    const img = document.createElement('img');
+    img.src = slide.querySelector('img').src;
+    img.alt = '';
+    img.loading = 'lazy';
+    li.appendChild(img);
+    li.addEventListener('click', () => goTo(i));
+    thumbsContainer.appendChild(li);
+    return li;
+  });
+
+  function goTo(index) {
+    const n = ((index % slides.length) + slides.length) % slides.length;
+    slides[current].classList.remove('active');
+    thumbEls[current].classList.remove('active');
+    current = n;
+    slides[current].classList.add('active');
+    thumbEls[current].classList.add('active');
+
+    // Fade caption
+    captionEl.classList.add('fade');
+    setTimeout(() => {
+      captionEl.textContent = slides[current].dataset.caption || '';
+      counterEl.textContent = (current + 1) + ' / ' + slides.length;
+      captionEl.classList.remove('fade');
+    }, 150);
+
+    // Scroll thumb into view
+    thumbEls[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+  }
+
+  // Init
+  captionEl.textContent = slides[0].dataset.caption || '';
+  counterEl.textContent = '1 / ' + slides.length;
+
+  // Keyboard navigation
+  document.addEventListener('keydown', e => {
+    if (e.key === 'ArrowLeft')  goTo(current - 1);
+    if (e.key === 'ArrowRight') goTo(current + 1);
+  });
+
+  // Theme toggle
+  const toggle = document.querySelector('[data-theme-toggle]');
+  const root = document.documentElement;
+  let theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  root.setAttribute('data-theme', theme);
+  updateToggleIcon();
+
+  toggle.addEventListener('click', () => {
+    theme = theme === 'dark' ? 'light' : 'dark';
+    root.setAttribute('data-theme', theme);
+    toggle.setAttribute('aria-label', 'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode');
+    updateToggleIcon();
+  });
+
+  function updateToggleIcon() {
+    toggle.innerHTML = theme === 'dark'
+      ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>'
+      : '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+  }
+})();
+</script>
 <script id="quarto-html-after-body" type="application/javascript">
   window.document.addEventListener("DOMContentLoaded", function (event) {
     const icon = "";