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 || "/img/avatar.svg") alt=m.name loading="lazy")
    header
      h2=m.name
      .links
        if m.nostr
          a(href=`https://snort.social/p/${m.nostr}` target="_blank" rel="nofollow noopener" title=`${m.name} on Nostr`)
            +sprite("nostr")
        if m.twitter
          a(href=`https://twitter.com/${m.twitter}` target="_blank" rel="nofollow noopener" title=`${m.name} on Twitter`)
            +sprite("twitter")
        if m.github
          a(href=`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 map(id, markers)
  .vectorMap(id=id)
  script.
    const markers = [!{markers}];
    // https://jvectormap.com/documentation/javascript-api/jvm-map/
    new jvm.MultiMap({
      container: $(`#!{id}`),
      maxLevel: 1,
      main: {
        map: 'europe_mill',
        backgroundColor: 'transparent',
        markers,
        focusOn: ['DE', 'AT', 'CH', 'LI', 'LU'],
        regionStyle: {
          initial: {
            'fill': 'var(--color-map-region)',
            'stroke': 'var(--color-map-outline)',
            'stroke-width': .25
          },
          hover: {
            'fill-opacity': .8,
            cursor: 'pointer'
          }
        },
        onMarkerClick(event, index) {
          const marker = markers[index]
          if (marker.url) window.open(marker.url, '_blank');
        }
      },
      mapUrlByCode(code, multiMap) {
        return `/vendor/jvectormap/maps/${code.toLowerCase()}_${multiMap.defaultProjection}.js`;
      },
      mapNameByCode(code, multiMap) {
        return `${code.toLowerCase()}_${multiMap.defaultProjection}`;
      }
    });

mixin meetupMap()
  +map('meetupMap', meetups.map(m => JSON.stringify({
        name: m.name,
        latLng: [m.latitude, m.longitude],
        url: m.url,
        style: {
          fill: m.name.startsWith('Einundzwanzig') || m.name.includes('Einezwänzg') || m.name.includes('Eenanzwanzeg') || m.name.includes('Yirmibir') ? 'var(--color-accent)' : 'var(--color-neutral-50)'
        }
      })).join(','))

mixin spende(d, trunc = false)
  .spende(id=d.id)&attributes(attributes)
    .inner
      img.avatar(src=assetPath(d.avatar || "/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
        if d.spendenURL
          a.button(href=d.spendenURL target="_blank" rel="nofollow noopener")
            = `Spende an ${d.name}`
        else if d.info
          p.info= d.info

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" alt=e.titlePlain loading="lazy")
    .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