From 4d05b85b547589696a6c204dc117e5c51d4ca89f Mon Sep 17 00:00:00 2001
From: Yi-Ting Tu <ricktu256@gmail.com>
Date: Thu, 12 Dec 2024 15:18:49 -0500
Subject: [PATCH] Improve styles of webpages

---
 scripts/buildWebpages.mjs        | 21 +++++++++++++++++----
 src/webpages/gallery.hbs         |  2 +-
 src/webpages/modules.hbs         |  9 +++++----
 src/webpages/partials/footer.hbs |  2 +-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/scripts/buildWebpages.mjs b/scripts/buildWebpages.mjs
index aeb55368..521eb3c0 100644
--- a/scripts/buildWebpages.mjs
+++ b/scripts/buildWebpages.mjs
@@ -131,8 +131,19 @@ const moduleData = JSON.parse(fs.readFileSync(path.join(__dirname, '../locales/e
 const moduleControlPointSequenceKeys = {};
 const moduleParametersKeys = {};
 for (const id in moduleData) {
-  moduleControlPointSequenceKeys[id] = Object.keys(moduleData[id]).filter(key => key.startsWith('point'));
-  moduleParametersKeys[id] = Object.keys(moduleData[id]).filter(key => !key.startsWith('point') && key != 'title' && key != 'description');
+  // Load the module scene data
+  const moduleSceneData = JSON.parse(fs.readFileSync(path.join(__dirname, '../data/moduleScenes', id + '.json'), 'utf8'));
+  const moduleDef = moduleSceneData.modules[id];
+  const numPoints = moduleDef.numPoints;
+  moduleControlPointSequenceKeys[id] = [];
+  moduleParametersKeys[id] = {};
+  for (let i = 1; i <= numPoints; i++) {
+    moduleControlPointSequenceKeys[id].push(`modules:moduleData.${id}.point${i}`);
+  }
+  for (const param of moduleDef.params) {
+    const paramName = param.split('=')[0];
+    moduleParametersKeys[id][paramName] = `modules:moduleData.${id}.${paramName.replace(/_/g, '')}`;
+  }
 }
 
 // List all module ids in the moduleList
@@ -565,8 +576,10 @@ for (const lang of homeLangs) {
           titleKey: 'modules:moduleData.' + item.id + '.title',
           contributors: item.contributors.join(', '),
           descriptionKey: 'modules:moduleData.' + item.id + '.description',
-          controlPointSequenceKeys: moduleControlPointSequenceKeys[item.id].map(key => 'modules:moduleData.' + item.id + '.' + key),
-          parametersKeys: moduleParametersKeys[item.id].map(key => 'modules:moduleData.' + item.id + '.' + key),
+          hasControlPoints: moduleControlPointSequenceKeys[item.id].length > 0,
+          hasParameters: Object.keys(moduleParametersKeys[item.id]).length > 0,
+          controlPointSequenceKeys: moduleControlPointSequenceKeys[item.id],
+          parametersKeys: moduleParametersKeys[item.id],
         };
       }),
     }
diff --git a/src/webpages/gallery.hbs b/src/webpages/gallery.hbs
index ff2ce103..6d2f09bf 100644
--- a/src/webpages/gallery.hbs
+++ b/src/webpages/gallery.hbs
@@ -77,7 +77,7 @@
         <a href="{{url}}" class="thumbnail example-container">
           <picture>
             <source srcset="{{url}}-thumbnail.avif" type="image/avif">
-            <img src="{{url}}-thumbnail.jpg" alt="{{t titleKey}}" class="img-rounded example-image" loading="lazy">
+            <img src="{{url}}-thumbnail.jpg" alt="{{title}}" class="img-rounded example-image" loading="lazy">
           </picture>
           <div class="caption">
             <p class="example-title">{{title}}</p>
diff --git a/src/webpages/modules.hbs b/src/webpages/modules.hbs
index 4b26662c..e56b389f 100644
--- a/src/webpages/modules.hbs
+++ b/src/webpages/modules.hbs
@@ -57,9 +57,6 @@
       font-size: 12pt;
     }
 
-    ul {
-      padding-left: 1rem;
-    }
   </style>
 </head>
 
@@ -89,18 +86,22 @@
       </div>
     </div>
     <div id="details-collapse-{{this.id}}" class="collapse">
+      {{#if this.hasControlPoints}}
       {{t "modules:modulesPage:specification:controlPointSequence"}}
       <ol>
         {{#each this.controlPointSequenceKeys}}
         <li>{{t this blank=true}}</li>
         {{/each}}
       </ol>
+      {{/if}}
+      {{#if this.hasParameters}}
       {{t "modules:modulesPage:specification:parameters"}}
       <ul>
         {{#each this.parametersKeys}}
-        <li>{{t this blank=true}}</li>
+        <li><code>{{@key}}</code>: {{t this blank=true}}</li>
         {{/each}}
       </ul>
+      {{/if}}
     </div>
     {{/each}}
   </div>
diff --git a/src/webpages/partials/footer.hbs b/src/webpages/partials/footer.hbs
index c182bd22..ddc90d51 100644
--- a/src/webpages/partials/footer.hbs
+++ b/src/webpages/partials/footer.hbs
@@ -1,4 +1,4 @@
-<div style="float: right;">
+<div style="float: right; padding-bottom: 1em;">
   <div class="dropup">
     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
       <span id="language">{{t "main:languageDropdown.title" language=langName}}</span>