Update template to support showing top 5 for each category

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

templates/index.html

@@ -43,6 +43,35 @@
       padding: 6px;
     }
 
+    .modal {
+      display: none;
+      position: absolute;
+      top: 25%;
+      left: 25%;
+      height: 430px;
+      width: 50%;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      background-color: #f9f9f9;
+      box-shadow: 2px 2px 2px #ccc;
+      padding: 4px;
+    }
+    .modal.show {
+      display: block;
+    }
+    .modal .books {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 400px;
+      overflow-x: scroll;
+    }
+    .modal .books div {
+      margin: 6px;
+      display: flex;
+      flex-direction: column;
+    }
+
     main > .category:nth-of-type(1),
     main > .category:nth-of-type(2),
     main > .category:nth-of-type(3) {
@@ -59,6 +88,10 @@
       main > .category:nth-of-type(3) {
         grid-column: span 2;
       }
+
+      .modal .books {
+        flex-direction: column;
+      }
     }
   </style>
 </head>
@@ -86,7 +119,29 @@
         </a>
         <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
         <div class="rating">⭐ {{ $book.Rating }}</div>
+        <div class="more-link"><a href="#">[ Show More ]</a></div>
+        <div class="modal">
+          <div><a href="#" class="close">[Close]</a></div>
+          <div class="books">
+            {{ range $i, $Book := (index .Books $cat) }}
+              {{ if eq $i 1 }}
+              {{ continue }}
+              {{ end }}
+              <div>
+                <a href="{{ $Book.Link }}" target="_blank">
+                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
+                </a>
+                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
+                <div class="rating">⭐ {{ $Book.Rating }}</div>
+              </div>
+              {{ if eq $i 5 }}
+              {{ break }}
+              {{ end }}
+            {{ end }}
+          </div>
+        </div>
       </div>
+
       {{ $cat := "Non-Fiction" }}
       {{ $book := index (index .Books $cat) 0 }}
       <div class="category">
@@ -96,7 +151,29 @@
         </a>
         <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
         <div class="rating">⭐ {{ $book.Rating }}</div>
+        <div class="more-link"><a href="#">[ Show More ]</a></div>
+        <div class="modal">
+          <div><a href="#" class="close">[Close]</a></div>
+          <div class="books">
+            {{ range $i, $Book := (index .Books $cat) }}
+              {{ if eq $i 1 }}
+              {{ continue }}
+              {{ end }}
+              <div>
+                <a href="{{ $Book.Link }}" target="_blank">
+                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
+                </a>
+                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
+                <div class="rating">⭐ {{ $Book.Rating }}</div>
+              </div>
+              {{ if eq $i 5 }}
+              {{ break }}
+              {{ end }}
+            {{ end }}
+          </div>
+        </div>
       </div>
+
       {{ $cat := "Comics" }}
       {{ $book := index (index .Books $cat) 0 }}
       <div class="category">
@@ -106,6 +183,27 @@
         </a>
         <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
         <div class="rating">⭐ {{ $book.Rating }}</div>
+        <div class="more-link"><a href="#">[ Show More ]</a></div>
+        <div class="modal">
+          <div><a href="#" class="close">[Close]</a></div>
+          <div class="books">
+            {{ range $i, $Book := (index .Books $cat) }}
+              {{ if eq $i 1 }}
+              {{ continue }}
+              {{ end }}
+              <div>
+                <a href="{{ $Book.Link }}" target="_blank">
+                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
+                </a>
+                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
+                <div class="rating">⭐ {{ $Book.Rating }}</div>
+              </div>
+              {{ if eq $i 5 }}
+              {{ break }}
+              {{ end }}
+            {{ end }}
+          </div>
+        </div>
       </div>
 
       {{ range $cat, $Books := .Books }}
@@ -120,9 +218,42 @@
           </a>
           <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
           <div class="rating">⭐ {{ $book.Rating }}</div>
+          <div class="more-link"><a href="#">[ Show More ]</a></div>
+          <div class="modal">
+            <div><a href="#" class="close">[Close]</a></div>
+            <div class="books">
+              {{ range $i, $Book := $Books }}
+                {{ if eq $i 1 }}
+                {{ continue }}
+                {{ end }}
+                <div>
+                  <a href="{{ $Book.Link }}" target="_blank">
+                    <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
+                  </a>
+                  <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
+                  <div class="rating">⭐ {{ $Book.Rating }}</div>
+                </div>
+                {{ if eq $i 5 }}
+                {{ break }}
+                {{ end }}
+              {{ end }}
+            </div>
+          </div>
         </div>
       {{ end }}
     </main>
+    <script>
+      [...document.querySelectorAll('.more-link')].forEach(more => {
+        const toggleModal = function(event) {
+          event.preventDefault();
+          more.parentElement.querySelector('.modal').classList.toggle('show');
+        }
+
+        more.parentElement.querySelector('.modal .close').addEventListener('click', toggleModal);
+        more.querySelector('a').addEventListener('click', toggleModal);
+      });
+    </script>
+
   {{ else }}
     <div class="container" style="text-align: center;padding: 4rem;">
       <h2>Still loading book recommendations...</h2>