mirror of
https://github.com/supabase/supabase.git
synced 2026-07-07 04:34:20 +08:00
b91532f6c7
* migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { MDXProvider } from '@mdx-js/react'
|
|
import Head from 'next/head'
|
|
import { FC, useEffect, useState } from 'react'
|
|
import components from '~/components'
|
|
import SideBar from '~/components/Navigation/SideBar'
|
|
import TableOfContents from '~/components/TableOfContents'
|
|
|
|
interface Props {
|
|
meta: {
|
|
title: string
|
|
description?: string
|
|
hide_table_of_contents?: boolean
|
|
video?: string
|
|
tocVideo?: string
|
|
}
|
|
children: any
|
|
toc?: any
|
|
menuItems: any
|
|
currentPage: string
|
|
}
|
|
|
|
const Layout: FC<Props> = (props: Props) => {
|
|
const [active, setActive] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setTimeout(function () {
|
|
setActive(true)
|
|
}, 150)
|
|
}, [])
|
|
|
|
// const contentString = renderToString(props.children)
|
|
|
|
// const content = serialize(contentString || '')
|
|
|
|
// console.log('contentString', contentString)
|
|
|
|
// const _toc = toc('#hello world', { maxdepth: 1, firsth1: false })
|
|
|
|
const hasTableOfContents =
|
|
props.toc !== undefined &&
|
|
props.toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{props.meta?.title} | Supabase</title>
|
|
<meta name="description" content={props.meta?.description} />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" href="/docs/favicon.ico" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content={props.meta?.title} />
|
|
<meta property="og:description" content={props.meta?.description} />
|
|
<meta property="og:title" content={props.meta?.title} />
|
|
</Head>
|
|
|
|
<div
|
|
className={[
|
|
'relative transition-all ease-out',
|
|
'duration-150',
|
|
active ? 'opacity-100 left-0' : 'opacity-0 left-10',
|
|
].join(' ')}
|
|
>
|
|
<div>
|
|
<p className="text-brand tracking-wider">Tutorials</p>
|
|
<article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
|
|
<h1>{props.meta.title}</h1>
|
|
<div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-16"></div>
|
|
|
|
<MDXProvider components={components} children={props.children} />
|
|
</article>
|
|
</div>
|
|
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
|
|
<div
|
|
className={[
|
|
'border-overlay 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>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Layout
|