norbert/pages
norbert/pages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Norbert Tretkowski 2025-06-22 18:23:26 +02:00
commit c61393c39b
Signed by: norbert
GPG key ID: EAA31A3693AAB231
162 changed files with 5158 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

168
layouts/shortcodes/stoot.html Normal file
View file

@ -0,0 +1,168 @@
{{ $masIns := .Get "instance" }}
{{ $id := .Get "id" }}
{{ $tootLink := "" }}
{{ $card := "" }}
{{ $handleInst := "" }}
{{ $mediaMD5 := "" }}
{{ $imageCount := 0 }}
{{ $votesCount := 0 }}
{{ $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="toot-blockquote" cite="{{ $tootLink }}">
<div class="toot-header">
<a class="toot-profile" href="https://{{ $masIns }}/@{{ $json.account.acct }}" rel="noopener">
<img
src="{{ $json.account.avatar }}"
alt="Mastodon avatar for {{ $handleInst }}"
width="64" height="64"
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>
{{ $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 }}
<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="toot-media-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 }}
<style>
.img-{{ $mediaMD5 }} {
aspect-ratio: {{ $media_attachments.meta.original.width }} / {{ $media_attachments.meta.original.height }};
}
</style>
<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 }}
<style>
.img-{{ $mediaMD5 }} {
aspect-ratio: {{ $media_attachments.meta.original.width }} / {{ $media_attachments.meta.original.height }};
}
</style>
<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 -}}