From be9cf6dae49c1cbd7c94632b1932b5a8b5c3f49c Mon Sep 17 00:00:00 2001
From: Michael Kauzmann <michael.kauzmann@colorado.edu>
Date: Tue, 12 Mar 2024 19:32:30 -0600
Subject: [PATCH] Add KeyboardHelpDialog to binder,
 https://github.com/phetsims/a11y-research/issues/195

Signed-off-by: Michael Kauzmann <michael.kauzmann@colorado.edu>
---
 README.md              |  2 +-
 js/createHTMLString.js | 58 ++++++++++++++++++++++--------------------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index dd64954..95f291c 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ To generate docs with only specific simulation examples, add them as an argument
 
 The generated docs load sim to gather runtime information. To bypass this step and use stored data from sim loads:
 
-    `npm run build-json`
+    `npm run build-html`
 
 NOTE: This will only log out the html string, not write it to the output file. The above snippet will copy the output
 into a file of your choosing.
diff --git a/js/createHTMLString.js b/js/createHTMLString.js
index cfdf1a3..13307bc 100644
--- a/js/createHTMLString.js
+++ b/js/createHTMLString.js
@@ -71,12 +71,6 @@ const createHTMLString = function( data ) {
   const simsByComponent = Object.keys( components ).map( component => {
     return { name: component, sims: Object.keys( components[ component ] ) };
   } );
-
-  const baseTemplate = getHandlebarsTemplate( 'base.html' );
-  const parentComponentTemplate = getHandlebarsTemplate( 'parentComponent.html' );
-  const singleComponentTemplate = getHandlebarsTemplate( 'singleComponent.html' );
-  const componentsBySimulationTemplate = getHandlebarsTemplate( 'componentsBySimulation.html' );
-  const simsByComponentTemplate = getHandlebarsTemplate( 'simsByComponent.html' );
   let contentHTML = '';
 
   // get list of files in all docs/ directories, excluding binder (can be async)
@@ -89,13 +83,42 @@ const createHTMLString = function( data ) {
     mdData[ name ] = processFile( docPath );
   }
 
+// handlebars helper functions
+  handlebars.registerHelper( 'componentLink', ( repo, component ) => {
+    return new handlebars.SafeString(
+      `<a href="https://github.com/phetsims/${repo}/blob/main/js/${component}.ts">Source Code and Options</a>`
+    );
+  } );
+
+  handlebars.registerHelper( 'simPageLink', simName => {
+    return new handlebars.SafeString(
+      `<a href="https://phet.colorado.edu/en/simulation/${simName}" target="_blank">PhET Simulation Page</a>`
+    );
+  } );
+
+  handlebars.registerHelper( 'navList', ( components, parentRepo ) => {
+    let itemsHTML = components.map( c => {
+      const repo = mdData[ c ]?.repo || parentRepo;
+      return `<li><a href="#${repo}-${c}">${c}</a></li>`;
+    } ).join( '\n' );
+    return `<ul class="nav bd-sidenav">${itemsHTML}</ul>`;
+  } );
+
   const parentComponents = Object.values( mdData ).filter( component => component.data.parent );
+
+  const baseTemplate = getHandlebarsTemplate( 'base.html' );
+  const parentComponentTemplate = getHandlebarsTemplate( 'parentComponent.html' );
+  const singleComponentTemplate = getHandlebarsTemplate( 'singleComponent.html' );
+  const componentsBySimulationTemplate = getHandlebarsTemplate( 'componentsBySimulation.html' );
+  const simsByComponentTemplate = getHandlebarsTemplate( 'simsByComponent.html' );
+
   // loop over each parent component
   for ( const parent of parentComponents ) {
     let componentsHTML = '';
 
     for ( const component of parent.data.components ) {
-      const repoComponent = `${parent.repo}/${component}`;
+      const repo = mdData[ component ]?.repo || parent.repo;
+      const repoComponent = `${repo}/${component}`;
       const simObject = components[ repoComponent ];
       const simCount = simObject ? Object.keys( simObject ).length : 0;
       const sims = simObject ?
@@ -113,7 +136,7 @@ const createHTMLString = function( data ) {
         sims: sims,
         simCount: simCount,
         markdown: markdown,
-        repo: parent.repo
+        repo: repo
       };
 
       componentsHTML += singleComponentTemplate( componentContext );
@@ -140,25 +163,6 @@ const createHTMLString = function( data ) {
   } );
 };
 
-// handlebars helper functions
-handlebars.registerHelper( 'componentLink', ( repo, component ) => {
-  return new handlebars.SafeString(
-    `<a href="https://github.com/phetsims/${repo}/blob/main/js/${component}.js">Source Code and Options</a>`
-  );
-} );
-
-handlebars.registerHelper( 'simPageLink', simName => {
-  return new handlebars.SafeString(
-    `<a href="https://phet.colorado.edu/en/simulation/${simName}" target="_blank">PhET Simulation Page</a>`
-  );
-} );
-
-handlebars.registerHelper( 'navList', ( components, repo ) => {
-  let itemsHTML = components.map( c => `<li><a href="#${repo}-${c}">${c}</a></li>` ).join( '\n' );
-  itemsHTML += '<li><a href="#sims">Sorted By Simulation</a></li>';
-  return `<ul class="nav bd-sidenav">${itemsHTML}</ul>`;
-} );
-
 /**
  * @param data sim => componentName => [dataURLs]
  * @returns {string}