feat: display every focusable part

index.html

@@ -113,7 +113,7 @@
         </section>
         <section class="stability">
           <ul class="stability-list focusable">
-            <li class="s5s focusable">
+            <li class="5s focusable">
               <!-- <a href="/5s.html">5S</a> -->
               5S
             </li>
@@ -144,6 +144,9 @@
           <code>focus</code>: focus only
           <a href="?focus=pull-system">a part</a> of the TPS. Can be
           <a href="?focus=pull-system&focus=andon&focus=quality">multiple</a>.
+          (Here are all the possible values:
+          <span id="focus-list"></span>
+          )
         </li>
         <li>
           <code>text</code>: <a href="?text=hide">hide</a> text to only have the

main.ts

@@ -2,6 +2,26 @@ const params = new URL(document.location.href).searchParams
 
 const display = params.get('display')
 
+const focusables = document.querySelectorAll('.focusable')
+const focusList = document.querySelector('#focus-list')
+
+if (focusList) {
+  focusables.forEach((focusable, index) => {
+    const a = document.createElement('a')
+    a.textContent = [...focusable.classList]
+      .filter((c) => c !== 'focusable')
+      .join(' ')
+    a.href = `?focus=${a.textContent}`
+    focusList.appendChild(a)
+
+    if (index === focusables.length - 1) {
+      return
+    }
+    const space = document.createTextNode(', ')
+    focusList.appendChild(space)
+  })
+}
+
 if (display === 'house-only') {
   document.querySelectorAll('.hud')?.forEach((hud) => hud.remove())
 }