Nested replies

src/_includes/components/reply.njk

@@ -0,0 +1,13 @@
+{% macro reply(note) %}
+    <div>
+            <time class="dt-published" datetime="{{ note.createdAt | dateToRfc3339 }}">{{ note.createdAt | dateTimeDisplay }}</time>
+            {{ note.text | md | safe }}
+            {% if note.replies.length %}
+                <ul>
+                    {% for r in note.replies %}
+                        <li>{{ reply(r) }}</li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+    </div>
+{% endmacro %}

src/_includes/note.njk

@@ -1,6 +1,7 @@
 ---
 layout: "base.njk"
 ---
+{% import "components/reply.njk" as replyMacros %}
 
 <main data-for="note">
 
@@ -11,23 +12,14 @@ layout: "base.njk"
         <time class="dt-published" datetime="{{ note.createdAt | dateToRfc3339 }}">{{ note.createdAt | dateTimeDisplay }}</time>
     </div>
     {{ content | safe }}
-    <pre>{{ note.replies | dump }}</pre>
-    
-    <ul>
 
-    {% for reply in note.replies %}
-        <li>{{ reply.text | md | safe }}</li>
-    {% endfor %}
+
+    <ul>
+        {% for reply in note.replies %}
+            <li>
+                {{ replyMacros.reply(reply) }}
+            </li>
+        {% endfor %}
     </ul>
-        {# <ul>
-            {% for reply in note.replies %}
-                <li>
-                    <div>
-                         <time class="dt-published" datetime="{{ reply.createdAt | dateToRfc3339 }}">{{ reply.createdAt | dateTimeDisplay }}</time>
-                         {{ reply.text | md | safe }}
-                    </div>
-                </li>
-            {% endfor %}
-        </ul> #}
 </article>
 </main>