use attribution renderer in image block renderer

AprilSylph · Nov 25, 2021 · 658f085 · 658f085
1 parent 44f2b83
commit 658f085
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 26 deletions.
diff --git a/src/lib/npf.js b/src/lib/npf.js
@@ -95,26 +95,8 @@ const blockRenderers = {
           .join(',\n');
       }));
 
-      if (attribution?.url) {
-        figure.append(document.createElement('a').tap(a => {
-          a.href = attribution.url;
-          a.target = '_blank';
-
-          if (attribution.display_text) {
-            a.textContent = attribution.display_text;
-          } else if (attribution.blog?.name) {
-            a.className = 'gif-attribution';
-            a.textContent = 'GIF by ';
-            a.append(Object.assign(document.createElement('strong'), { textContent: attribution.blog.name }));
-          } else {
-            a.textContent = attribution.url;
-          }
-        }));
-      }
-
-      if (caption) {
-        figure.append(Object.assign(document.createElement('figcaption'), { textContent: caption }));
-      }
+      if (attribution) figure.append(renderAttribution(attribution));
+      if (caption) figure.append(Object.assign(document.createElement('figcaption'), { textContent: caption }));
     });
   },
 

diff --git a/src/outbox.css b/src/outbox.css
@@ -388,7 +388,7 @@ article footer button {
   margin: calc(var(--post-vertical-spacing) / 2) 0;
 }
 
-[data-block="image"] a {
+[data-block="image"] [data-attribution] {
   display: block;
   overflow: hidden;
   padding: 0 var(--post-padding);
@@ -402,18 +402,18 @@ article footer button {
   white-space: nowrap;
 }
 
-[data-block="image"] a:hover,
-[data-block="image"] a:focus {
+[data-block="image"] [data-attribution]:hover,
+[data-block="image"] [data-attribution]:focus {
   background-color: rgba(var(--accent), 0.07);
   color: rgb(var(--accent));
 }
 
-[data-block="image"] a.gif-attribution {
+[data-block="image"] [data-attribution="post"] {
   margin-top: calc(var(--post-vertical-spacing) / 2);
   margin-bottom: var(--post-vertical-spacing);
 
-  background-color: transparent;
-  color: rgba(var(--black), 0.65);
+  background-color: transparent !important;
+  color: rgba(var(--black), 0.65) !important;
   font-size: 1rem;
   line-height: 1.5;
   text-align: end;