From 6a13acf2bfa79742d236a5b919ce786cd52d91c6 Mon Sep 17 00:00:00 2001
From: jk <jk@nipponalba.scot>
Date: Mon, 15 Jun 2020 21:24:56 +0100
Subject: [PATCH] adding webmentions display to articles, notes and photos

---
 .../nipponalba/layouts/_default/single.html   | 15 ++--
 themes/nipponalba/layouts/partials/likes.html |  5 ++
 .../nipponalba/layouts/partials/shares.html   |  5 ++
 .../layouts/partials/syndication.html         |  3 +
 .../layouts/partials/webmention.html          | 19 +++--
 themes/nipponalba/static/css/style.css        | 77 ++++++++++++++++++-
 6 files changed, 107 insertions(+), 17 deletions(-)
 create mode 100644 themes/nipponalba/layouts/partials/likes.html
 create mode 100644 themes/nipponalba/layouts/partials/shares.html
 create mode 100644 themes/nipponalba/layouts/partials/syndication.html

diff --git a/themes/nipponalba/layouts/_default/single.html b/themes/nipponalba/layouts/_default/single.html
index 558ba097..b7c23f08 100644
--- a/themes/nipponalba/layouts/_default/single.html
+++ b/themes/nipponalba/layouts/_default/single.html
@@ -26,10 +26,10 @@
 </div>
 
     <div class="post-footer-page">
-<div class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time></div>
+<div class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></div>
 {{ $pathJSON := (print .Permalink "bridgy.json") }}
 {{ $relpathJSON := (print .RelPermalink "bridgy.json") }}
-{{ if fileExists $pathJSON }}
+{{ if fileExists $relpathJSON }}
 <div class="syndication">
   {{ $mJSON := getJSON $pathJSON  }}
   Syndicated to <a href="{{ printf $mJSON.url}}">Pleroma</a>
@@ -42,19 +42,22 @@
       </div>
     </div>
 <a href="https://brid.gy/publish/mastodon"></a>
+<div class="interactions"><h4>Interactions</h4></div>
 <div class="webmention-form">
   <form action="https://webmention.io/deluvi.com/webmention" method="post">
-      <label>Did you mention this article on your website? Put the URL of your post here:</label><br/>
+      <label>Did you mention this {{ .Type }} on your website? Put the URL of your post here:</label><br/>
       <input name="source" type="url"/>
       <input name="target" value="{{ .Permalink }}" type="hidden"/>
       <input value="Send Webmention" type="submit"/>
   </form>
 </div>
-{{ $pathJSON := (print "data" (strings.TrimSuffix "/" .Permalink) ".json") }}
+{{ $pathJSON := (print "data" (strings.TrimSuffix "/" .RelPermalink) ".json") }}
 {{ if fileExists $pathJSON }}
 <div class="webmentions">
-  {{ $mJSON := getJSON $pathJSON }}
-  {{ partial "webmention.html" $mJSON }}
+{{ $mJSON := getJSON $pathJSON }}
+  <div class="like interaction"><h4>Likes</h4>{{ partial "likes.html" $mJSON }}</div>
+  <div class="share interaction"><h4>Shares</h4>{{ partial "shares.html" $mJSON }}</div>
+  <h4>Comments & Replies</h4>{{ partial "webmention.html" $mJSON }}
 </div>
 {{ end }}
 
diff --git a/themes/nipponalba/layouts/partials/likes.html b/themes/nipponalba/layouts/partials/likes.html
new file mode 100644
index 00000000..f21a0b30
--- /dev/null
+++ b/themes/nipponalba/layouts/partials/likes.html
@@ -0,0 +1,5 @@
+{{ range . }}
+{{ if eq .mention_type "like" }}
+<a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" title="{{ .author.name }}" alt="{{ .author.name }}" /></a>
+{{ end }}
+{{ end }}
diff --git a/themes/nipponalba/layouts/partials/shares.html b/themes/nipponalba/layouts/partials/shares.html
new file mode 100644
index 00000000..1ce58325
--- /dev/null
+++ b/themes/nipponalba/layouts/partials/shares.html
@@ -0,0 +1,5 @@
+{{ range . }}
+{{ if eq .mention_type "repost" }}
+<a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" title="{{ .author.name }}" alt="{{ .author.name }}" /></a>
+{{ end }}
+{{ end }}
diff --git a/themes/nipponalba/layouts/partials/syndication.html b/themes/nipponalba/layouts/partials/syndication.html
new file mode 100644
index 00000000..6aad83d8
--- /dev/null
+++ b/themes/nipponalba/layouts/partials/syndication.html
@@ -0,0 +1,3 @@
+{{ range . }}
+Syndicated to <a href="{{ .url }}">Pleroma</a>
+{{ end }}
diff --git a/themes/nipponalba/layouts/partials/webmention.html b/themes/nipponalba/layouts/partials/webmention.html
index add7c677..bc50c84b 100644
--- a/themes/nipponalba/layouts/partials/webmention.html
+++ b/themes/nipponalba/layouts/partials/webmention.html
@@ -1,20 +1,19 @@
 {{ range . }}
