updated homepage with dynamic tiling

src/index.md

@@ -6,14 +6,35 @@ title: Homepage
 
 An index of family recipes collected over generations.
 
+<div class="sort-controls">
+    Sort by:
+    <button onclick="sortGrid('title')">Title</button>
+    <button onclick="sortGrid('author')">Author</button>
+</div>
+<script>
+function sortGrid(attr) {
+    const grid = document.querySelector('.recipe-grid');
+    const cards = Array.from(grid.children);
+    cards.sort((a, b) => {
+        const valA = (a.dataset[attr] || '').trim();
+        const valB = (b.dataset[attr] || '').trim();
+        if (!valA && valB) return 1;
+        if (valA && !valB) return -1;
+        return valA.localeCompare(valB);
+    });
+    cards.forEach(card => grid.appendChild(card));
+}
+</script>
 <div class="recipe-grid">
-{% for recipe in collections.recipe %}
-  <article class="recipe-card">
+{% for recipe in collections.recipe | sort(attribute="data.title") %}
+  <article class="recipe-card" data-title="{{ recipe.data.title | default: '' }}" data-author="{{ recipe.data.author | default: 'Unknown Author' }}">
     <h3><a href="{{ recipe.url }}">{{ recipe.data.title }}</a></h3>
-    {% if recipe.data.author %}
-      <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author }}</em></p>
-    {% endif %}
+    <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author | default: 'Unknown Author' }}</em></p>
   </article>
 {% endfor %}
 </div>
 
+
+
+
+