✨ Revolutionize the podcast

This makes the podcast available as a via the revolution site.

set the SIMPLECAST_API_KEY environment variable in order to use the
podcast episodes with the following operation:

```ts
yield* usePodcastEpisodes();
````
If the API key is not set, then you will see

```
simplecast: disabled
```

logged to the console.

Author: cowboyd

main.tsx

@@ -19,11 +19,15 @@ import { blogPostRoute } from "./routes/blog-post-route.tsx";
 import { blogIndexRoute } from "./routes/blog-index-route.tsx";
 import { blogTagRoute } from "./routes/blog-tag-route.tsx";
 import { initBlog } from "./blog/blog.ts";
+import { podcastIndexRoute } from "./routes/podcast-index-route.tsx";
+import { initSimpleCast } from "./podcast/podcast.ts";
+import { podcastRoute } from "./routes/podcast-route.tsx";
 
 await main(function* () {
   let proxies = proxySites();
 
   yield* initBlog();
+  yield* initSimpleCast(Deno.env.get("SIMPLECAST_API_KEY"));
 
   let revolution = createRevolution({
     app: [
@@ -32,6 +36,8 @@ await main(function* () {
       route("/blog/:id", blogPostRoute()),
       route("/blog/tags/:tag", blogTagRoute()),
       route("/blog(.*)", assetsRoute("blog")),
+      route("/podcast", podcastIndexRoute()),
+      route("/podcast/:id", podcastRoute()),
       route("/backstage", backstageServicesRoute()),
       route("/dx-consulting", dxConsultingServicesRoute()),
       route("/work/case-studies/resideo", resideoBackstageCaseStudyRoute()),

podcast/podcast.ts

@@ -0,0 +1,104 @@
+import {
+  call,
+  createContext,
+  Operation,
+  useAbortSignal,
+} from "effection";
+
+const PodcastContext = createContext<Episode[]>(
+  "podcast",
+);
+
+export interface SimplecastClient {
+  getEpisodes(name: string): Operation<Episode[]>;
+}
+
+export interface Podcast {
+  readonly title: string;
+  readonly id: string;
+}
+
+export interface Episode {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly image_url: string;
+  readonly href: string;
+  readonly duration: number;
+  readonly linkname: string;
+}
+export function* initSimpleCast(apiKey?: string) {
+  if (!apiKey) {
+    console.log(`simplecast: disabled`);
+    yield* PodcastContext.set([]);
+  } else {
+    let client = new HTTPClient({ apiKey });
+    let episodes = yield* client.getEpisodes("The Frontside Podcast");
+    console.log(`simplecast: loaded ${episodes.length} episodes`);
+    yield* PodcastContext.set(episodes);
+  }
+}
+
+export function* usePodcastEpisodes(): Operation<Episode[]> {
+  return yield* PodcastContext;
+}
+
+interface HTTPCLientOptions {
+  apiKey: string;
+}
+
+class HTTPClient implements SimplecastClient {
+  constructor(public readonly options: HTTPCLientOptions) {}
+
+  *getEpisodes(title: string): Operation<Episode[]> {
+    let podcasts = yield* this.getPodcasts();
+    let podcast = podcasts.find((p) => p.title === title);
+    if (!podcast) {
+      throw new Error(
+        `unable to find podcast: ${title} in [${
+          podcasts.map((p) => p.title).join(", ")
+        }]`,
+      );
+    }
+    let response = yield* this.request(`/podcasts/${podcast.id}/episodes`, {
+      limit: "200",
+    });
+    let json = yield* call(() => response.json());
+    return json.collection.map((episode: Episode) => ({
+      ...episode,
+      linkname: episode.title.toLowerCase().replaceAll(/\s/g, "-"),
+    }));
+  }
+
+  *getPodcasts(): Operation<Podcast[]> {
+    let response = yield* this.request("/podcasts");
+    let json = yield* call(() => response.json());
+    return json.collection;
+  }
+
+  private *request(
+    pathname: string,
+    params: Record<string, string> = {},
+  ): Operation<Response> {
+    let url = new URL(`https://api.simplecast.com`);
+    url.pathname = pathname;
+    url.search = new URLSearchParams(params).toString();
+    let signal = yield* useAbortSignal();
+    let response = yield* call(() =>
+      fetch(url, {
+        signal,
+        headers: {
+          "Authorization": `Bearer ${this.options.apiKey}`,
+        },
+      })
+    );
+    if (!response.ok) {
+      throw new Error(`${response.status}: ${response.statusText}`, {
+        cause: pathname,
+      });
+    } else {
+      return response;
+    }
+  }
+}
+

routes/podcast-index-route.tsx

@@ -0,0 +1,17 @@
+import { type JSXHandler } from "revolution/jsx-runtime";
+import { usePodcastEpisodes } from "../podcast/podcast.ts";
+
+export function podcastIndexRoute(): JSXHandler {
+  return function* () {
+    let episodes = yield* usePodcastEpisodes();
+    return (
+      <html>
+        <body>
+          <ol>
+            {episodes.map((episode) => <li><a href={`podcast/${episode.linkname}`}>{episode.title}</a></li>)}
+          </ol>
+        </body>
+      </html>
+    );
+  };
+}

routes/podcast-route.tsx

@@ -0,0 +1,28 @@
+import { type JSXHandler } from "revolution/jsx-runtime";
+import { usePodcastEpisodes } from "../podcast/podcast.ts";
+import { respondNotFound, useParams } from "revolution";
+
+export function podcastRoute(): JSXHandler {
+  return function* () {
+    let { id } = yield* useParams<{ id: string }>();
+    let episodes = yield* usePodcastEpisodes();
+
+    let episode = episodes.find((episode) => episode.linkname === id);
+    if (!episode) {
+      return yield* respondNotFound();
+    }
+
+    return (
+      <html>
+        <body>
+          <h1>{episode.title}</h1>
+          <ul>
+            <li><strong>description</strong>: {episode.description}</li>
+            <li><strong>image_url</strong>: {episode.image_url}</li>
+            <li><strong>duration</strong>: {episode.duration}</li>
+          </ul>
+        </body>
+      </html>
+    );
+  };
+}