Browse Source

adding webmentions display to articles, notes and photos

master
jk 4 years ago
parent
commit
6a13acf2bf
  1. 15
      themes/nipponalba/layouts/_default/single.html
  2. 5
      themes/nipponalba/layouts/partials/likes.html
  3. 5
      themes/nipponalba/layouts/partials/shares.html
  4. 3
      themes/nipponalba/layouts/partials/syndication.html
  5. 19
      themes/nipponalba/layouts/partials/webmention.html
  6. 77
      themes/nipponalba/static/css/style.css

15
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 }}

5
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 }}

5
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 }}

3
themes/nipponalba/layouts/partials/syndication.html

@ -0,0 +1,3 @@
{{ range . }}
Syndicated to <a href="{{ .url }}">Pleroma</a>
{{ end }}

19
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 }}

77
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;