Reorganize podcast structure

nomeata · nomeata · commit 00faa5a4f657 · 2021-10-21T23:07:09.000+02:00
This fixes #41. Summary and justification of change: * The index page of podcasts is trimmed down: Only title and summary. In particular, no player. Having the browser load a player for every episode will probably be quite sluggish as we grow more episodes. * Not even an embedded player for the latest episode, as suggested by Andres. This way I want to prevent people who listen to the episode there to then share a non-permanent link to `/podcasts`. By guiding them to the per-episode page, they’ll have a permanent URL when they are listening to the episode. * Per-episode pages. The main purpose of this refactor. This gives us stable URLs for each episode, which is important for sharing, and also for googlability. * The transcript is part of that page; no separate transcript page. Yes, the page gets long, but that’s ok, there is nothing below. Advantages: - less pages - search engines will lead people to the episode page directly, so better discoverabiliy - people can scroll and read while they are listening to the episode; no need to open a new tab (or click on the link which then stops the player) The transcript could be in a collapsed section; leaving this for future refinement. * Shuffling of the source files in `pdocast/`: - all files for one episode in one directory, no further nesting - links and transcripts are both separate markdown files, both optional - this way, the description becomes the “body” (in the Hakyll sense) of the `index.markdown` file. This means we can use markdown markup there too, if we want to. * Tweaked styling, stealing some ideas from the “affiliates” page, in particular the bar on the left. Horrible cargo-culting of tailwind CSS classes – I will be happy when someone polishes that a bit further * Loading the extra pages via the hakyll context the way I do may or may not be idiomatic hakyll code. Also here: refactoring welcome.
diff --git a/podcast/0.markdown b/podcast/0.markdown
diff --git a/podcast/0/index.markdown b/podcast/0/index.markdown
@@ -0,0 +1,7 @@
+---
+title: Teaser
+episode: 0
+buzzsproutId: 8849953
+buzzsproudName: 00-teaser
+---
+We are starting a new Haskell-focused podcast where we interview guests from the Haskell community. The hosts are Niki Vazou, Joachim Breitner, Andres Löh, Alejandro Serrano and Wouter Swierstra. In this teaser episode, we introduce ourselves.
diff --git a/podcast/1/index.markdown b/podcast/1/index.markdown
@@ -0,0 +1,12 @@
+---
+title: Emily Pillmore
+episode: 1
+buzzsproutId: 8984158
+recorded: 2021-06-08
+published: 2021-08-09
+---
+The guest of our first regular episode is Emily Pillmore, CTO of the Haskell
+Foundation. The hosts are Alejandro Serrano and Andres Löh. We talk about
+Emily's path to Haskell, the role of the Haskell Foundation and the CTO within
+the Haskell Foundation, about current projects, the Haskell Community and about
+Emily's work on Optics.
diff --git a/podcast/1/links.markdown b/podcast/1/links.markdown
@@ -1,11 +1,3 @@
----
-title: Emily Pillmore
-episode: 1
-description: The guest of our first regular episode is Emily Pillmore, CTO of the Haskell Foundation. The hosts are Alejandro Serrano and Andres Löh. We talk about Emily's path to Haskell, the role of the Haskell Foundation and the CTO within the Haskell Foundation, about current projects, the Haskell Community and about Emily's work on Optics.
-buzzsproutId: 8984158
-recorded: 2021-06-08
-published: 2021-08-09
----
 * [Emily's first podcast](https://thebitcoinpodcast.com/hashing-it-out-43/)
 * [The Haskell Foundation](https://haskell.foundation/)
 * [Kadena](https://www.kadena.io/)
diff --git a/podcast/1/transcript.markdown b/podcast/1/transcript.markdown
diff --git a/podcast/2/index.markdown b/podcast/2/index.markdown
@@ -0,0 +1,8 @@
+---
+title: Lennart Augustsson
+episode: 2
+buzzsproutId: 9286902
+recorded: 2021-07-05
+published: 2021-10-01
+---
+The guest in our second episode is Lennart Augustsson. The hosts are Wouter Swierstra and Niki Vazou. We talk about Lennart's long history with Haskell, about the various jobs he has had, all the compilers he has written, and about dependent types.
diff --git a/podcast/2/links.markdown b/podcast/2/links.markdown
@@ -1,11 +1,3 @@
----
-title: Lennart Augustsson
-episode: 2
-description: The guest in our second episode is Lennart Augustsson. The hosts are Wouter Swierstra and Niki Vazou. We talk about Lennart's long history with Haskell, about the various jobs he has had, all the compilers he has written, and about dependent types.
-buzzsproutId: 9286902
-recorded: 2021-07-05
-published: 2021-10-01
----
 * [Lennart on Twitter](https://twitter.com/augustsson)
 * [Lennart on Wikipedia](https://en.wikipedia.org/wiki/Lennart_Augustsson)
 * [Lennart's blog](https://augustss.blogspot.com/)
diff --git a/podcast/2/transcript.markdown b/podcast/2/transcript.markdown
diff --git a/podcast/3/index.markdown b/podcast/3/index.markdown
@@ -0,0 +1,14 @@
+---
+title: Gabriella Gonzalez
+episode: 3
+buzzsproutId: 9368484
+recorded: 2021-07-12
+published: 2021-10-15
+---
+Gabriella Gonzalez is interviewed by Joachim Breitner and Alejandro Serrano,
+and we talk about Dhall, Nix, and Haskell, learn why Gabriella's packages are
+sometimes called after characters of computer games, and get to know her
+elevator pitch for educating Haskell
+
+The interviewee now goes by Gabriella as their preferred name, but at the
+time was still using Gabriel.
diff --git a/podcast/3/links.markdown b/podcast/3/links.markdown
@@ -1,18 +1,3 @@
----
-title: Gabriella Gonzalez
-episode: 3
-description: |
-  Gabriella Gonzalez is interviewed by Joachim Breitner and Alejandro Serrano,
-  and we talk about Dhall, Nix, and Haskell, learn why Gabriella's packages are
-  sometimes called after characters of computer games, and get to know her
-  elevator pitch for educating Haskell
-
-  The interviewee now goes by Gabriella as their preferred name, but at the
-  time was still using Gabriel.
-buzzsproutId: 9368484
-recorded: 2021-07-12
-published: 2021-10-15
----
 * [Gabriella on twitter](https://twitter.com/GabriellaG439)
 * [Gabriella on github](https://github.com/Gabriel439)
 * [Gabriella’s blog](https://www.haskellforall.com/)
diff --git a/podcast/3/transcript.markdown b/podcast/3/transcript.markdown
diff --git a/site.hs b/site.hs
@@ -11,7 +11,7 @@ import Hakyll.Web.Template (loadAndApplyTemplate)
 import System.IO (SeekMode(RelativeSeek))
 import Hakyll.Web.Html.RelativizeUrls (relativizeUrls)
 import Hakyll.Web.Template.Context (defaultContext)
-import Data.Maybe (isJust)
+import Data.Maybe (isJust, fromJust)
 
 --------------------------------------------------------------------------------------------------------
 -- MAIN GENERATION -------------------------------------------------------------------------------------
@@ -145,28 +145,42 @@ main = hakyll $ do
                 >>= relativizeUrls
 
 -- podcast ---------------------------------------------------------------------------------------------
-    match "podcast/*.markdown" $ compile pandocCompiler
     create ["podcast/index.html"] $ do
         route idRoute
         compile $ do
             sponsors <- buildSponsorsCtx
-            ctx <- podcastCtx <$> loadAll "podcast/*.markdown"
+            ctx <- podcastCtx <$> loadAll ("podcast/*/index.markdown" .&&. hasVersion "raw")
 
             makeItem ""
                 >>= loadAndApplyTemplate "templates/podcast/list.html"  ctx
                 >>= loadAndApplyTemplate "templates/boilerplate.html"   sponsors
                 >>= relativizeUrls
 
-    match "podcast/*/transcript/*.markdown" $ do
+    match "podcast/*/index.markdown" $ do
         route $ setExtension "html"
         compile $ do
             sponsors <- buildSponsorsCtx
+            -- extract the captures path fragment. really no easier way?
+            episode <- head . fromJust . capture "podcast/*/index.markdown" <$> getUnderlying
+
+            let ctxt = mconcat
+                  [ field "transcript" $ \_ -> do
+                       loadBody (fromCaptures "podcast/*/transcript.markdown" [episode])
+                  , field "links" $ \_ -> do
+                       loadBody (fromCaptures "podcast/*/links.markdown" [episode])
+                  , defaultContext
+                  ]
+
             pandocCompiler
                 >>= applyAsTemplate sponsors
-                >>= loadAndApplyTemplate "templates/podcast/transcript.html" defaultContext
-                >>= loadAndApplyTemplate "templates/boilerplate.html"        sponsors
+                >>= loadAndApplyTemplate "templates/podcast/episode.html" ctxt
+                >>= loadAndApplyTemplate "templates/boilerplate.html"     sponsors
                 >>= relativizeUrls
 
+    match "podcast/*/index.markdown" $ version "raw" $ compile pandocCompiler
+    match "podcast/*/transcript.markdown" $ compile pandocCompiler
+    match "podcast/*/links.markdown" $ compile pandocCompiler
+
 -- general 'static' pages ------------------------------------------------------------------------------
     match ("index.html" .||. "**/index.html") $ do
         route idRoute
diff --git a/templates/podcast/episode.html b/templates/podcast/episode.html
@@ -0,0 +1,84 @@
+<div class="max-w-screen-xl mx-auto py-16 md:py-24">
+  <div class="sm:px-6 lg:px-16">
+    <div class="relative">
+      <div class="absolute top-0 left-0 border-t border-l border-purple-50 h-10 md:h-20 w-10 md:w-20">
+        <div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-100 h-10 md:h-20 w-10 md:w-20">
+          <div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-200 h-10 md:h-20 w-10 md:w-20">
+            <div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-300 h-10 md:h-20 w-10 md:w-20">
+              <div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-400 h-10 md:h-20 w-10 md:w-20">
+                <div class="absolute top-1 md:top-2 left-1 md:left-2 border-t border-l border-purple-500 h-10 md:h-20 w-10 md:w-20"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="absolute top-0 right-0 border-t border-r border-purple-50 h-10 md:h-20 w-10 md:w-20">
+        <div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-100 h-10 md:h-20 w-10 md:w-20">
+          <div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-200 h-10 md:h-20 w-10 md:w-20">
+            <div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-300 h-10 md:h-20 w-10 md:w-20">
+              <div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-400 h-10 md:h-20 w-10 md:w-20">
+                <div class="absolute top-1 md:top-2 right-1 md:right-2 border-t border-r border-purple-500 h-10 md:h-20 w-10 md:w-20"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+      <div class="text-center pt-12 md:pt-20 px-12 sm:px-16 md:px-24 lg:px-36 ">
+        <h1 class="text-2xl-5xl"><b>$episode$</b> – $title$</h1>
+      </div>
+    </div>
+  </div>
+
+  <div class="max-w-screen-xl mx-auto">
+    <div class="mx-auto prose md:prose-lg">
+      <div class="space-y-8 max-w-2xl my-7 mx-auto">
+        $if(recorded)$
+         <p><em>Recorded $recorded$. Published $published$.</em></p>
+        $endif$
+        $body$
+      </div>
+    </div>
+
+    <div class="mx-auto prose md:prose-lg my-6">
+      <div id="buzzsprout-player-$buzzsproutId$"></div>
+      <script src="https://www.buzzsprout.com/1817535/$buzzsproutId$.js?container_id=buzzsprout-player-$buzzsproutId$&player=small" type="text/javascript" charset="utf-8"></script>
+    </div>
+
+    $if(links)$
+    <div class="mx-auto prose md:prose-lg my-6">
+     <div class="flex items-center space-x-4">
+       <!--
+       TODO: Insert nice icon
+       <div>
+         <img class="h-10 md:h-16 lg:h-20" src="/assets/images/affiliated.svg" alt="">
+       </div>
+       -->
+       <h2 class="text-2xl font-normal">Related links</h2>
+     </div>
+     <div
+       class="border-l-3 border-gray-300 ml-5 md:ml-8 lg:ml-10 pl-4 md:pl-8 lg:pl-14 pr-4">
+       $links$
+     </div>
+    </div>
+    $endif$
+
+    $if(transcript)$
+    <div class="mx-auto prose md:prose-lg my-6">
+     <div class="flex items-center space-x-4">
+       <!--
+       TODO: Insert nice icon
+       <div>
+         <img class="h-10 md:h-16 lg:h-20" src="/assets/images/affiliated.svg" alt="">
+       </div>
+       -->
+       <h2 class="text-2xl font-normal">Transcript</h2>
+     </div>
+     <div
+       class="border-l-3 border-gray-300 ml-5 md:ml-8 lg:ml-10 pl-4 md:pl-8 lg:pl-14 pr-4">
+       $transcript$
+     </div>
+    </div>
+    $endif$
+  </div>
+</div>
diff --git a/templates/podcast/list.html b/templates/podcast/list.html
@@ -44,8 +44,8 @@ <h1 class="text-2xl-5xl">The Haskell Interlude</h1>
 
   <div class="mt-16 md:mt-24">
     <div class="xl:max-w-screen-xl mx-auto md:px-12 lg:px-16">
-      <div class="bg-gray-800 shadow-lg shadow-xl shadow-md shadow-sm px-6 sm:px-12 md:px-12 lg:px-16 py-16 md:py-20">
-        <p class="mt-10 lg:text-xl text-gray-300 leading-relaxed text-center">
+      <div class="bg-gray-800 shadow-lg shadow-xl shadow-md shadow-sm px-6 sm:px-12 md:px-12 lg:px-16 py-12 md:py-16">
+        <p class="lg:text-xl text-gray-300 leading-relaxed text-center">
          The Haskell Interlude is Haskell-focused podcast where we interview guests from the Haskell community. The hosts are Joachim Breitner, Andres Löh, Alejandro Serrano, Wouter Swierstra and Niki Vazou.
         </p>
       </div>
@@ -55,21 +55,16 @@ <h1 class="text-2xl-5xl">The Haskell Interlude</h1>
   <div class="mt-16 md:mt-24">
     <div class="max-w-screen-xl mx-auto grid gap-8 lg:grid-cols-2 md:px-12">
       $for(episodes)$
-        <div class="bg-gray-100 px-6 sm:px-12 lg:px-16 py-12 lg:py-24">
-          <h2 class="text-center text-2xl-4xl font-normal"><b>$episode$</b> – $title$</h2>
+        <div class="bg-gray-100 px-6 sm:px-12 lg:px-16 py-6 lg:py-24">
+          <h2 class="text-center text-2xl-4xl font-normal">
+	    <b>$episode$</b> – $title$
+	  </h2>
           <div class="mt-8  space-y-8 max-w-2xl mx-auto">
-            $if(recorded)$
-             <p><em>Recorded $recorded$. Published $published$.</em></p>
-            $endif$
-            <p>$description$</p>
-            <div id="buzzsprout-player-$buzzsproutId$"></div>
-            <script src="https://www.buzzsprout.com/1817535/$buzzsproutId$.js?container_id=buzzsprout-player-$buzzsproutId$&player=small" type="text/javascript" charset="utf-8"></script>
+            $body$
             <div class="mt-4">
-              <a class="arrow-link" href="/podcast/$episode$/transcript/">>> Full transcript</a>
+              <a class="arrow-link" href="/podcast/$episode$">&gt;&gt; Listen to $title$</a>
             </div>
-            <div class="uppercase font-medium text-gray-500 pt-4">Related links</div>
-              $body$
-           </div>
+	  </div>
         </div>
       $endfor$
     </div>
diff --git a/templates/podcast/transcript.html b/templates/podcast/transcript.html
