chore(tt): debug trpc

apps/total-typescript/package.json

@@ -75,7 +75,6 @@
     "@sanity/webhook": "^4.0.0",
     "@sentry/nextjs": "^7.83.0",
     "@sentry/profiling-node": "^1.2.6",
-    "@sentry/tracing": "^7.9.0",
     "@skillrecordings/ability": "workspace:*",
     "@skillrecordings/analytics": "workspace:*",
     "@skillrecordings/commerce-server": "workspace:*",

apps/total-typescript/src/app/_components/video-player.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import MuxPlayer, {type MuxPlayerProps} from '@mux/mux-player-react'
+import {type MuxPlayerProps} from '@mux/mux-player-react'
+import MuxPlayer from '@mux/mux-player-react/lazy'
 import {use} from 'react'
 import {cn} from '@skillrecordings/ui/utils/cn'
 

apps/total-typescript/src/app/book/[chapter]/layout.tsx

@@ -28,10 +28,15 @@ const ChapterLayout: React.FC<React.PropsWithChildren<Props>> = async ({
   }
 
   return (
-    <div className="mx-auto grid w-full max-w-screen-2xl grid-cols-12 gap-16 px-5 py-20 sm:px-10 xl:px-20">
+    <div className="mx-auto flex w-full max-w-screen-2xl grid-cols-12 flex-col gap-16 px-5 pt-8 sm:px-10 md:grid md:pt-0 xl:px-20">
       <aside className="relative col-span-4">
-        <div className="sticky top-20 flex flex-col gap-5 text-lg">
-          <div>Chapter {currentChapterIndex}:</div>
+        <div className="sticky top-16 flex flex-col gap-5 text-lg">
+          <div>
+            <Link href="/book" className="underline">
+              Book
+            </Link>{' '}
+            <span>/</span> Chapter {currentChapterIndex}:
+          </div>
           <h1 className="text-balance text-4xl font-bold !leading-tight">
             {chapter.title}
           </h1>

apps/total-typescript/src/app/book/[chapter]/page.tsx

@@ -7,12 +7,36 @@ import {getServerAuthSession} from '@/server/auth'
 import MDX from '@skillrecordings/skill-lesson/markdown/mdx'
 import {notFound} from 'next/navigation'
 import {StackblitzIframe} from '@/app/_components/stackblitz-iframe'
+import {type Metadata, type ResolvingMetadata} from 'next'
+import {getOgImage} from '@/utils/get-og-image'
 
 type Props = {
   params: {chapter: string}
   searchParams: {[key: string]: string | string[] | undefined}
 }
 
+export async function generateMetadata(
+  {params, searchParams}: Props,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const chapter = await getChapter(params.chapter)
+
+  if (!chapter) {
+    return parent as Metadata
+  }
+
+  return {
+    title: chapter.title,
+    openGraph: {
+      images: [
+        getOgImage({
+          title: chapter.title,
+        }),
+      ],
+    },
+  }
+}
+
 const ChapterRoute: React.FC<Props> = async ({params, searchParams}) => {
   const chapter = await getChapter(params.chapter)
   const session = await getServerAuthSession()
@@ -26,7 +50,11 @@ const ChapterRoute: React.FC<Props> = async ({params, searchParams}) => {
     <div className="flex flex-col divide-y divide-dashed divide-gray-200">
       {chapter.resources.map(({title, mdx, slug, video, solution, code}) => {
         return (
-          <section className="py-20" key={slug.current} id={slug.current}>
+          <section
+            className="py-8 sm:py-20"
+            key={slug.current}
+            id={slug.current}
+          >
             <div className="prose prose-light max-w-none sm:prose-lg lg:prose-xl prose-p:font-normal">
               <h2>{title}</h2>
               {video && (

apps/total-typescript/src/app/layout.tsx

@@ -23,13 +23,13 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
           id="layout"
           className={`relative font-sans ${larsseit.variable} ${magnatHead.variable} ${magnatText.variable}`}
         >
-          {/* <TRPCReactProvider headers={headers()}> */}
           {/* <Party /> */}
-          {/* <Navigation /> */}
-          <main className="flex h-full min-h-screen flex-grow flex-col">
-            {children}
-          </main>
-          {/* </TRPCReactProvider> */}
+          <TRPCReactProvider headers={headers()}>
+            {/* <Navigation /> */}
+            <main className="flex h-full min-h-screen flex-grow flex-col">
+              {children}
+            </main>
+          </TRPCReactProvider>
         </body>
       </html>
     </Providers>