einundzwanzig.space/src/includes/mixins.pug

mixin sprite(id)
  svg(role="img" title=id)&attributes(attributes)
    use(xlink:href=`${assetPath("/img/sprite.svg")}#${id}`)

mixin categories(current)
  ul.categories
    li: a(href="/podcast/" class=(!current && 'current')) Alles
    li: a(href="/podcast/news/" class=(current === 'News' && 'current')) News
    li: a(href="/podcast/interviews/" class=(current === 'Interviews' && 'current')) Interviews
    li: a(href="/podcast/lesestunde/" class=(current === 'Lesestunde' && 'current')) Lesestunde
    li: a(href="/podcast/der-weg/" class=(current === 'Der Weg' && 'current')) Der Weg
    li: a(href="/podcast/verschiedenes/" class=(current === 'Verschiedenes' && 'current')) Verschiedenes

mixin member(m)
  li.member(id=m.name)
    img(src=assetPath(m.image) alt=m.name loading="lazy")
    header
      h2=m.name
      .links
        if m.mastodon
          a(href=(m.mastodon) target="_blank" rel="nofollow noopener" title=`${m.name} on Mastodon`)
            +sprite("mastodon")
        if m.twitter
          a(href=(m.twitter.startsWith('https://') ? m.twitter : `https://twitter.com/${m.twitter}`) target="_blank" rel="nofollow noopener" title=`${m.name} on Twitter`)
            +sprite("twitter")
        if m.github
          a(href=(m.github.startsWith('https://') ? m.github : `https://github.com/${m.github}`) target="_blank" rel="nofollow noopener" title=`${m.name} on GitHub`)
            +sprite("github")
        if m.url
          a(href=m.url target="_blank" rel="nofollow noopener")
            +sprite("url")
    if m.text
      !=markdown(m.text)

mixin spende(d, trunc = false)
  .spende(id=d.id)&attributes(attributes)
    .inner
      img.avatar(src=(d.avatar || assetPath("/img/avatar.svg")) alt=d.name)
      h3.name= d.name
      .center
        if d.beschreibung
          .description
            - const [head, tail] = trunc ? truncate(d.beschreibung, 21) : [d.beschreibung]
            - const description = tail ? `${head} <a href="#${d.id}" class="showMore">[…&nbsp;mehr]</a> <span class="more">${tail}</span>` : head
            != markdown(description)
        if d.tags
          .tags
            each tag in d.tags
              span.tag= tag
      if d.twitter || d.github || d.gitlab
        .social
          if d.twitter
            a.twitter(href=`https://twitter.com/${d.twitter}` target="_blank" rel="nofollow noopener"): +sprite('twitter', 'Twitter')
          if d.mastodon
            a.mastodon(href=d.mastodon target="_blank" rel="nofollow noopener"): +sprite('mastodon', 'Mastodon')
          if d.gitlab
            a.gitlab(href=`https://gitlab.com/${d.gitlab}` target="_blank" rel="nofollow noopener"): +sprite('gitlab', 'GitLab')
          if d.github
            a.github(href=`https://github.com/${d.github}` target="_blank" rel="nofollow noopener"): +sprite('github', 'GitHub')
      .foot
        a.button(href=d.spendenURL target="_blank" rel="nofollow noopener")
          = `Spende an ${d.name}`

mixin episodeItem(e)
  article.episodeItem&attributes(attributes)
    a.plain(href=`/podcast/${e.slug}/`)
      .media
        img(src=assetPath(e.image) alt=e.title loading="lazy")
      .content
        .meta
          span= e.categoryName + (e.number ? ` #${e.number}` : '')
          time(datetime=e.date)= e.block || formatDate(e.date)
        .title=e.titlePlain

mixin episodePlayer(e)
  .player.player--single&attributes(attributes)
    a.player__coverlink(href=`/podcast/${e.slug}/`)
      img.player__cover(src=imgLarge data-amplitude-song-info="cover_art_url" data-amplitude-main-song-info="true")
    .player__bottom
      progress.player__progress.amplitude-song-played-progress(data-amplitude-main-song-played-progress="true")

      .player__time
        span.player__current-time
          span.player__current-minutes.amplitude-current-minutes(data-amplitude-main-current-minutes="true")
          = ':'
          span.player__current-seconds.amplitude-current-seconds(data-amplitude-main-current-seconds="true")
        span.player__speed.amplitude-playback-speed
        span.player__duration
          span.player__duration-hours.amplitude-duration-hours(data-amplitude-main-duration-hours="true")
          = ':'
          span.player__duration-minutes.amplitude-duration-minutes(data-amplitude-main-duration-minutes="true")
          = ':'
          span.player__duration-seconds.amplitude-duration-seconds(data-amplitude-main-duration-seconds="true")

      .player__controls
        .player__button.amplitude-play-pause(data-amplitude-main-play-pause="true" id="play-pause")
          +sprite("pause").player__button__icon--pause
          +sprite("play").player__button__icon--play

        .player__info
          a.plain(href=`/podcast/${e.slug}/`)
            .player__album(data-amplitude-song-info="album" data-amplitude-main-song-info="true")
            .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")

      .player__links
        a.player__download(href=e.enclosure.url)
          +sprite("download")
          | Download

  script.
    window.player = {
      songs: [
        {
          "name": "#{e.titlePlain}",
          "artist": "Einundzwanzig",
          "album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}",
          "url": "#{e.enclosure.url}",
          "cover_art_url": "#{assetPath(e.image)}"
        }
      ]
    };

mixin subscribe()
  script.
    window.subscribe = {
      title: "Einundzwanzig",
      subtitle: "Der Bitcoin Podcast",
      description: "#{site.meta.description}",
      cover: "#{assetUrl(site.meta.cardImage)}",
      feeds: [
        {
          type: "audio",
          format: "mp3",
          url: "#{site.meta.publicFeedUrl}",
          "directory-url-itunes": "#{site.meta.appleUrl}"
        }
      ]
    }
  script(src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" class="podlove-subscribe-button" data-language="de" data-size="big" data-json-data="subscribe" data-color=themeColor data-format="rectangle")
  noscript: a.button(href=site.meta.publicFeedUrl) Jetzt abonnieren