feat: Add webmention counts and icons for replies, likes, and reposts.

- Add new SVG icons for the "reply", "like", and "repost" actions
- Update webmention info display in note template to include counts and icons for replies, likes, and reposts
- Add webmention counts to FrontPageController.php and modify queries in NotesController.php
- Modify WebMentionsTableSeeder.php to change URLs, commentable ID, and add new WebMentions

resources/css/app.css

@@ -4,3 +4,4 @@
 @import url('colours.css');
 @import url('code.css');
 @import url('content.css');
+@import url('notes.css');

resources/css/content.css

@@ -19,6 +19,15 @@
     flex-direction: row;
     gap: 1rem;
 
+    & .replies,
+    & .likes,
+    & .reposts {
+      display: inline-flex;
+      flex-direction: row;
+      gap: .5rem;
+      align-items: center;
+    }
+
     & .syndication-links {
       flex-flow: row wrap;
 
@@ -33,3 +42,23 @@
     }
   }
 }
+
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentcolor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

resources/css/notes.css

@@ -0,0 +1,38 @@
+main {
+  & > .u-comment {
+    margin-block-start: 2rem;
+    margin-inline-start: 2rem;
+    border-inline-start: 1px solid var(--color-primary);
+    padding-inline-start: .5rem;
+
+    & .mini-h-card {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      & .u-photo {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        margin-block-end: 0.5rem;
+      }
+    }
+  }
+
+  & .notes-subtitle {
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  & .webmentions-author-list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1rem;
+
+    & img {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+    }
+  }
+}