Add soundboard

content/soundboard.json

@@ -0,0 +1,109 @@
+[
+  {
+    "title": "Gruppe",
+    "sounds": [
+      {
+        "title": "Bester Mann",
+        "file": "/sounds/gruppe/bester-mann-markus.mp3"
+      },
+      {
+        "title": "Brudi",
+        "file": "/sounds/gruppe/brudi.mp3"
+      },
+      {
+        "title": "Die Gruppe ist das geilste",
+        "file": "/sounds/gruppe/das-geilste.mp3"
+      },
+      {
+        "title": "Ich hab's geschafft",
+        "file": "/sounds/gruppe/ich-habs-geschafft.mp3"
+      },
+      {
+        "title": "Komm in die Gruppe",
+        "file": "/sounds/gruppe/komm-in-die-gruppe.mp3"
+      },
+      {
+        "title": "Trading hat mein Leben verändert",
+        "file": "/sounds/gruppe/trading.mp3"
+      }
+    ]
+  },
+  {
+    "title": "Panzerknacker",
+    "sounds": [
+      {
+        "title": "Pass mal auf",
+        "file": "/sounds/panzerknacker/pass-mal-auf.mp3"
+      },
+      {
+        "title": "Was für eine Bullenscheiße",
+        "file": "/sounds/panzerknacker/bullenscheisse.mp3"
+      },
+      {
+        "title": "Bullshit",
+        "file": "/sounds/panzerknacker/bullshit.mp3"
+      },
+      {
+        "title": "So eine Scheiße",
+        "file": "/sounds/panzerknacker/so-eine-scheisse.mp3"
+      },
+      {
+        "title": "Wie das Teil funktioniert",
+        "file": "/sounds/panzerknacker/wie-das-teil-funktioniert.mp3"
+      },
+      {
+        "title": "Keine Schutzmechanismen mehr",
+        "file": "/sounds/panzerknacker/keine-schutzmechanismen-mehr.mp3"
+      },
+      {
+        "title": "Selten so viel Scheiße gelesen",
+        "file": "/sounds/panzerknacker/selten-so-viel-scheisse-gelesen.mp3"
+      },
+      {
+        "title": "Dezentralisierung",
+        "file": "/sounds/panzerknacker/dezentralisierung.mp3"
+      },
+      {
+        "title": "Bitcoin kostet",
+        "file": "/sounds/panzerknacker/bitcoin-kostet.mp3"
+      },
+      {
+        "title": "Investment",
+        "file": "/sounds/panzerknacker/investment.mp3"
+      },
+      {
+        "title": "Was soll mir das bringen?",
+        "file": "/sounds/panzerknacker/was-soll-mir-das-bringen.mp3"
+      },
+      {
+        "title": "Dann ist das Zeug weg",
+        "file": "/sounds/panzerknacker/dann-ist-das-zeug-weg.mp3"
+      },
+      {
+        "title": "Stromgeschwindigkeit",
+        "file": "/sounds/panzerknacker/stromgeschwindigkeit.mp3"
+      },
+      {
+        "title": "Alternative zu Gold",
+        "file": "/sounds/panzerknacker/alternative-zu-gold.mp3"
+      }
+    ]
+  },
+  {
+    "title": "Verschiedenes",
+    "sounds": [
+      {
+        "title": "Hey Heey Heeey",
+        "file": "/sounds/heyheyhey.mp3"
+      },
+      {
+        "title": "Der Markt crasht",
+        "file": "/sounds/hosp/der-markt-crasht.mp3"
+      },
+      {
+        "title": "Was ist bloß mit IOTA los?",
+        "file": "/sounds/hosp/iota.mp3"
+      }
+    ]
+  }
+]

helpers.js

@@ -16,7 +16,14 @@ const replacements = str => {
   return str.replace(/"https:\/\/twitter\.com\/_d11n_\/?"/, '"https://bitcoinhackers.org/@d11n"')
 }
 
+// slug
+const slugify = str => str.toLowerCase()
+  .replace('ä', 'ae').replace('ö', 'oe').replace('ü', 'ue')
+  .replace(/\s+/g, '-').replace(/[^\w\-]+/g, '')
+  .replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '')
+
 module.exports = {
   markdown: mdTransformer.render,
-  replacements
+  replacements,
+  slugify
 }

