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%;
+    }
+  }
+}

resources/views/icons/like.blade.php

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

resources/views/icons/reply.blade.php

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>

resources/views/icons/repost.blade.php

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>

resources/views/notes/show.blade.php

@@ -25,29 +25,36 @@
                 </div>
 @endforeach
 @if($note->webmentions->filter(function ($webmention) {
-    return ($webmention->type == 'like-of');
-})->count() > 0)                <h1 class="notes-subtitle">Likes</h1>
-@foreach($note->webmentions->filter(function ($webmention) {
-    return ($webmention->type == 'like-of');
-}) as $like)
-                <a href="{{ $like['author']['properties']['url'][0] }}"><img src="{{ $like['author']['properties']['photo'][0] }}" alt="profile picture of {{ $like['author']['properties']['name'][0] }}" class="like-photo"></a>
-@endforeach
+    return ($webmention->type === 'like-of');
+})->count() > 0)
+    <h1 class="notes-subtitle">Likes</h1>
+    <div class="webmentions-author-list">
+        @foreach($note->webmentions->filter(function ($webmention) {
+            return ($webmention->type === 'like-of');
+        }) as $like)
+            <a href="{{ $like['author']['properties']['url'][0] }}">
+                <img src="{{ $like['author']['properties']['photo'][0] }}" alt="profile picture of {{ $like['author']['properties']['name'][0] }}" class="like-photo">
+            </a>
+        @endforeach
+    </div>
 @endif
 @if($note->webmentions->filter(function ($webmention) {
-    return ($webmention->type == 'repost-of');
-})->count() > 0)                <h1 class="notes-subtitle">Reposts</h1>
-@foreach($note->webmentions->filter(function ($webmention) {
-    return ($webmention->type == 'repost-of');
-}) as $repost)
-                <p>
-                    <a class="h-card vcard mini-h-card p-author" href="{{ $repost['author']['properties']['url'][0] }}">
-                        <img src="{{ $repost['author']['properties']['photo'][0] }}" alt="profile picture of {{ $repost['author']['properties']['name'][0] }}" class="photo u-photo logo"> <span class="fn">{{ $repost['author']['properties']['name'][0] }}</span>
-                    </a> reposted this at <a href="{{ $repost['source'] }}">{{ $repost['published'] }}</a>.
-                </p>
-@endforeach
+    return ($webmention->type === 'repost-of');
+})->count() > 0)
+    <h1 class="notes-subtitle">Reposts</h1>
+    <div class="webmentions-author-list">
+        @foreach($note->webmentions->filter(function ($webmention) {
+            return ($webmention->type == 'repost-of');
+        }) as $repost)
+            <a href="{{ $repost['source'] }}">
+                <img src="{{ $repost['author']['properties']['photo'][0] }}" alt="{{ $repost['author']['properties']['name'][0] }} reposted this at {{ $repost['published'] }}">
+            </a>
+        @endforeach
+    </div>
 @endif
 @stop
 
 @section('scripts')
-            <link rel="stylesheet" href="/assets/highlight/zenburn.css">
+    @parent
+    <link rel="stylesheet" href="/assets/highlight/zenburn.css">
 @stop

resources/views/templates/note.blade.php

@@ -40,6 +40,31 @@
                     in <span class="p-location h-adr">{!! $note->address !!}<data class="p-latitude" value="{{ $note->latitude }}"></data><data class="p-longitude" value="{{ $note->longitude }}"></data></span>
                 @endif
             </div>
+            @if($note->replies > 0 || $note->likes > 0 || $note->reposts > 0)
+                <div class="webmention-info">
+                    @if($note->replies > 0)
+                        <div class="replies">
+                            @include('icons.reply')
+                            {{ $note->replies }}
+                            <span class="sr-only">replies</span>
+                        </div>
+                    @endif
+                    @if($note->likes > 0)
+                        <div class="likes">
+                            @include('icons.like')
+                            {{ $note->likes }}
+                            <span class="sr-only">likes</span>
+                        </div>
+                    @endif
+                    @if($note->reposts > 0)
+                        <div class="reposts">
+                            @include('icons.repost')
+                            {{ $note->reposts }}
+                            <span class="sr-only">reposts</span>
+                        </div>
+                    @endif
+                </div>
+            @endif
             <div class="syndication-links">
                 @if(
                     $note->tweet_id ||