diff --git a/pug.config.js b/pug.config.js index c28bb4a0bf4..f51fe00f6b8 100644 --- a/pug.config.js +++ b/pug.config.js @@ -1,7 +1,6 @@ // initialize markdown rendering const renderMarkdown = require('./markdown') -const slugify = str => str.toLowerCase().replace(/\W/, '-') const random = max => Math.floor(Math.random() * Math.floor(max)) const shuffle = arr => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * i); const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }; return arr } const formatDate = date => (new Date(date)).toISOString().replace(/T.*/, '').split('-').reverse().join('.') @@ -19,7 +18,6 @@ module.exports = { basedir: './src/includes', random, shuffle, - slugify, assetUrl, assetPath, formatDate, diff --git a/src/css/base/layout.css b/src/css/base/layout.css index 82f4a33342d..c3c1b95c72e 100644 --- a/src/css/base/layout.css +++ b/src/css/base/layout.css @@ -26,12 +26,13 @@ & h2 { margin-bottom: var(--space-l); color: var(--color-secondary); + max-width: 20em; } & .centered { text-align: center; margin-left: auto; - margin-righht: auto; + margin-right: auto; } & .lead { diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css index 922ca356843..e6c26af8060 100644 --- a/src/css/sections/podcast.css +++ b/src/css/sections/podcast.css @@ -33,6 +33,12 @@ } } +#episode { + & .player { + margin-bottom: var(--space-xxl); + } +} + .episodes { display: grid; grid-gap: var(--space-xl); @@ -107,7 +113,6 @@ } .player { - margin: 0 auto; border-radius: var(--space-m); overflow: hidden; min-width: 300px; diff --git a/src/episode.pug b/src/episode.pug new file mode 100644 index 00000000000..5464727866d --- /dev/null +++ b/src/episode.pug @@ -0,0 +1,10 @@ +extends /template.pug + +block main + section#episode + h1= episode.titlePlain + + +episodePlayer(episode) + + .content + !=episode.content diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug index 277cce02dda..997c3dde937 100644 --- a/src/includes/mixins.pug +++ b/src/includes/mixins.pug @@ -4,7 +4,7 @@ mixin sprite(id) mixin episodeItem(e) article.episodeItem&attributes(attributes) - a.plain(href=e.anchor) + a.plain(href=`/podcast/${e.slug}`) .media img(src=e.image alt=e.title loading="lazy") .content @@ -35,8 +35,9 @@ mixin episodePlayer(e) .player__controls .player__button.amplitude-play-pause(data-amplitude-main-play-pause="true" id="play-pause") .player__info - .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") + 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") script. window.Einundzwanzig = { @@ -52,13 +53,3 @@ mixin episodePlayer(e) ] } }; - -mixin episodeDetails(e) - article.episodeDetails&attributes(attributes) - .media - a(href=e.anchor) - img(src=e.image alt=e.title loading="lazy") - .content - h3: a(href=e.anchor)=e.title - p=formatDate(e.date) - !=e.content diff --git a/src/podcast.pug b/src/podcast.pug index d2350216edb..be90620ea43 100644 --- a/src/podcast.pug +++ b/src/podcast.pug @@ -5,7 +5,7 @@ block main section#podcast .lead.centered - h1 Podcast + h1.centered Podcast :markdown-it(html linkify typographer) Du findest uns auf [Spotify](https://open.spotify.com/show/10408JFbE1n8MexfrBv33r), @@ -15,7 +15,7 @@ block main a.button(href="https://anchor.fm/s/d8d3c38/podcast/rss") Abonnieren / RSS .centered - h2 Kategorien + h2.centered Kategorien ul.categories li: a(href="/podcast/news") News li: a(href="/podcast/interviews") Interviews diff --git a/src/team.pug b/src/team.pug index 0708b1e2414..5b2ae524eb3 100644 --- a/src/team.pug +++ b/src/team.pug @@ -2,7 +2,7 @@ extends /template.pug block main section#team - h1 Team + h1.centered Team ul.members(data-shuffle) each m in shuffle(team) li.member diff --git a/tasks/fetch_feed.js b/tasks/fetch_feed.js index 4e1f732d4ff..466abe7215e 100644 --- a/tasks/fetch_feed.js +++ b/tasks/fetch_feed.js @@ -4,15 +4,22 @@ const Parser = require('rss-parser') const dir = resolve(__dirname, '..', 'generated') const write = (name, data) => writeFileSync(join(dir, `${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 parseInfo = e => { const titleMatch = e.title.match(/([\w\s]+?)?\s?#(\d+) - (.*)/) const [, categoryName = 'News', number, titlePlain] = titleMatch ? titleMatch : [,,,e.title] const blockMatch = e.contentSnippet.match(/Blockzeit\s(\d+)/) const block = blockMatch ? parseInt(blockMatch[1]) : null - const category = categoryName.toLowerCase().replace(/\W/, '-') + const category = slugify(categoryName) + const slug = slugify(`${categoryName} ${number} ${titlePlain}`) - return { block, category, categoryName, number, titlePlain } + return { block, category, categoryName, number, titlePlain, slug } } ;(async () => { diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js index 17c0ec4e483..f8c0561067f 100644 --- a/tasks/generate_pages.js +++ b/tasks/generate_pages.js @@ -27,3 +27,5 @@ renderPage('category', 'podcast/news', { navCurrent: 'podcast', categoryName: 'N renderPage('category', 'podcast/interviews', { navCurrent: 'podcast', categoryName: 'Interviews', episodes: episodes.filter(e => e.category === 'interview') }) renderPage('category', 'podcast/lesestunde', { navCurrent: 'podcast', categoryName: 'Lesestunde', episodes: episodes.filter(e => e.category === 'lesestunde') }) renderPage('category', 'podcast/der-weg', { navCurrent: 'podcast', categoryName: 'Der Weg', episodes: episodes.filter(e => e.category === 'der-weg') }) + +episodes.forEach(episode => renderPage('episode', `podcast/${episode.slug}`, { navCurrent: 'podcast', episode }))