Skip to content

Commit

Permalink
feat(layout): ✨ webmentions work on homepage and individual pages usi…
Browse files Browse the repository at this point in the history
…ng webmention tool
  • Loading branch information
sheldonhull committed Jun 2, 2021
1 parent ac6161a commit f8ca3bf
Show file tree
Hide file tree
Showing 8 changed files with 211 additions and 31 deletions.
37 changes: 32 additions & 5 deletions assets/css/_webmentions.scss
Expand Up @@ -3,15 +3,28 @@

.webmentions {
border-top: 1px solid #333;
display:block;
display: block;
margin-top: 2em;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
width: 80%;
list-style:none;
}

.no-arrow {
details>summary {
list-style: none;
}

details>summary::-webkit-details-marker {
display: none;
}
}

.webmentions h2, .webmentions h3, .webmentions h4 {
.webmentions h2,
.webmentions h3,
.webmentions h4 {
text-align: center;
filter: drop-shadow(0 0 10px #03edf9);
}
Expand All @@ -30,9 +43,10 @@
flex: none;
}

.webmentions__list, .webmentions__list_facepile {
.webmentions__list,
.webmentions__list_facepile {
list-style-type: none;
padding:0;
padding: 0;
}

.webmentions__list_facepile {
Expand Down Expand Up @@ -83,7 +97,8 @@
.p-note {
width: 90%;
margin: 0 auto;
padding-bottom: 1.5em; /* avoids phone UI stuff */
padding-bottom: 1.5em;
/* avoids phone UI stuff */
}

summary.h4 {
Expand Down Expand Up @@ -113,9 +128,11 @@ summary.h4 {
.webmentions {
border-top: 1px solid #fff;
}

.p-name {
color: #fff;
}

.u-url {
color: #ddd;
/* border-bottom: 1px solid #fff; */
Expand All @@ -134,7 +151,17 @@ summary.h4 {
margin-bottom: 0;
}

.webmention__stats {
font-size: 1.5em;
color: $global-font-secondary-color;
[theme="dark"] {
color: $global-font-secondary-color-dark;
i {
filter: drop-shadow(0 0 10px #03edf9);
}
}

}


// MXX.DEV
Expand Down
2 changes: 2 additions & 0 deletions content/posts/2020/2020-07-27-go-R1-day-2.md
@@ -1,5 +1,7 @@
---
title: go-R1-D002
aliases:
- 2020-07-27-go-r1-day-2
date: 2020-07-27T12:00:00-05:00
images: [/images/r1-d002.png]
area: go
Expand Down
Expand Up @@ -3,6 +3,9 @@ title: Incredible setup experience with gitpod
date: 2020-08-27T20:00:00-05:00
typora-root-url: ../../../static
typora-copy-images-to: ../../../static/images
aliases:
- 2020-08-28t01-16-incredible-setup-experience-with-gitpod
- 2020-08-28t01-16-incredible-setup-experience-with-gitpod/
tags:
- tech
- development
Expand Down
75 changes: 75 additions & 0 deletions data/webmentions.json
Expand Up @@ -2474,6 +2474,81 @@
"sentence": "Nirmal Thewarathanthri favorited a tweet https://www.sheldonhull.com/blog/diagrams-as-code/",
"sentence_html": "<a href=\"https://twitter.com/nirmalmt\">Nirmal Thewarathanthri</a> favorited a tweet <a href=\"https://www.sheldonhull.com/blog/diagrams-as-code/\">https://www.sheldonhull.com/blog/diagrams-as-code/</a>"
}
},
{
"source": "https://brid.gy/like/twitter/sheldon_hull/1397546049481453568/3411301",
"verified": true,
"verified_date": "2021-05-31T04:37:36Z",
"id": 1174614,
"private": false,
"target": "https://www.sheldonhull.com/dedupe-google-drive-with-rclone/",
"data": {
"author": {
"name": "Burhan Khalid",
"url": "https://twitter.com/burhan",
"photo": "https://webmention.io/avatar/pbs.twimg.com/01c25827f1d72a100d0a4f23574ddf7d41ff7818461295c088d3dd32be98aeae.jpg"
},
"url": "https://twitter.com/sheldon_hull/status/1397546049481453568#favorited-by-3411301",
"name": "",
"content": "",
"published": "0001-01-01T00:00:00Z",
"published_ts": 0
},
"activity": {
"type": "like",
"sentence": "Burhan Khalid favorited a tweet https://www.sheldonhull.com/dedupe-google-drive-with-rclone/",
"sentence_html": "<a href=\"https://twitter.com/burhan\">Burhan Khalid</a> favorited a tweet <a href=\"https://www.sheldonhull.com/dedupe-google-drive-with-rclone/\">https://www.sheldonhull.com/dedupe-google-drive-with-rclone/</a>"
}
},
{
"source": "https://brid.gy/repost/twitter/sheldon_hull/1397546049481453568/1399204355711160322",
"verified": true,
"verified_date": "2021-05-31T03:51:08Z",
"id": 1174602,
"private": false,
"target": "https://www.sheldonhull.com/dedupe-google-drive-with-rclone/",
"data": {
"author": {
"name": "Awesome Go Repositories",
"url": "https://twitter.com/GolangRepos",
"photo": "https://webmention.io/avatar/pbs.twimg.com/1f50e9a8dcfccc319e531ebbfd464f9fc6732ca7f19757b4eaa4850767aa4959.jpg"
},
"url": "https://twitter.com/GolangRepos/status/1399204355711160322",
"name": "",
"content": "I did a write-up in the past on this as I found it so useful sheldonhull.com/blog/dedupe-go…\n\nGreat tool to have!",
"published": "2021-05-31T03:21:29Z",
"published_ts": 1622431289
},
"activity": {
"type": "repost",
"sentence": "Awesome Go Repositories retweeted a tweet https://www.sheldonhull.com/dedupe-google-drive-with-rclone/",
"sentence_html": "<a href=\"https://twitter.com/GolangRepos\">Awesome Go Repositories</a> retweeted a tweet <a href=\"https://www.sheldonhull.com/dedupe-google-drive-with-rclone/\">https://www.sheldonhull.com/dedupe-google-drive-with-rclone/</a>"
}
},
{
"source": "https://brid.gy/repost/twitter/sheldon_hull/1398749691702095873/1398750624188149765",
"verified": true,
"verified_date": "2021-05-29T21:42:30Z",
"id": 1174037,
"private": false,
"target": "https://www.sheldonhull.com/the-dark-side/",
"data": {
"author": {
"name": "Techie Wiz",
"url": "https://twitter.com/techie_wiz",
"photo": "https://webmention.io/avatar/pbs.twimg.com/45dda74e5ac4422fb471acd067b7f704bb747f9d2db6b0e84345aecd6b8f999f.jpg"
},
"url": "https://twitter.com/techie_wiz/status/1398750624188149765",
"name": "",
"content": "The Dark Side sheldonhull.com/the-dark-side/ #tech #development #microblog #humor via @sheldon_hull",
"published": "2021-05-29T21:18:30Z",
"published_ts": 1622323110
},
"activity": {
"type": "repost",
"sentence": "Techie Wiz retweeted a tweet https://www.sheldonhull.com/the-dark-side/",
"sentence_html": "<a href=\"https://twitter.com/techie_wiz\">Techie Wiz</a> retweeted a tweet <a href=\"https://www.sheldonhull.com/the-dark-side/\">https://www.sheldonhull.com/the-dark-side/</a>"
}
}
]
}
13 changes: 13 additions & 0 deletions layouts/partials/boxtext.html
@@ -0,0 +1,13 @@
{{ $paragraphs := split .Content "<h2 " }}

{{ range $index, $p := $paragraphs }}
{{ $pp := trim $p " \n" }}
{{ if (eq $index 0) }}
{{ printf "%s\n" $pp | safeHTML }}
{{ end }}
{{ if and (ne $pp "") (gt $index 0) }}
<div class="boxtext">
{{ printf "<h2 %s\n" $pp | safeHTML }}
</div>
{{ end }}
{{end}}
51 changes: 51 additions & 0 deletions layouts/partials/webmention-counts.html
@@ -0,0 +1,51 @@
{{ $siteURLforWMs := "www.sheldonhull.com" }}
{{ $RelPermalink := .RelPermalink }}
{{/* printf "$siteURLforWMs: %v" $siteURLforWMs */}}
{{ $linkForUse := print ($siteURLforWMs) ($RelPermalink) }}
{{ $linkForUse := replaceRE "^www." "https://www." $linkForUse}}
{{/* printf "$linkForUse: %v" $linkForUse */}}

{{/* SEARCH VARIATIONS */}}
{{ $search := slice $linkForUse }}
{{ $search = $search | append (replaceRE ".com/" ".com/blog/" $linkForUse) }}
{{ $search = $search | append (replaceRE ".com/" ".com/microblog/" $linkForUse) }}

{{/* If any aliases for page include those in search */}}
{{ range $alias := .Params.Aliases }}
{{/* printf "👀 alias: [%v]" $alias */}}<br>
{{ $aliasPath := print ($siteURLforWMs) "/" ($alias) }}
{{ $aliasPath := replaceRE "^www." "https://www." $aliasPath }}
{{/* printf "👀 aliaspath: [%v]" $aliasPath */}}<br>
{{ $search = $search | append $aliasPath }}
{{ $search = $search | append (replaceRE ".com/" ".com/blog/" $aliasPath) }}
{{ $search = $search | append (replaceRE ".com/" ".com/microblog/" $aliasPath) }}
{{ end }}

{{/* printf "🔎 search %s" ($search|jsonify (dict "prefix" " " "indent" " ")) */}}<br>

{{ $matches := slice }}
{{ range $s := $search }}
{{/* printf "🔎 searching for: [%s]" $s */}}
{{ range $item := where $.Site.Data.webmentions.links "target" $s }}
{{/* printf "✔ $item: %s" ( $item | jsonify ) */}}
{{ $matches = $matches | append $item }}
{{ else }}
{{/* printf "🔃 $s [%s] not found" $s */}}
{{ end }}
{{ end }}
{{ if $matches }}
{{ $likes := len (where $matches "activity.type" "like") }}
{{- with $likes -}}<span class="webmention__stats"><i class="fas fa-heart">&nbsp;{{ . }}</i>&nbsp;likes</span>{{- end -}}
{{ $total := $likes }}
{{ $replies := len (where $matches "activity.type" "reply") }}
{{- with $replies -}}<span class="webmention__stats"><i class="fas fa-reply">&nbsp;{{ . }}</i>&nbsp;reply</span>{{- end -}}
{{ $total = add $likes $replies }}
{{ $mentions := len (where $matches "activity.type" "mention") }}
{{- with $mentions -}}<span class="webmention__stats"><i class="fas fa-bullhorn">&nbsp;{{ . }}</i>&nbsp;mentions</span>{{- end -}}
{{ $total = add $likes $mentions }}
{{ $reposts := len (where $matches "activity.type" "repost") }}
{{- with $reposts -}}<span class="webmention__stats"><i class="fas fa-retweet">&nbsp;{{ . }}</i>&nbsp;resposts</span>{{- end -}}
{{ $total = add $likes $reposts }}


{{- end -}}
58 changes: 32 additions & 26 deletions layouts/partials/webmentions.html
@@ -1,27 +1,35 @@
{{/* inspired originall by: https://github.com/brycewray/files-webmentions/blob/main/hugo_site_css-grid/layouts/partials/webmentions.html */}}
<!-- <div id="webmentions"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div> -->
<!-- <div class='content-webmentions'></div> -->

{{ $RelPermalink := .RelPermalink }}
{{- if .Params.oldcomments }}
{{ .Params.oldcomments | safeHTML }}
{{- end }}

<div class="webmentions" id="webmentions" style="width:90% !important;">
{{ $siteURLforWMs := "www.sheldonhull.com" }}
{{/* printf "$siteURLforWMs: %v" $siteURLforWMs */}}
{{ $linkForUse := print ($siteURLforWMs) (.RelPermalink) }}
{{ $linkForUse := print ($siteURLforWMs) ($RelPermalink) }}
{{ $linkForUse := replaceRE "^www." "https://www." $linkForUse}}
{{/* printf "$linkForUse: %v" $linkForUse */}}

{{/* SEARCH VARIATIONS */}}
{{ $search := slice
$linkForUse
(replaceRE ".com/" ".com/blog/" $linkForUse)
(replaceRE ".com/" ".com/microblog/" $linkForUse)
}}
{{ $search := slice $linkForUse }}
{{ $search = $search | append (replaceRE ".com/" ".com/blog/" $linkForUse) }}
{{ $search = $search | append (replaceRE ".com/" ".com/microblog/" $linkForUse) }}

{{/* printf "🔎 search [%v]" ($search|jsonify) */}}
{{/* If any aliases for page include those in search */}}
{{ range $alias := .Params.Aliases }}
{{/* printf "👀 alias: [%v]" $alias */}}<br>
{{ $aliasPath := print ($siteURLforWMs) "/" ($alias) }}
{{ $aliasPath := replaceRE "^www." "https://www." $aliasPath }}
{{/* printf "👀 aliaspath: [%v]" $aliasPath */}}<br>
{{ $search = $search | append $aliasPath }}
{{ $search = $search | append (replaceRE ".com/" ".com/blog/" $aliasPath) }}
{{ $search = $search | append (replaceRE ".com/" ".com/microblog/" $aliasPath) }}
{{ end }}

{{/* printf "🔎 search %s" ($search|jsonify (dict "prefix" " " "indent" " ")) */}}<br>

{{ $matches := slice }}
{{ range $s := $search }}
Expand All @@ -38,70 +46,68 @@ <h3>Webmentions</h3>

{{ if $matches }}
{{ $likes := where $matches "activity.type" "like" }}
{{ $replies := where $matches "activity.type" "in-reply-to" }}
{{ $mentions := where $matches "activity.type" "mention-of" }}
{{ $reposts := where $matches "activity.type" "repost-of"}}
{{ $replies := where $matches "activity.type" "reply" }}
{{ $mentions := where $matches "activity.type" "mention" }}
{{ $reposts := where $matches "activity.type" "repost" }}
{{ if $likes }}
<details>
<summary class="h4">Likes&nbsp;&nbsp;<span class="legal" style="font-weight: normal;">({{ len $likes }})</span></summary>
<ul class="webmentions__list_facepile">
{{ range $i, $like := $likes }}
<li><a href="{{$like.url}}" class="u-url"><img class="webmention__author__photo u-photo" src="{{ $like.author.photo}}" alt="{{ $like.author.name }}"></a></li>
<li><a href="{{ $like.data.url }}" class="u-url">
<img class="webmention__author__photo u-photo" src="{{ $like.data.author.photo }}" alt="{{ $like.data.author.name }}"></a>
</li>
{{end}}
</ul>
</details>
{{ end }}

{{ if $reposts }}
<details>

<summary class="h4">Reposts&nbsp;&nbsp;<span class="legal" style="font-weight: normal;">({{ len $reposts }})</summary>
<</summary>
<ul class="webmentions__list_facepile">
{{ range $i, $repost := $reposts }}
<li><a href="{{$repost.url}}" class="u-url"><img class="webmention__author__photo u-photo" src="{{ $repost.author.photo}}" alt="{{ $repost.author.name }}"></a></li>
{{/* printf "img: [%v]" $repost.data.author.photo */}}
<li>
<a href="{{ $repost.url }}" class="u-url">
<img class="webmention__author__photo u-photo" src="{{ $repost.data.author.photo }}" alt="{{ $repost.data.author.name }}"></a>
</li>
{{end}}
</ul>
</details>
{{ end }}

{{ if $replies }}
<details>
<summary class="h4">Comments&nbsp;&bull;&nbsp;Replies&nbsp;&nbsp;<span class="legal" style="font-weight: normal;">({{ len $replies }})</summary>
<ol class="webmentions__list">
{{ range $index, $reply := sort $replies "published" }}
<li class="webmentions__item">
<article class="webmention h-cite">
<div class="webmention__meta">
<a class="webmention__author p-author h-card u-url" href="{{$reply.url}}"><img class="webmention__author__photo u-photo" src="{{ $reply.author.photo}}" alt="{{ $reply.author.name }}"><strong class="p-name">{{ $reply.author.name }}</strong></a>&nbsp;<span class="legal"><time class="webmention__pubdate dt-published" datetime="{{ $reply.published }}">{{ $reply.published | dateFormat "Jan 2, 2006" }}</time></span>
<a class="webmention__author p-author h-card u-url" href="{{ $reply.data.url }}"><img class="webmention__author__photo u-photo" src="{{ $reply.data.author.photo}}" alt="{{ $reply.data.author.name }}"><strong class="p-name">{{ $reply.data.author.name }}</strong></a>&nbsp;<span class="legal"><time class="webmention__pubdate dt-published" datetime="{{ $reply.data.published }}">{{ $reply.data.published | dateFormat "Jan 2, 2006" }}</time></span>
</div>
<div class="webmention__content p-content">
{{ $reply.content.html | safeHTML }}
{{ $reply.data.content | safeHTML }}
</div>
</article>
</li>
{{end}}
</ol>
</details>
{{ end }}

{{ if $mentions }}
<details>
<summary class="h4">Mentions&nbsp;&nbsp;<span class="legal" style="font-weight: normal;">({{ len $mentions }})</summary></summary>
<ol class="webmentions__list">
{{ range $index, $mention := sort $mentions "published" }}
<li class="webmentions__item">
<article class="webmention h-cite">
<div class="webmention__meta">
<a class="webmention__author p-author h-card u-url" href="{{$mention.url}}"><img class="webmention__author__photo u-photo" src="{{ $mention.author.photo}}" alt="{{ $mention.author.name }}" class="profile photo"><strong class="p-name">{{ $mention.author.name }}</strong></a>&nbsp;<span class="legal"><time class="webmention__pubdate dt-published" datetime="{{ $mention.published }}">{{ $mention.published | dateFormat "Jan 2, 2006" }}</time></span>
<a class="webmention__author p-author h-card u-url" href="{{ $mention.data.url }}"><img class="webmention__author__photo u-photo" src="{{ $mention.data.author.photo}}" alt="{{ $mention.data.author.name }}" class="profile photo"><strong class="p-name">{{ $mention.data.author.name }}</strong></a>&nbsp;<span class="legal"><time class="webmention__pubdate dt-published" datetime="{{ $mention.data.published }}">{{ $mention.data.published | dateFormat "Jan 2, 2006" }}</time></span>
</div>
<div class="webmention__content p-content">
{{ $mention.content.html | safeHTML }}
{{ $mention.data.content | safeHTML }}
</div>
</article>
</li>
{{end}}
</ol>
</details>
{{ end }}

{{ else }}
Expand Down
3 changes: 3 additions & 0 deletions layouts/posts/list.html
Expand Up @@ -35,6 +35,9 @@ <h1 class="group-title">{{ .Key }}</h1>
<a href="{{- .RelPermalink -}}">
<h1 class="h1-glow">{{ .Title }}</h1>
<div class="post-meta">
<div class="post-meta-line">
{{ partial "webmention-counts.html" . }}
</div>
<div class="post-meta-line">
{{- with .Site.Params.dateformat | default "2006-01-02" | .PublishDate.Format -}}
<i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="{{ . }}">{{ . }}</time>&nbsp;
Expand Down

0 comments on commit f8ca3bf

Please sign in to comment.