ybbond

commit c394119ccb1c680111dc598e631568f048c928a3
parent 810829c8a8df9958d6decbede014e2b7a888e8e8
Author: Yohanes Bandung Bondowoso <hi@ybbond.id>
Date:   Thu, 20 May 2021 14:23:02 +0700

refactor: handle no image for webmention

Diffstat:
M
assets/main.css
 | 
9
++++++++-
M
layouts/partials/post/webmentions-handler.html
 | 
45
++++++++++++++++++++++++++++-----------------

diff --git a/assets/main.css b/assets/main.css
@@ -229,11 +229,18 @@ a.wm-avatar {
   font-size: 0.6rem;
   margin-right: 0.4rem;
 }
-img.wm-avatar {
+img.wm-avatar, div.wm-avatar {
   width: 2rem;
   height: 2rem;
   border-radius: 1rem;
 }
+div.wm-avatar {
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid 1px;
+}
 
 .wm-reply {
   margin-bottom: 1rem;
diff --git a/layouts/partials/post/webmentions-handler.html b/layouts/partials/post/webmentions-handler.html
@@ -9,11 +9,15 @@
           title="Photo of {{ $like.author.name }}"
           class="wm-avatar"
         >
-          <img
-            src="{{ $like.author.photo }}"
-            alt="Photo of {{ $like.author.name }}"
-            class="wm-avatar"
-          />
+          {{- if $like.author.photo }}
+            <img
+              src="{{ $like.author.photo }}"
+              alt="Photo of {{ $like.author.name }}"
+              class="wm-avatar"
+            />
+          {{- else }}
+            <div class="wm-avatar">?</div>
+          {{- end }}
         </a>
       {{- end }}
     {{ end -}}
@@ -27,11 +31,15 @@
           title="Photo of {{ $like.author.name }}"
           class="wm-avatar"
         >
-          <img
-            src="{{ $like.author.photo }}"
-            alt="Photo of {{ $like.author.name }}"
-            class="wm-avatar"
-          />
+          {{- if $like.author.photo }}
+            <img
+              src="{{ $like.author.photo }}"
+              alt="Photo of {{ $like.author.name }}"
+              class="wm-avatar"
+            />
+          {{- else }}
+            <div class="wm-avatar">?</div>
+          {{- end }}
         </a>
       {{- end }}
     {{ end -}}
@@ -48,11 +56,15 @@
                   title="Photo of {{ $reply.author.name }}"
                   class="wm-avatar"
                 >
-                  <img
-                    src="{{ $reply.author.photo }}"
-                    alt="Photo of {{ $reply.author.name }}"
-                    class="wm-avatar"
-                  />
+                  {{- if $reply.author.photo }}
+                    <img
+                      src="{{ $reply.author.photo }}"
+                      alt="Photo of {{ $reply.author.name }}"
+                      class="wm-avatar"
+                    />
+                  {{- else }}
+                    <div class="wm-avatar">?</div>
+                  {{- end }}
                 </a>
                 <a
                   href="{{ $reply.author.url }}"
@@ -78,4 +90,4 @@
       </div>
     {{ end }}
   </div>
-{{ end }}-
\ No newline at end of file
+{{ end }}