Enhance course metadata processing and improve HTML/CSS structure for better theming and user experience. Clean up descriptions, implement light/dark mode support, and refine course display logic with improved search functionality.

scripts/build.py

@@ -6,6 +6,7 @@ import argparse
 import json
 from typing import List, Dict, Any
 from pathlib import Path
+import re
 
 
 def export_html_wasm(notebook_path: str, output_dir: str, as_app: bool = False) -> bool:
@@ -65,7 +66,17 @@ def get_course_metadata(course_dir: Path) -> Dict[str, Any]:
                         description_lines.append(line)
                     elif description_lines:  # Stop at the next heading
                         break
-                metadata["description"] = " ".join(description_lines).strip()
+                description = " ".join(description_lines).strip()
+                # Clean up the description
+                description = description.replace("_", "")
+                description = description.replace("[work in progress]", "")
+                description = description.replace("(https://github.com/marimo-team/learn/issues/51)", "")
+                # Remove any other GitHub issue links
+                description = re.sub(r'\[.*?\]\(https://github\.com/.*?/issues/\d+\)', '', description)
+                description = re.sub(r'https://github\.com/.*?/issues/\d+', '', description)
+                # Clean up any double spaces
+                description = re.sub(r'\s+', ' ', description).strip()
+                metadata["description"] = description
     
     return metadata
 
