diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx new file mode 100644 index 00000000000..4898f6433b1 --- /dev/null +++ b/apps/docs/components/reference/RefSectionHandler.tsx @@ -0,0 +1,67 @@ +import { MDXRemote } from 'next-mdx-remote' +import { useRouter } from 'next/router' +import { useEffect } from 'react' + +import components from '~/components' +import RefEducationSection from '~/components/reference/RefEducationSection' +import RefFunctionSection from '~/components/reference/RefFunctionSection' +import OldLayout from '~/layouts/Default' + +interface Props { + sections: any[] // to do + spec: any // to do + typeSpec: any // to do + pageProps: any // to do, from staticProps +} + +const RefSectionHandler = (props) => { + const router = useRouter() + + const slug = router.query.slug[0] + + const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true' + + // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up + // find the #sign-up element and scroll to that + useEffect(() => { + if (isNewDocs && document && slug !== 'start') { + document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView() + } + }) + + /* + * handle old ref pages + */ + if (!isNewDocs) { + return ( + // @ts-ignore + + + + ) + } + + return props.sections.map((x) => { + switch (x.isFunc) { + case false: + const markdownData = props.pageProps.docs.find((doc) => doc.id === x.id) + console.log(markdownData) + + return + break + + default: + return ( + + ) + break + } + }) +} + +export default RefSectionHandler diff --git a/apps/docs/docs/reference/javascript/installing.mdx b/apps/docs/docs/reference/javascript/installing.mdx index b5be32e09a4..b948b44d38e 100644 --- a/apps/docs/docs/reference/javascript/installing.mdx +++ b/apps/docs/docs/reference/javascript/installing.mdx @@ -5,9 +5,6 @@ slug: installing custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supabase.yml --- -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' - ## JavaScript = (props) => { id={props.slug} data-ref-id={props.id} className={[ - 'text-x2l font-medium text-scale-1200 mb-8 scroll-mt-24', + 'text-2xl font-medium text-scale-1200 mb-8 scroll-mt-24', props.monoFont && 'font-mono', ].join(' ')} > diff --git a/apps/docs/lib/mdx/generateOldRefMarkdown.tsx b/apps/docs/lib/mdx/generateOldRefMarkdown.tsx index 20a806ec32b..58eca052915 100644 --- a/apps/docs/lib/mdx/generateOldRefMarkdown.tsx +++ b/apps/docs/lib/mdx/generateOldRefMarkdown.tsx @@ -7,9 +7,6 @@ import toc from 'markdown-toc' import { getDocsBySlug } from '~/lib/docs' -// @ts-ignore -// @ts-ignore - async function generateOldRefMarkdown(slug) { let doc = getDocsBySlug(slug) const content = await serialize(doc.content ?? '', { diff --git a/apps/docs/lib/mdx/handleRefStaticPaths.tsx b/apps/docs/lib/mdx/handleRefStaticPaths.tsx new file mode 100644 index 00000000000..c1f13e4a8c4 --- /dev/null +++ b/apps/docs/lib/mdx/handleRefStaticPaths.tsx @@ -0,0 +1,18 @@ +import { getAllDocs } from '../docs' + +async function handleRefGetStaticPaths() { + let docs = getAllDocs() + + return { + paths: docs.map(() => { + return { + params: { + slug: docs.map((d) => d.slug), + }, + } + }), + fallback: 'blocking', + } +} + +export default handleRefGetStaticPaths diff --git a/apps/docs/lib/mdx/handleRefStaticProps.tsx b/apps/docs/lib/mdx/handleRefStaticProps.tsx new file mode 100644 index 00000000000..8bf2d89c4f1 --- /dev/null +++ b/apps/docs/lib/mdx/handleRefStaticProps.tsx @@ -0,0 +1,36 @@ +import generateOldRefMarkdown from '~/lib/mdx/generateOldRefMarkdown' +import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown' + +async function handleRefStaticProps(sections, params, librarypath, urlPath) { + let markdownContent = await generateRefMarkdown(sections, librarypath) + + console.log(markdownContent) + + /* + * old content generation + * this is for grabbing to old markdown files + */ + + let slug + if (params.slug.length > 1) { + slug = `docs/reference${urlPath}/${params.slug.join('/')}` + } else { + slug = `docs/reference${urlPath}/${params.slug[0]}` + } + + /* + * handle old ref pages + */ + if (process.env.NEXT_PUBLIC_NEW_DOCS === 'false') { + const oldMarkdown = await generateOldRefMarkdown(slug) + return oldMarkdown + } else { + return { + props: { + docs: markdownContent, + }, + } + } +} + +export default handleRefStaticProps diff --git a/apps/docs/pages/reference/dart/[...slug].tsx b/apps/docs/pages/reference/dart/[...slug].tsx index 1dc62468490..2b12d53331c 100644 --- a/apps/docs/pages/reference/dart/[...slug].tsx +++ b/apps/docs/pages/reference/dart/[...slug].tsx @@ -1,121 +1,21 @@ -import { MDXRemote } from 'next-mdx-remote' -import { useRouter } from 'next/router' -import { useEffect } from 'react' import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json' // @ts-expect-error import spec from '~/../../spec/supabase_dart_v1_temp_new_shape.yml' assert { type: 'yml' } -import components from '~/components' -import RefEducationSection from '~/components/reference/RefEducationSection' -import RefFunctionSection from '~/components/reference/RefFunctionSection' -import OldLayout from '~/layouts/Default' -import { getAllDocs } from '~/lib/docs' +import RefSectionHandler from '~/components/reference/RefSectionHandler' import { flattenSections } from '~/lib/helpers' -import generateOldRefMarkdown from '~/lib/mdx/generateOldRefMarkdown' -import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown' +import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths' +import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps' const sections = flattenSections(clientLibsCommonSections) export default function JSReference(props) { - // console.log('docs', props.docs) - const router = useRouter() - - const slug = router.query.slug[0] - - const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true' - - // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up - // find the #sign-up element and scroll to that - useEffect(() => { - if (isNewDocs && document && slug !== 'start') { - document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView() - } - }) - - /* - * handle old ref pages - */ - if (!isNewDocs) { - return ( - // @ts-ignore - - - - ) - } - - return ( - <> - {sections.map((x) => { - switch (x.isFunc) { - case false: - const markdownData = props.docs.find((doc) => doc.id === x.id) - console.log(markdownData) - - return - break - - default: - return ( - - ) - break - } - })} - - ) + return } export async function getStaticProps({ params }: { params: { slug: string[] } }) { - let markdownContent = await generateRefMarkdown(sections, '/dart') - - console.log(markdownContent) - - /* - * old content generation - * this is for grabbing to old markdown files - */ - - let slug - if (params.slug.length > 1) { - slug = `docs/reference/dart/${params.slug.join('/')}` - } else { - slug = `docs/reference/dart/${params.slug[0]}` - } - - /* - * handle old ref pages - */ - if (process.env.NEXT_PUBLIC_NEW_DOCS === 'false') { - return await generateOldRefMarkdown(slug) - } else { - return { - props: { - docs: markdownContent, - }, - } - } + return handleRefStaticProps(sections, params, '/dart', '/dart') } export function getStaticPaths() { - let docs = getAllDocs() - - return { - paths: docs.map(() => { - return { - params: { - slug: docs.map((d) => d.slug), - }, - } - }), - fallback: 'blocking', - } -} - -export const config = { - unstable_includeFiles: ['node_modules/**/shiki/**/*.json'], + return handleRefGetStaticPaths() } diff --git a/apps/docs/pages/reference/dart/v0/[...slug].tsx b/apps/docs/pages/reference/dart/v0/[...slug].tsx index 8ed4a31b0a5..d9dc776d0d2 100644 --- a/apps/docs/pages/reference/dart/v0/[...slug].tsx +++ b/apps/docs/pages/reference/dart/v0/[...slug].tsx @@ -1,121 +1,21 @@ -import { MDXRemote } from 'next-mdx-remote' -import { useRouter } from 'next/router' -import { useEffect } from 'react' import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json' // @ts-expect-error import spec from '~/../../spec/supabase_dart_v0_temp_new_shape.yml' assert { type: 'yml' } -import components from '~/components' -import RefEducationSection from '~/components/reference/RefEducationSection' -import RefFunctionSection from '~/components/reference/RefFunctionSection' -import OldLayout from '~/layouts/Default' -import { getAllDocs } from '~/lib/docs' +import RefSectionHandler from '~/components/reference/RefSectionHandler' import { flattenSections } from '~/lib/helpers' -import generateOldRefMarkdown from '~/lib/mdx/generateOldRefMarkdown' -import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown' +import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths' +import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps' const sections = flattenSections(clientLibsCommonSections) export default function JSReference(props) { - // console.log('docs', props.docs) - const router = useRouter() - - const slug = router.query.slug[0] - - const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true' - - // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up - // find the #sign-up element and scroll to that - useEffect(() => { - if (isNewDocs && document && slug !== 'start') { - document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView() - } - }) - - /* - * handle old ref pages - */ - if (!isNewDocs) { - return ( - // @ts-ignore - - - - ) - } - - return ( - <> - {sections.map((x) => { - switch (x.isFunc) { - case false: - const markdownData = props.docs.find((doc) => doc.id === x.id) - console.log(markdownData) - - return - break - - default: - return ( - - ) - break - } - })} - - ) + return } export async function getStaticProps({ params }: { params: { slug: string[] } }) { - let markdownContent = await generateRefMarkdown(sections, '/dart/v0') - - console.log(markdownContent) - - /* - * old content generation - * this is for grabbing to old markdown files - */ - - let slug - if (params.slug.length > 1) { - slug = `docs/reference/dart/v0/${params.slug.join('/')}` - } else { - slug = `docs/reference/dart/v0/${params.slug[0]}` - } - - /* - * handle old ref pages - */ - if (process.env.NEXT_PUBLIC_NEW_DOCS === 'false') { - return await generateOldRefMarkdown(slug) - } else { - return { - props: { - docs: markdownContent, - }, - } - } + return handleRefStaticProps(sections, params, '/dart/v0', '/dart/v0') } export function getStaticPaths() { - let docs = getAllDocs() - - return { - paths: docs.map(() => { - return { - params: { - slug: docs.map((d) => d.slug), - }, - } - }), - fallback: 'blocking', - } -} - -export const config = { - unstable_includeFiles: ['node_modules/**/shiki/**/*.json'], + return handleRefGetStaticPaths() } diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx index 20eab8c18c3..b519955f52e 100644 --- a/apps/docs/pages/reference/javascript/[...slug].tsx +++ b/apps/docs/pages/reference/javascript/[...slug].tsx @@ -1,117 +1,22 @@ -import { MDXRemote } from 'next-mdx-remote' -import { useRouter } from 'next/router' -import { useEffect } from 'react' import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json' import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json' // @ts-expect-error import spec from '~/../../spec/supabase_js_v2_temp_new_shape.yml' assert { type: 'yml' } -import components from '~/components' -import RefEducationSection from '~/components/reference/RefEducationSection' -import RefFunctionSection from '~/components/reference/RefFunctionSection' -import OldLayout from '~/layouts/Default' -import { getAllDocs } from '~/lib/docs' +import RefSectionHandler from '~/components/reference/RefSectionHandler' import { flattenSections } from '~/lib/helpers' -import generateOldRefMarkdown from '~/lib/mdx/generateOldRefMarkdown' -import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown' +import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths' +import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps' const sections = flattenSections(clientLibsCommonSections) export default function JSReference(props) { - // console.log('docs', props.docs) - const router = useRouter() - - const slug = router.query.slug[0] - - const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true' - - // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up - // find the #sign-up element and scroll to that - useEffect(() => { - if (isNewDocs && document && slug !== 'start') { - document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView() - } - }) - - /* - * handle old ref pages - */ - if (!isNewDocs) { - return ( - // @ts-ignore - - - - ) - } - - return ( - <> - {sections.map((x) => { - switch (x.isFunc) { - case false: - const markdownData = props.docs.find((doc) => doc.id === x.id) - console.log(markdownData) - - return - break - - default: - return ( - - ) - break - } - })} - - ) + return } export async function getStaticProps({ params }: { params: { slug: string[] } }) { - let markdownContent = await generateRefMarkdown(sections, '/js') - - console.log(markdownContent) - - /* - * old content generation - * this is for grabbing to old markdown files - */ - - let slug - if (params.slug.length > 1) { - slug = `docs/reference/javascript/${params.slug.join('/')}` - } else { - slug = `docs/reference/javascript/${params.slug[0]}` - } - - /* - * handle old ref pages - */ - if (process.env.NEXT_PUBLIC_NEW_DOCS === 'false') { - return await generateOldRefMarkdown(slug) - } else { - return { - props: { - docs: markdownContent, - }, - } - } + return handleRefStaticProps(sections, params, '/js', '/javascript') } export function getStaticPaths() { - let docs = getAllDocs() - - return { - paths: docs.map(() => { - return { - params: { - slug: docs.map((d) => d.slug), - }, - } - }), - fallback: 'blocking', - } -} - -export const config = { - unstable_includeFiles: ['node_modules/**/shiki/**/*.json'], + return handleRefGetStaticPaths() } diff --git a/apps/docs/pages/reference/javascript/v1/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/[...slug].tsx index 406c224b255..a7ab77170b6 100644 --- a/apps/docs/pages/reference/javascript/v1/[...slug].tsx +++ b/apps/docs/pages/reference/javascript/v1/[...slug].tsx @@ -1,117 +1,22 @@ -import { MDXRemote } from 'next-mdx-remote' -import { useRouter } from 'next/router' -import { useEffect } from 'react' import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json' import typeSpec from '~/../../spec/enrichments/tsdoc_v1/combined.json' // @ts-expect-error import spec from '~/../../spec/supabase_js_v1_temp_new_shape.yml' assert { type: 'yml' } -import components from '~/components' -import RefEducationSection from '~/components/reference/RefEducationSection' -import RefFunctionSection from '~/components/reference/RefFunctionSection' -import OldLayout from '~/layouts/Default' -import { getAllDocs } from '~/lib/docs' +import RefSectionHandler from '~/components/reference/RefSectionHandler' import { flattenSections } from '~/lib/helpers' -import generateOldRefMarkdown from '~/lib/mdx/generateOldRefMarkdown' -import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown' +import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths' +import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps' const sections = flattenSections(clientLibsCommonSections) export default function JSReference(props) { - // console.log('docs', props.docs) - const router = useRouter() - - const slug = router.query.slug[0] - - const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true' - - // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up - // find the #sign-up element and scroll to that - useEffect(() => { - if (isNewDocs && document && slug !== 'start') { - document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView() - } - }) - - /* - * handle old ref pages - */ - if (!isNewDocs) { - return ( - // @ts-ignore - - - - ) - } - - return ( - <> - {sections.map((x) => { - switch (x.isFunc) { - case false: - const markdownData = props.docs.find((doc) => doc.id === x.id) - console.log(markdownData) - - return - break - - default: - return ( - - ) - break - } - })} - - ) + return } export async function getStaticProps({ params }: { params: { slug: string[] } }) { - let markdownContent = await generateRefMarkdown(sections, '/js/v1') - - console.log(markdownContent) - - /* - * old content generation - * this is for grabbing to old markdown files - */ - - let slug - if (params.slug.length > 1) { - slug = `docs/reference/javascript/v1/${params.slug.join('/')}` - } else { - slug = `docs/reference/javascript/v1/${params.slug[0]}` - } - - /* - * handle old ref pages - */ - if (process.env.NEXT_PUBLIC_NEW_DOCS === 'false') { - return await generateOldRefMarkdown(slug) - } else { - return { - props: { - docs: markdownContent, - }, - } - } + return handleRefStaticProps(sections, params, '/js/v1', '/javascript/v1') } export function getStaticPaths() { - let docs = getAllDocs() - - return { - paths: docs.map(() => { - return { - params: { - slug: docs.map((d) => d.slug), - }, - } - }), - fallback: 'blocking', - } -} - -export const config = { - unstable_includeFiles: ['node_modules/**/shiki/**/*.json'], + return handleRefGetStaticPaths() }