78 lines
2.5 KiB
HTML
78 lines
2.5 KiB
HTML
{{/*
|
|
Mastodon Comments Partial
|
|
|
|
Displays comments from a Mastodon post. Requires mastodon_id in front matter.
|
|
Comment count is fetched at build time; full comments load on button click.
|
|
|
|
Inspired by: https://andreas.scherbaum.la/post/2024-05-23_client-side-comments-with-mastodon-on-a-static-hugo-website/
|
|
And the vibes of: I Saw the TV Glow
|
|
*/}}
|
|
|
|
{{- $host := "tilde.zone" -}}
|
|
{{- $username := "mnw" -}}
|
|
|
|
{{- if .Params.mastodon_id -}}
|
|
{{- $id := .Params.mastodon_id -}}
|
|
|
|
{{/* Fetch comment count at build time */}}
|
|
{{- $count := 0 -}}
|
|
{{- $apiUrl := printf "https://%s/api/v1/statuses/%s/context" $host $id -}}
|
|
{{- with resources.GetRemote $apiUrl -}}
|
|
{{- if .Err -}}
|
|
{{/* API error - show 0 */}}
|
|
{{- else -}}
|
|
{{- $data := .Content | transform.Unmarshal -}}
|
|
{{- if $data.descendants -}}
|
|
{{- $count = len $data.descendants -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{/* Build blocklist from front matter */}}
|
|
{{- $blocked := slice -}}
|
|
{{- if .Params.mastodon_blocked -}}
|
|
{{- $blocked = .Params.mastodon_blocked -}}
|
|
{{- end -}}
|
|
|
|
<div class="mastodon-comments-section">
|
|
<pre class="comments-header">/* ================================================== */
|
|
/* COMMENTS */
|
|
/* via the fediverse / tilde.zone */
|
|
/* ================================================== */</pre>
|
|
|
|
<noscript>
|
|
<pre class="comments-error">
|
|
ERROR: JavaScript required to load comments.
|
|
Enable JS or view discussion directly at:
|
|
https://{{ $host }}/@{{ $username }}/{{ $id }}
|
|
</pre>
|
|
</noscript>
|
|
|
|
<p class="comments-intro">
|
|
++ TRANSMISSION RECEIVED ++<br>
|
|
Reply to <a href="https://{{ $host }}/@{{ $username }}/{{ $id }}" rel="nofollow">this post on Mastodon</a> to join the discussion.
|
|
</p>
|
|
|
|
<div id="mastodon-comments-list">
|
|
<button type="button" id="load-comments-btn" onclick="loadMastodonComments()">
|
|
>> LOAD COMMENTS{{ if gt $count 0 }} ({{ $count }}){{ end }} <<
|
|
</button>
|
|
</div>
|
|
|
|
<p class="comments-note">
|
|
<small>// comments loaded from {{ $host }} when you click the button</small>
|
|
</p>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="{{ "css/mastodon-comments.css" | relURL }}">
|
|
<script src="{{ "js/purify.min.js" | relURL }}"></script>
|
|
<script src="{{ "js/mastodon-comments.js" | relURL }}"></script>
|
|
<script>
|
|
var mastodonHost = '{{ $host }}';
|
|
var mastodonUser = '{{ $username }}';
|
|
var mastodonId = '{{ $id }}';
|
|
var blockedToots = [{{ range $blocked }}'{{ . }}',{{ end }}];
|
|
</script>
|
|
|
|
{{- end -}}
|