refactor: Externalize project list into projects.json

.gitignore

@@ -4,4 +4,6 @@ server/
 requirements.txt
 start_server.sh
 scripts_reminders.txt
-GEMINI.md
+GEMINI.md
+versions/
+.gitignore

index.html

@@ -67,7 +67,7 @@
         <iframe id="project-iframe" class="absolute inset-0 w-full h-full border-none" src="about:blank"></iframe>
 
         <!-- Loading Spinner -->
-        <div id="loading-spinner" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 z-20">
+        <div id="loading-spinner" class="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
             <div class="loader"></div>
         </div>
 

main.js

@@ -1,28 +1,4 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const projects = [
-        { name: "Definitions of Probability", slug: "defining-probability.static" }, 
-        { name: "Probability Rules Infographic", slug: "probability-rules.static" }, 
-        { name: "Probability Trees", slug: "probability-trees.static" }, 
-        { name: "Binomial Distribution", slug: "binomial-distribution-app" },
-        { name: "Bayes' Rule Calculator", slug: "bayes-rule" },              
-        { name: "Random Variables", slug: "Random-Variables.static" },
-        { name: "Expected Value", slug: "expected-value.static" },
-        { name: "Standard Normal CDF", slug: "standard-normal-cdf" },              
-        { name: "Z-Tables", slug: "z-tables" },              
-        { name: "Intro to Inference", slug: "intro-inference-problems.static" },              
-        { name: "Inference for Means", slug: "Inference-Means" },              
-        { name: "Inference: One Proportion", slug: "inference-one-prop" },
-        { name: "Sampling Dist: Two Props", slug: "sampl-dist-two-prop" },              
-        { name: "Inference: Two Proportions", slug: "inference-two-prop" },
-        { name: "Hypothesis Testing", slug: "hypothesis-testing" },
-        { name: "Hypothesis Testing FAQ", slug: "hypothesis-testing-faq.static" },
-        { name: "Correlation Explorer", slug: "Correlation" },
-        { name: "Probability Problem Set", slug: "Probability-Problem-Set.static" },
-        { name: "Self-Study Guide", slug: "self-study-guide" },
-        { name: "Week 5, Module 1", slug: "week-5-module-1.static" },
-        { name: "Week 5, Module 2", slug: "week-5-module-2.static" }
-    ];
-
     const navList = document.querySelector('#project-nav ul');
     const iframe = document.getElementById('project-iframe');
     const welcomeScreen = document.getElementById('welcome-screen');
@@ -33,6 +9,34 @@ document.addEventListener('DOMContentLoaded', () => {
     let spinnerTimeout;
     const loadedUrls = new Set();
 
+    // --- Main App Initialization ---
+    async function initializeApp() {
+        try {
+            const response = await fetch('projects.json');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const projects = await response.json();
+            populateNav(projects);
+        } catch (error) {
+            console.error("Could not load projects:", error);
+            // Optionally, display an error message to the user in the UI
+        }
+    }
+
+    function populateNav(projects) {
+        projects.forEach(project => {
+            const li = document.createElement('li');
+            const a = document.createElement('a');
+            a.href = '#';
+            a.textContent = project.name;
+            a.dataset.slug = project.slug;
+            a.className = 'nav-link block w-full text-left px-4 py-2.5 rounded-md text-gray-300 hover:bg-gray-700/50 hover:text-white transition-colors duration-200';
+            li.appendChild(a);
+            navList.appendChild(li);
+        });
+    }
+
     // --- Unified Touch/Click logic for sidebar ---
     sidebar.addEventListener('click', (e) => {
         const link = e.target.closest('.nav-link');
@@ -90,17 +94,8 @@ document.addEventListener('DOMContentLoaded', () => {
         sidebar.classList.remove('is-open');
     });
 
-    // Populate the navigation list
-    projects.forEach(project => {
-        const li = document.createElement('li');
-        const a = document.createElement('a');
-        a.href = '#';
-        a.textContent = project.name;
-        a.dataset.slug = project.slug;
-        a.className = 'nav-link block w-full text-left px-4 py-2.5 rounded-md text-gray-300 hover:bg-gray-700/50 hover:text-white transition-colors duration-200';
-        li.appendChild(a);
-        navList.appendChild(li);
-    });
+    // Initialize the app
+    initializeApp();
 });
 
 // This script is for the footer year, it's separate because it's not part of the main app logic

projects.json

@@ -0,0 +1,23 @@
+[
+  { "name": "Definitions of Probability", "slug": "defining-probability.static" },
+  { "name": "Probability Rules Infographic", "slug": "probability-rules.static" },
+  { "name": "Probability Trees", "slug": "probability-trees.static" },
+  { "name": "Binomial Distribution", "slug": "binomial-distribution-app" },
+  { "name": "Bayes' Rule Calculator", "slug": "bayes-rule" },
+  { "name": "Random Variables", "slug": "Random-Variables.static" },
+  { "name": "Expected Value", "slug": "expected-value.static" },
+  { "name": "Standard Normal CDF", "slug": "standard-normal-cdf" },
+  { "name": "Z-Tables", "slug": "z-tables" },
+  { "name": "Inference for Means", "slug": "Inference-Means" },
+  { "name": "Inference: One Proportion", "slug": "inference-one-prop" },
+  { "name": "Sampling Dist: Two Props", "slug": "sampl-dist-two-prop" },
+  { "name": "Inference: Two Proportions", "slug": "inference-two-prop" },
+  { "name": "Hypothesis Testing", "slug": "hypothesis-testing" },
+  { "name": "Hypothesis Testing FAQ", "slug": "hypothesis-testing-faq.static" },
+  { "name": "Correlation Explorer", "slug": "Correlation" },
+  { "name": "Probability Problem Set", "slug": "Probability-Problem-Set.static" },
+  { "name": "Self-Study Intro to Inference", "slug": "intro-inference-problems.static" },
+  { "name": "Self-Study Guide", "slug": "self-study-guide" },
+  { "name": "Week 5, Module 1", "slug": "week-5-module-1.static" },
+  { "name": "Week 5, Module 2", "slug": "week-5-module-2.static" }
+]