redstrate.com/themes/red/layouts/shortcodes/stoot.html

<!-- from https://www.brycewray.com/posts/2022/06/static-mastodon-toots-hugo/ -->
{{ $masIns := .Get 0 }}
{{ $tootLink := "" }}
{{ $card := "" }}
{{ $handleInst := "" }}
{{ $mediaMD5 := "" }}
{{ $imageCount := 0 }}
{{ $votesCount := 0 }}
{{ $id := .Get 1 }}
{{ $urlToGet := print "https://" $masIns "/api/v1/statuses/" $id }}

{{- with resources.GetRemote $urlToGet  -}}
	{{ if (resources.GetRemote $urlToGet).Err }}
		<blockquote class="toot-blockquote">
			<p class="ctr legal">[Source not online<br />
			at time of site build.]</p>
		</blockquote>
	{{ else }}
		{{ $json := unmarshal .Content }}
		{{ $jsonHolder := $json }}{{/* Being safe */}}

		{{ if isset $json "account" }}
			{{ $tootLink = print "https://" $masIns "/" "@" $json.account.acct "/status/" $id }}
			{{ $handleInst = print "@" $json.account.acct "@" $masIns }}
		{{ end }}

		{{ if isset $json "content" }}
			<blockquote class="generic-con" cite="{{ $tootLink }}">
				<div class="toot-header">
                    <!-- Disabled due to CORS troubles for now -->
					<!--<a class="toot-profile" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">
						<img
							src="{{ $json.account.avatar }}"
							alt="Mastodon avatar for {{ $handleInst }}"
							loading="lazy"
						/>
					</a>-->
					<div class="toot-author">
						<span class="toot-author-name" rel="noopener">{{ $json.account.display_name }}</span>
						<a class="toot-author-handle" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">{{ $handleInst }}</a>
					</div>
				</div>
				{{ $json.content | safeHTML }}
				{{ with $json.media_attachments }}
					{{ range $media_attachments := . }}
						{{ if eq $media_attachments.type "image" }}
							{{ $imageCount = (add ($imageCount) 1) }}
						{{ end }}
					{{ end }}
					<div class="toot-img-grid-{{ $imageCount }}">
					{{ range $media_attachments := . }}
						{{ if eq $media_attachments.type "image" }}
							{{ $mediaMD5 = md5 $media_attachments.url }}
							<img
								src="{{ $media_attachments.url }}"
								alt="Image {{ $media_attachments.id }} from toot {{ $id }} on {{ $masIns }}"
								class="toot-media-img actual-article-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} toot-sens-blur{{ end }}"
								loading="lazy"
								{{- if $json.sensitive }}onclick="this.classList.toggle('toot-sens-blur-no')"{{- end }}
							/>
							{{- if $json.sensitive -}}
								<div class="blur-text">
									Sensitive content<br />
									(flagged&nbsp;at&nbsp;origin)
								</div>
							{{- end -}}
						{{ end }}
					{{ end }}
					</div>
					{{/*
						N.B.:
						The above results in an empty, no-height div
						when there's no image but there **is**
						at least one item in `$media_attachments`.
						Unfortunately, it seems to be the only way
						to accomplish this. Not a good HTML practice,
						but gets the job done.
					*/}}
					{{ range $media_attachments := . }}
						{{ if eq $media_attachments.type "video" }}
							{{ $mediaMD5 = md5 $media_attachments.url }}
							<div class="ctr toot-video-wrapper">
								<video muted playsinline controls class="ctr toot-media-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} toot-sens-blur{{ end }}"{{- if $json.sensitive }}onclick="this.classList.toggle('toot-sens-blur-no')"{{- end }}>
									<source src="{{ $media_attachments.url }}">
									<p class="legal ctr">(Your browser doesn&rsquo;t support the <code>video</code> tag.)</p>
								</video>
								{{- if $json.sensitive -}}
									<div class="blur-text">
										Sensitive content<br />
										(flagged&nbsp;at&nbsp;origin)
									</div>
								{{- end -}}
							</div>
						{{ end }}
						{{ if eq $media_attachments.type "gifv" }}
							{{ $mediaMD5 = md5 $media_attachments.url }}
							<div class="ctr toot-video-wrapper">
								<video loop autoplay muted playsinline controls controlslist="nofullscreen" class="ctr toot-media-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} toot-sens-blur{{ end }}" {{- if $json.sensitive }}onclick="this.classList.toggle('toot-sens-blur-no')"{{- end }}>
									<source src="{{ $media_attachments.url }}">
									<p class="legal ctr">(Your browser doesn&rsquo;t support the <code>video</code> tag.)</p>
								</video>
								{{- if $json.sensitive -}}
									<div class="blur-text">
										Sensitive content<br />
										(flagged&nbsp;at&nbsp;origin)
									</div>
								{{- end -}}
							</div>
						{{ end }}
					{{ end }}
				{{ end }}
				{{ with $json.card }}
					{{- $cardData := . -}}
					{{- with $cardData.image -}}
						<a href="{{ $cardData.url }}" rel="'noopener">
							<div class="toot-card">
								<div class="toot-card-image">
									<img src="{{ $cardData.image }}" alt="Card image from {{ $masIns }} toot {{ $id }}" loading="lazy" class="toot-card-image-image" />
								</div>
								<div class="toot-card-content">
									<p class="card-title">{{ $cardData.title }}</p>
									<p class="card-description">{{ $cardData.description }}</p>
								</div>
							</div>
						</a>
					{{- end -}}
				{{ end }}
				{{ with $json.poll }}
					{{ $poll := . }}
					{{ with $poll.options }}
						{{ range $pollOptions := . }}
							{{ $votesCount = add $votesCount  $pollOptions.votes_count }}
						{{ end }}
						<div class="toot-poll-wrapper">
							{{ range $pollOptions := . }}
								<div class="toot-poll-count">
									<strong>{{ (mul 100 (div $pollOptions.votes_count $votesCount)) | lang.FormatPercent 1 }}</strong>
								</div>
								<div class="toot-poll-meter">
									<meter id="vote-count" max="{{ $votesCount }}" value="{{ $pollOptions.votes_count }}"></meter>
								</div>
								<div class="toot-poll-title">{{ $pollOptions.title }}</div>
							{{ end }}
						</div>
						<p class="legal toot-poll-total">{{ $votesCount }} people</p>
					{{ end }}
				{{ end }}
				<div class="toot-footer">
					<a href="https://{{ $masIns }}/@{{ $json.account.acct }}/{{ $json.id }}" class="toot-date" rel="noopener">{{ dateFormat "3:04 PM • January 2, 2006" $json.created_at }}</a>&nbsp;<span class="pokey">(UTC)</span>
				</div>
			</blockquote>
		{{ end }}
	{{ end }}
{{- end -}}