From a7d6b76eb318335263f8491dd27cac8a1dc99bfd Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@fortacode.co.uk>
Date: Sun, 21 Jan 2024 11:07:03 +0000
Subject: [PATCH] Replies

---
 package.json                       | 2 +-
 src/_data/notes.js                 | 2 +-
 src/_includes/components/reply.njk | 6 ++++--
 src/_includes/note.njk             | 5 ++++-
 src/note.md                        | 2 +-
 src/styles/main.css                | 8 +++++++-
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index ea44edb..93f9355 100644
--- a/package.json
+++ b/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",
diff --git a/src/_data/notes.js b/src/_data/notes.js
index d00675e..61a7153 100644
--- a/src/_data/notes.js
+++ b/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>`;
     });
 }
 
diff --git a/src/_includes/components/reply.njk b/src/_includes/components/reply.njk
index c9928c6..8b7c736 100644
--- a/src/_includes/components/reply.njk
+++ b/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 %}
\ No newline at end of file
diff --git a/src/_includes/note.njk b/src/_includes/note.njk
index 94418b9..96bd071 100644
--- a/src/_includes/note.njk
+++ b/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) }}
diff --git a/src/note.md b/src/note.md
index 734b536..d817bdd 100644
--- a/src/note.md
+++ b/src/note.md
@@ -8,4 +8,4 @@ eleventyComputed:
     permalink: "/notes/{{ note.id }}"
 ---
 
-{{ note.text }}
\ No newline at end of file
+{{ note.text | safe}}
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 65e3975..6a4f31d 100644
--- a/src/styles/main.css
+++ b/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;
-}
\ No newline at end of file
+}
+