mastodon embed shortcode for Hugo

toot.html

{{/* layouts/shortcodes/toot.html */}}
<style>
.toot {
    --toot-bg: var(--entry);
    --toot-border: rgba(0,0,0,0.1);
    --toot-radius: 12px;
    --toot-shadow: 0 1px 3px rgba(0,0,0,0.1);
    
    background: var(--toot-bg);
    border: 1px solid var(--toot-border);
    border-radius: var(--toot-radius);
    box-shadow: var(--toot-shadow);
    padding: 16px;
    margin: 1.5rem auto;
    max-width: 600px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.dark .toot {
    --toot-border: rgba(255,255,255,0.1);
    --toot-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toot-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.toot-profile img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
}

.toot-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toot-author-name {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    line-height: 20px;
}

.toot-author-handle {
    color: var(--secondary);
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
}

.toot-content {
    color: var(--content);
    font-size: 15px;
    line-height: 1.5;
    margin: 12px 0;
}

.toot-content p {
    margin: 0 0 12px;
}

.toot-content p:last-child {
    margin-bottom: 0;
}

.toot-content a {
    color: #2b90d9;
    text-decoration: none;
}

.toot-content a:hover {
    text-decoration: underline;
}

.toot-media-grid {
    display: grid;
    grid-gap: 8px;
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
}

.toot-media-grid[data-count="1"] {
    grid-template-columns: 1fr;
}

.toot-media-grid[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.toot-media-grid[data-count="3"] {
    grid-template-columns: repeat(2, 1fr);
}

.toot-media-grid[data-count="3"] > :first-child {
    grid-column: 1 / -1;
}

.toot-media-grid[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
}

.toot-media-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.toot-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--toot-border);
    color: var(--secondary);
    font-size: 14px;
}

.toot-date {
    color: inherit;
    text-decoration: none;
}

.toot-date:hover {
    text-decoration: underline;
}
</style>

{{ $masIns := .Get "instance" }}
{{ $id := .Get "id" }}
{{ $tootLink := "" }}
{{ $handleInst := "" }}
{{ $urlToGet := print "https://" $masIns "/api/v1/statuses/" $id }}

{{ with resources.GetRemote $urlToGet }}
    {{ $json := .Content | unmarshal }}
    {{ if isset $json "account" }}
        {{ $tootLink = print "https://" $masIns "@" $json.account.acct "/status/" $id }}
        {{ $handleInst = print "@" $json.account.acct "@" $masIns }}
    {{ end }}

    {{ if isset $json "content" }}
        <div class="toot">
            <div class="toot-header">
                <a class="toot-profile" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">
                    <img src="{{ $json.account.avatar }}" 
                         alt="Avatar for {{ $handleInst }}" 
                         loading="lazy">
                </a>
                <div class="toot-author">
                    <a class="toot-author-name" 
                       href="https://{{ $masIns }}/@{{ $json.account.acct }}" 
                       rel="noopener">{{ $json.account.display_name }}</a>
                    <a class="toot-author-handle" 
                       href="https://{{ $masIns }}/@{{ $json.account.acct }}" 
                       rel="noopener">{{ $handleInst }}</a>
                </div>
            </div>
            
            <div class="toot-content">{{ $json.content | safeHTML }}</div>

            {{ with $json.media_attachments }}
                {{ $count := len . }}
                <div class="toot-media-grid" data-count="{{ $count }}">
                    {{ range . }}
                        {{ if eq .type "image" }}
                            <div class="toot-media-item">
                                <img src="{{ .url }}" 
                                     alt="" 
                                     loading="lazy">
                            </div>
                        {{ end }}
                    {{ end }}
                </div>
            {{ end }}

            <div class="toot-footer">
                <a href="{{ $tootLink }}" 
                   class="toot-date" 
                   rel="noopener">{{ dateFormat "3:04 PM · Jan 2, 2006" $json.created_at }}</a>
            </div>
        </div>
    {{ end }}
{{ else }}
    <div class="toot">
        <p style="text-align: center; color: var(--secondary); margin: 0;">
            [Source not online at time of site build.]
        </p>
    </div>
{{ end }}