basspistol2025/themes/basspistol2025/layouts/partials/body/peertube.html
2025-06-30 00:28:00 +02:00

163 lines
4.4 KiB
HTML

<style>
#peertube {
* {
filter: grayscale(100%);
transition: filter 17s linear;
}
*:hover {
filter: grayscale(0%) !important;
transition: filter .1s linear;
}
display: flex;
flex-wrap: wrap;
flex-direction: row;
article {
margin: 2px;
flex: 1 1 300px;
.cartouche {
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap;
width: 100%;
}
.cartouche > a {
flex: 0 0 125px;
height: 125px;
margin-bottom: 10px;
}
.cartouche > p {
flex: 1 1 100px;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
}
}
h2 {
font-size: 12em;
/* text-transform: uppercase;*/
line-height: 1em;
flex: 1 1 100%;
}
p {
flex: 1 1 100%;
font-size: .6em;
line-height: 1.75em;
max-width: 33vw;
strong {
font-size: 1.25em;
}
}
@media screen and (max-width: 1024px) {
h2 {
font-size: 8em;
}
p {
font-size: .9em;
max-width: unset;
}
strong {
font-size: 1.5em;
}
}
.peertubes {
display: flex;
align-items: end;
padding: 20px;
justify-content: center;
flex: 1 1 300px;
min-height: 300px;
background-size: cover;
background-position: center center;
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(117, 19, 93, 0));
}
.peertubes:hover {
background-size: cover;
background-position: center center;
linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(117, 19, 93, 0)),
}
.substance {
position: relative;
display: flex;
flex-wrap: wrap;
flex: 1 1 300px;
}
.section
}
</style>
{{ $data := dict }}
{{ $url := "https://v.basspistol.org/api/v1/video-playlists/tubcTiUQaJ29JxeCzRqvUc/videos?count=100" }}
<section id="peertube">
<article class="section-headers" style="background-image: url(/2025/images/peertube.webp);">
<h2>BassTube</h2>
<p>
<strong>Videos from the deepweb.</strong>
<br />Decentralized, peer-to-peer, for the people! All you saw was sound!
<br /><br />
Basspistol facilitates <a href="https://v.basspistol.org" style="text-decoration: underline;">a Peertube instance</a>, tapping into a large network of independent and sovereign creators from the deepweb. The videos displayed bellow are shuffled every 30 minute, by the random gods.
</p>
</article>
{{ with try (resources.GetRemote $url) }}
{{ with .Err }}
{{ errorf "%s" . }}
{{ else with .Value }}
{{ $data = .Content | transform.Unmarshal }}
{{ else }}
{{ errorf "Unable to get remote resource %q" $url }}
{{ end }}
{{ end }}
{{ with $data.data }}
{{ range . | shuffle | last 5 }}
<article class="peertubes" style="background-image:linear-gradient(to bottom, rgba(128, 0, 128, .5), rgba(128, 0, 128, 1)),url(https://v.basspistol.org{{ .video.previewPath }})">
<div class="cartouche">
<a href="{{ .video.url }}" target="_blank">
<svg version="1.1" viewBox="0 0 127 127" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="clipPath2"><circle cx="63.5" cy="63.5" r="63.5" fill="purple" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:stroke fill markers"/></clipPath></defs><circle cx="63.5" cy="63.5" r="63.5" fill="purple" opacity=".75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:stroke fill markers"/><image width="127" height="127" clip-path="url(#clipPath2)" preserveAspectRatio="none"
{{ range .video.account.avatars }}
{{ if eq .fileUrl nil }}xlink:href="https://v.basspistol.org/client/assets/images/logo.svg"{{ else }}xlink:href="{{ .fileUrl }}"{{ end }}
{{ end }}
/><path d="m50.524 40.207c-2.9584-1.4787-6.4358 0.68528-6.4159 3.9925l0.23235 38.269c0.02025 3.2837 3.4786 5.4067 6.4159 3.9385l38.153-19.077c3.2655-1.6346 3.2655-6.2949 0-7.9294z" fill="orange" stop-color="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".83778" style="paint-order:stroke fill markers"/></svg>
</svg>
</a>
<div>
<p><strong>{{ .video.name }}</strong></p>
<p>&nbsp;</p>
<p class="author">{{ .video.account.displayName }}</p>
</div>
</div>
</article>
{{ end }}
<!-- <pre>{{ debug.Dump $data }}</pre>-->
{{ end }}
<article class="section-footers"></article>
</section>