Folding now possible in documentation

index.html

@@ -126,8 +126,8 @@
       <div id="documentation-page" class="flex flex-row">
         <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
           <nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
-            <div class="">
+            <details class="" open=true>
-              <h2 class="font-semibold lg:text-xl text-gray-400">Basics</h2>
+              <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
                 <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
@@ -135,9 +135,9 @@
                 <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
                 <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
 							</div>
-						</div>
+						</details>
-            <div class="space-y-2">
+            <details class="space-y-2" open=true>
-              <h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Learning</h2>
+              <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time/Rhythm</p>
                 <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Audio Engine</p>
@@ -145,9 +145,9 @@
                 <p rel="noopener noreferrer" id="docs_synths" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
                 <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
 							</div>
-						</div>
+						</details>
-            <div class="space-y-2">
+            <details class="space-y-2" open=true>
-              <h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Patterns</h2>
+              <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
                 <p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Variables</p>
@@ -160,15 +160,15 @@
                 <p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
 								-->
               </div>
-            </div>
+            </details>
-            <div class="space-y-2">
+            <details class="space-y-2" open=true>
-              <h2 class="font-semibold lg:text-xl text-gray-400">More</h2>
+              <summary class="font-semibold lg:text-xl text-orange-300">More</summary>
               <div class="flex flex-col">
                 <a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
                 <a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
                 <a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
               </div>
-            </div>
+            </details>
          </nav>
         </aside>
         <div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32">

src/Documentation.ts

@@ -24,14 +24,8 @@ import { bonus } from "./documentation/bonus";
 // Setting up the Markdown converter with syntax highlighting
 import showdown from "showdown";
 import showdownHighlight from "showdown-highlight";
+import { createDocumentationStyle } from "./DomElements";
 showdown.setFlavor("github");
-import { classMap } from "./DomElements";
-const bindings = Object.keys(classMap).map((key) => ({
-  type: "output",
-  regex: new RegExp(`<${key}([^>]*)>`, "g"),
-  //@ts-ignore
-  replace: (match, p1) => `<${key} class="${classMap[key]}" ${p1}>`,
-}));
 
 export const key_shortcut = (shortcut: string): string => {
   return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
@@ -64,6 +58,7 @@ export const makeExampleFactory = (application: Editor): Function => {
 };
 
 export const documentation_factory = (application: Editor) => {
+
   // Initialize a data structure to store code examples by their unique IDs
   application.api.codeExamples = {};
 
@@ -93,6 +88,7 @@ export const documentation_factory = (application: Editor) => {
 };
 
 export const showDocumentation = (app: Editor) => {
+
   if (document.getElementById("app")?.classList.contains("hidden")) {
     document.getElementById("app")?.classList.remove("hidden");
     document.getElementById("documentation")?.classList.add("hidden");
@@ -101,7 +97,14 @@ export const showDocumentation = (app: Editor) => {
     document.getElementById("app")?.classList.add("hidden");
     document.getElementById("documentation")?.classList.remove("hidden");
     // Load and convert Markdown content from the documentation file
-    updateDocumentationContent(app);
+    let style = createDocumentationStyle(app);
+    let bindings = Object.keys(style).map((key) => ({
+      type: "output",
+      regex: new RegExp(`<${key}([^>]*)>`, "g"),
+      //@ts-ignore
+      replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
+    }));
+    updateDocumentationContent(app, bindings);
   }
 };
 
@@ -112,7 +115,7 @@ export const hideDocumentation = () => {
   }
 };
 
-export const updateDocumentationContent = (app: Editor) => {
+export const updateDocumentationContent = (app: Editor, bindings: any) => {
   const converter = new showdown.Converter({
     emoji: true,
     moreStyling: true,

src/DomElements.ts

@@ -1,3 +1,6 @@
+import { type Editor } from "./main";
+
+
 export type ElementMap = {
   [key: string]:
   | HTMLElement
@@ -58,17 +61,18 @@ export const buttonGroups = {
   clear_buttons: ["clear-button-1"],
 };
 
-export const classMap = {
+export const createDocumentationStyle = (app: Editor) => {
-  h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
+  return {
-  h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
+    h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2",
-  h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-700 rounded-lg py-2 px-2 lg:mt-16",
+    h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2",
+    h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2 lg:mt-16",
     ul: "text-underline pl-6",
     li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
     p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
     warning:
       "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
     a: "lg:text-2xl text-base text-orange-300",
-  code: "lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden",
+    code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
     icode:
       "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
     ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
@@ -83,4 +87,7 @@ export const classMap = {
     th: "",
     td: "",
     tr: "",
-};
+  };
+}
+
+

src/InterfaceLogic.ts

@@ -22,8 +22,18 @@ import { tryEvaluate } from "./Evaluator";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { lineNumbers } from "@codemirror/view";
 import { jsCompletions } from "./EditorSetup";
+import { createDocumentationStyle } from "./DomElements";
 
 export const installInterfaceLogic = (app: Editor) => {
+  // Initialize style
+  const documentationStyle = createDocumentationStyle(app);
+  const bindings = Object.keys(documentationStyle).map((key) => ({
+    type: "output",
+    regex: new RegExp(`<${key}([^>]*)>`, "g"),
+    //@ts-ignore
+    replace: (match, p1) => `<${key} class="${documentationStyle[key]}" ${p1}>`,
+  }));
+
   (app.interface.line_numbers_checkbox as HTMLInputElement).checked =
     app.settings.line_numbers;
   (app.interface.time_position_checkbox as HTMLInputElement).checked =
@@ -469,13 +479,13 @@ export const installInterfaceLogic = (app: Editor) => {
     document.getElementById(name)!.addEventListener("click", async () => {
       if (name !== "docs_samples") {
         app.currentDocumentationPane = e;
-        updateDocumentationContent(app);
+        updateDocumentationContent(app, bindings);
       } else {
         console.log("Loading samples!");
         await loadSamples().then(() => {
           app.docs = documentation_factory(app);
           app.currentDocumentationPane = e;
-          updateDocumentationContent(app);
+          updateDocumentationContent(app, bindings);
         });
       }
     });