<style>

#peertube {

  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(/2026/images/peertube.webp);">
    <h2>BassTube</h2>
    <p>
      <strong>𝖁𝖎𝖉𝖊𝖔𝖘 𝖋𝖗𝖔𝖒 𝖙𝖍𝖊 𝕯𝖊𝖊𝖕𝖜𝖊𝖇</strong>
      <br />Decentralized, peer-to-peer, for the people! All you saw was Music!

    <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>
    <a class="button" href="https://v.basspistol.org/">More videos 📺</a>
  </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>
