tut spa: simplify index

pthom · Dec 31, 2024 · df75360 · df75360
1 parent 8dfcc00
commit df75360
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 31 deletions.
diff --git a/tutorial/single_page_book_app/index.html b/tutorial/single_page_book_app/index.html
@@ -9,9 +9,10 @@
 </head>
 <body>
 <header class="main-header">
-    <button id="toggle-sidebar">☰</button>
     <div class="header-buttons">
-        <!-- Placeholder for additional buttons -->
+    </div>
+
+    <div class="header-buttons">
         <a href="https://github.com" target="_blank" class="header-btn">GitHub</a>
     </div>
 </header>
@@ -25,8 +26,8 @@ <h1>Immediate GUI Tutorial</h1>
     <main id="content-area-wrapper">
         <div id="content-area"></div>
     </main>
-    <aside id="code-panel">
-        <div id="breadcrumb-container" class="vertical-breadcrumbs"></div>
+    <aside id="sections-sidebar">
+        <div class="sections-sidebar"></div>
     </aside>
 </div>
 <div id="canvas-window" class="draggable-resizable">

diff --git a/tutorial/single_page_book_app/resources_singlepage/app.js b/tutorial/single_page_book_app/resources_singlepage/app.js
@@ -1,13 +1,11 @@
 import { initTOC, tocRoot } from "./toc_loader.js";
 import { loadPage } from "./page_loader.js";
 import {registerCanvasDragEvents} from "./canvas_drag"
-import { registerSidebarToggle } from "./toggle_sidebars.js";
 import { initializePyodideHelper, runPythonCode } from "./pyodide_helper.js";
 
 async function initializeAll() {
     await initTOC();
     registerCanvasDragEvents();
-    registerSidebarToggle();
     const rootPage = tocRoot()
     loadPage(rootPage.file + ".md");
 

diff --git a/tutorial/single_page_book_app/resources_singlepage/page_loader.js b/tutorial/single_page_book_app/resources_singlepage/page_loader.js
@@ -1,7 +1,7 @@
 import { marked } from "marked";
 import { baseUrl } from "marked-base-url";
 import { prepareCodeEditors } from "./code_editor.js";
-import { updateBreadcrumbs } from "./breadcrumbs.js";
+import { updatePageSections } from "./page_sections.js";
 
 // Custom renderer to preserve `{literalinclude}` directives
 const renderer = new marked.Renderer();
@@ -23,5 +23,5 @@ export async function loadPage(mdPath) {
     await prepareCodeEditors(mdText, baseUrlPath);
 
     // Update breadcrumbs after the content is loaded
-    updateBreadcrumbs();
+    updatePageSections();
 }
diff --git a/...k_app/resources_singlepage/breadcrumbs.js → ...app/resources_singlepage/page_sections.js b/...k_app/resources_singlepage/breadcrumbs.js → ...app/resources_singlepage/page_sections.js
@@ -1,10 +1,10 @@
-export function updateBreadcrumbs() {
+export function updatePageSections() {
     const contentArea = document.getElementById("content-area");
     const h2Elements = contentArea.querySelectorAll("h2");
-    const breadcrumbContainer = document.querySelector(".vertical-breadcrumbs");
+    const sectionsContainer = document.querySelector(".sections-sidebar");
 
     // Clear previous breadcrumbs
-    breadcrumbContainer.innerHTML = "";
+    sectionsContainer.innerHTML = "";
 
     // Create a list of H2 headings as vertical links
     h2Elements.forEach((h2) => {
@@ -17,6 +17,6 @@ export function updateBreadcrumbs() {
         const link = document.createElement("a");
         link.href = `#${h2.id}`;
         link.textContent = h2.textContent;
-        breadcrumbContainer.appendChild(link);
+        sectionsContainer.appendChild(link);
     });
 }
diff --git a/tutorial/single_page_book_app/resources_singlepage/style.css b/tutorial/single_page_book_app/resources_singlepage/style.css
@@ -214,7 +214,7 @@ body {
 /* ==========================
    Breadcrumbs
 ========================== */
-.vertical-breadcrumbs {
+.sections-sidebar {
     grid-area: canvas;
     display: flex;
     flex-direction: column;
@@ -226,14 +226,14 @@ body {
     height: 100%;
 }
 
-.vertical-breadcrumbs a {
+.sections-sidebar a {
     color: #007bff;
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
     text-decoration: none;
 }
 
-.vertical-breadcrumbs a:hover {
+.sections-sidebar a:hover {
     background-color: #f0f8ff;
 }
 

diff --git a/tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js b/tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js