@@ -99,13 +110,44 @@ def organize_notebooks_by_course(all_notebooks: List[str]) -> Dict[str, Dict[str
         display_name = notebook_id
         if "_" in notebook_id:
             display_name = "_".join(notebook_id.split("_")[1:])
-        display_name = display_name.replace("_", " ").title()
+        
+        # Convert display name to title case, but handle italics properly
+        parts = display_name.split("_")
+        formatted_parts = []
+        
+        i = 0
+        while i < len(parts):
+            if i + 1 < len(parts) and parts[i] == "" and parts[i+1] == "":
+                # Skip empty parts that might come from consecutive underscores
+                i += 2
+                continue
+                
+            if i + 1 < len(parts) and (parts[i] == "" or parts[i+1] == ""):
+                # This is an italics marker
+                if parts[i] == "":
+                    # Opening italics
+                    text_part = parts[i+1].replace("_", " ").title()
+                    formatted_parts.append(f"<em>{text_part}</em>")
+                    i += 2
+                else:
+                    # Text followed by italics marker
+                    text_part = parts[i].replace("_", " ").title()
+                    formatted_parts.append(text_part)
+                    i += 1
+            else:
+                # Regular text
+                text_part = parts[i].replace("_", " ").title()
+                formatted_parts.append(text_part)
+                i += 1
+        
+        display_name = " ".join(formatted_parts)
         
         courses[course_id]["notebooks"].append({
             "id": notebook_id,
             "path": notebook_path,
             "display_name": display_name,
-            "order": order
+            "order": order,
+            "original_number": notebook_id.split("_")[0] if "_" in notebook_id else ""
         })
     
     # Sort notebooks by order
@@ -116,11 +158,12 @@ def organize_notebooks_by_course(all_notebooks: List[str]) -> Dict[str, Dict[str
 
 
 def generate_eva_css() -> str:
-    """Generate Neon Genesis Evangelion inspired CSS."""
+    """Generate Neon Genesis Evangelion inspired CSS with light/dark mode support."""
     return """
     :root {
+        /* Dark mode colors (default) */
         --eva-purple: #9a1eb3;
-        --eva-green: #00ff00;
+        --eva-green: #1c7361;
         --eva-orange: #ff6600;
         --eva-blue: #0066ff;
         --eva-red: #ff0000;
@@ -132,6 +175,19 @@ def generate_eva_css() -> str:
         --eva-transition: all 0.3s ease;
     }
     
+    /* Light mode colors */
+    [data-theme="light"] {
+        --eva-purple: #7209b7;
+        --eva-green: #1c7361;
+        --eva-orange: #e65100;
+        --eva-blue: #0039cb;
+        --eva-red: #c62828;
+        --eva-black: #f5f5f5;
+        --eva-dark: #e0e0e0;
+        --eva-terminal-bg: rgba(255, 255, 255, 0.9);
+        --eva-text: #333333;
+    }
+    
     body {
         background-color: var(--eva-black);
         color: var(--eva-text);
@@ -139,6 +195,7 @@ def generate_eva_css() -> str:
         margin: 0;
         padding: 0;
         line-height: 1.6;
+        transition: background-color 0.3s ease, color 0.3s ease;
     }
     
     .eva-container {
@@ -156,10 +213,15 @@ def generate_eva_css() -> str:
         align-items: center;
         position: sticky;
         top: 0;
-        background-color: rgba(17, 17, 17, 0.95);
+        background-color: var(--eva-black);
         z-index: 100;
         backdrop-filter: blur(5px);
         padding-top: 1rem;
+        transition: background-color 0.3s ease;
+    }
+    
+    [data-theme="light"] .eva-header {
+        background-color: rgba(245, 245, 245, 0.95);
     }
     
     .eva-logo {
@@ -168,16 +230,21 @@ def generate_eva_css() -> str:
         color: var(--eva-green);
         text-transform: uppercase;
         letter-spacing: 2px;
-        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+        text-shadow: 0 0 10px rgba(28, 115, 97, 0.5);
+    }
+    
+    [data-theme="light"] .eva-logo {
+        text-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
     }
     
     .eva-nav {
         display: flex;
         gap: 1.5rem;
+        align-items: center;
     }
     
     .eva-nav a {
-        color: white;
+        color: var(--eva-text);
         text-decoration: none;
         text-transform: uppercase;
         font-size: 0.9rem;
@@ -202,6 +269,21 @@ def generate_eva_css() -> str:
         animation: scanline 1.5s linear infinite;
     }
     
+    .theme-toggle {
+        background: none;
+        border: none;
+        color: var(--eva-text);
+        cursor: pointer;
+        font-size: 1.2rem;
+        padding: 0.5rem;
+        margin-left: 1rem;
+        transition: color 0.3s;
+    }
+    
+    .theme-toggle:hover {
+        color: var(--eva-green);
+    }
+    
     .eva-hero {
         background-color: var(--eva-terminal-bg);
         border: 1px solid var(--eva-green);
@@ -217,6 +299,11 @@ def generate_eva_css() -> str:
         background-size: cover;
         background-position: center;
         background-blend-mode: overlay;
+        transition: background-color 0.3s ease, border-color 0.3s ease;
+    }
+    
+    [data-theme="light"] .eva-hero {
+        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg');
     }
     
     .eva-hero::before {
@@ -236,7 +323,11 @@ def generate_eva_css() -> str:
         color: var(--eva-green);
         text-transform: uppercase;
         letter-spacing: 2px;
-        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+        text-shadow: 0 0 10px rgba(28, 115, 97, 0.5);
+    }
+    
+    [data-theme="light"] .eva-hero h1 {
+        text-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
     }
     
     .eva-hero p {
@@ -302,10 +393,11 @@ def generate_eva_css() -> str:
         background-color: var(--eva-green);
     }
     
+    /* Flashcard view for courses */
     .eva-courses {
-        display: block;
-        width: 100%;
-        max-width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        gap: 2rem;
     }
     
     .eva-course {
@@ -315,9 +407,9 @@ def generate_eva_css() -> str:
         transition: var(--eva-transition);
         position: relative;
         overflow: hidden;
-        width: 100%;
-        display: block;
-        margin-bottom: 2rem;
+        height: 350px;
+        display: flex;
+        flex-direction: column;
     }
     
     .eva-course:hover {
@@ -336,17 +428,67 @@ def generate_eva_css() -> str:
         animation: scanline 2s linear infinite;
     }
     
+    .eva-course-badge {
+        position: absolute;
+        top: 15px;
+        right: -40px;
+        background: linear-gradient(135deg, var(--eva-orange) 0%, #ff9500 100%);
+        color: var(--eva-black);
+        font-size: 0.65rem;
+        padding: 0.3rem 2.5rem;
+        text-transform: uppercase;
+        font-weight: bold;
+        z-index: 3;
+        letter-spacing: 1px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+        transform: rotate(45deg);
+        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
+        border-top: 1px solid rgba(255, 255, 255, 0.3);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        white-space: nowrap;
+        overflow: hidden;
+    }
+    
+    .eva-course-badge i {
+        margin-right: 4px;
+        font-size: 0.7rem;
+    }
+    
+    [data-theme="light"] .eva-course-badge {
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
+    }
+    
+    .eva-course-badge::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
+        animation: scanline 2s linear infinite;
+    }
+    
     .eva-course-header {
-        padding: 1.5rem;
+        padding: 1rem 1.5rem;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid rgba(154, 30, 179, 0.3);
+        z-index: 2;
+        background-color: var(--eva-terminal-bg);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 3.5rem;
+        box-sizing: border-box;
     }
     
     .eva-course-title {
-        font-size: 1.5rem;
+        font-size: 1.3rem;
         color: var(--eva-purple);
         text-transform: uppercase;
         letter-spacing: 1px;
@@ -363,19 +505,76 @@ def generate_eva_css() -> str:
         transform: rotate(180deg);
     }
     
-    .eva-course-content {
-        display: none;
+    .eva-course-front {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         padding: 1.5rem;
+        margin-top: 3.5rem;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 3.5rem);
+        background-color: var(--eva-terminal-bg);
+        z-index: 1;
+        box-sizing: border-box;
     }
     
-    .eva-course.active .eva-course-content {
-        display: block;
+    .eva-course.active .eva-course-front {
+        opacity: 0;
+        transform: translateY(-10px);
+        pointer-events: none;
     }
     
     .eva-course-description {
+        margin-top: 0.5rem;
         margin-bottom: 1.5rem;
         font-size: 0.9rem;
         line-height: 1.6;
+        flex-grow: 1;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        max-height: 150px;
+    }
+    
+    .eva-course-stats {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.8rem;
+        color: var(--eva-text);
+        opacity: 0.7;
+    }
+    
+    .eva-course-content {
+        position: absolute;
+        top: 3.5rem;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 3.5rem);
+        padding: 1.5rem;
+        background-color: var(--eva-terminal-bg);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        opacity: 0;
+        transform: translateY(10px);
+        pointer-events: none;
+        overflow-y: auto;
+        z-index: 1;
+        box-sizing: border-box;
+    }
+    
+    .eva-course.active .eva-course-content {
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+    }
+    
+    .eva-course.active {
+        height: auto;
+        min-height: 350px;
     }
     
     .eva-notebooks {
@@ -396,6 +595,10 @@ def generate_eva_css() -> str:
         border-radius: 0 var(--eva-border-radius) var(--eva-border-radius) 0;
     }
     
+    [data-theme="light"] .eva-notebook {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+    
     .eva-notebook:hover {
         background-color: rgba(0, 102, 255, 0.1);
         padding-left: 1rem;
@@ -403,7 +606,7 @@ def generate_eva_css() -> str:
     }
     
     .eva-notebook a {
-        color: white;
+        color: var(--eva-text);
         text-decoration: none;
         display: block;
         font-size: 0.9rem;
@@ -460,6 +663,12 @@ def generate_eva_css() -> str:
         left: 100%;
     }
     
+    .eva-course-button {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        align-self: center;
+    }
+    
     .eva-cta {
         background-color: var(--eva-terminal-bg);
         border: 1px solid var(--eva-orange);
@@ -499,15 +708,20 @@ def generate_eva_css() -> str:
         padding-top: 2rem;
         border-top: 2px solid var(--eva-green);
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
         align-items: center;
-        flex-wrap: wrap;
         gap: 2rem;
     }
     
+    .eva-footer-logo {
+        max-width: 200px;
+        margin-bottom: 1rem;
+    }
+    
     .eva-footer-links {
         display: flex;
         gap: 1.5rem;
+        margin-bottom: 1.5rem;
     }
     
     .eva-footer-links a {
@@ -520,8 +734,26 @@ def generate_eva_css() -> str:
         color: var(--eva-green);
     }
     
+    .eva-social-links {
+        display: flex;
+        gap: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+    
+    .eva-social-links a {
+        color: var(--eva-text);
+        font-size: 1.5rem;
+        transition: var(--eva-transition);
+    }
+    
+    .eva-social-links a:hover {
+        color: var(--eva-green);
+        transform: translateY(-3px);
+    }
+    
     .eva-footer-copyright {
         font-size: 0.9rem;
+        text-align: center;
     }
     
     .eva-search {
@@ -543,7 +775,7 @@ def generate_eva_css() -> str:
     }
     
     .eva-search input:focus {
-        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
+        box-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
     }
     
     .eva-search input::placeholder {
@@ -639,7 +871,7 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
         with open(index_path, "w", encoding="utf-8") as f:
             f.write(
                 """<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -659,6 +891,9 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
                 <a href="#contribute">Contribute</a>
                 <a href="https://docs.marimo.io" target="_blank">Documentation</a>
                 <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a>
+                <button id="themeToggle" class="theme-toggle" aria-label="Toggle dark/light mode">
+                    <i class="fas fa-moon"></i>
+                </button>
             </nav>
         </header>
 
@@ -698,32 +933,126 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
             <div class="eva-search">
                 <input type="text" id="courseSearch" placeholder="Search courses and notebooks...">
                 <span class="eva-search-icon"><i class="fas fa-search"></i></span>
-    </div>
+            </div>
             <div class="eva-courses">
 """
             )
             
-            # Sort courses alphabetically
-            sorted_courses = sorted(courses.values(), key=lambda x: x["title"])
+            # Define the custom order for courses
+            course_order = ["python", "probability", "polars", "optimization", "functional_programming"]
+            
+            # Create a dictionary of courses by ID for easy lookup
+            courses_by_id = {course["id"]: course for course in courses.values()}
+            
+            # Determine which courses are "work in progress" based on description or notebook count
+            work_in_progress = set()
+            for course_id, course in courses_by_id.items():
+                # Consider a course as "work in progress" if it has few notebooks or contains specific phrases
+                if (len(course["notebooks"]) < 5 or 
+                    "work in progress" in course["description"].lower() or
+                    "help us add" in course["description"].lower() or
+                    "check back later" in course["description"].lower()):
+                    work_in_progress.add(course_id)
+            
+            # First output courses in the specified order
+            for course_id in course_order:
+                if course_id in courses_by_id:
+                    course = courses_by_id[course_id]
+                    
+                    # Skip if no notebooks
+                    if not course["notebooks"]:
+                        continue
+                    
+                    # Count notebooks
+                    notebook_count = len(course["notebooks"])
+                    
+                    # Determine if this course is a work in progress
+                    is_wip = course_id in work_in_progress
+                    
+                    f.write(
+                        f'<div class="eva-course" data-course-id="{course["id"]}">\n'
+                    )
+                    
+                    # Add WIP badge if needed
+                    if is_wip:
+                        f.write(f'    <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div>\n')
+                    
+                    f.write(
+                        f'    <div class="eva-course-header">\n'
+                        f'        <h2 class="eva-course-title">{course["title"]}</h2>\n'
+                        f'        <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span>\n'
+                        f'    </div>\n'
+                        f'    <div class="eva-course-front">\n'
+                        f'        <p class="eva-course-description">{course["description"]}</p>\n'
+                        f'        <div class="eva-course-stats">\n'
+                        f'            <span><i class="fas fa-book"></i> {notebook_count} notebook{"s" if notebook_count != 1 else ""}</span>\n'
+                        f'        </div>\n'
+                        f'        <button class="eva-button eva-course-button">View Notebooks</button>\n'
+                        f'    </div>\n'
+                        f'    <div class="eva-course-content">\n'
+                        f'        <div class="eva-notebooks">\n'
+                    )
+                    
+                    for i, notebook in enumerate(course["notebooks"]):
+                        # Use original file number instead of sequential numbering
+                        notebook_number = notebook.get("original_number", f"{i+1:02d}")
+                        f.write(
+                            f'            <div class="eva-notebook">\n'
+                            f'                <span class="eva-notebook-number">{notebook_number}</span>\n'
+                            f'                <a href="{notebook["path"].replace(".py", ".html")}" data-notebook-title="{notebook["display_name"]}">{notebook["display_name"]}</a>\n'
+                            f'            </div>\n'
+                        )
+
+                    f.write(
+                        f'        </div>\n'
+                        f'    </div>\n'
+                        f'</div>\n'
+                    )
+                    
+                    # Remove from the dictionary so we don't output it again
+                    del courses_by_id[course_id]
+            
+            # Then output any remaining courses alphabetically
+            sorted_remaining_courses = sorted(courses_by_id.values(), key=lambda x: x["title"])
             
-            for course in sorted_courses:
+            for course in sorted_remaining_courses:
                 # Skip if no notebooks
                 if not course["notebooks"]:
                     continue
-
+                
+                # Count notebooks
+                notebook_count = len(course["notebooks"])
+                
+                # Determine if this course is a work in progress
+                is_wip = course["id"] in work_in_progress
+                
                 f.write(
                     f'<div class="eva-course" data-course-id="{course["id"]}">\n'
+                )
+                
+                # Add WIP badge if needed
+                if is_wip:
+                    f.write(f'    <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div>\n')
+                
+                f.write(
                     f'    <div class="eva-course-header">\n'
                     f'        <h2 class="eva-course-title">{course["title"]}</h2>\n'
                     f'        <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span>\n'
                     f'    </div>\n'
-                    f'    <div class="eva-course-content">\n'
+                    f'    <div class="eva-course-front">\n'
                     f'        <p class="eva-course-description">{course["description"]}</p>\n'
+                    f'        <div class="eva-course-stats">\n'
+                    f'            <span><i class="fas fa-book"></i> {notebook_count} notebook{"s" if notebook_count != 1 else ""}</span>\n'
+                    f'        </div>\n'
+                    f'        <button class="eva-button eva-course-button">View Notebooks</button>\n'
+                    f'    </div>\n'
+                    f'    <div class="eva-course-content">\n'
                     f'        <div class="eva-notebooks">\n'
                 )
                 
                 for i, notebook in enumerate(course["notebooks"]):
-                    notebook_number = f"{i+1:02d}"
+                    # Use original file number instead of sequential numbering
+                    notebook_number = notebook.get("original_number", f"{i+1:02d}")
                     f.write(
                         f'            <div class="eva-notebook">\n'
                         f'                <span class="eva-notebook-number">{notebook_number}</span>\n'
@@ -753,19 +1082,58 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
         </section>
 
         <footer class="eva-footer">
-            <div class="eva-footer-copyright">
-                © 2024 Marimo Learn. Built with <a href="https://marimo.io" target="_blank" style="color: var(--eva-green);">marimo</a>.
+            <div class="eva-footer-logo">
+                <a href="https://marimo.io" target="_blank">
+                    <img src="https://marimo.io/logotype-wide.svg" alt="Marimo" width="200">
+                </a>
+            </div>
+            <div class="eva-social-links">
+                <a href="https://github.com/marimo-team" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
+                <a href="https://marimo.io/discord?ref=learn" target="_blank" aria-label="Discord"><i class="fab fa-discord"></i></a>
+                <a href="https://twitter.com/marimo_io" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                <a href="https://www.youtube.com/@marimo-io" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+                <a href="https://www.linkedin.com/company/marimo-io" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
             </div>
             <div class="eva-footer-links">
-                <a href="https://marimo.io" target="_blank">Marimo Website</a>
+                <a href="https://marimo.io" target="_blank">Website</a>
                 <a href="https://docs.marimo.io" target="_blank">Documentation</a>
                 <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a>
             </div>
+            <div class="eva-footer-copyright">
+                © 2025 Marimo Inc. All rights reserved.
+            </div>
         </footer>
     </div>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Theme toggle functionality
+            const themeToggle = document.getElementById('themeToggle');
+            const themeIcon = themeToggle.querySelector('i');
+            
+            // Check for saved theme preference or use default (dark)
+            const savedTheme = localStorage.getItem('theme') || 'dark';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeIcon(savedTheme);
+            
+            // Toggle theme when button is clicked
+            themeToggle.addEventListener('click', () => {
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                
+                document.documentElement.setAttribute('data-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                updateThemeIcon(newTheme);
+            });
+            
+            function updateThemeIcon(theme) {
+                if (theme === 'dark') {
+                    themeIcon.className = 'fas fa-sun';
+                } else {
+                    themeIcon.className = 'fas fa-moon';
+                }
+            }
+            
             // Terminal typing effect for hero text
             const heroTitle = document.querySelector('.eva-hero h1');
             const heroText = document.querySelector('.eva-hero p');
@@ -801,47 +1169,65 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
             
             typeTitle();
             
-            // Course toggle functionality - fixed to only open one at a time
+            // Course toggle functionality - flashcard style
             const courseHeaders = document.querySelectorAll('.eva-course-header');
+            const courseButtons = document.querySelectorAll('.eva-course-button');
             
+            // Function to toggle course
+            function toggleCourse(course) {
+                const isActive = course.classList.contains('active');
+                
+                // First close all courses
+                document.querySelectorAll('.eva-course').forEach(c => {
+                    c.classList.remove('active');
+                });
+                
+                // Toggle the clicked course
+                if (!isActive) {
+                    course.classList.add('active');
+                    
+                    // Check if the course has any notebooks
+                    const notebooks = course.querySelectorAll('.eva-notebook');
+                    const content = course.querySelector('.eva-course-content');
+                    
+                    if (notebooks.length === 0 && !content.querySelector('.eva-empty-message')) {
+                        // If no notebooks, show a message
+                        const emptyMessage = document.createElement('p');
+                        emptyMessage.className = 'eva-empty-message';
+                        emptyMessage.textContent = 'No notebooks available in this course yet.';
+                        emptyMessage.style.color = 'var(--eva-text)';
+                        emptyMessage.style.fontStyle = 'italic';
+                        emptyMessage.style.opacity = '0.7';
+                        emptyMessage.style.textAlign = 'center';
+                        emptyMessage.style.padding = '1rem 0';
+                        content.appendChild(emptyMessage);
+                    }
+                }
+            }
+            
+            // Add click event to course headers
             courseHeaders.forEach(header => {
                 header.addEventListener('click', function(e) {
                     e.preventDefault();
                     e.stopPropagation();
                     
-                    const currentCourse = this.parentElement;
-                    const isActive = currentCourse.classList.contains('active');
-                    
-                    // First close all courses
-                    document.querySelectorAll('.eva-course').forEach(course => {
-                        course.classList.remove('active');
-                    });
+                    const currentCourse = this.closest('.eva-course');
+                    toggleCourse(currentCourse);
+                });
+            });
+            
+            // Add click event to course buttons
+            courseButtons.forEach(button => {
+                button.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
                     
-                    // Toggle the clicked course
-                    if (!isActive) {
-                        currentCourse.classList.add('active');
-                        
-                        // Check if the course has any notebooks
-                        const notebooks = currentCourse.querySelectorAll('.eva-notebook');
-                        const content = currentCourse.querySelector('.eva-course-content');
-                        
-                        if (notebooks.length === 0 && !content.querySelector('.eva-empty-message')) {
-                            // If no notebooks, show a message
-                            const emptyMessage = document.createElement('p');
-                            emptyMessage.className = 'eva-empty-message';
-                            emptyMessage.textContent = 'No notebooks available in this course yet.';
-                            emptyMessage.style.color = 'var(--eva-text)';
-                            emptyMessage.style.fontStyle = 'italic';
-                            emptyMessage.style.opacity = '0.7';
-                            emptyMessage.style.textAlign = 'center';
-                            emptyMessage.style.padding = '1rem 0';
-                            content.appendChild(emptyMessage);
-                        }
-                    }
+                    const currentCourse = this.closest('.eva-course');
+                    toggleCourse(currentCourse);
                 });
             });
             
-            // Search functionality
+            // Search functionality with improved matching
             const searchInput = document.getElementById('courseSearch');
             const courses = document.querySelectorAll('.eva-course');
             const notebooks = document.querySelectorAll('.eva-notebook');
@@ -881,6 +1267,10 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
                 // Then show courses and notebooks that match the search
                 let hasResults = false;
                 
+                // Track which courses have matching notebooks
+                const coursesWithMatchingNotebooks = new Set();
+                
+                // First check notebooks
                 notebooks.forEach(notebook => {
                     const notebookTitle = notebook.querySelector('a').getAttribute('data-notebook-title').toLowerCase();
                     const matchesSearch = notebookTitle.includes(searchTerm);
@@ -889,21 +1279,31 @@ def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
                     
                     if (matchesSearch) {
                         const course = notebook.closest('.eva-course');
-                        course.style.display = 'block';
-                        course.classList.add('active');
+                        coursesWithMatchingNotebooks.add(course.getAttribute('data-course-id'));
                         hasResults = true;
                     }
                 });
                 
-                // Also search course titles
+                // Then check course titles and descriptions
                 courses.forEach(course => {
+                    const courseId = course.getAttribute('data-course-id');
                     const courseTitle = course.querySelector('.eva-course-title').textContent.toLowerCase();
                     const courseDescription = course.querySelector('.eva-course-description').textContent.toLowerCase();
                     
-                    if (courseTitle.includes(searchTerm) || courseDescription.includes(searchTerm)) {
+                    const courseMatches = courseTitle.includes(searchTerm) || courseDescription.includes(searchTerm);
+                    
+                    // Show course if it matches or has matching notebooks
+                    if (courseMatches || coursesWithMatchingNotebooks.has(courseId)) {
                         course.style.display = 'block';
                         course.classList.add('active');
                         hasResults = true;
+                        
+                        // If course matches but doesn't have matching notebooks, show all its notebooks
+                        if (courseMatches && !coursesWithMatchingNotebooks.has(courseId)) {
+                            course.querySelectorAll('.eva-notebook').forEach(nb => {
+                                nb.style.display = 'flex';
+                            });
+                        }
                     }
                 });
             });