pug.config.js

@@ -1,5 +1,5 @@
 // initialize markdown rendering
-const { markdown } = require('./helpers')
+const { markdown, slugify } = require('./helpers')
 
 const IS_DEV = process.env.NODE_ENV === 'development'
 const HOST = IS_DEV ? 'localhost:3000' : 'einundzwanzig.space'
@@ -25,6 +25,7 @@ module.exports = {
   basedir: './src/includes',
   random,
   shuffle,
+  slugify,
   assetUrl,
   assetPath,
   formatDate,

src/css/base/variables.css

@@ -1,6 +1,7 @@
 @custom-media --up_to_S screen and (max-width: 360px);
 @custom-media --up_to_M screen and (max-width: 599px);
 @custom-media --up_to_L screen and (max-width: 839px);
+@custom-media --S_to_M screen and (min-width: 360px) and (max-width: 599px);
 @custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);
 @custom-media --M_and_up screen and (min-width: 600px);
 @custom-media --L_and_up screen and (min-width: 840px);

src/css/main.css

@@ -10,3 +10,4 @@
 @import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';
+@import 'sections/soundboard.css';

src/css/sections/soundboard.css

@@ -0,0 +1,26 @@
+#soundboard {
+  & h2 {
+    margin-top: var(--space-xl);
+  }
+
+  & .sounds {
+    display: grid;
+    grid-gap: var(--space-l);
+    margin: 0;
+    list-style: none;
+    grid-auto-rows: 1fr;
+
+    @media (--up_to_S) {
+      grid-template-columns: 1fr;
+    }
+    @media (--S_to_M) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media (--M_to_L) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    @media (--L_and_up) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+}

src/soundboard.pug

@@ -0,0 +1,42 @@
+extends /template.pug
+
+block vars
+  - const title = 'Soundboard'
+  - const description = 'Das Einundzwanzig Podcast Soundboard.'
+
+block main
+  #soundboard.wrap
+    script.
+      window.player = { songs: [], continue_next: false };
+    section
+      h1= title
+      .player.player--soundboard
+        .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__duration
+              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
+              .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
+
+      - let index = 0
+      each group in soundboard
+        h2= group.title
+        div.sounds
+          each sound in group.sounds
+            script.
+              window.player.songs.push({ album: '#{group.title}', name: '#{sound.title.replace("'", "\\'")}', url: '#{sound.file}' })
+            button.button(type="button" onclick=`Amplitude.playSongAtIndex(${index})`)= sound.title
+            - index++

tasks/fetch_feed.js

@@ -1,6 +1,6 @@
 const { writeFileSync } = require('fs')
 const { join, resolve } = require('path')
-const { replacements } = require('../helpers')
+const { replacements, slugify } = require('../helpers')
 const { masterFeedUrl, publicFeedUrl } = require('../content/meta.json')
 const request = require('sync-request')
 const Parser = require('rss-parser')
@@ -9,11 +9,6 @@ const dir = resolve(__dirname, '..')
 const write = (name, data) => writeFileSync(join(dir, name), data)
 const writeJSON = (name, data) => write(`generated/${name}.json`, JSON.stringify(data, null, 2))
 
-const slugify = str => str.toLowerCase()
-  .replace('ä', 'ae').replace('ö', 'oe').replace('ü', 'ue')
-  .replace(/\s+/g, '-').replace(/[^\w\-]+/g, '')
-  .replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '')
-
 const parseBaseInfoFromMatch = m => {
   let [, categoryName = 'News', number, titlePlain] = m ? m : [,,,]
   if (!number) categoryName = 'Verschiedenes'

tasks/generate_pages.js

@@ -6,6 +6,7 @@ const config = require('../pug.config')
 const site = require('../generated/site-data.json')
 const episodes = require('../generated/episodes.json')
 const team = require('../content/team.json')
+const soundboard = require('../content/soundboard.json')
 
 const renderPage = (template, out, data = {}) => {
   const file = resolve(__dirname, '..', `src/${template}.pug`)
@@ -22,6 +23,7 @@ const renderPage = (template, out, data = {}) => {
 renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
 renderPage('team', 'team', { navCurrent: 'team', team })
+renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })
 
 renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') })
 renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', category: 'interview', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') })