More Stuff I Do With Webmention, Micropub and Brid.gy
After my first work on Micropub, Microformat and WebMention (you can find more here ) I change some things here and there.
I change the code because I find some cleaner solution for some of the implementations or I add new function in my stack of the blog.
Webmention
I rework how I render all the microposts on my blog. So I have some template partial for my site and add more custumization on the single type of webmentions.
Manage the webmention
This is the basic template for the webmention. Every type of webmention has his “hugo partials”1 /layouts/partials/webmention.html
<div id="webmentions" class="row">
{{ $dataJ := getJSON (print "https://webmention.io/api/mentions.jf2?target=" .Site.Params.HostName .RelPermalink ) }}
<div class="container-fluid">
{{ range $dataJ.children }}
{{if eq (index . "wm-property") "in-reply-to"}}
{{ partial "webmention/in-reply-to.html" . }}
{{end}}
{{end}}
</div>
<div class="row">
{{ range $dataJ.children }}
{{if eq (index . "wm-property") "like-of"}}
{{ partial "webmention/like-of.html" . }}
{{end}}
{{if eq (index . "wm-property") "repost-of"}}
{{ partial "webmention/repost-of.html" . }}
{{end}}
{{if eq (index . "wm-property") "bookmark-of"}}
{{ partial "webmention/bookmark-of.html" . }}
{{end}}
{{end}}
</div>
<div class="row">
{{ range $dataJ.children }}
{{if eq (index . "wm-property") "mention-of"}}
{{ partial "webmention/mention-of.html" . }}
{{end}}
{{end}}
</div>
{{ range $dataJ.children }}
<div class="row">
<div class="col">
<p>
{{if eq (index . "wm-property") "rsvp"}}
{{ partial "webmention/rsvp.html" . }}
{{end}}
</p>
</div>
</div>
{{end}}
</div>NB: this code work only because I use GoHugo and I have webmention.io as endpoint for my webmention and I use the api for get the json format of the webmention.
If you use somethings else you need to change the code.
Some single example
With this under all my post/article/stuff I can render all the webmentions I receive. Here are some of the single partial templates with booostrap5 as css:
Bookmarks
<!-- /layouts/partials/webmention/bookmark-of.html -->
<div class="col-2">
<a class="reaction" rel="nofollow ugc" title="{{.author.name}} replied" href="{{.url}}">
<img src="{{.author.photo}}" loading="lazy" decoding="async" alt="{{.author.name}}">🔖
</a>
</div>In replay
<!-- /layouts/partials/webmention/in-reply-to.html -->
<div class="row">
<div class="col-2">
<a class="reaction" rel="nofollow ugc" title="{{.author.name}} replied" href="{{.url}}">
<img src="{{.author.photo}}" loading="lazy" decoding="async" alt="{{.author.name}}">
</a>
</div>
<div class="col text-start">
<a class="source" rel="nofollow ugc" href="{{.url}}">💬 {{.author.name}} - {{index . "wm-received" | time.Format "2006-01-02 15:04:05" }}
</a>
<p class="text">{{.content.html |safeHTML}}</p>
</div>
</div>Like of
<!-- /layouts/partials/webmention/like-of.html -->
<div class="col-2">
<a class="reaction" rel="nofollow ugc" title="{{.author.name}} replied" href="{{.url}}">
<img src="{{.author.photo}}" loading="lazy" decoding="async" alt="{{.author.name}}">❤️
</a>
</div>Mention
<!-- /layouts/partials/webmention/mention-of.html -->
<div class="row">
<div class="col-2">
<a class="reaction" rel="nofollow ugc" title="{{.author.name}} replied" href="{{.url}}">
<img src="{{.author.photo}}" loading="lazy" decoding="async" alt="{{.author.name}}">
</a>
</div>
<div class="col text-start">
<a class="source" rel="nofollow ugc" href="{{.url}}">✨ {{.author.name}} - {{index . "wm-received" | time.Format "2006-01-02 15:04:05" }}
</a>
<p class="text">{{.content.html |safeHTML | truncate 300}}</p>
</div>
</div>Repost
<!-- /layouts/partials/webmention/repost-of.html -->
<div class="col-2">
<a class="reaction" rel="nofollow ugc" title="{{.author.name}} replied" href="{{.url}}">
<img src="{{.author.photo}}" loading="lazy" decoding="async" alt="{{.author.name}}">🔁
</a>
</div>Brid.gy
After reading the Chrinngel’s post about his experience with webmention and some toot with him I decide to rework my POSSE2 pipeline with Brid.gy and other tools.
In Brid.gy you can setup autopublish for your posts/articles/stuff if you put a link to brid.gy and send a webmention of the page.
If all are setup in the right way you have something like this:
If you set all in the right way Brid.gy will post what you want and generate the webmentions from the social like Twitter3, Mastodon and Github.
Micropub
I implement a Micropub server with Django for some of my necessities like creating a endpoint/gui for add article, post or other thing and implement POSSE2
This is Appletune, my magical Django server named after a Grass/Dragon pokemon which look like an apple pie on a dinosaur.4
With this little server and more money I will conquer the galaxy but for now I use it with Micropublish.Net for publish stuff on the go.
I am thnking about develop more stuff for my server but I don’t know when I have the time to do it…
Hugo partial template explain in the official documentations ↩︎
I don’t know if with the new Twitter Api Brid.gy will keep the twitter integrations but for now it is working. ↩︎
I copy the idea from this blog. The article is OLD but the idea is good so I take it and implement it. ↩︎
Comments
To reply to this post, you can send a Webmention or you can toot me at [email protected]
You mentioned this post on your site? Send a Webmention
This post is part of the Hugo Tricks series
- Hugo With Lazy Loading and Webp
- WebP and Avif With Hugo's Static Site Generator
- More Stuff I Do With Webmention, Micropub and Brid.gy
- New Render Image For Hugo
- Add Photo Page in your Hugo Site
- Github Action for Syndication Links
This post is part of the Indiweb, Webmentions and Friends series
- How I implement Indieweb, Webmention and H Entry in My Blog
- More Stuff I Do With Webmention, Micropub and Brid.gy
- Github Action for Syndication Links
- An Easy Way to Start a Life in the IndieWeb