Fix index and add thumbnails for apps

Author: tupui

docs/_static/thumbnails/sampling.png

@@ -264,18 +264,18 @@
     </section>
     <section id="cards">
       <ul class="cards-grid">
-        {% for item in sorted(items, key=lambda item: item[1:].replace("_", " ").title()) %}
+        {% for item in sorted(items, key=lambda item: item[1]) %}
         <li class="card">
-          <a class="card-link" href=".{{ item }}" id="{{ item }}">
+          <a class="card-link" href=".{{ item[0] }}" id="{{ item[0] }}">
             <fast-card class="gallery-item">
-	      <object data="thumbnails{{ item }}.png" type="image/png">
+	      <object data="_static/thumbnails{{ item[0] }}.png" type="image/png">
                 <svg class="card-image" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-window" viewBox="0 0 16 16">
                   <path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                   <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1H2z"/>
                 </svg>
               </object>
               <div class="card-content">
-                <h2 class="card-header">{{ item[1:].replace("_", " ").title() }}</h2>
+                <h2 class="card-header">{{ item[1] }}</h2>
               </div>
             </fast-card>
           </a>