diff --git a/apps/docs/components/Options.tsx b/apps/docs/components/Options.tsx index b3e9d37e70f..269bca93077 100644 --- a/apps/docs/components/Options.tsx +++ b/apps/docs/components/Options.tsx @@ -6,7 +6,13 @@ interface IOptions { name?: string } -const Options: FC = (props) => { +type IOption = AcceptedValue | any + +type OptionsSubComponents = { + Option: IOption +} + +const Options: FC & OptionsSubComponents = (props) => { const [open, setOpen] = useState(false) return (
@@ -40,8 +46,6 @@ const Options: FC = (props) => { ) } -type IOption = AcceptedValue | any - const Option: FC = (props) => { return (
= (props) => { ) } -// @ts-ignore Options.Option = Option export default Options diff --git a/apps/docs/layouts/ref/LibFunctionLayout.tsx b/apps/docs/layouts/ref/LibFunctionLayout.tsx deleted file mode 100644 index 2126cf764fc..00000000000 --- a/apps/docs/layouts/ref/LibFunctionLayout.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function () { - return
hello i am a layout
-} diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx new file mode 100644 index 00000000000..74b06e92576 --- /dev/null +++ b/apps/docs/layouts/ref/RefSubLayout.tsx @@ -0,0 +1,36 @@ +import { FC } from 'react' + +interface ISectionContainer extends FC { + id: string +} + +type RefSubLayoutSubComponents = { + Section: ISectionContainer +} + +type RefSubLayoutType = {} + +const RefSubLayout: React.FunctionComponent & RefSubLayoutSubComponents = ( + props +) => { + return ( +
+
+
{props.children}
+
+
+ ) +} + +const Section: FC = (props) => { + return ( +
+ {props.children} +
+ ) +} + +// @ts-ignore // needs typing with FC type +RefSubLayout.Section = Section + +export default RefSubLayout diff --git a/apps/docs/pages/new/reference/javascript/[...slug].tsx b/apps/docs/pages/new/reference/javascript/[...slug].tsx index 4ae1692f297..22db758768f 100644 --- a/apps/docs/pages/new/reference/javascript/[...slug].tsx +++ b/apps/docs/pages/new/reference/javascript/[...slug].tsx @@ -32,9 +32,9 @@ import { ComesFrom } from '~/components/ComesFrom' import Link from 'next/link' import Param from '~/components/Params' import Options from '~/components/Options' +import RefSubLayout from '~/layouts/ref/RefSubLayout' -const marginTop = 256 -export default function Ref(props) { +export default function JSReference(props) { // const myRef = useRef(null) //console.log('props', props) @@ -43,11 +43,6 @@ export default function Ref(props) { const [offsetY, setOffsetY] = useState(0) const [sections, setSections] = useState([]) - // useEffect(() => { - // window.scrollTo(0, 0) - // setOffsetY(0) - // }, []) - useEffect(() => { const els: HTMLElement[] = Array.from(document.querySelectorAll('div.ref-container')) @@ -65,62 +60,9 @@ export default function Ref(props) { setSections(allSections) }, []) - // useEffect(() => { - // if (sections.length <= 1) return - - // const onScroll = () => { - // console.log('SCROLL EVENT') - // setOffsetY(window.pageYOffset) - // } - // window.addEventListener('scroll', debounce(onScroll, 500)) - - // return () => window.removeEventListener('scroll', onScroll) - // }, [sections]) - - // useEffect(() => { - // if (sections.length === 0) return - - // if (sections.length === 1) { - // sections[0].isActive = true - // return - // } - - // sections.forEach((section, index) => { - // if (index === 0) { - // section.isActive = sections[index + 1].boundingTop > offsetY + marginTop - // } else { - // if (sections[index + 1]) { - // section.isActive = - // sections[index + 1].boundingTop > offsetY + marginTop && - // sections[index].boundingTop <= offsetY + marginTop - // } else { - // section.isActive = sections[index].boundingTop <= offsetY + marginTop - // } - // } - // }) - // }, [sections, offsetY]) - - // useEffect(() => { - // const observer = new IntersectionObserver((entries) => { - // // console.log('entries', entries) - // const entry = entries[0] - // // console.log('entry', entry) - // }) - // // console.log('myRef', myRef.current) - // observer.observe(myRef.current) - // }, []) - const router = useRouter() function updateUrl(key) { - // router.replace( - // { - // pathname: `/ref/js/${key}`, - // // query: { sortBy: 'price' }, - // } - // // undefined, - // // { shallow: true } - // ) router.replace( { pathname: `/ref/js/${key}`, @@ -132,338 +74,235 @@ export default function Ref(props) { } return ( -
-
- {/*
- {sections.map((x, i) => { - return ( - - { - // window.scrollTo(0, x.boundingTop - marginTop) - // setOffsetY(x.boundingTop - marginTop) - // }} + + {jsSpec.functions.map((item, itemIndex) => { + const hasTsRef = item['$ref'] || null + const tsDefinition = hasTsRef && extractTsDocNode(hasTsRef, jsTypeSpec) + const parameters = hasTsRef ? generateParameters(tsDefinition) : '' + + // console.log(`parameters ${item.title}`, parameters) + + const functionMarkdownContent = props?.docs[itemIndex]?.content + const shortText = hasTsRef ? tsDefinition.signatures[0].comment.shortText : '' + + return ( + + */} - -
-
- {jsSpec.functions.map((item, itemIndex) => { - // if (item['$ref']) console.log('$ref', item['$ref']) - // if (item.id !== 'select()') return
hidden section
- // const sectionRef = useRef(null) - - // console.log('x', x) - const hasTsRef = item['$ref'] || null - // console.log('hasTsRef', hasTsRef) - // console.log('jsTypeSpec', jsTypeSpec) - const tsDefinition = hasTsRef && extractTsDocNode(hasTsRef, jsTypeSpec) - // console.log('tsDefinition', tsDefinition) - // console.log(`tsDefinition for ${item.title ?? item.id}`, tsDefinition) - - // useEffect(() => { - // const observer = new IntersectionObserver((entries) => { - // // console.log('entries', entries) - // const entry = entries[0] - - // // console.log( - // // x.id, - // // 'intersectiong', - // // entry.isIntersecting, - // // 'visible', - // // entry.isVisible - // // ) - // }) - // // console.log('myRef', myRef.current) - // observer.observe(sectionRef.current) - // }, []) - - const parameters = hasTsRef ? generateParameters(tsDefinition) : '' - - console.log(`parameters ${item.title}`, parameters) - - // @ts-ignore - // const [serialFunctionMarkdownContent, setSerialFunctionMarkdownContent] = - // useState(null) - - const functionMarkdownContent = props?.docs[itemIndex]?.content - - // useEffect(() => { - // async function makeContent() { - // setSerialFunctionMarkdownContent( - // await serialize(functionMarkdownContent, { - // mdxOptions: { - // remarkPlugins: [remarkGfm], - // format: 'mdx', - // }, - // }) - // ) - // } - // makeContent() - // }, []) - - // console.log('serialFunctionMarkdownContent', serialFunctionMarkdownContent) - - const shortText = hasTsRef ? tsDefinition.signatures[0].comment.shortText : '' - - return ( -
-
-
-
-

updateUrl(item.id)} - > - {examples.functions[itemIndex].title ?? - examples.functions[itemIndex].id ?? - item.name ?? - item.id} -

- {shortText && ( - <> -

- {/* + {shortText && ( + <> +

+ {/* */} - - )} -
+ + )} + - {item.description && ( - <> - {/* + {/* */} -

{item.description}

- - )} - {functionMarkdownContent && ( - <> - {/* {item.description}

+ + )} + {functionMarkdownContent && ( + <> + {/* */} - - - )} - {item.notes && ( -
- {/* + + )} + {item.notes && ( +
+ {/* */} - {item.notes} -
- )} - {/* // parameters */} - {parameters && ( -
- {/* {item.notes} +
+ )} + {/* // parameters */} + {parameters && ( +
+ {/* */} -
Parameters
-
    - {parameters.map((param) => { - // grab override params from yaml file - const overrideParams = item.overrideParams +
    Parameters
    +
      + {parameters.map((param) => { + // grab override params from yaml file + const overrideParams = item.overrideParams - // params from the yaml file can override the params from parameters if it matches the name - const overide = overrideParams?.filter((x) => { - return param.name === x.name - }) + // params from the yaml file can override the params from parameters if it matches the name + const overide = overrideParams?.filter((x) => { + return param.name === x.name + }) - const paramItem = overide?.length > 0 ? overide[0] : param + const paramItem = overide?.length > 0 ? overide[0] : param - return ( - - {paramItem.subContent && ( -
      - - {param.subContent.map((param) => { - return - })} - -
      - )} - - ) - })} -
    - {/*
    */} -
- )} -
-
-
- {item.examples && ( - <> - {' '} - - - {item.examples && - item.examples.map((example, exampleIndex) => { - const exampleString = ` + return ( + + {paramItem.subContent && ( +
+ + {param.subContent.map((param) => { + return + })} + +
+ )} + + ) + })} + + {/*
*/} +
+ )} +
+
+
+ {item.examples && ( + <> + {' '} + + + {item.examples && + item.examples.map((example, exampleIndex) => { + const exampleString = ` import { createClient } from '@supabase/supabase-js' // Create a single supabase client for interacting with your database const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key') ` - const currentExampleId = example.id - const staticExample = item.examples[exampleIndex] + const currentExampleId = example.id + const staticExample = item.examples[exampleIndex] - const response = staticExample.response - const sql = staticExample?.data?.sql - const tables = staticExample?.data?.tables + const response = staticExample.response + const sql = staticExample?.data?.sql + const tables = staticExample?.data?.tables + + return ( + + {tables && + tables.length > 0 && + tables.map((table) => { + // console.log(table) + + // @ts-ignore + // const [content, setContent] = useState(null) + + // // @ts-ignore + // useEffect(() => { + // async function makeContent() { + // setContent( + // await serialize(table.content, { + // mdxOptions: { + // remarkPlugins: [remarkGfm], + // format: 'mdx', + // }, + // }) + // ) + // } + // makeContent() + // }, []) return ( - - {tables && - tables.length > 0 && - tables.map((table) => { - // console.log(table) +
+
+
+
+ +
+
{table.name}
+
+
- // @ts-ignore - // const [content, setContent] = useState(null) - - // // @ts-ignore - // useEffect(() => { - // async function makeContent() { - // setContent( - // await serialize(table.content, { - // mdxOptions: { - // remarkPlugins: [remarkGfm], - // format: 'mdx', - // }, - // }) - // ) - // } - // makeContent() - // }, []) - - return ( -
-
-
-
- -
-
- {table.name} -
-
-
- - {/* {table.content} */} - {/* {content && } */} -
- ) - })} - {sql && ( - - {sql} - - )} - - {exampleString + - (example.code && - example.code - .replace('```', '') - .replace('js', '') - .replace('```', ''))} - - {response && ( - <> - - - {response} - - - )} - + {/* {table.content} */} + {/* {content && } */} +
) })} - - - )} -
-
-
-
- ) - })} -
-
-
-
+ {sql && ( + + {sql} + + )} + + {exampleString + + (example.code && + example.code + .replace('```', '') + .replace('js', '') + .replace('```', ''))} + + {response && ( + <> + + + {response} + + + )} + + ) + })} + + + )} +
+
+ + ) + })} + ) } export async function getStaticProps({ params }: { params: { slug: string[] } }) { - /** - * This is our collection of human readable titles and IDs - */ - let markdownDocs = [ - { - title: 'Inserting data', - id: 'select()', - }, - { title: 'Deleting data', id: 'delete()' }, - ] - const pages = jsSpec.functions.map((x) => x.id) // console.log('pages', pages)