Show all icons from the current release in the sidebar instead of just one

Author: quincylvania

docs/css/main.css

@@ -31,9 +31,6 @@ h1 {
 h2 {
   font-size: 18px;
   font-weight: 700;
-  margin-bottom: 10px;
-  border-bottom: 1px dashed var(--text-color);
-  padding-bottom: 10px;
 }
 hr {
   border: 0;
@@ -70,13 +67,24 @@ img.inline-icon, a.inline-icon img {
   display: flex;
   flex-direction: column;
   flex-basis: 200px;
-  line-height: 2em;
+  line-height: 1.5em;
   border-left: 1px solid var(--text-color);
   padding-left: 16px;
 }
 #sidebar a {
   width: fit-content;
 }
+#sidebar > * {
+  margin-bottom: 10px;
+}
+.version-title {
+  padding-bottom: 10px;
+  border-bottom: 1px dashed var(--text-color);
+}
+#sidebar .icon-grid {
+    padding-bottom: 10px;
+    border-bottom: 1px dashed var(--text-color);
+}
 article {
   line-height: 22px;
 }
@@ -106,21 +114,23 @@ article > * {
 }
 
 #icon-gallery {
+  padding-bottom: 30px;
+  border-bottom: 2px solid var(--text-color);
+}
+.icon-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  padding-bottom: 30px;
-  border-bottom: 2px solid var(--text-color);
 }
-#icon-gallery a {
+.icon-grid a {
   min-width: 0;
   min-height: 0;
   display:block;
   width:15px;
   height:15px;
   flex:0 0 15px;
 }
-#icon-gallery a svg {
+.icon-grid a svg {
   min-width: 0;
   min-height: 0;
   display:block;

docs/index.html

@@ -34,7 +34,7 @@
         </div>
       </div>
       <hr/>
-      <div id="icon-gallery"></div>
+      <div id="icon-gallery" class="icon-grid"></div>
       <div id="body-area">
         <article>
           <p><span style="font-size: 1.5em;">So you're making a map</span> and need some <b>icons</b>. Well, maybe <b>a lot</b> of icons. Like, for anything that might appear on a <b>map</b>. And they need to be visually <b>consistent</b>. Like the size and direction and whatever. And they gotta be <b>free</b>. Even <b>public domain</b>. In <b>vector</b> format. With <b>no AI</b>. Oh, and they all need to be <b>legible</b> on the <b>head of a pin</b>.</p>

docs/index.js

@@ -16,7 +16,13 @@ window.addEventListener('load', _ => {
     });
 });
 
-function setupPage(pageData) {
+async function setupPage(pageData) {
+  const migrations = await fetch('migrations.json')
+    .then(result => result.json());
+
+  const currentMigrations = migrations.find(item => item.to_major_version === majorVersion);
+  const newIconIds = currentMigrations.icon_migrations.filter(mig => mig.new_id && (!mig.old_id || mig.redesign)).map(mig => mig.new_id);
+
   const parser = new DOMParser();
   const icons = pageData.icons;
 
@@ -28,17 +34,21 @@ function setupPage(pageData) {
   document.getElementById('sidebar')
     .insertAdjacentHTML("afterbegin", [
       new Chainable('h2')
-        .append(
-          new Chainable('a')
-            .setAttribute('class', 'inline-icon')
-            .setAttribute('href', '#' + packageJson.versionIcon.slice(0, -4).split('/').slice(-1)[0])
-            .append(
-              new Chainable('img')
-                .setAttribute('src', packageJson.versionIcon || "/v1/heart.svg")
-            ),
-            new Chainable('span')
-              .append('v' + version)
+        .setAttribute('class', 'version-title')
+        .append('v' + version),
+      new Chainable('div')
+        .setAttribute('class', 'icon-grid')
+        .insertAdjacentHTML("afterbegin",
+          newIconIds.map(iconId => {
+            const icon = icons[iconId];
+            return new Chainable('a')
+              .setAttribute('href', '#' + iconId)
+              .setAttribute('title', iconId)
+              .insertAdjacentHTML("afterbegin", icon.svg)
+            }
+          ).join('')
         ),
+        
       new Chainable('a')
         .setAttribute('href', `https://github.com/waysidemapping/pinhead/releases/download/v${version}/waysidemapping-pinhead-${version}.tgz`)
         .append(

migrations.json

@@ -73,34 +73,33 @@
         "new_id": "car_profile_with_raised_hood"
       },
       {
-        "new_id": "compact_box_truck"
-      },
-      {
-        "new_id": "compact_box_truck_with_greek_cross"
+        "new_id": "pickup_truck"
       },
       {
-        "new_id": "compact_box_truck_with_heavy_six_point_asterisk"
+        "new_id": "pickup_truck_with_raised_hood"
       },
       {
-        "new_id": "flatbed_truck"
+        "new_id": "pickup_truck_with_crates"
       },
       {
-        "new_id": "pickup_truck"
+        "new_id": "pickup_truck_with_slidein_camper"
       },
       {
-        "new_id": "pickup_truck_with_crates"
+        "new_id": "compact_box_truck"
       },
       {
-        "new_id": "pickup_truck_with_raised_hood"
+        "new_id": "compact_box_truck_with_greek_cross"
       },
       {
-        "new_id": "pickup_truck_with_slidein_camper"
+        "new_id": "compact_box_truck_with_heavy_six_point_asterisk"
       },
       {
-        "new_id": "mobile_phone_with_keypad_and_antenna_and_wifi"
+        "old_id": "truck_profile",
+        "new_id": "box_truck",
+        "redesign": true
       },
       {
-        "new_id": "mobile_phone_with_touchscreen_and_antenna_and_wifi"
+        "new_id": "flatbed_truck"
       },
       {
         "new_id": "maple_leaf"
@@ -111,9 +110,10 @@
         "redesign": true
       },
       {
-        "old_id": "truck_profile",
-        "new_id": "box_truck",
-        "redesign": true
+        "new_id": "mobile_phone_with_keypad_and_antenna_and_wifi"
+      },
+      {
+        "new_id": "mobile_phone_with_touchscreen_and_antenna_and_wifi"
       }
     ]
   }