mirror of
https://github.com/supabase/supabase.git
synced 2026-07-06 07:54:25 +08:00
7cf2eae953
Before: All pages have the Home nav menu in static HTML, which is blown away and replaced by the proper nav menu upon hydration. This leads to jankiness when the page first loads and an unpleasant flash of the wrong nav menu (especially obvious on the JavaScript ref page, which takes a long time to process and rerender the nav). Now: All pages have their correct nav menu in static HTML.
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import { MDXProvider } from '@mdx-js/react'
|
|
import { NextSeo } from 'next-seo'
|
|
import Head from 'next/head'
|
|
import { useRouter } from 'next/router'
|
|
import { FC } from 'react'
|
|
import components from '~/components'
|
|
import HomePageCover from '~/components/HomePageCover'
|
|
import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
|
|
import TableOfContents from '~/components/TableOfContents'
|
|
import { LayoutMainContent } from './DefaultLayout'
|
|
import { MainSkeleton } from './MainSkeleton'
|
|
|
|
interface Props {
|
|
meta: {
|
|
title: string
|
|
description?: string
|
|
hide_table_of_contents?: boolean
|
|
video?: string
|
|
canonical?: string
|
|
}
|
|
children: any
|
|
toc?: any
|
|
menuItems: any
|
|
}
|
|
|
|
const HomeLayout: FC<Props> = (props: Props) => {
|
|
const { asPath } = useRouter()
|
|
|
|
const hasTableOfContents =
|
|
props.toc !== undefined &&
|
|
props.toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{asPath === '/' ? 'Supabase Docs' : `${props.meta?.title} | Supabase Docs`}</title>
|
|
<meta name="description" content={props.meta?.description} />
|
|
<meta property="og:image" content={`https://supabase.com/docs/img/supabase-og-image.png`} />
|
|
<meta
|
|
name="twitter:image"
|
|
content={`https://supabase.com/docs/img/supabase-og-image.png`}
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
</Head>
|
|
<NextSeo
|
|
canonical={props.meta?.canonical ?? `https://supabase.com/docs${asPath}`}
|
|
openGraph={{
|
|
url: `https://supabase.com/docs${asPath}`,
|
|
type: 'article',
|
|
videos: props.meta?.video && [
|
|
{
|
|
// youtube based video meta
|
|
url: props.meta?.video,
|
|
width: 640,
|
|
height: 385,
|
|
type: 'application/x-shockwave-flash',
|
|
},
|
|
],
|
|
article: {
|
|
publishedTime: new Date().toISOString(),
|
|
modifiedTime: new Date().toISOString(),
|
|
authors: ['Supabase'],
|
|
},
|
|
}}
|
|
/>
|
|
<MainSkeleton menuId={MenuId.Home}>
|
|
<article>
|
|
<HomePageCover meta={props.meta} />
|
|
<LayoutMainContent>
|
|
<div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
|
|
<div className="prose max-w-none">
|
|
<MDXProvider components={components}>{props.children}</MDXProvider>
|
|
</div>
|
|
</div>
|
|
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
|
|
<div
|
|
className={[
|
|
'border-default bg-background table-of-contents-height border-l',
|
|
'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
|
|
].join(' ')}
|
|
>
|
|
<TableOfContents toc={props.toc} video={props.meta.video} />
|
|
</div>
|
|
)}
|
|
</LayoutMainContent>
|
|
</article>
|
|
</MainSkeleton>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default HomeLayout
|