Add download button for Jupyter notebooks in tutorial pages

Author: Aoife

.github/workflows/publish.yml

@@ -83,7 +83,7 @@ jobs:
           sh assets/scripts/versions.sh
 
       - name: Render Quarto site
-        run: quarto render
+        run: quarto render --to html,ipynb
 
       - name: Rename original search index
         run: mv _site/search.json _site/search_original.json

.gitignore

@@ -28,4 +28,5 @@ venv
 site_libs
 .DS_Store
 index_files
-digest.txt
+digest.txt
+**/*.quarto_ipynb

_includes/download-notebook.html

@@ -0,0 +1,56 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Only add button if we're on a tutorial page
+  const path = window.location.pathname;
+  if (path.includes('/tutorials/') || path.includes('/usage/')) {
+    // Extract the notebook name from the URL
+    const pathParts = path.split('/');
+    const section = pathParts[pathParts.length - 2];
+
+    // Create download button
+    const downloadBtn = document.createElement('a');
+    downloadBtn.className = 'btn btn-primary download-notebook-btn';
+    downloadBtn.innerHTML = '<i class="bi bi-download"></i> Download as Notebook';
+
+    // Generate GitHub raw URL for the notebook
+    const baseUrl = 'https://raw.githubusercontent.com/TuringLang/docs/main';
+    const notebookPath = path.replace('.html', '.ipynb');
+    downloadBtn.href = baseUrl + notebookPath;
+    downloadBtn.download = section + '.ipynb';
+
+    // Insert button after title or in TOC area
+    const tocTitle = document.querySelector('.toc-title');
+    if (tocTitle) {
+      tocTitle.parentNode.insertBefore(downloadBtn, tocTitle.nextSibling);
+    } else {
+      const articleHeader = document.querySelector('header.quarto-title-block');
+      if (articleHeader) {
+        articleHeader.appendChild(downloadBtn);
+      }
+    }
+  }
+});
+</script>
+
+<style>
+.download-notebook-btn {
+  display: inline-block;
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  background-color: var(--bs-primary);
+  color: white;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.download-notebook-btn:hover {
+  background-color: var(--bs-primary-dark);
+  color: white;
+  text-decoration: none;
+}
+
+.download-notebook-btn i {
+  margin-right: 0.5rem;
+}
+</style>

_quarto.yml

@@ -153,6 +153,11 @@ format:
     toc-title: "Table of Contents"
     code-fold: false
     code-overflow: scroll
+    code-tools:
+      source: true
+      toggle: false
+      caption: none
+    downloads: [ipynb]
     include-in-header:
       - text: |
           <style>
@@ -163,6 +168,7 @@ format:
               text-decoration: underline;
             }
           </style>
+      - _includes/download-notebook.html
     include-after-body:
       - text: |
           <footer class="custom-footer">