DocPage() — supabase Function Reference

Source Code

apps/learn/app/(app)/[...slug]/page.tsx lines 70–158

export default async function DocPage(props: DocPageProps) {
  const params = await props.params
  const doc = await getDocFromParams({ params })

  if (!doc) {
    notFound()
  }

  const toc = await getTableOfContents(doc.body.raw)
  const nextPage = getNextPage(doc.slugAsParams)
  const currentChapter = getCurrentChapter(doc.slugAsParams)
  const slugSegments = doc.slugAsParams.split('/')
  const isIntroductionPage = slugSegments[slugSegments.length - 1] === 'introduction'

  const exploreItems = (
    doc as {
      explore?: Array<{ title: string; link: string; itemType?: string; description?: string }>
    }
  ).explore

  return (
    <div className={cn('relative')}>
      {isIntroductionPage && doc.courseHero && (
        <CourseHero
          title={doc.courseHero.title}
          subtitle={doc.courseHero.subtitle}
          description={doc.courseHero.description}
          //instructors={doc.courseHero.instructors}
        />
      )}

      <div
        className={cn(
          'relative lg:gap-10 xl:grid xl:grid-cols-[1fr_200px]  py-20',
          isIntroductionPage ? 'px-0' : 'px-8 md:px-16'
        )}
      >
        <div className="mx-auto w-full min-w-0 max-w-4xl">
          <div className="mb-4 flex items-center space-x-1 text-sm text-foreground-muted">
            <div className="overflow-hidden text-ellipsis whitespace-nowrap">Learn</div>
            <ChevronRight className="h-4 w-4 text-foreground-muted" />
            <div className="text-foreground-lighter">{doc.title}</div>
          </div>
          <div className="flex flex-col lg:flex-row lg:items-end justify-between mb-5">
            <div className="space-y-2">
              <h1 className={cn('scroll-m-20 text-2xl lg:text-4xl tracking-tight')}>{doc.title}</h1>
              {doc.description && (
                <p className="text-base lg:text-lg text-foreground-light">
                  <Balancer>{doc.description}</Balancer>
                </p>
              )}
            </div>
          </div>
          <div className="pb-12">
            <Mdx code={doc.body.code} />
          </div>
          {exploreItems && exploreItems.length > 0 && <ExploreMore items={exploreItems} />}
          {currentChapter && nextPage && (
            <ChapterCompletion
              chapterNumber={currentChapter.chapterNumber!}
              completionMessage={currentChapter.completionMessage}
            />
          )}
          {nextPage && (
            <div className="flex w-2xl grow">
              <NextUp
                title={nextPage.title}
                description={nextPage.description || ''}
                href={nextPage.href}
                chapterNumber={nextPage.chapterNumber}
              />
            </div>
          )}
        </div>
        {doc.toc && (
          <div className="hidden text-sm xl:block">
            <div className="sticky top-16 -mt-10 pt-4">
              <ScrollArea className="pb-10">
                <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
                  <DashboardTableOfContents toc={toc} />
                </div>
              </ScrollArea>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}