buncha progress

src/index.njk

@@ -1,18 +1,40 @@
 ---
 layout: base.njk
+title: Fediverse Skillshare Classifieds
 ---
+{% css %}{% include "css/home.css" %}{% endcss %}
 
-<h1>Fediverse Classifieds</h1>
+<div id="jump-links">
+  <h2>jump to...</h2>
+  <ul id="category-list">
+  {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
+    <li>
+      <a href="#{{ tag | slugify }}">{{ tag }}</a>
+    </li>
+  {% endfor %}
+  </ul>
+</div>
 
 <div id="ads">
   {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
-    <h2 class="category">{{ tag }}</h2>
-    <p class="tagline">{{ tag | getTagline }}</p>
-    {% for post in collections[tag] %}
-      <h3>{{ post.data.title }}</h3>
-      <a href="https://{{ post.data.server }}/@{{ post.data.handle }}"
-        target="_blank">@{{ post.data.handle }}@{{ post.data.server}}</a>
-      <p>{{ post.data.blurb }}</p>
-    {% endfor %}
+    <div class="category">
+      <div class="category-title">
+        <h2>{{ tag }}</h2>
+        <p>{{ tag | getTagline }}</p>
+      </div>
+      {% for ad in collections[tag] %}
+        <div class="ad">
+          <h3>{{ ad.data.title }}</h3>
+          <p class="blurb">
+            <a href="https://{{ ad.data.server }}/@{{ ad.data.handle }}"
+              target="_blank">@{{ ad.data.handle }}@{{ ad.data.server}}</a>
+            offers: {{ ad.data.blurb }}
+          </p>
+          <p class="listed-on">
+            listed on <time datetime="{{ ad.date | htmlDateString }}">{{ ad.date | readableDate() }}</time>
+          </p>
+        </div>
+      {% endfor %}
+    </div>
   {% endfor %}
 </div>