1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <title>jmglov's blog</title> 5 <meta charset="utf-8"/> 6 <link type="application/atom+xml" rel="alternate" href="atom.xml" title="jmglov's blog"> 7 <link rel="stylesheet" href="style.css"> 8
8<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
8 9
9<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-clojure.min.js"></script>
9 10
10<script type="text/javascript" src="https://livejs.com/live.js"></script>
10 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css"> 12 13 <!-- See Features > favicon in README.md --> 14 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 15 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 16 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 17 <link rel="manifest" href="/site.webmanifest"> 18 <meta name="msapplication-TileColor" content="#da532c"> 19 <meta name="theme-color" content="#ffffff"> 20 21 22 <!-- Social sharing (Facebook, Twitter, LinkedIn, etc.) --> 23 <meta name="title" content="jmglov's blog"> 24 <meta name="twitter:title" content="jmglov's blog"> 25 <meta property="og:title" content="jmglov's blog"> 26 <meta property="og:type" content="website"> 27 28 <meta name="description" content="A blog about stuff but also things."> 29 <meta name="twitter:description" content="A blog about stuff but also things."> 30 <meta property="og:description" content="A blog about stuff but also things."> 31 32 33 <meta name="twitter:url" content="https://jmglov.net/blog/index.html"> 34 <meta property="og:url" content="https://jmglov.net/blog/index.html"> 35 36 37 <meta name="twitter:card" content="summary"> 38 39 40 41 </head> 42 <body> 43 44 <div class="site-header"> 45 <div class="wrapper"> 46 <div class="site-nav"> 47 <div> 48 ðï¸ <a class="page-link" href="archive.html">Archive</a> 49 </div> 50 <div> 51 ð· <a class="page-link" href="tags/index.html">Tags</a> 52 </div> 53 <div> 54 <img src="assets/rss-color-svgrepo-com.svg" alt="RSS icon" 55 style="width: 15px; height: 15px;" /> 56 <a class="page-link" href="atom.xml">Feed</a> 57 </div> 58 59 <div> 60 𪪠<a class="page-link" href="https://jmglov.net/">About</a> 61 </div> 62 63 </div> 64 <div> 65 <h1 class="site-title"> 66 <a class="page-link" href="index.html">jmglov's blog</a> 67 </h1> 68 <p>A blog about stuff but also things.</p> 69 </div> 70 </div> 71 </div> 72 73 <div class="wrapper"> 74 75 76 <div> 77 <h1><a href="2025-01-02-running-round-malaren.html">Why can't I just run around Lake Mälaren?</a></h1> 78 <p><img src="assets/2025-01-02-running-round-malaren-preview.png" alt="A lakeshore under a blue sky" title="Which way is Mälaren, Gandalf?" width=800px /></p><p>"Is this the lake we're running around?"</p><p>My sister uttered these fateful words on a sunny day in May 2024, knowing not the events she would set into motion. For the lake she was referring to, dear reader, was none other than <a href='https://en.wikipedia.org/wiki/M%C3%A4laren'>Lake 79Mälaren</a>, which:</p><blockquote><p> is the third-largest freshwater lake in Sweden (after Vänern and Vättern). Its area is 1,140 km2 (440 sq mi) and its greatest depth is 64 m (210 ft). Mälaren spans 120 km (74.6 mi) from east to west. </p></blockquote><p>I responded flippantly at the time, probably something to the tune of "How much time you got?", and she laughed, but unbeknownst to me, an idea was planted in the fertile soil of her mind, one which would sprout months later in a text conversation.</p><p>"So Josh," she probably wrote (I'm far too lazy to look up what she actually wrote) "remember when I asked you about running around that lake? Why don't you just do it?"</p><p>"OMG what is wrong with you?" I possibly responded. "Don't you remember me saying that it's like a million miles"–I have no idea how many miles 300-ish kilometres is–"in circumference?"</p><p>"Yeah," she maybe said, "but what if you didn't do it all at once? You know how Grandpop hiked the entire <a href='https://en.wikipedia.org/wiki/Appalachian_Trail'>Appalachian 80Trail</a> in fits and starts? You could do the same thing, right?"</p><p>She had me there. Whilst I certainly can't run 300-ish kilometres in one go, there's no good reason why I can't run around the damned thing 20-ish kilometres at a time. Just rinse and repeat 15 times and Bob's my uncle, right? (Actually, Will's my uncle, but that's neither here nor there.)</p><p>It just so happened that around the same time, in a great fit of irony, I ran down to the lake from my house for a swim, capped off as always by a dive off a 5 metre platform deployed for the amusement of beachgoers (save when the lake is actually frozen over, because diving headfirst into
80ice is discouraged by 9 of 10 leading brain surgeons).</p><p><img src="assets/break-the-ice-dude.gif" alt="A man tries to jump into a frozen pool" title="Don't do this!" /></p><p>I've done this hundreds of times, but when I hit the water this time, my left hand caught the water in a way that caused my left arm to rotate in a direction that the human shoulder joint is apparently not designed to do, and since I'm famously "over 35", that led to my shoulder hurting whenever I raise my left arm above my head. ð</p><p>So I didn't run for a few months, but I did start plotting my path around the lake, and last week, on a particularly mild December day (it was 9° C, somehow), I decided to take a run clockwise down the lakeshore, thinking I could always stop and walk back to a bus stop or <a href='https://en.wikipedia.org/wiki/Stockholm_Metro'>tunnelbana</a> station if my shoulder started hurting mid-run. My plan was to first run down to my usual beach (4.5 kilometres from my house), then continue down the shore to <a href='https://en.wikipedia.org/wiki/Alvik_metro_station'>Alvik 81station</a> on the Green line, which I guessed might be 15-ish kilometres from the beach. In addition to my usual Runkeeper app (which I plan to replace with a ClojureScript app in Scittle one of these days), I tracked my run with a new app I had installed, <a href='https://organicmaps.app/'>Organic 82Maps</a>, which uses <a href='https://www.openstreetmap.org/about'>OpenStreetMap</a> data and can export GPX files.</p><p>To cut to the chase (something I find difficult to be sure), I made it down to Alvik!</p><p><img src="assets/2025-01-02-malaren-circuit.png" alt="A map with my first segment highlighted" title="Do this!" /></p><p>The run turned out to be 14.07 km in total, which meant that I got just under 10 km of the way around Mälaren. Only 30 more runs to go! ð</p><p><img src="assets/2025-01-02-malaren-entire.png" alt="A map zoomed out to show the entirety of the lake, with my first segment highlighted" title="OMG how?" /></p> 83 84 <div class="post-footer"> 85 <div class="post-details"> 86 87 <div> 88 ð· 89 90 <span class="tag"> 91 <a href="tags/running.html">running</a> 92 </span> 93 94 </div> 95 96 97 <div>ð Published: 2025-01-02</div> 98 </div> 99 100 </div> 101 </div> 102 103 <div> 104 <h1><a href="2025-01-01-why-cant-i-just.html">Why can't I just?</a></h1> 105 <p><img src="assets/2025-01-01-why-cant-i-just-resolution.jpg" alt="A picture of a three-monitor computer display labelled "My New Year's resolution is 5760x1080"" title="Now that's a wide load!" width=800px /></p><p>I'm not one for New Year's resolutions, so instead I'll simply ask myself some questions.</p><p>Why can't I just</p><ul><li>go to the gym three times a week?</li><li>get 10,000 steps a day even without Rover pulling me along?</li><li>go for a nice long run at least once a week, even if there's snow on the ground?</li><li>write something in my blog every morning, even if it's just a series of random thoughts or a bawdy limerick of my own composition?</li><li>write anything in my blog that's fewer than 10,000 words? ð</li><li>finish my draft of the <a href='https://jmglov.net/blog/draft-heart-of-clojure-2024.html'>Heart of Clojure conference 106 report</a>?</li><li>record Season 1 of <a href='https://politechspod.com/'>Politechs</a> with Ray?</li><li>finish writing my <a href='https://otranscribe.com/'>oTranscribe</a> clone with Scittle?</li><li>take part 2 of the amazing <a href='https://www.nand2tetris.org/'>Nand to Tetris</a> course?</li><li>read more of "Crepúsculo: Un amor peligroso"?</li><li>OMG finally stop eating cheese already?</li></ul><p>The answer to all of these questions is basically "you can just, so why not just?"</p><p>Happy New Year! ð</p> 107 108 <div class="post-footer"> 109 <div class="post-details"> 110 111 <div> 112 ð· 113 114 <span class="tag"> 115 <a href="tags/waffle.html">waffle</a> 116 </span> 117
118 <span class="tag"> 119 <a href="tags/writing.html">writing</a> 120 </span> 121 122 </div> 123 124 125 <div>ð Published: 2025-01-01</div> 126 </div> 127 128 </div> 129 </div> 130 131 <div> 132 <h1><a href="2024-09-18-podcast-soundcljoud.html">Building a podcast with Clojure</a></h1> 133 <p>In addition to spending far too much of my time doing silly things with Clojure and then even farther too much of my time writing about doing silly things with Clojure, I spend some of my time thinking about, talking about, and participating in labour organising here in Sweden. As I was talking about unions and such to Ray one day, no doubt six tangents into one of my usual rambling explorations of an idea, he interrupted my flow. "Stop!" he said, "for I have a plan so cunning you could pin a tail on it and call it a weasel!" Curiosity piqued, I enquired as to the nature of said plan. "We should make a podcast," he continued, "and on this podcast, we should talk about tech workers and why it makes sense for them to unionise. And we should focus on Sweden, since it's a fairly unique labour market, plus you know interesting people who we could interview."</p><p>"Ray," I rejoined, "that truly is a plan of weasel-grade cunning. I have but one suggestion that will turn this good idea into a great one." "And what," quoth he, "pray tell, is that suggestion?" "Babashka! Scittle! Clojure!" I exclaimed, so full of excitement I was having troubling supporting my proper nouns with clauses of explanatory power. "We could use all of this amazing technology for all of the heavy lifting around making a podcast! We could <a href='2022-06-24-s3-https.html'>build a website 134using S3 static hosting</a>, then we could use an approach similar to <a href='https://jmglov.net/blog/tags/blog.html'>how I built my 135blog</a> to create pages for episodes with show notes and transcripts and all that good stuff!"</p><p>So it was agreed, and thus <a href='https://orgtech.se'>
135Organising Tech in Sweden</a> came to be.</p><p><img src="assets/2024-09-18-podcast-soundcljoud-orgtech.png" alt="The words 'Organising Tech in Sweden' superimposed on raised fists with a Swedish flag with a circuit board pattern in the background" title="Divided we beg, united we bargain!" width=512px /></p><h2 id="building_the_website">Building the website</h2><p>As with any of my recent projects, my first step is always to create a directory and drop a <a href='https://github.com/babashka/scittle/'>Scittle</a>-enabled <code>bb.edn</code> in it:</p><pre class="language-text"><code class="lang-text language-text">: ~; mkdir ~/code/orgtech-se 136: ~; cd !$ 137</code></pre><p><strong>bb.edn</strong></p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:deps {io.github.babashka/sci.nrepl 138 {:git/sha "2f8a9ed2d39a1b09d2b4d34d95494b56468f4a23"} 139 io.github.babashka/http-server 140 {:git/sha "e203166a020509d126149ff8046489857ce5c89f"}} 141 :tasks 142 {http-server {:doc "Starts http server for serving static files" 143 :requires ([babashka.http-server :as http]) 144 :task (do (http/serve {:port 1341 :dir "public"}) 145 (println "Serving static assets at http://localhost:1341"))} 146 147 browser-nrepl {:doc "Start browser nREPL" 148 :requires ([sci.nrepl.browser-server :as bp]) 149 :task (bp/start! {})} 150 151 -dev {:depends [http-server browser-nrepl]} 152 153 dev {:task (do (run '-dev {:parallel true}) 154 (deref (promise)))}}} 155</code></pre><p>Since this is a static website, we can create a static <code>public/index.html</code> for it, with the <a href='2022-07-05-hacking-blog-favicon.html'>usual favicon</a> and <a href='2022-08-17-hacking-blog-sharing.html'>social 156sharing</a> stuff:</p><pre class="language-html"><code class="lang-html language-html"><html xmlns="http://www.w3.org/1999/xhtml"> 157 158<head> 159 <title>
159Organising Tech in Sweden Podcast</title> 160 161 <meta charset="utf-8" /> 162 <meta name="viewport" content="width=device-width" /> 163 164 <link rel="stylesheet" href="/css/main.css"> 165 166 <!-- Favicon from https://realfavicongenerator.net/ --> 167 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 168 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 169 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 170 <link rel="manifest" href="/site.webmanifest"> 171 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 172 <meta name="msapplication-TileColor" content="#da532c"> 173 <meta name="theme-color" content="#ffffff"> 174 175 <!-- Social sharing (Facebook, Twitter, LinkedIn, etc.) --> 176 <meta name="title" content="
176Organising Tech in Sweden"> 177 <meta name="twitter:title" content="Organising Tech in Sweden"> 178 <meta property="og:title" content="Organising Tech in Sweden"> 179 <meta property="og:type" content="website"> 180 181 <meta name="description" content="A limited podcast series exploring union organising in Swedish tech companies"> 182 <meta name="twitter:description" 183 content="A limited podcast series exploring union organising in Swedish tech companies"> 184 <meta property="og:description" content="A limited podcast series exploring union organising in Swedish tech companies"> 185 186 <meta name="twitter:url" content="https://orgtech.se/"> 187 <meta property="og:url" content="https://orgtech.se/"> 188 189 <meta name="twitter:image" content="https://orgtech.se/img/orgtech-se-preview.jpg"> 190 <meta name="twitter:card" content="summary_large_image"> 191 <meta property="og:image" content="https://orgtech.se/img/orgtech-se-preview.jpg"> 192 <meta property="og:image:alt" 193 content="
193Podcast logo: 'Organising Tech in Sweden' superimposed on raised fists with a Swedish flag with a circuit board pattern in the background"> 194</head> 195 196<body> 197 <div id="wrapper"> 198 <div id="left-side"> 199 <div id="cover-image"> 200 <img src="/img/orgtech-se-cover.jpg" 201 title="Organising Tech in Sweden" 202 alt="Podcast logo: 'Organising Tech in Sweden' superimposed on raised fists with a Swedish flag with a circuit board pattern in the background" /> 203 </div> 204 <div id="aggregators-1"> 205 <div id="apple"> 206 <a class="apple-button" 207 href="https://podcasts.apple.com/us/podcast/organising-tech-in-sweden/id1766442275?itsct=podcast_box_badge&amp;itscg=30200&amp;ls=1"> 208 <img src="https://tools.applemediaservices.com/api/badges/listen-on-apple-podcasts/badge/en-us?size=250x83&amp;releaseDate=1725494400" 209 title="Listen on Apple Podcasts" 210 alt="Listen on Apple Podcasts" 211 class="apple-button"> 212 </a> 213 </div> 214 <div id="spotify"> 215 <a href="https://open.spotify.com/show/53psoLoX187axvmgb80l1x"> 216 <img src="/img/spotify-podcast-badge-blk-grn-330x80.svg" 217 title="Listen on Spotify" 218 alt="Listen on Spotify"> 219 </a> 220 </div> 221 </div> 222 <div id="aggregators-2"> 223 <div id="podbean"> 224 <a href="https://www.podbean.com/podcast-detail/2r2tz-31b053/Organising-Tech-in-Sweden-Podcast" 225 rel="noopener noreferrer" target="_blank"> 226 <img src="https://pbcdn1.podbean.com/fs1/site/images/badges/w600_1.png" 227 title="Listen on Podbean" 228 alt="Listen on Podbean"> 229 </a> 230 </div> 231 </div> 232 </div> 233 <div id="main"> 234 <div id="header"> 235 <h1 id="title" class="header">Episode 1 is out now!</h1> 236 <!-- <h1 id="title" class="header"><a href="episodes/">Episodes</a></h1> --> 237 <div id="socials"> 238 <a href="https://x.com/orgtech_se"> 239 <img src="/img/twitter-color-svgrepo-com.svg" 240 title="Follow us on Twitter!" 241 alt="Twitter logo" /> 242 </a> 243 <a href="https://bsky.app/profile/orgtech-se.bsky.social"> 244 <img src="/img/bluesky-logo.svg" 245 title="Follow us on Bluesky!" 246 alt="Bluesky logo" /> 247 </a> 248 </div> 249 </div> 250 <div class="text"> 251 <p>
252 Organising Tech in Sweden is a limited podcast series exploring union 253 organising in Swedish tech companies. Join us as we sit down with some 254 of the people involved in the campaigns to win collective bargaining 255 rights at two of Sweden's tech unicorns, Klarna and Spotify. 256 </p> 257 <div id="production-info"> 258 <div> 259 <p> 260 Listen to our latest episode:<br /> 261 ð <a href="/episodes/ep01-klarna-part1">Organising Klarna - Part 1</a> 262 </p> 263 <p> 264 Produced by Hakuna Matata Produktion 265 </p> 266 <p> 267 Cover art by <a href="https://anyakjordan.com/">Anya K. Jordan</a> 268 <a href="https://bsky.app/profile/anyakjordan.bsky.social">@anyakjordan.bsky.social</a> 269 </p> 270 <p> 271 Theme music by <a href="https://soundcloud.com/ptzery">Ptzery</a> 272 </p> 273 </div> 274 <div id="hmp-logo"> 275 <img src="/img/hakuna-matata-produktion.png" 276 title="Hakuna Matata Produktion" 277 alt="Hakuna Matata Produktion logo"> 278 </div> 279 </div> 280 </div> 281 </div> 282 </div> 283 <div id="news"> 284 <h1>News</h1> 285 <h2>Episode 1 is out!</h2> 286 <p>ð <a href="/episodes/ep01-klarna-part1">Organising Klarna - Part 1</a></p> 287 <p>
288 We kick off Organising Tech in Sweden in style by recounting the story of 289 how a collective bargaining agreement (CBA) was won at Klarna, a major 290 Swedish fintech. In fact, Klarna was the first unicorn in Sweden to be 291 unionised (and probably the first unicorn in Europe as well)! 292 </p> 293 <p> 294 To hear all about how this went down, your co-hosts Josh and Ray are joined by 295 Thomas, the founder of the Klarna Unionen Club (a union "local", to use 296 terminology that might be more familiar to US listeners); Sen, the chair of 297 the club who won the bargaining agreement against the odds; and Kim, a former 298 Klarna employee with extensive knowledge of Swedish labour law and market 299 policy. 300 </p> 301 </div> 302</body> 303 304</html> 305</code></pre><p>We can grab all the nice images and such from the interwebs:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; curl \ 306 https://orgtech.se/orgtech-se-favicon-and-img.tar.gz \ 307 | tar xvz -C public 308</code></pre><p>And of course we need to make it nice and responsive so it looks good both on a computer screen and a mobile phone screen. Let's create <code>public/css/main.css</code> and drop some stylish styles therein:</p><pre class="language-css"><code class="lang-css language-css">body { 309 font: 310 1.2em Helvetica, 311 Arial, 312 sans-serif; 313 margin: 20px; 314 padding: 0; 315} 316 317body > div { 318 max-width: 100%; 319 margin-left: auto; 320 margin-right: auto; 321} 322 323img { 324 max-width: 100%; 325} 326 327a { 328 text-decoration: none; 329 &:hover { 330 text-decoration: underline; 331 } 332} 333 334#header { 335 display: flex; 336 justify-content: space-between; 337 align-items: center; 338 gap: 10px; 339} 340 341h1 { 342 font-weight: bold; 343 font-size: larger; 344} 345 346#socials { 347 display: flex; 348 gap: 10px; 349} 350 351#socials img { 352 max-width: 32px; 353 &:hover { 354 transform: scale(1.1); 355 } 356} 357 358@media screen and (min-width: 600px) { 359 360 body > div { 361 max-width: 800px; 362 margin-top: 1em; 363 } 364 365 #wrapper { 366 display: flex; 367 } 368 369 #cover-image { 370 margin-right: 20px; 371 max-width: 40%; 372 } 373 374} 375</code></pre><p>Now we can fire up a local webserver:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; bb dev 376Serving assets at http://localhost:1341 377Serving static assets at http://localhost:1341 378nREPL server started on port 1339... 379Websocket server started on 1340... 380</code></pre><p>Gaze ye now upon the glories of http://localhost:1341!</p><p><img src="assets/2024-09-18-podcast-soundcljoud-index.png" alt="The words 'Organising Tech in Swede
380n' superimposed on raised fists with a Swedish flag with a circuit board pattern in the background" title="What even is a computer?" width=800px border=1 /></p><h2 id="publishing_the_website">Publishing the website</h2><p>We of course have already registered a domain and done the intricate dance of <a href='2022-06-24-s3-https.html'>setting up S3 static website hosting and CloudFront and all of 381that</a>, so all we need to do to publish our website is copy some files into our S3 bucket. And of course, what better way to do this than with a <a href='https://book.babashka.org/#tasks'>Babashka task</a>?</p><p>As avid REPL-drivers, we want to use our REPL for task development as well, so the first thing we do is create a <code>tasks.clj</code> with a boring <code>publish</code> function in it:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks) 382 383(defn publish [{:keys [website-bucket out-dir] :as opts}] 384 (println (format "Publishing %s/ to s3://%s/" 385 out-dir website-bucket))) 386</code></pre><p>Now we need to hook that up to <code>bb.edn</code> by setting the classpath appropriately, pulling in our new <code>tasks</code> namespace, defining some options, and adding a <code>publish</code> task:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:deps { ... } 387 :paths ["."] 388 :tasks 389 {:requires ([tasks]) 390 :init (def opts 391 {:website-bucket "orgtech.se" 392 :out-dir "public"}) 393 ;; ... 394 publish (tasks/publish opts)}} 395</code></pre><p>We can now test this:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; bb publish 396Publishing public/ to s3://orgtech.se/ 397</code></pre><p>Jumping back to <code>tasks.clj</code>, we fire up a trusty <a href='https://docs.cider.mx/cider/index.html'>CIDER</a> REPL with a <strong>C-c M-j</strong> (<code>cider-jack-in-clj</code>) flourish, followed by <strong>C-c C-k</strong> (<code>cider-load-buffer</code>) to evaluate the buffer (readers following along with an <a href='https://www.vim.org/'>inferior</a> <a href='https://www.jetbrains.com/idea/'>text</a> <a href='https://code.visualstudio.com/'>editor</a> will have to perform whatever complex ritual necessary to start a REPL and connect to it and then evaluate the "file" or whatever your text editor calls the thing you're editing).</p><p>Thus equipped, we can open up a <a href='https://betweentwoparens.com/blog/rich-comment-blocks/#rich-comment'>Rich 398comment</a>, define some <code>opts</code>, and evaluate our <code>publish</code> function:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 399 400 (def opts {:website-bucket "orgtech.se" 401 :out-dir "public"}) ; C-c C-v f c e 402 ;; => #'tasks/opts 403 404 (publish opts) ; C-c C-e 405 406 ) 407</code></pre><p>Our REPL buffer now looks something like this:</p><pre class="language-text"><code class="lang-text language-text">Started nREPL server at 127.0.0.1:44571 408For more info visit: https://book.babashka.org/#_nrepl 409;; Connected to nREPL server - nrepl://127.0.0.1:44571 410;; CIDER 1.12.0 (Split), babashka.nrepl 0.0.6-SNAPSHOT 411;; Babashka 1.3.188 412;; Docs: (doc function-name) 413;; (find-doc part-of-name) 414;; Source: (source function-name) 415;; Javadoc: (javadoc java-object-or-class) 416;; Exit: <C-c C-q> 417;; Results: Stored in vars *1, *2, *3, an exception in *e; 418;; Startup: /home/jmglov/.nix-profile/bin/bb nrepl-server localhost:0 419Publishing public/ to s3://orgtech.se/ 420user> 421</code></pre><p>OK, now it's time to figure out how to do the actual copying of files to S3. We could of course use the spectacular <a href='https://github.com/grzm/awyeah-api'>awyeah-api</a> to do stuff to AWS right from our Clojure code, but that smacks of effort. ð¤</p><p>Fortunately, we remember that Babashka was originally conceived as a replacement for Bash shell scripting (I mean, the "bash" is right there in the name, so that's kind of a major clue), and we know that there's an <a href='https://aws.amazon.com/cli/'>AWS command line 422tool</a> that knows how to sync stuff from a local directory to S3:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; aws s3 sync help 423SYNC() SYNC() 424 425NAME 426 sync - 427 428DESCRIPTION 429 Syncs directories and S3 prefixes. Recursively copies new and updated 430 files from the source directory to the destination. Only creates fold- 431 ers in the destination if they contain one or more files. 432 433SYNOPSIS 434 sync 435 <LocalPath> <S3Uri> or <S3Uri> <LocalPath> or <S3Uri> <S3Uri> 436 437[...] 438 439EXAMPLES 440 441 The following sync command syncs objects from a local diretory to the 442 specified prefix and bucket by uploading the local files to s3. A lo- 443 cal file will require uploading if the size of the local file is dif- 444 ferent than the size of the s3 object, the last modified time of the 445 local file is newer than the last modified time of the s3 object, or 446 the local file does not exist under the specified bucket and prefix. 447 In this example, the user syncs the bucket mybucket to the local cur- 448 rent directory. The local current directory contains the files
449 test.txt and test2.txt. The bucket mybucket contains no objects: 450 451 aws s3 sync . s3://mybucket 452 453 Output: 454 455 upload: test.txt to s3://mybucket/test.txt 456 upload: test2.txt to s3://mybucket/test2.txt 457 458[...] 459</code></pre><p>This looks like just the thing we need, so let's use the power of <a href='https://github.com/babashka/process'>babashka.process</a> to invoke <code>aws s3 sync</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 460 (:require [babashka.process :as p])) 461 462(defn publish [{:keys [website-bucket out-dir] :as opts}] 463 (let [sync-cmd ["aws s3 sync" 464 (format "%s/" out-dir) 465 (format "s3://%s/" website-bucket)]] 466 (apply println sync-cmd) 467 (apply p/shell sync-cmd))) 468 469(comment 470 471 (def opts {:website-bucket "orgtech.se" 472 :out-dir "public"}) ; C-c C-v f c e 473 ;; => #'tasks/opts 474 475 (publish opts) ; C-c C-e 476 477 ) 478</code></pre><p>After a brief delay, our REPL buffer now helpfully tells us:</p><pre class="language-text"><code class="lang-text language-text">aws s3 sync public/ s3://orgtech.se/ 479user> 480</code></pre><p>And if we have a look in that there bucket, we see some files:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; aws s3 ls --recursive s3://orgtech.se/ 4812024-08-23 10:40:05 102613 android-chrome-192x192.png 4822024-08-23 10:40:05 337153 android-chrome-512x512.png 4832024-08-23 10:40:05 96934 apple-touch-icon.png 4842024-08-23 10:40:05 246 browserconfig.xml 4852024-08-23 10:40:05 720 css/main.css 4862024-08-23 10:40:05 47189 favicon-16x16.png 4872024-08-23 10:40:05 48597 favicon-32x32.png 4882024-08-23 10:40:05 12014 favicon.ico 4892024-08-23 10:40:05 745 img/bluesky-logo.svg 4902024-08-23 10:40:05 3231594 img/orgtech-se-cover.jpg 4912024-08-23 10:40:05 513884 img/orgtech-se-preview.jpg 4922024-08-23 10:40:05 1943 img/twitter-color-svgrepo-com.svg 4932024-08-23 10:40:05 1933 img/volume.png 4942024-08-23 10:40:05 3074 index.html 4952024-08-23 10:40:05 33084 mstile-150x150.png 4962024-08-23 10:40:05 426 site.webmanifest 497</code></pre><p>And now browsing to <a href='https://orgtech.se/'>https://orgtech.se/</a> reveals a lovely little website that looks just like the one on http://localhost:1341. ð</p><p>Let's change the header in <code>public/index.html</code> to test out the syncing:</p><pre class="language-html"><code class="lang-html language-html"> <h1 id="title" class="header">Coming Thursday, 12 September!</h1> 498</code></pre><p>Before we YOLO eval our <code>publish</code> function again, we notice that <code>aws s3 sync</code> has a lovely little <code>--dryrun</code> option, which doesn't actually do the stuff but rather prints out what stuff it would do. Let's implement this!</p><p><strong>tasks.clj</strong></p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn publish [{:keys [website-bucket out-dir dryrun] 499 :as opts}] 500 (let [sync-cmd (concat ["aws s3 sync"] 501 (when dryrun ["--dryrun"]) 502 [(format "%s/" out-dir) 503 (format "s3://%s/" website-bucket)])] 504 (apply println sync-cmd) 505 (apply p/shell sync-cmd))) 506 507(comment 508 509 (publish (assoc opts :dryrun true)) ; C-c C-e 510 511 ) 512</code></pre><p>The REPL window helpfully says:</p><pre class="language-text"><code class="lang-text language-text">aws s3 sync --dryrun public/ s3://orgtech.se/ 513user> 514</code></pre><p>but we don't see the output of the <code>aws s3 sync</code> command itself. This is due to the REPL not capturing stdout for the subprocess, I guess. We can handle this thusly:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 515 (:require [babashka.process :as p])) 516 517(defn shell [& args] 518 (let [p (apply p/shell {:out :string 519 :err :string 520 :continue true} 521 args)] 522 (println (:out p)) 523 (when-not (zero? (:exit p)) 524 (println (:err p))) 525 p)) 526 527(defn publish [{:keys [website-bucket out-dir dryrun] 528 :as opts}] 529 (let [sync-cmd (concat ["aws s3 sync"] 530 (when dryrun ["--dryrun"]) 531 [(format "%s/" out-dir) 532 (format "s3://%s/" website-bucket)])] 533 (apply println sync-cmd) 534 (apply shell sync-cmd))) 535 536(comment 537 538 (publish (assoc opts :dryrun true)) ; C-c C-e 539 540 ) 541</code></pre><p>And now the REPL sez:</p><pre class="language-text"><code class="lang-text language-text">aws s3 sync --dryrun public/ s3://orgtech.se/ 542(dryrun) upload: public/index.html to s3://orgtech.se/index.html 543 544user> 545</code></pre><p>This is what we expect to see: only <code>index.html</code> will be uploaded, since it's the only thing that has changed.</p><p>It would be nice to run this from the command line, but we currently have no way of passing the <code>dryrun</code> option through short of adding it to the <code>opts</code> map in <code>bb.edn</code>. Fortunately for us, there's <a href='https://github.com/babashka/cli'>babashka-cli</a>, which does all sorts of awesome command-line parsing! Let's put it to work:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 546 (:require [babashka.cli :as cli] 547 [babashka.process :as p])) 548 549;; ... 550 551(comment 552 553 (cli/parse-opts ["--website-bucket" "orgtech.se" 554 "--out-dir" "public" 555 "--dryrun"]) 556 ;; => {:website-bucket "orgtech.se", :out-dir "public", :dryrun true} 557 558 ) 559</code></pre><p>
559Now we can use <code>parse-opts</code> in our <code>publish</code> function like so:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn publish [default-opts] 560 (let [{:keys [website-bucket out-dir dryrun] 561 :as opts} (merge default-opts 562 (cli/parse-opts *command-line-args*)) 563 sync-cmd (concat ["aws s3 sync"] 564 (when dryrun ["--dryrun"]) 565 [(format "%s/" out-dir) 566 (format "s3://%s/" website-bucket)])] 567 (apply println sync-cmd) 568 (apply shell sync-cmd))) 569</code></pre><p>Running this from the command line, we get the desired result:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; bb publish --dryrun 570aws s3 sync --dryrun public/ s3://orgtech.se/ 571(dryrun) upload: public/index.html to s3://orgtech.se/index.html 572</code></pre><p>And if we omit the <code>--dryrun</code> arg:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech-se; bb publish --dryrun 573aws s3 sync --dryrun public/ s3://orgtech.se/ 574upload: public/index.html to s3://orgtech.se/index.html 575</code></pre><p>Amazing!</p><h2 id="do_you_invalidate_parking%3F">Do you invalidate parking?</h2><p>If we open <a href='https://orgtech.se/index.html'>https://orgtech.se/index.html</a> in a browser and view source, however, we get a nasty surprise: the lovely newline we added at the end of the file isn't there! What in the world is going on here?</p><p>Well, it turns out that one of the primary functions of a CDN (Content Distribution Network) like CloudFront is to cache responses so every request that hits an endpoint doesn't have to go all the way back to the origin (in this case, our S3 bucket) to serve the response. So we've fallen prey to #2 in the list of the 4 hardest problems in Computer Science:</p><ol><li>Naming things</li><li>Caching things</li><li>Off by one errors</li></ol><p>What to do, what to do?</p><p>Luckily for us, CloudFront gives us a way to invalidate the cache so the first request for a given endpoint re-fetches from the origin. Even more luckily for us, the AWS CLI surfaces this:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech; aws cloudfront create-invalidation help 576CREATE-INVALIDATION() CREATE-INVALIDATION() 577 578NAME 579 create-invalidation - 580 581DESCRIPTION 582 Create a new invalidation. 583 584 See also: AWS API Documentation 585 586SYNOPSIS 587 create-invalidation 588 --distribution-id <value> 589 [--paths <value>] 590[...] 591 592OPTIONS 593 --distribution-id (string) The distribution's id. 594 --paths (string) The space-separated paths to be invalidated. 595[...] 596</code></pre><p>So what we can do is create an invalidation right after syncing to the S3 bucket in our <code>publish</code> function. In order to do this, we'll need a distribution ID. Let's ask CloudFront about the distributions we have:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech; aws cloudfront list-distributions \ 597 | bb -i '(let [ds (-> (str/join "\n" *input*) 598 (json/parse-string true) 599 (get-in [:DistributionList :Items]))] 600 (map (juxt #(get-in % [:Aliases :Items 0]) :Id) ds))' 601(["www.jmglov.net" "F2ABC12UVWXYZ9"] 602 ["politechspod.com" "F7E33IJKLMN0P6"] 603 ["www.orgtech.se" "FDCBA42RSTUV3"]) 604</code></pre><p>This looks like the one we're after:</p><pre class="language-text"><code class="lang-text language-text">["www.orgtech.se" "FDCBA42RSTUV3"] 605</code></pre><p>Let's go ahead and add the distribution ID to our <code>bb.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{ ; ... 606 {:requires ([tasks]) 607 :init (def opts 608 {:website-bucket "orgtech.se" 609 :out-dir "public" 610 :distribution-id "FDCBA42RSTUV3"}) 611 ;; ... 612 }} 613</code></pre><p>
613Now we can use this in <code>tasks.clj</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn publish [default-opts] 614 (let [{:keys [website-bucket out-dir distribution-id dryrun] 615 :as opts} (merge default-opts 616 (cli/parse-opts *command-line-args*)) 617 sync-cmd (concat ["aws s3 sync"] 618 (when dryrun ["--dryrun"]) 619 [(format "%s/" out-dir) 620 (format "s3://%s/" website-bucket)]) 621 invalidate-cmd ["aws cloudfront create-invalidation" 622 "--distribution-id" distribution-id 623 "--paths" :???]] 624 ;; ... 625 )) 626</code></pre><p>OK, now where can we get our paths? Well, recall that <code>aws s3 sync --dryrun</code> helpfully outputs what is to be done:</p><pre class="language-text"><code class="lang-text language-text">aws s3 sync --dryrun public/ s3://orgtech.se/ 627(dryrun) upload: public/index.html to s3://orgtech.se/index.html 628</code></pre><p>Let's consume this from Babashka to grab the paths! First, we'll dirty the dishes:</p><pre class="language-text"><code class="lang-text language-text">: orgtech-se; touch public/index.html public/css/main.css 629 630: orgtech-se; aws s3 sync --dryrun public/ s3://orgtech.se/ 631(dryrun) upload: public/css/main.css to s3://orgtech.se/css/main.css 632(dryrun) upload: public/index.html to s3://orgtech.se/index.html 633</code></pre><p>And then parse that output in our <code>tasks.clj</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 634 (:require ; ... 635 [clojure.string :as str])) 636 637(comment 638 639 (def default-opts {:website-bucket "orgtech.se" 640 :out-dir "public" 641 :distribution-id "FDCBA42RSTUV3"}) ; C-c C-v f c e 642 ;; => #'tasks/default-opts 643 644 (->> (shell "aws s3 sync --dryrun public/ s3://orgtech.se/") 645 :out 646 str/split-lines 647 (map #(str/replace % #"^[(]dryrun[)] upload: public(/\S+) to .+$" "$1"))) 648 ;; => ("/css/main.css" "/index.html") 649 650 ) 651</code></pre><p>Now that we know how to determine which files have changed, let's plug this into our <code>publish</code> function to add to the <code>aws cloudfront create-invalidation</code> command:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn publish [default-opts] 652 (let [{:keys [website-bucket out-dir distribution-id dryrun] 653 :as opts} (merge default-opts 654 (cli/parse-opts *command-line-args*)) 655 sync-cmd (concat ["aws s3 sync"] 656 (when dryrun ["--dryrun"]) 657 [(format "%s/" out-dir) 658 (format "s3://%s/" website-bucket)]) 659 ;; ððððððððððððððððððððððððððððððððð 660 paths-re (re-pattern (format "^[(]dryrun[)] upload: %s(/\\S+) to .+$" 661 out-dir)) 662 invalidate-cmd (concat ["aws cloudfront create-invalidation" 663 "--distribution-id" distribution-id 664 "--paths"] 665 (->> (apply shell (concat sync-cmd ["--dryrun"])) 666 :out 667 str/split-lines 668 (map #(str/replace % paths-re "$1")))) 669 ;; ððððððððððððððððððððððððððððððððð 670 ] 671 (apply println sync-cmd) 672 (apply shell sync-cmd) 673 ;; ðððððððððððððð 674 (apply println invalidate-cmd) 675 (when-not dryrun 676 (apply shell invalidate-cmd)) 677 ;; ðððððððððððððð 678 )) 679 680(comment 681 682 (publish (assoc default-opts :dryrun true)) ; C-c C-e 683 684 ) 685</code></pre><p>Our REPL buffer duly notes:</p><pre class="language-text"><code class="lang-text language-text">aws s3 sync --dryrun public/ s3://orgtech.se/ 686(dryrun) upload: public/css/main.css to s3://orgtech.se/css/main.css 687(dryrun) upload: public/index.html to s3://orgtech.se/index.html 688 689aws cloudfront create-invalidation --distribution-id FDCBA42RSTUV3 690 --paths /css/main.css /index.html 691</code></pre><p>Looks good, so let's try it for realz:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech; bb publish 692aws s3 sync public/ s3://orgtech.se/ 693aws cloudfront create-invalidation --distribution-id FDCBA42RSTUV3 694 --paths /css/main.css /index.html 695{ 696 "Location": "https://cloudfront.amazonaws.com/2020-05-31/distribution/FDCBA42RSTUV3/invalidation/ICECSBHVIW089I89RLYODUBMXI", 697 "Invalidation": { 698 "Id": "ICECSBHVIW089I89RLYODUBMXI", 699 "Status": "InProgress", 700 "CreateTime": "2024-08-25T07:14:55.130Z", 701 "InvalidationBatch": { 702 "Paths": { 703 "Quantity": 2, 704 "Items": [ 705 "/css/main.css", 706 "/index.html" 707 ] 708 }, 709 "CallerReference": "cli-1724570094-253923" 710 } 711 } 712} 713</code></pre><p>This is promising. Let's refill our coffee and then check to see if the invalidation has finishing invalidating:</p><pre class="language-text"><code class="lang-text language-text">: ~/code/orgtech; aws cloudfront get-invalidation \ 714 --distribution-id FDCBA42RSTUV3 \ 715 --id ICECSBHVIW089I89RLYODUBMXI 716{ 717 "Invalidation": { 718 "Id": "ICECSBHVIW089I89RLYODUBMXI", 719 "Status": "Completed", 720 "CreateTime": "2024-08-25T07:14:55.130Z", 721 "InvalidationBatch": { 722 "Paths": { 723 "Quantity": 2, 724 "Items": [ 725 "/css/main.css", 726 "/index.html" 727 ] 728 }, 729 "CallerReference": "cli-1724570094-253923" 730 } 731 } 732} 733</code></pre><p>If we now Shift-reload the page in our browser, we'll see the wonderful new header! ð</p><h2 id="transcription_made_easy">Transcription made easy</h2><p>Now that we have an amazing website and a way to publish it, let's record an episode and then make a nice trailer to get people pumped up! We'll use <a href='https://zencastr.com/'>Zencastr</a> to do this, which produces a lovely MP3 for us as well as a transcript. For now, we have the following files on disk:</p><pre class="language-text"><code class="lang-text language-text">: organising-tech-in-sweden; tree 734. 735âââ bb.edn 736âââ ep00-trailer 737â  âââ otis-ep00-trailer.mp3 738â  âââ otis-ep0-trailer_transcription.txt 739âââ ep01-klarna-part1 740â  âââ otis-ep01-klarna-part1.mp3 741â  âââ otis-ep01-klarna-part1_transcription.txt 742âââ public 743â  âââ ... 744â  âââ index.html 745âââ tasks.clj 746</code></pre><p>Zencastr's transcripts are, um, functional, shall we say, but any machine transcription tool will require a human who speaks the actual language being transcribed (in this case, English) to clean things up. Luckily, there's an amazing free (as in source <strong>and</strong> as in beer!) browser-based tool called <a href='https://otranscribe.com/'>oTranscribe</a> that lets us listen to our lovely audio whilst editing the transcript, with keyboard shortcuts for pausing and resuming playback, rewinding and fast forwarding, adjusting playback speed, etc.</p><p>To unlock all this goodness, we'll need to convert our boring Zencastr transcripts, which look like this:</p><pre class="language-text"><code class="lang-text language-text">00:02.00 747jmglov 748Already and we are live now. So welcome everyone to organizing tech in Swede
748n 749I am here my name is Josh I'm here with a ah. Cast of characters that will 750delight in a maze and I will introduce them here in a minute but before we get 751to the cool people. Let me introduce. My co-host Ray joining us all the way from 752Belgium Ray you want to say hey. 753 75400:30.61 755Ray 756Yeah on uncool Belgium hello everyone? Well it's a bit warmer than Sweden now. 757But okay I yeah you were talking about being oh yeah, okay fine. 758 75900:42.78 760jmglov 761Yeah, all right? So we are here like I said to talk about organizing tech in 762Sweden and um, basically what we want to do is introduce. Folks who might not 763know much about Sweden other than Ekea is from here and chocolate. Oh no wait. 764That's Switzerland for some reason and the us. Oh you know Belgium sure sure. 765Sure. Um. 766 767[...] 768</code></pre><p>into amazing OTR (oTranscribe's file format) ones, which look like some HTML stuffed into some JSON.</p><p>To do this converting, we could use <a href='https://github.com/jmglov/transcribble'>Transcribble</a>, which I wrote a while back and forgot to blog about. Or we could just open up <a href='https://otranscribe.com/'>https://otranscribe.com/</a> in our browser and click the big blue "Start transcribing" button, then click the "Choose audio (or video) file" button and choose our <code>~/code/orgtech-se/ep01-klarna-part1/otis-ep01-klarna-part1.mp3</code> file, and then paste in our Zencastr transcript, warts and all. If we click the Play button (or hit Esc, which is oTranscribe's play/pause keyboard shortcut), our episode will start playing, and we can hit Ctrl+J to add a timestamp to the transcript when we hear me say "So, welcome everyone to Organising Tech in Swede
768n". After much listening and editing, which we will just handwave away here, we now have a pristine transcript!</p><p><img src="assets/2024-09-18-podcast-soundcljoud-otr.png" alt="The oTranscribe transcription UI" title="Cleaning this up is an exercise for the reader" width=800px border=1 /></p><p>We'll now click the "Export" button to pop up the "Download transcript as..." dialog, select "oTranscribe format (.otr)", and save as a new <code>~/code/orgtech-se/ep01-klarna-part1/otis-ep01-klarna-part1.otr</code> file.</p><h2 id="feed_me_some_episodes">Feed me some episodes</h2><p>Now that we have some files, we need to stuff those in a feed. Luckily, <a href='2024-07-09-soundcljoud.html#faking_a_podcast_with_selmer'>we have 769some experience with podcast 770feeds</a>. Using <a href='https://github.com/yogthos/Selmer'>Selmer</a> to write the feed worked out pretty nicely then, so let's elect to do the same thing again. In fact, since we already did the hard work of creating code that knows how to write an RSS file for a music album, why don't we see if we can modify it a bit to support podcasts as well?</p><p>Let's pop over to <code>~/code/soundcljoud/processor/main.clj</code> and remind ourselves how we turned an album into an RSS feed:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn process-album [opts dir] 771 (let [info (album-info opts dir) 772 tmpdir (fs/create-temp-dir {:prefix "soundcljoud."}) 773 info (update info :tracks (partial map #(process-track % tmpdir)))] 774 (spit (fs/file tmpdir "album.rss") (rss/album-feed opts info)) 775 (assoc info :out-dir tmpdir))) 776</code></pre><p>In this case, we fetched Discogs metadata for the album in the <code>album-info</code> function, created a temporary directory, did some transcoding in <code>process-track</code>, then used <code>rss/album-feed</code> to apply a Selmer template to our album metadata. Opening up the <code>soundcljoud.rss</code> namespace, we see that the <code>album-feed</code> function is extremely specific to music albums:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn album-feed [opts album-info] 777 (let [template (-> (io/resource "album-feed.rss") slurp)] 778 (selmer/render template 779 (-> album-info 780 (update :tracks 781 (partial map #(update % :mp3-filename 782 fs/file-name))) 783 (assoc :date (now)))))) 784</code></pre><p>Whilst there's no obvious way to repurpose it, we can follow the same basic pattern:</p><ol><li>Load the template</li><li>Massage the "info" about the <del>album</del> podcast as needed</li><li>Render the template with our "info"</li></ol><p>Let's sketch out a <code>podcast-feed</code> function:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn podcast-feed [opts podcast-info] ;; â podcast-info how? 785 (let [template :???] ;; â where do we get this? 786 (->> podcast-info 787 ;; â maybe some massaging here? 788 (selmer/render template)))) 789</code></pre><p>The first question is where we get the <code>podcast-info</code>. We got <code>album-info</code> from Discogs, but since Discogs presumably knows nothing about our podcast (and why would it?), let's create a static <code>~/code/orgtech/podcast.edn</code> file instead, fill it with whatever data our podcast feed will need (I guess it's time to rhyme), and read in the EDN before calling this function.</p><p>Having made that decision, we must now ask ourselves where we will get our podcast feed template from. In the case of albums, we provided a template as a resource directly from Soundcljoud, so why don't we do that again?</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn podcast-feed [opts podcast-info] 790 (let [template (-> (io/resource "podcast-feed.rss") slurp)] 791 (->> podcast-info 792 ;; â maybe some massaging here? 793 (selmer/render template)))) 794</code></pre><p>In order to know what if any massaging <code>podcast-info</code> will need, we'll need to create the template and the <code>podcast.edn</code> file and see where the gaps are. Let's consult Apple's handy <a href='https://help.apple.com/itc/podcasts_connect/#/itcb54353390'>A Podcasterâs Guide to 795RSS</a> and start writing <code>resources/podcast-feed.rss</code>. First, we need the standard feed skeleton:</p><pre class="language-xml"><code class="lang-xml language-xml"><?xml version='1.0' encoding='UTF-8'?> 796<rss version="2.0" 797 xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" 798 xmlns:atom="http://www.w3.org/2005/Atom"> 799 <
799channel> 800 <!-- TBD: some stuff here --> 801 </channel> 802</rss> 803</code></pre><p>Now to start populating the contents <code><channel></code> tag. According to Apple, we need the following:</p><table><thead><tr><th>Show tags</th><th>Usage</th><th>Parent tag</th></tr></thead><tbody><tr><td><code><title></code></td><td>The show title.</td><td><code><channel></code></td></tr><tr><td><code><description></code></td><td>The show description.</td><td><code><channel></code></td></tr><tr><td><code><itunes:image></code></td><td>The artwork for the show.</td><td><code><channel></code></td></tr><tr><td><code><language></code></td><td>The language spoken on the show.</td><td><code><channel></code></td></tr><tr><td><code><itunes:explicit></code></td><td>The podcast parental advisory information.</td><td><code><channel></code></td></tr><tr><td><code><itunes:category></code></td><td>The show category information.</td><td><code><channel></code></td></tr></tbody></table><p>This is straightforward enough (except for <code><itunes:category></code>, which we'll come back to):</p><pre class="language-xml"><code class="lang-xml language-xml"> <channel> 804 <title>{{podcast.title}}</title> 805 <description>{{podcast.description|safe}}</description> 806 <itunes:image href="{{base-url}}{{podcast.image}}"/> 807 <language>{{podcast.language}}</language> 808 <itunes:explicit>{{podcast.explicit}}</itunes:explicit> 809 </channel> 810</code></pre><p>By the way, that <code>{{podcast.description|safe}}</code> thingy is a Selmer filter that <a href='https://github.com/yogthos/Selmer?tab=readme-ov-file#safe'>exempts the variable from being 811HTML-escaped</a>. Since our description text goes in the body of the <code><description></code> tag, we don't want things like "rock & roll" getting rendered as "rock & roll", because that would be yucky.</p><p>Now we need to add that data to our <code>podcast.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:base-url "https://orgtech.se" 812 :podcast {:title "
812Organising Tech in Sweden" 813 :description "Organising Tech in Sweden is a limited podcast series exploring union organising in Swedish tech companies. Join us as we sit down with some of the people involved in the campaigns to win collective bargaining rights at two of Sweden's tech unicorns, Klarna and Spotify." 814 :image "/img/orgtech-se-cover.jpg" 815 :language "en" 816 :explicit true}} 817</code></pre><p>As we were writing <code>podcast.edn</code>, we realised that <code>podcast-info</code> was actually the data in the EDN file under the <code>:podcast</code> key, so we are really just providing an <code>opts</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn podcast-feed [opts] 818 (let [template (-> (io/resource "podcast-feed.rss") slurp)] 819 (->> opts 820 ;; â maybe some massaging here? 821 (selmer/render template)))) 822</code></pre><p>Let's give this a go in our REPL:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 823 824 (require '[clojure.edn :as edn]) 825 ;; => nil 826 827 (def opts (-> (slurp "/home/jmglov/code/orgtech-se/podcast.edn") 828 (edn/read-string))) 829 ;; => #'soundcljoud.rss/opts 830 831 opts 832 ;; => {:base-url "https://orgtech.se", 833 ;; :podcast 834 ;; {:title "
834Organising Tech in Sweden", 835 ;; :description 836 ;; "Organising Tech in Sweden is a...", 837 ;; :image "/img/orgtech-se-cover.jpg", 838 ;; :language "en", 839 ;; :explicit true}} 840 841 (podcast-feed opts) 842 ;; => "<?xml version='1.0' encoding='UTF-8'?> 843 ;; <rss version=\"2.0\" 844 ;; xmlns:itunes=\"http://www.itunes.com/dtds/podcast-1.0.dtd\" 845 ;; xmlns:atom=\"http://www.w3.org/2005/Atom\"> 846 ;; <channel> 847 ;; <title>Organising Tech in Sweden</title> 848 ;; <description>Organising Tech in Sweden is a...</description> 849 ;; <itunes:image href=\"https://orgtech.se/img/orgtech-se-cover.jpg\"/> 850 ;; <language>en</language> 851 ;; <itunes:explicit>true</itunes:explicit> 852 ;; </channel> 853 ;; </rss>" 854 855 ) 856</code></pre><p>Let's now come back to that tricky <code><itunes:category></code> tag. Referring back to the Apple docs, we see:</p><blockquote><p> For a complete list of categories and subcategories, see Apple Podcast categories. </p><p> Select the category that best reflects the content of your show. If available, you can also define a subcategory. </p><p> Single category: </p><p> <code><itunes:category text="History" /></code> </p><p> Category with subcategory: </p><p> <code><itunes:category text="Society &amp; Culture"></code> <code> <itunes:category text="Documentary" /></code> <code></itunes:category></code> </p></blockquote><p>We can add categories to our <code>podcast-feed.rss</code> template using Selmer's <a href='https://github.com/yogthos/Selmer?tab=readme-ov-file#for'>for</a> tag:</p><pre class="language-xml"><code class="lang-xml language-xml"> <channel> 857 <!-- ... --> 858{% for category in podcast.categories %} 859 <itunes:category text="{{category.text}}"> 860{% for subcategory in category.subcategories %} 861 <itunes:category text="{{subcategory.text}}" /> 862{% endfor %} 863 </itunes:category> 864{% endfor %} 865 </channel> 866</code></pre><p>And now we need to pick a category or two and add them to our <code>podcast.edn</code>. The <a href='https://podcasters.apple.com/support/1691-apple-podcasts-categories'>Apple Podcasts 867categories</a> page lists the options, of which we choose:</p><ul><li>Technology (which has no subcategories)</li><li>News, with subcategory Politics</li></ul><p>Expressing this in EDN, we get:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:base-url "https://orgtech.se" 868 :podcast { ; ... 869 :categories [{:text "Technology"} 870 {:text "News" 871 :subcategories [{:text "Politics"}]}]}} 872</code></pre><p>And our REPL shows us what we'd expect to see:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 873 874 (def opts (-> (slurp "/home/jmglov/code/orgtech-se/podcast.edn") 875 (edn/read-string))) 876 ;; => #'soundcljoud.rss/opts 877 878 (podcast-feed opts) 879 ;; => "<?xml version='1.0' encoding='UTF-8'?> 880 ;; <rss version=\"2.0\" 881 ;; xmlns:itunes=\"http://www.itunes.com/dtds/podcast-1.0.dtd\" 882 ;; xmlns:atom=\"http://www.w3.org/2005/Atom\"> 883 ;; <channel> 884 ;; ... 885 ;; <itunes:category text=\"Technology\"> 886 ;; </itunes:category> 887 ;; <itunes:category text=\"News\"> 888 ;; <itunes:category text=\"Politics\" /> 889 ;; </itunes:category> 890 ;; </channel> 891 ;; </rss>" 892 893 ) 894</code></pre><p>Having sorted our required tags, let's take a look at Apple's recommended and "situational" tags (which we'll just treat as "recommended"):</p><table><thead><tr><th>
894Show tags</th><th>Usage</th><th>Parent tag</th></tr></thead><tbody><tr><td><code><itunes:author></code></td><td>The group responsible for creating the show.</td><td><code><channel></code></td></tr><tr><td><code><link></code></td><td>The website associated with a podcast.</td><td><code><channel></code></td></tr><tr><td><code><itunes:title></code></td><td>The show title specific for Apple Podcasts.</td><td><code><channel></code></td></tr><tr><td><code><itunes:type></code></td><td>The type of show. Its values can be one of the following:</td><td></td></tr><tr><td></td><td>⢠<strong>Episodic</strong>. Episodes are intended to be consumed without any specific order.</td><td></td></tr><tr><td></td><td>⢠<strong>Serial</strong>. Episodes are intended to be consumed in sequential order.</td><td></td></tr><tr><td><code><copyright></code></td><td>The show copyright details.</td><td><code><channel></code></td></tr></tbody></table><p>Again, this is quite straightforward to add to our template:</p><pre class="language-xml"><code class="lang-xml language-xml"> <channel> 895 <!-- ... --> 896 <itunes:author>{{podcast.author}}</itunes:author> 897 <link>{{base-url}}</link> 898 <itunes:title>{{podcast.title}}</itunes:title> 899 <itunes:type>{{podcast.type}}</itunes:type> 900 <copyright>{{podcast.copyright}}</copyright> 901 </channel> 902</code></pre><p>and to our <code>podcast.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:base-url "https://orgtech.se" 903 :podcast { ; ... 904 :author "
904Organising Tech in Sweden" 905 :type "Serial" 906 :copyright "All rights reserved, Organising Tech in Sweden"}} 907</code></pre><p>Testing things out in our REPL, we see what we expect to see. ð</p><p>Now it's time to add some episodes! Here are the Apple Podcast required, recommended, and situational tags for episodes:</p><table><thead><tr><th>Show tags</th><th>Usage</th><th>Parent tag</th></tr></thead><tbody><tr><td><code><title></code></td><td>An episode title.</td><td><code><item></code></td></tr><tr><td><code><enclosure></code></td><td>The episode content, file size, and file type information. The <code><enclosure></code> tag has three attributes:</td><td><code><item></code></td></tr><tr><td></td><td>⢠<strong>URL</strong>. The URL attribute points to your podcast media file.</td><td></td></tr><tr><td></td><td>⢠<strong>Length</strong>. The length attribute is the file size in bytes.</td><td></td></tr><tr><td></td><td>⢠<strong>Type</strong>. The type attribute provides the correct category for the type of file.</td><td></td></tr><tr><td><code><guid></code></td><td>The episodeâs globally unique identifier (<a href='https://cyber.harvard.edu/rss/rss.html#ltguidgtSubelementOfLtitemgt'>GUID</a>)</td><td><code><item></code></td></tr><tr><td><code><pubDate></code></td><td>The date and time when an episode was released. Format the date using the <a href='http://www.faqs.org/rfcs/rfc2822.html'>RFC 2822</a> specifications. For example: <code>Sat, 01 Apr 2023 19:00:00 GMT</code>.</td><td><code><item></code></td></tr><tr><td><code><description></code></td><td>An episode description.</td><td><code><item></code></td></tr><tr><td><code><itunes:duration></code></td><td>The duration of an episode. Different duration formats are accepted however it is recommended to convert the length of the episode into seconds.</td><td><code><item></code></td></tr><tr><td><code><link></code></td><td>An episode link URL.</td><td><code><item></code></td></tr><tr><td><code><itunes:explicit></code></td><td>The podcast parental advisory information.</td><td><code><item></code></td></tr><tr><td><code><itunes:title></code></td><td>The show title specific for Apple Podcasts.</td><td><code><item></code></td></tr><tr><td><code><itunes:episode></code></td><td>An episode number.</td><td><code><item></code></td></tr><tr><td><code><itunes:episodeType></code></td><td>The episode type.</td><td><code><item></code></td></tr><tr><td></td><td>⢠<strong>Full</strong>. Specify full when you are submitting the complete content of your show.</td><td></td></tr><tr><td></td><td>⢠<strong>Trailer</strong>. Specify trailer when you are submitting a short, promotional piece of content that represents a preview of your current show.</td><td></td></tr><tr><td></td><td>⢠<strong>Bonus</strong>. Specify bonus when you are submitting extra content for your show (for example, behind the scenes information or interviews with the cast) or cross-promotional content for another show.</td><td></td></tr><tr><td><code><itunes:transcript></code></td><td>A link to the episode transcript in the Closed Caption format.</td><td><code><item></code></td></tr></tbody></table><p>Unfortunately, Transcribble doesn't yet support VTT or SRT transcripts, so we can't provide the transcript directly in iTunes. What we will do instead is display the OTR transcript that we previously prepared in oTranscribe on our episode page (which is yet to be written, but we'll get there in the end). In order to do this, let's add a custom <code><transcriptUrl></code> tag.</p><p>Let's start with our template as usual:</p><pre class="language-xml"><code class="lang-xml language-xml"> <channel> 908 <!-- ... --> 909{% for episode in episodes %} 910 <item> 911 <title>{{episode.title}}</title> 912 <enclosure 913 url="{{base-url}}{{episode.path}}/{{episode.audio-file}}" 914 length="{{episode.audio-filesize}}" 915 type="{{episode.mime-type}}" /> 916 <guid>{{base-url}}{{episode.path}}/{{episode.audio-file}}</guid> 917 <pubDate>{{episode.date}}</pubDate> 918 <description><![CDATA[{{episode.description|safe}}]]></description> 919 <itunes:duration>{{episode.duration}}</itunes:duration> 920 <link>{{base-url}}{{episode.path}}</link> 921 <itunes:title>{{episode.title}}</itunes:title> 922 {% if episode.number %}<itunes:episode>{{episode.number}}</itunes:episode>{% endif %} 923 <itunes:episodeType>{{episode.type}}</itunes:episodeType> 924 <transcriptUrl>{{base-url}}{{episode.path}}/{{episode.transcript-file}}</transcriptUrl> 925 </item> 926{% endfor %} 927 </channel> 928</code></pre><p>
928And now we know what episodes need to look like in our <code>podcast.edn</code> file:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{ ; ... 929 :episodes 930 [{:number 0 931 :date "Thu, 5 Sep 2024 00:00:00 +0000" 932 :type "Trailer" 933 :title "Trailer" 934 :summary "Union organising seems to be in the air these days, as tech workers wake up and realise that they are, in fact, workers." 935 :description " 936<p> 937 Union organising seems to be in the air these days, as tech workers wake up and 938 realise that they are, in fact, workers. Here in Sweden, it's no exception. 939 Join us as we sit down with some of the people involved in organising two of 940 Sweden's foremost tech unicorns, Klarna and Spotify. This is Organising Tech in 941 Sweden. 942</p> 943<p class=\"soundcljoud-hidden\"> 944 To view full show notes, including transcripts, please visit the 945 <a href=\"{{base-url}}{{episode.path}}/\">episode page</a>. 946</p> 947<p> 948 Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a> 949 <a href=\"https://bsky.app/profile/anyakjordan.bsky.social\">@anyakjordan.bsky.social</a> 950</p> 951<p> 952 Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a> 953</p>" 954 :path "/episodes/ep00-trailer" 955 :audio-file "otis-ep00-trailer.mp3" 956 :transcript-file "otis-ep00-trailer.otr" 957 :explicit false 958 :mime-type "audio/mpeg"} 959 {:number 1 960 :date "Thu, 12 Sep 2024 00:00:00 +0000" 961 :type "Full" 962 :title "Organising Klarna - Part 1" 963 :summary "A conversation with three of the organisers behind the successful campaign to win a Collective Bargaining Agreement at Klarna" 964 :description " 965<p>
966 We kick off Organising Tech in Sweden in style by recounting the story of how 967 a collective bargaining agreement (CBA) was won at Klarna, a major Swedish 968 fintech. In fact, Klarna was the first unicorn in Sweden to be unionised (and 969 probably the first unicorn in Europe as well)! 970</p> 971<p> 972 To hear all about how this went down, your co-hosts Josh and Ray are joined by 973 Thomas, the founder of the Klarna Unionen Club (a union \"local\", to use 974 terminology that might be more familiar to US listeners); Sen, the chair of 975 the club who won the bargaining agreement against the odds; and Kim, a former 976 Klarna employee with extensive knowledge of Swedish labour law and market 977 policy. 978</p> 979<p> 980 This is part 1 of the conversation, which will be concluded in Episode 2. 981</p> 982<p class=\"soundcljoud-hidden\"> 983 To view full show notes, including transcripts, please visit the 984 <a href=\"{{base-url}}{{episode.path}}/\">episode page</a>. 985</p> 986<p> 987 Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a> 988 <a href=\"https://bsky.app/profile/anyakjordan.bsky.social\">@anyakjordan.bsky.social</a> 989</p> 990<p> 991 Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a> 992</p>" 993 :path "/episodes/ep01-klarna-part1" 994 :audio-file "otis-ep01-klarna-part1.mp3" 995 :transcript-file "otis-ep01-klarna-part1.otr" 996 :explicit false 997 :mime-type "audio/mpeg"} 998 {:preview? true 999 :number 2 1000 :date "Thu, 19 Sep 2024 00:00:00 +0000" 1001 :type "Full" 1002 :title "Organising Klarna - Part 2" 1003 :summary "The conclusion of our conversation with three of the organisers behind the successful campaign to win a Collective Bargaining Agreement at Klarna" 1004 :description " 1005<p> 1006 We finish our conversation with Sen, Thomas, and Kim about how a collective 1007 bargaining agreement (CBA) was won at Klarna. In this episode, we cover the 1008 impact of immigrant workers on organising, the impact of organising on 1009 organisers, and the impact of strikes on negotiations. All of this and a happy 1010 ending too! 1011</p> 1012<p class=\"soundcljoud-hidden\"> 1013 To view full show notes, including transcripts, please visit the 1014 <a href=\"{{base-url}}{{episode.path}}/\">episode page</a>. 1015</p> 1016<p> 1017 Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a> 1018 <a href=\"https://bsky.app/profile/anyakjordan.bsky.social\">@anyakjordan.bsky.social</a> 1019</p> 1020<p> 1021 Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a> 1022</p>" 1023 :path "/episodes/ep02-klarna-part2" 1024 :audio-file "otis-ep02-klarna-part2.mp3" 1025 :transcript-file "otis-ep02-klarna-part2.otr" 1026 :explicit false 1027 :mime-type "audio/mpeg"}]} 1028</code></pre><p>Testing this in our REPL...</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 1029 1030 (def opts (-> (slurp "/home/jmglov/code/orgtech-se/podcast.edn") 1031 (edn/read-string))) 1032 ;; => #'soundcljoud.rss/opts 1033 1034 (podcast-feed opts) 1035 ;; => java.lang.NullPointerException soundcljoud.rss /home/jmglov/code/soundcljoud/processor/src/soundcljoud/rss.clj:34:26 1036 1037 ) 1038</code></pre><p>...we get an unpleasant surprise. ð®</p><p>This is a bit annoying to debug, but we can surmise that one of the template variables in the episode template must be missing. Doing a little visual inspection identifies the culprit:</p><pre class="language-xml"><code class="lang-xml language-xml"> <enclosure 1039 url="{{base-url}}{{episode.path}}/{{episode.audio-file}}" 1040 length="{{episode.audio-filesize}}" 1041 type="{{episode.mime-type}}" /> 1042</code></pre><p>We don't have <code>audio-filesize</code> in our episode data structure. ð¢</p><h2 id="deep_tissue_massage">Deep tissue massage</h2><p>All is not lost, however. Let's cast our minds back to the definition of the <code>podcast-feed</code> function:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn podcast-feed [opts] 1043 (let [template (-> (io/resource "podcast-feed.rss") slurp)] 1044 (->> opts 1045 ;; â maybe some massaging here? 1046 (selmer/render template)))) 1047</code></pre><p>The answer to the question "maybe some massaging here?" now reveals itself to be "Yes. Yes! A thousand times yes!" We also know at least one massage technique we're going to need to use, namely setting the <code>audio-filesize</code> key for each episode. Let's start out by giving ourselves a way to update episodes:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn update-episode [opts episode] 1048 episode) 1049 1050(defn update-episodes [opts] 1051 (update opts :episodes #(map (partial update-episode opts) %))) 1052 1053(defn podcast-feed [opts] 1054 (let [template (-> (io/resource "podcast-feed.rss") slurp)] 1055 (->> opts 1056 update-episodes 1057 (selmer/render template)))) 1058</code></pre><p>
1058Now we can figure out how to add the filesize to each episode. As usual, Babashka's got us covered! Checking out the babashka.fs API documentation, we find a function called <a href='https://github.com/babashka/fs/blob/master/API.md#babashka.fs/size'>babashka.fs/size</a>:</p><blockquote><p> <strong>size</strong> </p><p> <code>(size f)</code> </p><p> Returns the size of a file (in bytes). </p></blockquote><p>Let's mess around a bit in the REPL:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 1059 1060 (def base-dir "/home/jmglov/code/orgtech-se") 1061 ;; => #'soundcljoud.rss/base-dir 1062 1063 (def opts (-> (slurp (fs/file base-dir "podcast.edn")) 1064 (edn/read-string) 1065 (assoc :base-dir base-dir))) 1066 1067 (let [episode (-> opts :episodes first) 1068 filename (format "%s%s/%s" 1069 base-dir (:path episode) (:audio-file episode))] 1070 (fs/size filename)) 1071 ;; => java.nio.file.NoSuchFileException: 1072 ;; /home/jmglov/code/orgtech-se/episodes/ep00-trailer/otis-ep00-trailer.mp3 1073 ;; /home/jmglov/code/soundcljoud/processor/src/soundcljoud/rss.clj:4:5 1074 1075 ) 1076</code></pre><p>Oops! Seems like we've traded one problem for another. ð¬</p><p>On disk, the files are laid out like this:</p><pre class="language-text"><code class="lang-text language-text">: organising-tech-in-sweden; tree 1077. 1078âââ bb.edn 1079âââ ep00-trailer 1080â  âââ otis-ep00-trailer.mp3 1081â  âââ otis-ep0-trailer_transcription.txt 1082âââ ep01-klarna-part1 1083â  âââ otis-ep01-klarna-part1.mp3 1084â  âââ otis-ep01-klarna-part1_transcription.txt 1085âââ ep02-klarna-part2 1086â  âââ otis-ep02-klarna-part2.mp3 1087â  âââ otis-ep02-klarna-part2_transcription.txt 1088âââ public 1089â  âââ ... 1090â  âââ index.html 1091âââ tasks.clj 1092</code></pre><p>But we are looking for the audio file in the path in which it should exist on the server, which makes sense from an RSS feed perspective, which should use paths corresponding to the published site. Our <code>publish</code> task uses <code>aws s3 sync</code> to publish everything in our <code>public/</code> directory, so if we drop the MP3s there, they will get put in the correct place on the S3 website. For now, let's cheat by using our REPL to put the files where they need to go:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 1093 1094 (def opts (-> (slurp (fs/file base-dir "podcast.edn")) 1095 (edn/read-string) 1096 (assoc :base-dir base-dir 1097 :out-dir "public"))) 1098 ;; => #'soundcljoud.rss/opts 1099 1100 (doseq [episode (:episodes opts) 1101 :let [filename (format "%s/%s%s/%s" 1102 (:base-dir opts) (:out-dir opts) 1103 (:path episode) (:audio-file episode)) 1104 src-filename (fs/file dir 1105 (fs/file-name (:path episode)) 1106 (:audio-file episode))]] 1107 (when-not (fs/exists? filename) 1108 (fs/create-dirs (fs/parent filename)) 1109 (fs/copy src-filename filename))) 1110 ;; => nil 1111 1112 ) 1113</code></pre><p>OK, this will do for now. Let's grab this code, clean it up a bit, and shove it into our <code>update-episode</code> function:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn update-episode [{:keys [base-dir out-dir] :as opts} 1114 {:keys [audio-file path] :as episode}] 1115 (assoc episode :audio-filesize 1116 (fs/size (format "%s/%s%s/%s" base-dir out-dir path audio-file)))) 1117</code></pre><p>Before testing this out in the REPL, we should add the <code>:out-dir</code> key to our <code>podcast.edn</code> so we don't rely on the caller to add it to <code>opts</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:base-url "https://orgtech.se" 1118 :podcast { ... } 1119 :episodes [ ... ]} 1120</code></pre><p>OK, now we're ready to give it a spin in the REPL:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 1121 1122 (podcast-feed (assoc opts :out-dir "public")) 1123 ;; => "<?xml version='1.0' encoding='UTF-8'?>\n 1124 ;; <rss version=\"2.0\"\n 1125 ;; xmlns:itunes=\"http://www.itunes.com/dtds/podcast-1.0.dtd\"\n 1126 ;; xmlns:atom=\"http://www.w3.org/2005/Atom\">\n 1127 ;; <channel>\n 1128 ;; <title>
1128Organising Tech in Sweden</title>\n 1129 ;; <description>Organising Tech in Sweden is a...</description>\n 1130 ;; <itunes:image href=\"https://orgtech.se/img/orgtech-se-cover.jpg\"/>\n 1131 ;; <language>en</language>\n 1132 ;; <itunes:explicit>true</itunes:explicit>\n\n 1133 ;; <itunes:category text=\"Technology\">\n\n 1134 ;; </itunes:category>\n\n 1135 ;; <itunes:category text=\"News\">\n\n 1136 ;; <itunes:category text=\"Politics\" />\n\n 1137 ;; </itunes:category>\n\n 1138 ;; <itunes:author>Organising Tech in Sweden</itunes:author>\n 1139 ;; <link>https://orgtech.se</link>\n 1140 ;; <itunes:title>Organising Tech in Sweden</itunes:title>\n 1141 ;; <itunes:type>Serial</itunes:type>\n 1142 ;; <copyright>All rights reserved</copyright>\n\n 1143 ;; <item>\n 1144 ;; <title>Trailer</title>\n 1145 ;; <enclosure\n 1146 ;; url=\"https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.mp3\"\n 1147 ;; length=\"1016937\"\n 1148 ;; type=\"audio/mpeg\" />\n 1149 ;; <guid>https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.mp3</guid>\n 1150 ;; <pubDate>Thu, 5 Sep 2024 00:00:00 +0000</pubDate>\n 1151 ;; <description><![CDATA[\n 1152 ;; <p>\n Union organising seems to be in the air these days...</p>\n 1153 ;; <p class=\"soundcljoud-hidden\">\n 1154 ;; To view full show notes, including transcripts, please visit the\n 1155 ;; <a href=\"{{base-url}}{{episode.path}}/\">episode page</a>.\n 1156 ;; </p>\n 1157 ;; <p>\n 1158 ;; Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a>\n 1159 ;; </p>\n 1160 ;; <p>\n 1161 ;; Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a>\n</p> 1162 ;; ]]></description>\n 1163 ;; <itunes:duration></itunes:duration>\n 1164 ;; <link>https://orgtech.se/episodes/ep00-trailer</link>\n 1165 ;; <itunes:title>Trailer</itunes:title>\n 1166 ;; <itunes:episode>0</itunes:episode>\n 1167 ;; <itunes:episodeType>Trailer</itunes:episodeType>\n 1168 ;; <transcriptUrl> 1169 ;; https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.otr 1170 ;; </transcriptUrl>\n 1171 ;; </item>\n\n 1172 ;; ... 1173 ;; </channel>\n 1174 ;; </rss>\n" 1175 1176 ) 1177</code></pre><p>This looks like a good start, but a few things jump out at us:</p><ol><li>Our <code><itunes:duration></code> tag is empty</li><li>We still have a few Selmer template variables in our output, for example: `<a href=\"{{base-url}}{{episode.path}}/\">episode page</a>`</li></ol><p>Let's tackle the duration issue first, because we already have the tools to fix that in the soundcljoud.processor code that we wrote for Garth:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns soundcljoud.audio 1178 (:require [babashka.fs :as fs] 1179 [babashka.process :as p] 1180 [cheshire.core :as json] 1181 [clojure.string :as str])) 1182 1183(defn mp3-duration [filename] 1184 (-> (p/shell {:out :string} 1185 "ffprobe -v quiet -print_format json -show_format -show_streams" 1186 filename) 1187 :out 1188 (json/parse-string keyword) 1189 :streams 1190 first 1191 :duration 1192 (str/replace #"[.]\d+$" ""))) 1193 1194;; ... 1195</code></pre><p>Let's pull soundcljoud.audio into our namespace and then grab the duration in <code>update-episode</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns soundcljoud.rss 1196 (:require ; ... 1197 [soundcljoud.audio :as audio]) 1198 (:import ...)) 1199 1200;; ... 1201 1202(defn update-episode [{:keys [base-dir src-dir] :as opts} 1203 {:keys [audio-file path] :as episode}] 1204 (let [filename (format "%s/%s%s/%s" base-dir src-dir path audio-file)] 1205 (assoc episode 1206 :audio-filesize (fs/size filename) 1207 :duration (audio/mp3-duration filename)))) 1208 1209;; ... 1210 1211(comment 1212 1213 (podcast-feed opts) 1214 ;; => "<?xml version='1.0' encoding='UTF-8'?>\n 1215 ;; <rss version=\"2.0\" ...>\n 1216 ;; <channel>\n 1217 ;; <title>
1217Organising Tech in Sweden</title>\n 1218 ;; <description>Organising Tech in Sweden is a...</description>\n 1219 ;; ... 1220 ;; <item>\n 1221 ;; <title>Trailer</title>\n 1222 ;; ... 1223 ;; <itunes:duration>42</itunes:duration>\n 1224 ;; ... 1225 ;; </item>\n\n 1226 ;; ... 1227 ;; </channel>\n 1228 ;; </rss>\n" 1229 1230) 1231</code></pre><p>This looks good, so let's turn our roving eye to the last remaining problem.</p><h2 id="it%27s_templates_all_the_way_down%2C_young_man">It's templates all the way down, young man</h2><p>After rendering our RSS feed template, we somehow still have unrendered Selmer in our output:</p><pre class="language-xml"><code class="lang-xml language-xml"><description> 1232 <![CDATA[ 1233 <p> 1234 Union organising seems to be in the air these days... 1235 </p> 1236 <p class="soundcljoud-hidden"> 1237 To view full show notes, including transcripts, please visit the 1238 <a href="{{base-url}}{{episode.path}}/">episode page</a>. 1239 </p> 1240 <p> 1241 Cover art by <a href="https://anyakjordan.com/">Anya K. Jordan</a> 1242 </p> 1243 <p> 1244 Theme music by <a href="https://soundcloud.com/ptzery">Ptzery</a> 1245 </p>]]> 1246</description> 1247</code></pre><p>Let's see what's going on in our <code>podcast-feed.rss</code> template for episodes:</p><pre class="language-xml"><code class="lang-xml language-xml">{% for episode in episodes %} 1248 <item> 1249 <title>{{episode.title}}</title> 1250 ... 1251 <description><![CDATA[{{episode.description|safe}}]]></description> 1252 ... 1253 </item> 1254{% endfor %} 1255</code></pre><p>So we're plugging <code>episode.description</code> into the template. Let's see what that looks like in our <code>podcast.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{ ; ... 1256 :episodes 1257 [{:number 0 1258 :title "Trailer" 1259 ;; ... 1260 :description " 1261<p> 1262 Union organising seems to be in the air these days, as tech workers wake up and 1263 realise that they are, in fact, workers. Here in Sweden, it's no exception. 1264 Join us as we sit down with some of the people involved in organising two of 1265 Sweden's foremost tech unicorns, Klarna and Spotify. This is Organising Tech in 1266 Sweden. 1267</p> 1268<p class=\"soundcljoud-hidden\"> 1269 To view full show notes, including transcripts, please visit the 1270 <a href=\"{{base-url}}{{episode.path}}/\">episode page</a>. 1271</p> 1272<p> 1273 Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a> 1274 <a href=\"https://bsky.app/profile/anyakjordan.bsky.social\">@anyakjordan.bsky.social</a> 1275</p> 1276<p> 1277 Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a> 1278</p>" 1279 ;; ... 1280 } 1281 ;; ... 1282]} 1283</code></pre><p>Ah-ha! The value of <code>episode.description</code> itself contains some templating. So it looks like we need to render that as well.</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn update-episode [{:keys [base-dir src-dir] :as opts} 1284 {:keys [audio-file path] :as episode}] 1285 (let [filename (format "%s/%s%s/%s" base-dir src-dir path audio-file)] 1286 (assoc episode 1287 :audio-filesize (fs/size filename) 1288 :duration (audio/mp3-duration filename) 1289 :description (selmer/render (:description episode) 1290 (assoc opts :episode episode))))) 1291 1292;; ... 1293 1294(comment 1295 1296 (podcast-feed opts) 1297 ;; => "<?xml version='1.0' encoding='UTF-8'?>\n 1298 ;; <rss version=\"2.0\" ...>\n 1299 ;; <channel>\n 1300 ;; <title>
1300Organising Tech in Sweden</title>\n 1301 ;; <description>Organising Tech in Sweden is a...</description>\n 1302 ;; ... 1303 ;; <item>\n 1304 ;; <title>Trailer</title>\n 1305 ;; <description><![CDATA[\n 1306 ;; <p>\n Union organising seems to be in the air these days...</p>\n 1307 ;; <p class=\"soundcljoud-hidden\">\n 1308 ;; To view full show notes, including transcripts, please visit the\n 1309 ;; <a href=\"https://orgtech.se/episodes/ep00-trailer/\">episode page</a>.\n 1310 ;; </p>\n 1311 ;; <p>\n 1312 ;; Cover art by <a href=\"https://anyakjordan.com/\">Anya K. Jordan</a>\n 1313 ;; </p>\n 1314 ;; <p>\n 1315 ;; Theme music by <a href=\"https://soundcloud.com/ptzery\">Ptzery</a>\n</p> 1316 ;; ]]></description>\n 1317 ;; ... 1318 ;; </item>\n\n 1319 ;; ... 1320 ;; </channel>\n 1321 ;; </rss>\n" 1322 1323 ) 1324</code></pre><p>OK, this looks much better! And in fact, it looks so much better that we can declare victory and move on to figuring out how to write this beautiful feed to disk!</p><p>To do that, let's jump back to our <code>orgtech-se/bb.edn</code> and add a task for rendering the feed. We'll need to add the Soundcljoud processor to our deps, then we can pretend we have a <code>tasks/render</code> function and call it:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{:deps {io.github.babashka/sci.nrepl 1325 {:git/sha "2f8a9ed2d39a1b09d2b4d34d95494b56468f4a23"} 1326 io.github.babashka/http-server 1327 {:git/sha "e203166a020509d126149ff8046489857ce5c89f"} 1328 ;; You can always depend on Soundcljoud! 1329 ;; ðððððððððððððððððððððððð 1330 io.github.jmglov/soundcljoud 1331 {:local/root "/home/jmglov/code/soundcljoud/processor"} 1332 ;; ðððððððððððððððððððððððð 1333 io.github.jmglov/transcribble 1334 {:local/root "/home/jmglov/code/transcribble/cli"}} 1335 :paths ["."] 1336 :tasks 1337 { 1338 ;; ... 1339 1340 ;; ðððððððððððððððððððð 1341 render {:doc "Create webpages from templates" 1342 :task (tasks/render opts)} 1343 ;; ðððððððððððððððððððð 1344 1345 ;; ... 1346 }} 1347</code></pre><p>And now we pop over to <code>tasks.clj</code> to implement the task. Sadly, we need to restart our REPL since we added a new dependency and I'm too lazy to learn how to use the new <code>clojure.repl.deps.add-lib</code> from Clojure 1.12 (added to Babashka in version <a href='https://github.com/babashka/babashka/releases/tag/v1.4.192'>1.4.192</a>). In Emacs, we can do this with <strong>C-c C-z</strong> (<code>cider-switch-to-repl-buffer</code>) to jump to the REPL buffer, then <strong>C-c C-q</strong> (<code>cider-quit</code>) to stop the REPL, then **C-c M-j** (<code>cider-jack-in-clj</code>) to start a new REPL. Easy peasy!</p><p>Thus armed with a new REPL, let's pull in the namespaces required to load our <code>podcast.edn</code> and then actually load our <code>podcast.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 1348 (:require [babashka.cli :as cli] 1349 [babashka.process :as p] 1350 ;; Pull in some new namespaces 1351 ;; ðððððððððððððð 1352 [babashka.fs :as fs] 1353 [clojure.edn :as edn] 1354 ;; ðððððððððððððð 1355 )) 1356 1357(comment 1358 1359 (def default-opts {:website-bucket "orgtech.se" 1360 :out-dir "public" 1361 :distribution-id "FDCBA42RSTUV3"}) ; C-c C-v f c e 1362 ;; => #'tasks/default-opts 1363 1364 (def opts 1365 (let [base-dir (str (fs/cwd))] 1366 (merge default-opts 1367 (-> (fs/file base-dir "podcast.edn") 1368 slurp 1369 edn/read-string 1370 (assoc :base-dir base-dir))))) 1371 ;; => #'tasks/opts 1372 1373 opts 1374 ;; => {:website-bucket "orgtech.se/blog", 1375 ;; :out-dir "public", 1376 ;; :distribution-id "EPTUS11MTYJF7", 1377 ;; :base-url "https://orgtech.se", 1378 ;; :src-dir "public", 1379 ;; :podcast { ... }, 1380 ;; :episodes [ ... ], 1381 ;; :base-dir "/home/jmglov/code/orgtech-se"} 1382 1383) 1384</code></pre><p>To set ourselves up for success with <code>soundcljoud.rss/podcast-feed</code>, we know that we need our MP3 files in the right place. And in fact, we cheated a bit in our REPL to copy those files to the right place, which means we have some code lying around that we can use! And whilst we're at it, we should also copy the transcript files, since we're referring to them in the rendered feed.</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(comment 1385 1386 (doseq [episode (:episodes opts) 1387 file (map episode [:audio-file :transcript-file]) 1388 :let [filename (format "%s/%s%s/%s" 1389 (:base-dir opts) (:src-dir opts) 1390 (:path episode) file) 1391 src-filename (fs/file (:base-dir opts) 1392 (fs/file-name (:path episode)) 1393 file)]] 1394 (when-not (fs/exists? filename) 1395 (fs/create-dirs (fs/parent filename)) 1396 (fs/copy src-filename filename))) 1397 ;; => nil 1398 1399 (->> (fs/glob (fs/file (:base-dir opts) (:src-dir opts)) "episodes/**") 1400 (map #(-> (str %) 1401 (str/replace (:base-dir opts) "")))) 1402 ;; => ("/public/episodes/ep01-klarna-part1" 1403 ;; "/public/episodes/ep01-klarna-part1/otis-ep01-klarna-part1.otr" 1404 ;; "/public/episodes/ep01-klarna-part1/otis-ep01-klarna-part1.mp3" 1405 ;; "/public/episodes/ep02-klarna-part2" 1406 ;; "/public/episodes/ep02-klarna-part2/otis-ep02-klarna-part2.otr" 1407 ;; "/public/episodes/ep02-klarna-part2/otis-ep02-klarna-part2.mp3" 1408 ;; "/public/episodes/ep00-trailer" 1409 ;; "/public/episodes/ep00-trailer/otis-ep00-trailer.otr" 1410 ;; "/public/episodes/ep00-trailer/otis-ep00-trailer.mp3") 1411 1412 ) 1413</code></pre><p>Now that the files are, well, filed, let's see about rendering the podcast feed.</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 1414 (:require ; ... 1415 [soundcljoud.rss :as rss])) 1416 1417(comment 1418 1419 (let [feed-file (fs/file (:src-dir opts) "feed.rss")] 1420 (println (format "Writing RSS feed %s" feed-file)) 1421 (->> (rss/podcast-feed opts) 1422 (spit feed-file))) 1423 ;; => nil 1424 1425 (slurp "public/feed.rss") 1426 ;; => "<?xml version='1.0' encoding='UTF-8'?>\n 1427 ;; <rss version=\"2.0\"\n 1428 ;; xmlns:itunes=\"http://www.itunes.com/dtds/podcast-1.0.dtd\"\n 1429 ;; xmlns:atom=\"http://www.w3.org/2005/Atom\">\n 1430 ;; <channel>\n 1431 ;; <title>
1431Organising Tech in Sweden</title>\n 1432 ;; <description>Organising Tech in Sweden is a...</description>\n 1433 ;; <itunes:image href=\"https://orgtech.se/img/orgtech-se-cover.jpg\"/>\n 1434 ;; <language>en</language>\n 1435 ;; <itunes:explicit>true</itunes:explicit>\n 1436 ;; <itunes:category text=\"Technology\">\n 1437 ;; </itunes:category>\n 1438 ;; <itunes:category text=\"News\">\n 1439 ;; <itunes:category text=\"Politics\" />\n 1440 ;; </itunes:category>\n 1441 ;; <itunes:author>Organising Tech in Sweden</itunes:author>\n 1442 ;; <link>https://orgtech.se</link>\n 1443 ;; <itunes:title>Organising Tech in Sweden</itunes:title>\n 1444 ;; <itunes:type>Serial</itunes:type>\n 1445 ;; <copyright>All rights reserved, Organising Tech in Sweden</copyright>\n 1446 ;; <item>\n 1447 ;; <title>Trailer</title>\n 1448 ;; <enclosure\n 1449 ;; url=\"https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.mp3\"\n 1450 ;; length=\"1016937\"\n 1451 ;; type=\"audio/mpeg\" />\n 1452 ;; <guid>https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.mp3</guid>\n 1453 ;; <pubDate>Thu, 5 Sep 2024 00:00:00 +0000</pubDate>\n 1454 ;; <description><![CDATA[\n 1455 ;; <p>\n 1456 ;; Union organising seems to be in the air these days... 1457 ;; </p>]]> 1458 ;; </description>\n 1459 ;; <itunes:duration>42</itunes:duration>\n 1460 ;; <link>https://orgtech.se/episodes/ep00-trailer</link>\n 1461 ;; <itunes:title>Trailer</itunes:title>\n 1462 ;; <itunes:episode>0</itunes:episode>\n 1463 ;; <itunes:episodeType>Trailer</itunes:episodeType>\n 1464 ;; <transcriptUrl>https://orgtech.se/episodes/ep00-trailer/otis-ep00-trailer.otr</transcriptUrl>\n 1465 ;; </item>\n 1466 ;; ... 1467 ;; </channel> 1468 ;; </rss> 1469 1470 ) 1471</code></pre><p>OK, now we have everything we need to write our <code>render</code> function, so let's get to it:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn render [default-opts] 1472 (let [base-dir (str (fs/cwd)) 1473 {:keys [episodes src-dir] :as opts} 1474 (merge default-opts 1475 (cli/parse-opts *command-line-args*) 1476 (-> (fs/file base-dir "podcast.edn") 1477 slurp 1478 edn/read-string 1479 (assoc :base-dir base-dir))) 1480 feed-file (fs/file src-dir "feed.rss")] 1481 (doseq [{:keys [path] :as episode} (:episodes opts) 1482 file (map episode [:audio-file :transcript-file]) 1483 :let [filename (format "%s/%s%s/%s" base-dir src-dir path file) 1484 src-filename (fs/file base-dir (fs/file-name path) file)]] 1485 (when-not (fs/exists? filename) 1486 (fs/create-dirs (fs/parent filename)) 1487 (fs/copy src-filename filename))) 1488 (println (format "Writing RSS feed %s" feed-file)) 1489 (->> (rss/podcast-feed opts) 1490 (spit feed-file)))) 1491 1492(comment 1493 1494 (render default-opts) 1495 ;; => nil 1496 1497 ) 1498</code></pre><p>We should now be able to aim our web browser at http://localhost:1341/feed.rss and see a lovely podcast feed.</p><p><img src="assets/2024-09-18-podcast-soundcljoud-feed.png" alt="RSS feed displayed in a web browser" title="Feed me nothing but the good stuff!" width=800px border=1 /></p><p>As lovely as this loveliness is, our eye is inexorably and tragically drawn to one thing which we do not love:</p><pre class="language-xml"><code class="lang-xml language-xml"> <item> 1499 ... 1500 <link>https://orgtech.se/episodes/ep00-trailer</link> 1501 ... 1502 </item> 1503</code></pre><p>This page, dear reader, does not exist!</p><h2 id="selmer_to_the_rescue">Selmer to the rescue</h2><p>Where does this <code><link></code> thingy come from, and why do we need it anyway? Well, if we refer back to <a href='https://help.apple.com/itc/podcasts_connect/#/itcb54353390'>A Podcaster's Guide to 1504RSS</a>, we see:</p><blockquote><p> <code><link></code> </p><p> An episode link URL. This is used when an episode has a corresponding webpage. </p></blockquote><p>Ah, so it's an episode page we need, eh? Well, we have a bunch of info about the episode in our <code>podcast.edn</code> file, and some code that loops over episodes and does stuff in <code>tasks/render</code>, and a deep and abiding love for Selmer, so let's whip up an episode page template, then plug some stuff in whilst we're looping over episodes. We'll start with the template, which we'll drop into a new <code>templates/episode-page.html</code> file:</p><pre class="language-html"><code class="lang-html language-html"><
1504!doctype html> 1505<html class="no-js" lang=""> 1506 1507<head> 1508 <title> 1509 {{podcast.title}} Episode {{episode.number}} - {{episode.title}} 1510 </title> 1511 1512 <meta name="viewport" content="width=device-width, initial-scale=1"> 1513 <meta charset="utf-8"> 1514 <meta http-equiv="x-ua-compatible" content="ie=edge"> 1515 1516 <link rel="stylesheet" href="/css/main.css"> 1517 1518 <!-- Favicon from https://realfavicongenerator.net/ --> 1519 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 1520 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 1521 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 1522 <link rel="manifest" href="/site.webmanifest"> 1523 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 1524 <meta name="msapplication-TileColor" content="#da532c"> 1525 <meta name="theme-color" content="#ffffff"> 1526 1527 <!-- Social sharing (Facebook, Twitter, LinkedIn, etc.) --> 1528 <meta name="title" content="{{podcast.title}} Episode {{episode.number}} - {{episode.title}}"> 1529 <meta name="twitter:title" content="{{podcast.title}} Episode {{episode.number}} - {{episode.title}}"> 1530 <meta property="og:title" content="{{podcast.title}} Episode {{episode.number}} - {{episode.title}}"> 1531 <meta property="og:type" content="website"> 1532 1533 <meta name="description" content="{{episode.summary}}"> 1534 <meta name="twitter:description" content="{{episode.summary}}"> 1535 <meta property="og:description" content="{{episode.summary}}"> 1536 1537 <meta name="twitter:url" content="{{base-url}}{{episode.path}}/index.html"> 1538 <meta property="og:url" content="{{base-url}}{{episode.path}}/index.html"> 1539 1540 <meta name="twitter:image" content="{{base-url}}{{preview-image}}"> 1541 <meta name="twitter:card" content="summary_large_image"> 1542 <meta property="og:image" content="{{base-url}}{{preview-image}}"> 1543 <meta property="og:image:alt" content="{{podcast.image-alt}}"> 1544</head> 1545 1546<body> 1547 <div id="wrapper"> 1548 <div id="left-side"> 1549 <img id="cover-image" src="{{podcast.image}}" alt="{{podcast.image-alt}}" /> 1550 <div id="aggregators-1"> 1551 <div id="apple"> 1552 <a class="apple-button" 1553 href="https://podcasts.apple.com/us/podcast/organising-tech-in-sweden/id1766442275?itsct=podcast_box_badge&amp;itscg=30200&amp;ls=1"> 1554 <img src="https://tools.applemediaservices.com/api/badges/listen-on-apple-podcasts/badge/en-us?size=250x83&amp;releaseDate=1725494400" 1555 title="Listen on Apple Podcasts" alt="Listen on Apple Podcasts" class="apple-button"> 1556 </a> 1557 </div> 1558 <div id="spotify"> 1559 <a href="https://open.spotify.com/show/53psoLoX187axvmgb80l1x"> 1560 <img src="/img/spotify-podcast-badge-blk-grn-330x80.svg" title="Listen on Spotify" 1561 alt="Listen on Spotify"> 1562 </a> 1563 </div> 1564 </div> 1565 <div id="aggregators-2"> 1566 <div id="podbean"> 1567 <a href="https://www.podbean.com/podcast-detail/2r2tz-31b053/Organising-Tech-in-Sweden-Podcast" 1568 rel="noopener noreferrer" target="_blank"> 1569 <img src="https://pbcdn1.podbean.com/fs1/site/images/badges/w600_1.png" 1570 title="Listen on Podbean" alt="Listen on Podbean"> 1571 </a> 1572 </div> 1573 </div> 1574 </div> 1575 <div id="main"> 1576 <nav id="header"> 1577 <h1 id="title">{{episode.title}}</h1> 1578 <div id="socials"> 1579 {% for social in socials %} 1580 <a href="{{social.url}}"> 1581 <img src="{{social.image}}" alt="{{social.image-alt}}" /> 1582 </a> 1583 {% endfor %} 1584 </div> 1585 </nav> 1586 <div id="description">{{episode.description|safe}}</div> 1587 </div> 1588 </div> 1589 <div id="transcript"> 1590 <h1>Transcript</h1> 1591 <div id="transcript-body">{{episode.transcript-html|safe}}</div> 1592 </div> 1593</body> 1594 1595</html> 1596</code></pre><p>We should also sprinkle a little extra CSS into our <code>public/css/main.css</code>:</p><pre class="language-css"><code class="lang-css language-css">/* ... */ 1597 1598#aggregators-1 { 1599 display: flex; 1600 justify-content: space-between; 1601 margin-top: 10px; 1602} 1603 1604#aggregators-1 img { 1605 width: 175px; 1606} 1607 1608#apple a { 1609 display: inline-block; 1610 overflow: hidden; 1611} 1612 1613.apple-button { 1614 border-radius: 13px; 1615} 1616 1617#aggregators-2 { 1618 display: flex; 1619 justify-content: space-between; 1620 margin-top: 10px; 1621} 1622 1623#podbean img { 1624 height: 42px; 1625} 1626 1627/* Some paragraphs in the description shouldn't be displayed on the episode page */ 1628p.soundcljoud-hidden { 1629 display: none; 1630} 1631 1632#transcript {
1633 background-color: #e4f1fe; 1634 border: solid 1px; 1635 padding-left: 1em; 1636 padding-right: 1em; 1637 margin-top: 1em; 1638} 1639 1640#transcript-body > br { 1641 display: none; 1642} 1643 1644span.timestamp { 1645 margin-right: 5px; 1646 color: blue; 1647 cursor: pointer; 1648 &:hover { 1649 text-decoration: underline; 1650 } 1651} 1652 1653@media screen and (min-width: 600px) { 1654 1655 /* ... */ 1656 1657 #aggregators-1 img { 1658 width: 155px; 1659 } 1660 1661 #podbean img { 1662 height: 37px; 1663 } 1664 1665 #podbean img { 1666 margin-top: 0px; 1667 } 1668 1669} 1670</code></pre><p>We'll need the following template vars:</p><ul><li>base-url</li><li>episode.description</li><li>episode.number</li><li>episode.path</li><li>episode.summary</li><li>episode.title</li><li>episode.transcript-html</li><li>podcast.image</li><li>podcast.image-alt</li><li>podcast.title</li><li>preview-image</li><li>socials<ul><li>social.url</li><li>social.image</li><li>social.image-alt</li></ul></li></ul><p>Most of this we already have, but there are a couple new things. Let's take the easiest two first.</p><ul><li>podcast.image-alt</li><li>preview-image</li></ul><p>We'll add some alt text for our podcast cover image and a social preview image to <code>podcast.edn</code>. The alt text is just a description of the cover image, and it turns out that the preview image is one of the many things we hardcoded into our <code>public/index.html</code> way back when.</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{ ; ... 1671 :preview-image "/img/orgtech-se-preview.jpg" 1672 ;; ... 1673 :podcast { ; ... 1674 :image-alt "
1674Organising Tech in Sweden superimposed on raised fists with a Swedish flag with a circuit board pattern in the background" 1675 ;; ... 1676 } 1677 ;; ... 1678 } 1679</code></pre><p>Let's turn next to <code>socials</code>. This is how we refer to it in the template:</p><pre class="language-html"><code class="lang-html language-html"> {% for social in socials %} 1680 <a href="{{social.url}}"> 1681 <img src="{{social.image}}" alt="{{social.image-alt}}" /> 1682 </a> 1683 {% endfor %} 1684</code></pre><p>This means that it needs to be a list, and each list item should be a map containing three keys:</p><ul><li>social.url</li><li>social.image</li><li>social.image-alt</li></ul><p>Let's add the following to our <code>podcast.edn</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">{ ; ... 1685 :preview-image "/img/orgtech-se-preview.jpg" 1686 ;; ... 1687 :socials [{:name "Twitter" 1688 :url "https://x.com/orgtech_se" 1689 :image "/img/twitter-color-svgrepo-com.svg" 1690 :image-alt "Twitter logo"} 1691 {:name "BlueSky" 1692 :url "https://bsky.app/profile/orgtech-se.bsky.social" 1693 :image "/img/bluesky-logo.svg" 1694 :image-alt "BlueSky logo"}] 1695 ;; ... 1696 } 1697</code></pre><p>Finally, we need to conjure up one last key for each episode:</p><ul><li>episode.transcript-html</li></ul><p>Episodes already have a <code>:transcript-file</code> key, which refers to an OTR file. Let's have a quick look at one of those and see what is contained therein:</p><pre class="language-json"><code class="lang-json language-json">{ 1698 "text": "<p>[Theme music begins]</p><p><span class=\"timestamp\" data-timestamp=\"12.111684\">00:12</span><b>Josh</b>: ... </p>", 1699 "media": "otis-ep01-klarna-part1.mp3", 1700 "media-time": 1315.629803 1701} 1702</code></pre><p>What we have here is a JSON file with a thin veneer of metadata around a looooong HTML string. Let's deal with this back in <code>podcast.rss/update-episode</code>:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(defn update-episode [{:keys [base-dir src-dir] :as opts} 1703 ;; ððððððð 1704 {:keys [audio-file transcript-file path] :as episode}] 1705 ;; ððððððð 1706 (let [filename (format "%s/%s%s/%s" base-dir src-dir path audio-file) 1707 ;; ðððððððððððððððððððððððððððððððð 1708 transcript (format "%s/%s%s/%s" base-dir src-dir path transcript-file)] 1709 ;; ðððððððððððððððððððððððððððððððð 1710 (assoc episode 1711 :audio-filesize (fs/size filename) 1712 :duration (audio/mp3-duration filename) 1713 :description (selmer/render (:description episode) 1714 (assoc opts :episode episode)) 1715 ;; ððððððððððððððððððððð 1716 :transcript-html (-> (slurp transcript) 1717 (json/parse-string keyword) 1718 :text)))) 1719</code></pre><p>Having satisfied ourselves that we have all of the data we need for our template, let's get to rendering. In our <code>tasks/render</code> function, we're looping over episodes in order to copy the MP3 and OTR files into the right place. Sadly, we can't just pop <code>selmer/render</code> into that <code>doseq</code> and be done with it, because we need to ensure the audio file is in the right place before we can use <code>update-episode</code>. No problem, we'll just add a new bit after spitting our podcast feed:</p><pre class="language-clojure"><code class="lang-clojure language-clojure">(ns tasks 1720 (:require ; ... 1721 [selmer.parser :as selmer])) 1722 1723(defn render [default-opts] 1724 (let [...] 1725 ;; ... 1726 (println (format "Writing RSS feed %s" feed-file)) 1727 (->> (rss/podcast-feed opts) 1728 (spit feed-file)) 1729 (let [template (slurp "templates/episode-page.html") 1730 opts (rss/update-episodes opts)] 1731 (doseq [{:keys [path] :as episode} (:episodes opts) 1732 :let [filename (format "%s/%s%s/%s" 1733 base-dir out-dir path "index.html")]] 1734 (println "Writing episode page" filename) 1735 (->> (selmer/render template (assoc opts :episode episode)) 1736 (spit filename)))))) 1737</code></pre><p>And now, the moment of truth!</p><pre class="language-text"><code class="lang-text language-text">: orgtech-se; bb render 1738Writing RSS feed public/feed.rss 1739Writing episode page ~/code/orgtech-se/public/episodes/ep00-trailer/index.html 1740Writing episode page ~/code/orgtech-se/public/episodes/ep01-klarna-part1/index.html 1741Writing episode page ~/code/orgtech-se/public/episodes/ep02-klarna-part2/index.html 1742</code></pre><p>And now if we visit (for example) http://localhost:1341/episodes/ep01-klarna-part1, we should see an amazing webpage:</p><p><img src="assets/2024-09-18-podcast-soundcljoud-episode.png" alt="Episode page displayed in a web browser" title="I feel good, but also empty" width=800px border=1 /></p><h2 id="podcast_half_empty%2C_or_podcast_half_full%3F">Podcast half empty, or podcast half full?</h2><p>Astute observers may have noticed one issue with the episode page: there's no way to play the episode. ð¤¦ð¼</p><p>Fear not! In the next instalment, we'll look at playing a podcast with ClojureScript, perhaps even using our own friend <a href='tags/soundcljoud.html'>Soundcljoud</a>!</p> 1743 1744 <div class="post-footer"> 1745 <div class="post-details"> 1746 1747 <div> 1748 ð· 1749
1750 <span class="tag"> 1751 <a href="tags/clojure.html">clojure</a> 1752 </span> 1753 1754 <span class="tag"> 1755 <a href="tags/soundcljoud.html">soundcljoud</a> 1756 </span> 1757 1758 <span class="tag"> 1759 <a href="tags/babashka.html">babashka</a> 1760 </span> 1761 1762 <span class="tag"> 1763 <a href="tags/scittle.html">scittle</a> 1764 </span> 1765 1766 <span class="tag"> 1767 <a href="tags/clonejure.html">clonejure</a> 1768 </span> 1769 1770 <span class="tag"> 1771 <a href="tags/clojurescript.html">clojurescript</a> 1772 </span> 1773 1774 </div> 1775 1776 1777 <div>ð£ Discuss this post <a href="https://clojurians.slack.com/archives/C8NUSGWG6/p1726658139071349">here</a></div> 1778 1779 <div>ð Published: 2024-09-18</div> 1780 </div> 1781 1782 <div class="post-prev-next"> 1783 <div> 1784 ð Read more: 1785 <a href="2024-08-13-soundcljoud-rangey.html">Soundcljoud gets more rangey</a> 1786 </div> 1787 </div> 1788 1789 </div> 1790 </div> 1791 1792 1793 1794 1795 <div id="archive-footer"> 1796 ðï¸ <a class="page-link" href="archive.html">Archive</a> 1797 </div> 1798 1799 </div> 1800 </body> 1801</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.