Tabbed View

Author: shravanngoswamii

index.qmd

@@ -100,15 +100,19 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 
 :::
 
-::: {.code-window-title}
+::: {.code-window-tabs}
 ```{=html}
-<span>linear_regression.jl</span>
+<span class="tab active" onclick="switchTab('define', this)">Define</span>
+<span class="tab" onclick="switchTab('inference', this)">Inference</span>
+<span class="tab" onclick="switchTab('prior', this)">Prior</span>
+<span class="tab" onclick="switchTab('return', this)">Return</span>
+<span class="tab" onclick="switchTab('predict', this)">Predict</span>
 ```
 :::
 
-
 :::
 
+::: {#define .code-content .active}
 ```{.julia .code-overflow-scroll}
 using Turing
 
@@ -121,16 +125,79 @@ using Turing
     # Likelihood
     μ = α .+ β .* x
     y ~ MvNormal(μ, σ² * I)
+
+    # Return the mean
+    return μ
 end
+```
+:::
+
+::: {#inference .code-content}
+```{.julia .code-overflow-scroll}
+# Data
+x_data = rand(10)
+y_data = rand(10)
 
-x, y = rand(10), rand(10)
-posterior = linear_regression(x) | (; y = y)
-chain = sample(posterior, NUTS(), 1000)
+# Condition the model on data
+model = linear_regression(x_data) | (; y = y_data)
+
+# Run the NUTS sampler
+chain = sample(model, NUTS(), 1000)
 ```
+:::
 
+::: {#prior .code-content}
+```{.julia .code-overflow-scroll}
+# Fix parameters to specific values
+fixed_model = fix(
+    linear_regression(x_data), 
+    (α = 0.5, β = 2.0, σ² = 1.0)
+)
+
+# Sample from the prior predictive distribution
+prior_sample = rand(fixed_model)
+```
 :::
+
+::: {#return .code-content}
+```{.julia .code-overflow-scroll}
+# Get generated quantities (the returned μ)
+generated = generated_quantities(model, chain)
+```
+:::
+
+::: {#predict .code-content}
+```{.julia .code-overflow-scroll}
+# Make predictions on new data
+predictions = predict(linear_regression(x_new), chain)
+```
 :::
 
+:::
+:::
+
+```{=html}
+<script>
+function switchTab(tabId, element) {
+  // Remove active class from all tabs
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  // Add active class to clicked tab
+  element.classList.add('active');
+  
+  // Hide all code contents
+  document.querySelectorAll('.code-content').forEach(c => {
+    c.classList.remove('active');
+    c.style.display = 'none';
+  });
+  
+  // Show target content
+  const target = document.getElementById(tabId);
+  target.classList.add('active');
+  target.style.display = 'block';
+}
+</script>
+```
+
 :::
 <!-- What is Turing.jl Section Ends Here -->
 

theming/rules/_layouts.scss

@@ -184,6 +184,7 @@
     align-items: center;
     border-bottom: 1px solid lighten($btn-border-color, 5%);
     position: relative;
+    justify-content: space-between; /* Changed to space-between to push tabs to right */
   }
 
   .code-window-dots {
@@ -200,6 +201,48 @@
     font-size: 0.8rem;
   }
 
+  .code-window-tabs {
+    display: flex;
+    gap: 1rem;
+    z-index: 10; /* Ensure tabs are clickable above title if they overlap */
+  }
+
+  .tab {
+    cursor: pointer;
+    color: $text-muted;
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding: 0.2rem 0.6rem;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    user-select: none;
+
+    &:hover {
+      color: $text-color;
+      background-color: rgba(0,0,0,0.05);
+    }
+
+    &.active {
+      color: $primary;
+      background-color: rgba($primary, 0.1);
+    }
+  }
+
+  .code-content {
+    display: none;
+    
+    &.active {
+      display: block;
+      animation: fadeIn 0.3s ease;
+    }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+
   .dot {
     width: 13px;
     height: 13px;