+<br/>
 {{ if eq .mention_type "mention" }}
-<div class="mention"><a href="{{ .author.url }}">{{ .author.name }}</a> mentioned this post in <a href="{{ .url }}">the post {{  .title }}</a></div>
-{{ end }}
-{{ if eq .mention_type "like" }}
-<div class="like"><a href="{{ .author.url }}">{{ .author.name }}</a> <a href="{{ .url }}">liked</a></div>
+<div class="mention interaction"><div class="intactivity"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> mentioned this post in <a href="{{ .url }}">the post {{  .title }}</a></div>
+<div class="intcontent">{{ .content | safeHTML }}</div><br/>
+<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .date ) }}</time></div>
 {{ end }}
 {{ if eq .mention_type "reply" }}
-<div class="reply"><a href="{{ .author.url }}">{{ .author.name }}</a> replied to this post <a href="{{ .url }}">here</a></div>
+<div class="reply interaction"><div class="intactivity"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> replied to this post <a href="{{ .url }}">here</a><br/></div>
+<div class="intcontent">{{ .content | safeHTML }}</div><br/>
+<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .date ) }}</time></div>
 {{ end }}
 {{ if eq .mention_type "bookmark" }}
-<div class="bookmark"><a href="{{ .author.url }}">{{ .author.name }}</a> bookmarked this post</div>
-{{ end }}
-{{ if eq .mention_type "repost" }}
-<div class="repost"><a href="{{ .author.url }}">{{ .author.name }}</a> <a href="{{ .url }}">reposted</a> this article</div>
+<div class="bookmark interaction"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> bookmarked this post</div>
 {{ end }}
 {{ if eq .mention_type "rsvp" }}
-<div class="rsvp"><a href="{{ .author.url }}">{{ .author.name }}</a> responded to the rsvp <a href="{{ .url }}">here</a></div>
+<div class="rsvp interaction"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo_url }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> responded to the rsvp <a href="{{ .url }}">here</a></div>
 {{ end }}
 {{ end }}
diff --git a/themes/nipponalba/static/css/style.css b/themes/nipponalba/static/css/style.css
index 426ec633..0888e230 100644
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@@ -378,7 +378,9 @@ pre {
   border-bottom: 1px solid var(--text-colour);
 }
 .post .post-footer-page {
-  padding: 0 0 100px 0;
+  padding: 0 0 0 0;
+  width:100%;
+  display:block;
 }
 .post .post-footer .meta, .post .post-footer-page .meta {
   max-width: 100%;
@@ -450,6 +452,79 @@ pre {
   display:inline;
   float:left;
 }
+.post .post-footer-page{
+display:block;
+width:100%
+}
+.interactions{
+  margin:20px 0 10px 0;
+  padding:0;
+  display:inline-flex;
+  float:left;
+  height:30px;
+  width:100%;
+  border-top:1px dotted var(--text-colour);
+}
+.webmention-form{
+  display:inline-flex;
+  margin-top:20px;
+  width: 100%;
+}
+.webmention-form label{
+  display:inline;
+  float:left;
+  margin-bottom:10px;
+}
+.webmention-form input[type=url]{
+  width:60%;
+}
+.webmentions{
+  display:block;
+  margin-top: 0 20px 0 0 ;
+  padding: 0 0 200px 0;
+}
+.webmentions .remote_profile{
+  width: 50px;
+  border-radius: 50%;
+  display:inline;
+  float:left;
+  vertical-align:top;
+  border:0;
+  padding:0;
+}
+.webmentions .interaction{
+  border:1px dotted var(--text-colour);
+  padding: 10px;
+  display:block;
+  margin:0;
+  min-height:60px;
+  vertical-align:top;
+}
+.webmentions .interaction .intactivity{
+  font-size:13px;
+  font-style:italic;
+}
+.webmentions .interaction time{
+  font-size:12px;
+}
+.webmentions .interaction h4{
+  line-height:15px;
+  padding:0;
+  margin:0;
+}
+.webmentions .interaction.like, .webmentions .interaction.share{
+  border:0;
+  color: var(--text-colour);
+  padding:2px;
+  margin:30px 0 0 0;
+  display:flex;
+  width:100%;
+  min-height:30px;
+}
+.webmentions .interaction.like img, .webmentions .interaction.share img{
+  display:inline-flex;
+  float:left;
+}
 .footer {
   clear: both;
   text-align: center;