www.duckland.org/themes/nederburg/layouts/shortcodes/smoot.html

{{ $masIns := .Get 0 }}
{{ $tootLink := "" }}
{{ $card := "" }}
{{ $handleInst := "" }}
{{ $mediaMD5 := "" }}
{{ $imageCount := 0 }}
{{ $votesCount := 0 }}
{{ $id := .Get 1 }}
{{ $urlToGet := print "https://" $masIns "/api/v1/statuses/" $id }}
{{ $json := getJSON $urlToGet }}
{{ $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="tweet-card" cite="{{ $tootLink }}">
    <div class="tweet-header">
      <a class="tweet-profile twitterExt" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">
        <img
          src="{{ $json.account.avatar }}"
          alt="Mastodon avatar for {{ $handleInst }}"
          loading="lazy"
        />
      </a>
      <div class="tweet-author">
        <a class="tweet-author-name twitterExt" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">{{ $json.account.display_name }}</a>
        <a class="tweet-author-handle twitterExt" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">{{ $handleInst }}</a>
      </div>
    </div>
    <p class="tweet-body">
      {{ $json.content | safeHTML }}
    </p>
    {{ with $json.media_attachments }}
      {{ range $media_attachments := . }}
        {{ if eq $media_attachments.type "image" }}
          {{ $imageCount = (add ($imageCount) 1) }}
        {{ end }}
      {{ end }}
      <div class="tweet-img-grid-{{ $imageCount }}">
      {{ range $media_attachments := . }}
        {{ if eq $media_attachments.type "image" }}
          {{ $mediaMD5 = md5 $media_attachments.url }}
          <style>
            .img-{{ $mediaMD5 }} {
              aspect-ratio: {{ $media_attachments.meta.original.width }} / {{ $media_attachments.meta.original.height }};
            }
          </style>
          <img
            src="{{ $media_attachments.url }}"
            alt="Image {{ $media_attachments.id }} from toot {{ $id }} on {{ $masIns }}"
            class="tweet-media-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} tweet-sens-blur{{ end }}"
            loading="lazy"
            {{- if $json.sensitive }}onclick="this.classList.toggle('tweet-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 }}
          <style>
            .img-{{ $mediaMD5 }} {
              aspect-ratio: {{ $media_attachments.meta.original.width }} / {{ $media_attachments.meta.original.height }};
            }
          </style>
          <div class="ctr tweet-video-wrapper">
            <video muted playsinline controls class="ctr tweet-media-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} tweet-sens-blur{{ end }}"{{- if $json.sensitive }}onclick="this.classList.toggle('tweet-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 }}
          <style>
            .img-{{ $mediaMD5 }} {
              aspect-ratio: {{ $media_attachments.meta.original.width }} / {{ $media_attachments.meta.original.height }};
            }
          </style>
          <div class="ctr tweet-video-wrapper">
            <video loop autoplay muted playsinline controls controlslist="nofullscreen" class="ctr tweet-media-img img-{{ $mediaMD5 }}{{ if $json.sensitive }} tweet-sens-blur{{ end }}" {{- if $json.sensitive }}onclick="this.classList.toggle('tweet-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="card">
            <img src="{{ $cardData.image }}" alt="Card image from {{ $masIns }} toot {{ $id }}" loading="lazy" class="tweet-card-img" />
            <p>
              <span class="card-title">{{ $cardData.title }}</span><br />
              {{ $cardData.description }}
            </p>
          </div>
        </a>
      {{- end -}}
    {{ end }}
    {{ with $json.poll }}
      {{ $poll := . }}
      {{ with $poll.options }}
        {{ range $pollOptions := . }}
          {{ $votesCount = add $votesCount  $pollOptions.votes_count }}
        {{ end }}
        <div class="tweet-poll-wrapper">
          {{ range $pollOptions := . }}
            <div class="tweet-poll-count">
              <strong>{{ (mul 100 (div $pollOptions.votes_count $votesCount)) | lang.FormatPercent 1 }}</strong>
            </div>
            <div class="tweet-poll-meter">
              <meter id="vote-count" max="{{ $votesCount }}" value="{{ $pollOptions.votes_count }}"></meter>
            </div>
            <div class="tweet-poll-title">{{ $pollOptions.title }}</div>
          {{ end }}
        </div>
        <p class="legal">{{ $votesCount }} votes</p>
      {{ end }}
    {{ end }}
    <div class="tweet-footer">
      <a href="https://{{ $masIns }}/@{{ $json.account.acct }}/{{ $json.id }}" class="tweet-date twitterExt" rel="noopener">{{ dateFormat "3:04 PM • January 2, 2006" $json.created_at }}</a>&nbsp;<span class="legal">(UTC)</span>
    </div>
  </blockquote>
{{ end }}