lovely. got a couple of partial implementations....

src/features/overview/list-item.tsx

@@ -1,8 +1,11 @@
 import type { Entry } from "../content";
-import { Component } from "solid-js";
+import { createSlug } from "../content";
+import { Component, createMemo } from "solid-js";
 import css from "./list-item.module.css";
 
 export const ListItem: Component<{ entry: Entry }> = (props) => {
+  const slug = createMemo(() => createSlug(props.entry));
+
   return (
     <div class={css.listItem}>
       <img src={props.entry.thumbnail} />
@@ -10,7 +13,7 @@ export const ListItem: Component<{ entry: Entry }> = (props) => {
       <main>
         <strong>{props.entry.title}</strong>
 
-        <a href={`/watch/${props.entry.id}`}>Watch now</a>
+        <a href={`/watch/${slug()}`}>Watch now</a>
       </main>
     </div>
   );

src/features/overview/overview.tsx

@@ -19,16 +19,6 @@ type OverviewProps = {
 export const Overview: Component<OverviewProps> = (props) => {
   const [container, setContainer] = createSignal<HTMLElement>();
 
-  onMount(() => {
-    new MutationObserver(() => {
-      container()
-        ?.querySelector<HTMLElement>(
-          `.${css.list} > ul > div:nth-child(4) > main > a`,
-        )
-        ?.focus({ preventScroll: true });
-    }).observe(document.body, { subtree: true, childList: true });
-  });
-
   return (
     <div ref={setContainer} class={css.container}>
       <Hero class={css.hero} entry={props.highlight}></Hero>