diff --git a/content/soundboard.json b/content/soundboard.json new file mode 100644 index 00000000000..2a850077932 --- /dev/null +++ b/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" + } + ] + } +] diff --git a/helpers.js b/helpers.js index 0bb620c4c14..def2fc94b89 100644 --- a/helpers.js +++ b/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 } diff --git a/pug.config.js b/pug.config.js index 1f4bdd70cad..4807af718ce 100644 --- a/pug.config.js +++ b/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, diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 2251c4e0585..e8289bfaeb8 100644 --- a/src/css/base/variables.css +++ b/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); diff --git a/src/css/main.css b/src/css/main.css index b154d0aa0e6..06c95fad53a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -10,3 +10,4 @@ @import 'sections/home.css'; @import 'sections/podcast.css'; @import 'sections/team.css'; +@import 'sections/soundboard.css'; diff --git a/src/css/sections/soundboard.css b/src/css/sections/soundboard.css new file mode 100644 index 00000000000..89fe7d5fa47 --- /dev/null +++ b/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; + } + } +} diff --git a/src/soundboard.pug b/src/soundboard.pug new file mode 100644 index 00000000000..a0245f80464 --- /dev/null +++ b/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++ diff --git a/static/sounds/gruppe/bester-mann-markus.mp3 b/static/sounds/gruppe/bester-mann-markus.mp3 new file mode 100644 index 00000000000..caf1346db5a Binary files /dev/null and b/static/sounds/gruppe/bester-mann-markus.mp3 differ diff --git a/static/sounds/gruppe/brudi.mp3 b/static/sounds/gruppe/brudi.mp3 new file mode 100644 index 00000000000..7cd11369e83 Binary files /dev/null and b/static/sounds/gruppe/brudi.mp3 differ diff --git a/static/sounds/gruppe/das-geilste.mp3 b/static/sounds/gruppe/das-geilste.mp3 new file mode 100644 index 00000000000..c7e951c0b50 Binary files /dev/null and b/static/sounds/gruppe/das-geilste.mp3 differ diff --git a/static/sounds/gruppe/ich-habs-geschafft.mp3 b/static/sounds/gruppe/ich-habs-geschafft.mp3 new file mode 100644 index 00000000000..7e5500dee54 Binary files /dev/null and b/static/sounds/gruppe/ich-habs-geschafft.mp3 differ diff --git a/static/sounds/gruppe/komm-in-die-gruppe.mp3 b/static/sounds/gruppe/komm-in-die-gruppe.mp3 new file mode 100644 index 00000000000..c2ee3e0ac0c Binary files /dev/null and b/static/sounds/gruppe/komm-in-die-gruppe.mp3 differ diff --git a/static/sounds/gruppe/trading.mp3 b/static/sounds/gruppe/trading.mp3 new file mode 100644 index 00000000000..45b6d4cd1d5 Binary files /dev/null and b/static/sounds/gruppe/trading.mp3 differ diff --git a/static/sounds/heyheyhey.mp3 b/static/sounds/heyheyhey.mp3 new file mode 100644 index 00000000000..72425bba341 Binary files /dev/null and b/static/sounds/heyheyhey.mp3 differ diff --git a/static/sounds/hosp/der-markt-crasht.mp3 b/static/sounds/hosp/der-markt-crasht.mp3 new file mode 100644 index 00000000000..582f9aca04d Binary files /dev/null and b/static/sounds/hosp/der-markt-crasht.mp3 differ diff --git a/static/sounds/hosp/iota.mp3 b/static/sounds/hosp/iota.mp3 new file mode 100644 index 00000000000..d90e66659d2 Binary files /dev/null and b/static/sounds/hosp/iota.mp3 differ diff --git a/static/sounds/panzerknacker/alternative-zu-gold.mp3 b/static/sounds/panzerknacker/alternative-zu-gold.mp3 new file mode 100644 index 00000000000..6383a59cd4f Binary files /dev/null and b/static/sounds/panzerknacker/alternative-zu-gold.mp3 differ diff --git a/static/sounds/panzerknacker/bitcoin-kostet.mp3 b/static/sounds/panzerknacker/bitcoin-kostet.mp3 new file mode 100644 index 00000000000..e1c4c914346 Binary files /dev/null and b/static/sounds/panzerknacker/bitcoin-kostet.mp3 differ diff --git a/static/sounds/panzerknacker/bullenscheisse.mp3 b/static/sounds/panzerknacker/bullenscheisse.mp3 new file mode 100644 index 00000000000..8e668d758cd Binary files /dev/null and b/static/sounds/panzerknacker/bullenscheisse.mp3 differ diff --git a/static/sounds/panzerknacker/bullshit.mp3 b/static/sounds/panzerknacker/bullshit.mp3 new file mode 100644 index 00000000000..25854e89507 Binary files /dev/null and b/static/sounds/panzerknacker/bullshit.mp3 differ diff --git a/static/sounds/panzerknacker/dann-ist-das-zeug-weg.mp3 b/static/sounds/panzerknacker/dann-ist-das-zeug-weg.mp3 new file mode 100644 index 00000000000..9aa31ba50ed Binary files /dev/null and b/static/sounds/panzerknacker/dann-ist-das-zeug-weg.mp3 differ diff --git a/static/sounds/panzerknacker/dezentralisierung.mp3 b/static/sounds/panzerknacker/dezentralisierung.mp3 new file mode 100644 index 00000000000..b933ac5bde7 Binary files /dev/null and b/static/sounds/panzerknacker/dezentralisierung.mp3 differ diff --git a/static/sounds/panzerknacker/investment.mp3 b/static/sounds/panzerknacker/investment.mp3 new file mode 100644 index 00000000000..fca2ac65ade Binary files /dev/null and b/static/sounds/panzerknacker/investment.mp3 differ diff --git a/static/sounds/panzerknacker/keine-schutzmechanismen-mehr.mp3 b/static/sounds/panzerknacker/keine-schutzmechanismen-mehr.mp3 new file mode 100644 index 00000000000..eff69d676ef Binary files /dev/null and b/static/sounds/panzerknacker/keine-schutzmechanismen-mehr.mp3 differ diff --git a/static/sounds/panzerknacker/pass-mal-auf.mp3 b/static/sounds/panzerknacker/pass-mal-auf.mp3 new file mode 100644 index 00000000000..b5f5a511a13 Binary files /dev/null and b/static/sounds/panzerknacker/pass-mal-auf.mp3 differ diff --git a/static/sounds/panzerknacker/selten-so-viel-scheisse-gelesen.mp3 b/static/sounds/panzerknacker/selten-so-viel-scheisse-gelesen.mp3 new file mode 100644 index 00000000000..3fc0055469f Binary files /dev/null and b/static/sounds/panzerknacker/selten-so-viel-scheisse-gelesen.mp3 differ diff --git a/static/sounds/panzerknacker/so-eine-scheisse.mp3 b/static/sounds/panzerknacker/so-eine-scheisse.mp3 new file mode 100644 index 00000000000..62f0dd652a9 Binary files /dev/null and b/static/sounds/panzerknacker/so-eine-scheisse.mp3 differ diff --git a/static/sounds/panzerknacker/stromgeschwindigkeit.mp3 b/static/sounds/panzerknacker/stromgeschwindigkeit.mp3 new file mode 100644 index 00000000000..8e56e93e2c7 Binary files /dev/null and b/static/sounds/panzerknacker/stromgeschwindigkeit.mp3 differ diff --git a/static/sounds/panzerknacker/was-soll-mir-das-bringen.mp3 b/static/sounds/panzerknacker/was-soll-mir-das-bringen.mp3 new file mode 100644 index 00000000000..e41e62538ab Binary files /dev/null and b/static/sounds/panzerknacker/was-soll-mir-das-bringen.mp3 differ diff --git a/static/sounds/panzerknacker/wie-das-teil-funktioniert.mp3 b/static/sounds/panzerknacker/wie-das-teil-funktioniert.mp3 new file mode 100644 index 00000000000..b1bbaa589a3 Binary files /dev/null and b/static/sounds/panzerknacker/wie-das-teil-funktioniert.mp3 differ diff --git a/tasks/fetch_feed.js b/tasks/fetch_feed.js index 62f4b06dc2a..5a8d186d278 100644 --- a/tasks/fetch_feed.js +++ b/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' diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index 1f802936162..7070f83d928 100644 --- a/tasks/generate_pages.js +++ b/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') })