Replies

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "serve": "npx @11ty/eleventy --serve"
   },
   "author": "",
   "license": "ISC",

src/_data/notes.js

@@ -3,7 +3,7 @@ const fs = require('node:fs');
 const formatMentions = text => {
     const matcher = /@(\w+)@([a-zA-Z\-_0-9\.]+)/gm;
     return text.replace(matcher, (match, username, domain) => {
-        return `[${match}](https://${domain}/@${username})`;
+        return `<a href="https://${domain}/@${username}" class="u-in-reply-to">${match}</a>`;
     });
 }
 

src/_includes/components/reply.njk

@@ -1,13 +1,15 @@
 {% macro reply(note) %}
-    <div>
+    <div class="h-entry">
+            <a href="/notes/{{ note.replyId }}" class="u-in-reply-to"></a>
             <time class="dt-published" datetime="{{ note.createdAt | dateToRfc3339 }}">{{ note.createdAt | dateTimeDisplay }}</time>
             {{ note.text | md | safe }}
             {% if note.replies.length %}
-                <ul>
+                <ul class="h-feed">
                     {% for r in note.replies %}
                         <li>{{ reply(r) }}</li>
                     {% endfor %}
                 </ul>
             {% endif %}
+            <a href="/notes/{{ note.id }}" class="u-url">permalink</a>
     </div>
 {% endmacro %}

src/_includes/note.njk

@@ -13,6 +13,8 @@ layout: "base.njk"
     </div>
     {{ content | safe }}
 
+    {% if note.files | length %}
+
      <details>
         <summary>Media</summary>
         <ul class="grid">
@@ -22,8 +24,9 @@ layout: "base.njk"
                 </li>
             {% endfor %}
     </details>
+    {% endif   %}
 
-    <ul>
+    <ul class="h-feed">
         {% for reply in note.replies %}
             <li>
                 {{ replyMacros.reply(reply) }}

src/note.md

@@ -8,4 +8,4 @@ eleventyComputed:
     permalink: "/notes/{{ note.id }}"
 ---
 
-{{ note.text }}
+{{ note.text | safe}}

src/styles/main.css

@@ -70,6 +70,11 @@ ul.h-feed > li {
     margin-bottom: var(--space-size-m);
 }
 
+.h-entry .h-feed {
+    padding-left: var(--space-size-s);
+    border-left: 3px solid rgba(0,0,0,0.1);
+}
+
 .p-author {
     display: flex;
     flex-direction: column;
@@ -90,4 +95,5 @@ ul.h-feed > li {
 ul.grid {
     list-style: none;
     padding: 0;
-}
+}
+