🛠 Podcast eepisode pages

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,

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 {

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;

src/episode.pug

@@ -0,0 +1,10 @@
+extends /template.pug
+
+block main
+  section#episode
+    h1= episode.titlePlain
+
+    +episodePlayer(episode)
+
+    .content
+      !=episode.content

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

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

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

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 () => {

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 }))