more changes

apps/docs/components/CodeBlock/CodeBlock.tsx

@@ -39,8 +39,6 @@ const CodeBlock: FC<Props> = ({
   const { isDarkMode } = useTheme()
   const monokaiTheme = monokaiCustomTheme(isDarkMode)
 
-  console.log(children, hideLineNumbers)
-
   const [copied, setCopied] = useState(false)
 
   const handleCopy = () => {
@@ -66,8 +64,6 @@ const CodeBlock: FC<Props> = ({
   if (lang !== 'bash') hideLineNumbers = true
   const showLineNumbers = !hideLineNumbers
 
-  console.log(showLineNumbers)
-
   return (
     <div className="relative my-2 max-w-[90vw] md:max-w-none overflow-auto">
       {title && (

apps/docs/layouts/tutorials/TutorialLayout.tsx

@@ -1,12 +1,10 @@
 import { MDXProvider } from '@mdx-js/react'
 import Head from 'next/head'
 import { FC, useEffect } from 'react'
+import components from '~/components'
 import Footer from '~/components/Footer'
 import SideBar from '~/components/Navigation/SideBar'
 import TableOfContents from '~/components/TableOfContents'
-import { Tabs } from 'ui'
-
-// var toc = require('markdown-toc')
 
 interface Props {
   meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string }
@@ -17,6 +15,8 @@ interface Props {
 }
 
 const Layout: FC<Props> = (props: Props) => {
+  // const contentString = renderToString(props.children)
+
   useEffect(() => {
     const key = localStorage.getItem('supabaseDarkMode')
     if (!key) {
@@ -31,13 +31,9 @@ const Layout: FC<Props> = (props: Props) => {
 
   // const content = serialize(contentString || '')
 
-  // console.log(props)
+  // console.log('contentString', contentString)
 
-  // const _toc = /toc(children, { maxdepth: 1, firsth1: false })
-
-  const MDXComponents = {
-    Tabs: Tabs,
-  }
+  // const _toc = toc('#hello world', { maxdepth: 1, firsth1: false })
 
   const hasTableOfContents =
     props.toc !== undefined &&
@@ -72,7 +68,8 @@ const Layout: FC<Props> = (props: Props) => {
               <article className="prose dark:prose-dark dark:bg-scale-200 max-w-4xl mt-8">
                 <h1>{props.meta.title}</h1>
                 <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
-                <MDXProvider components={MDXComponents} children={props.children} />
+
+                <MDXProvider components={components} children={props.children} />
               </article>
             </div>
             {hasTableOfContents && !props.meta?.hide_table_of_contents && (

apps/docs/layouts/tutorials/TutorialLayout2.tsx

@@ -1,102 +0,0 @@
-import { MDXProvider } from '@mdx-js/react'
-import Head from 'next/head'
-import { FC, useEffect } from 'react'
-import { renderToString } from 'react-dom/server'
-import { Tabs } from 'ui'
-import Footer from '~/components/Footer'
-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 }
-  children: any
-  toc?: any
-  menuItems: any
-  currentPage: string
-}
-
-const Layout: FC<Props> = (props: Props) => {
-  const contentString = renderToString(props.children)
-
-  useEffect(() => {
-    const key = localStorage.getItem('supabaseDarkMode')
-    if (!key) {
-      // Default to dark mode if no preference config
-      document.documentElement.className = 'dark'
-    } else {
-      document.documentElement.className = key === 'true' ? 'dark' : ''
-    }
-  }, [])
-
-  // 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
-
-  const components = {
-    // img: ResponsiveImage,
-    // h1: Heading.H1,
-    // h2: Heading.H2,
-    // p: Text,
-    // pre: Pre,
-    // code: InlineCode,
-    Tabs: Tabs,
-  }
-  return (
-    <>
-      <Head>
-        <title>{props.meta?.title} | Supabase</title>
-        <meta name="description" content={props.meta?.description} />
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
-        <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>
-
-      <main>
-        {/* <NavBar currentPage={currentPage} /> */}
-        <div className="flex w-full flex-row">
-          <SideBar menuItems={props.menuItems} />
-          <div className="main-content-pane docs-width grid md:grid-cols-12 gap-4 justify-between p-4 pb-8 w-full">
-            <div
-              className={`${
-                props.meta?.hide_table_of_contents || !hasTableOfContents
-                  ? 'col-span-12 xl:col-start-2 xl:col-span-10 2xl:col-start-3 2xl:col-span-8'
-                  : 'col-span-12 md:col-span-9'
-              } py-2 md:py-4 px-2 md:px-8`}
-            >
-              <p className="text-brand-900 tracking-wider">Tutorials</p>
-              <article className="prose dark:prose-dark dark:bg-scale-200 max-w-4xl mt-8">
-                <h1>{props.meta.title}</h1>
-                <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
-                <MDXProvider components={components} children={props.children} />
-              </article>
-            </div>
-            {hasTableOfContents && !props.meta?.hide_table_of_contents && (
-              <div
-                className={[
-                  'border-scale-400 dark:bg-scale-200 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>
-        </div>
-        <Footer />
-      </main>
-    </>
-  )
-}
-
-export default Layout

apps/docs/pages/ref/js/[...slug].tsx

@@ -7,6 +7,7 @@ import {
 
 import fs from 'fs'
 
+import remarkGfm from 'remark-gfm'
 import matter from 'gray-matter'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
@@ -17,11 +18,12 @@ import ReactMarkdown from 'react-markdown'
 
 // @ts-ignore
 import jsTypeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-
+// @ts-ignore
+import examples from '~/../../spec/examples/examples.yml' assert { type: 'yml' }
 // @ts-expect-error
-import jsSpec from '~/../../spec/supabase_js_v2_temp.yml' assert { type: 'yml' }
+import jsSpec from '~/../../spec/supabase_js_v2_temp_new_shape.yml' assert { type: 'yml' }
 
-import { Tabs } from '~/../../packages/ui'
+import { IconDatabase, Tabs } from '~/../../packages/ui'
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
 
 import { useRouter } from 'next/router'
@@ -32,13 +34,15 @@ const marginTop = 256
 export default function Ref(props) {
   // const myRef = useRef(null)
 
+  console.log('props', props)
+
   const [offsetY, setOffsetY] = useState(0)
   const [sections, setSections] = useState([])
 
-  useEffect(() => {
-    window.scrollTo(0, 0)
-    setOffsetY(0)
-  }, [])
+  // useEffect(() => {
+  //   window.scrollTo(0, 0)
+  //   setOffsetY(0)
+  // }, [])
 
   useEffect(() => {
     const els: HTMLElement[] = Array.from(document.querySelectorAll('div.ref-container'))
@@ -151,16 +155,17 @@ export default function Ref(props) {
             className="flex flex-col gap-32 mx-auto max-w-5xl"
             // ref={myRef}
           >
-            {props.docs.map((x) => {
+            {jsSpec.functions.map((item, itemIndex) => {
+              if (item.id !== 'select()') return <div>hidden section</div>
               // const sectionRef = useRef(null)
 
-              // console.log('x', jsSpec.pages[x.id])
-              const hasTsRef = jsSpec.pages[x.id]['$ref'] || 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 ${x.title ?? x.id}`, tsDefinition)
+              // console.log(`tsDefinition for ${item.title ?? item.id}`, tsDefinition)
 
               // useEffect(() => {
               //   const observer = new IntersectionObserver((entries) => {
@@ -181,25 +186,50 @@ export default function Ref(props) {
 
               const parameters = hasTsRef ? generateParameters(tsDefinition) : ''
 
+              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)
+
               return (
                 <div
                   className="grid grid-cols-2 pb-32 ref-container gap-10"
-                  id={x.id}
+                  id={item.id}
                   // ref={sectionRef}
                 >
-                  <div className="prose" key={x.id}>
-                    <h1 className="text-3xl not-prose" onClick={() => updateUrl(x.id)}>
-                      {x.title ?? x.id}
+                  <div className="prose" key={item.id}>
+                    <h1 className="text-3xl not-prose" onClick={() => updateUrl(item.id)}>
+                      {examples.functions[itemIndex].title ??
+                        examples.functions[itemIndex].id ??
+                        item.name ??
+                        item.id}
                     </h1>
+                    <p className="text-lg not-prose">{examples.functions[itemIndex].description}</p>
 
-                    {x.content && (
-                      <div className="prose">
-                        <MDXRemote {...x.content} components={components} />
-                      </div>
+                    <hr />
+                    {functionMarkdownContent && (
+                      <MDXRemote {...functionMarkdownContent} components={components} />
                     )}
-                    {jsSpec.pages[x.id].notes && (
+
+                    {item.notes && (
                       <div>
-                        <ReactMarkdown>{jsSpec.pages[x.id].notes}</ReactMarkdown>
+                        <ReactMarkdown>{item.notes}</ReactMarkdown>
                       </div>
                     )}
 
@@ -207,59 +237,100 @@ export default function Ref(props) {
                     {parameters && <div dangerouslySetInnerHTML={{ __html: parameters }}></div>}
                   </div>
                   <div className="w-full">
-                    {jsSpec.pages[x.id].examples && (
+                    {item.examples && (
                       <Tabs
-                        defaultActiveId={jsSpec.pages[x.id].examples[0].name}
+                        defaultActiveId={item.examples[0].id}
                         size="small"
                         type="underlined"
                         scrollable
                       >
-                        {jsSpec.pages[x.id].examples &&
-                          jsSpec.pages[x.id].examples.map((x, i) => {
+                        {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 =
+                              examples.functions[itemIndex].examples[exampleIndex]
+
+                            const response = staticExample.response
+                            const sql = staticExample?.data?.sql
+                            const tables = staticExample?.data?.tables
 
                             return (
-                              <Tabs.Panel id={x.name} label={x.name}>
+                              <Tabs.Panel id={example.id} label={example.name}>
+                                {tables &&
+                                  tables.length > 0 &&
+                                  tables.map((table) => {
+                                    console.log(table)
+
+                                    const [content, setContent] = useState(null)
+
+                                    useEffect(() => {
+                                      async function makeContent() {
+                                        setContent(
+                                          await serialize(table.content, {
+                                            mdxOptions: {
+                                              remarkPlugins: [remarkGfm],
+                                              format: 'mdx',
+                                            },
+                                          })
+                                        )
+                                      }
+                                      makeContent()
+                                    }, [])
+
+                                    return (
+                                      <div className="bg-scale-300 border rounded prose max-w-none">
+                                        <div className="bg-scale-200 px-5 py-2">
+                                          <div className="flex gap-2 items-center">
+                                            <div className="text-brand-900">
+                                              <IconDatabase size={16} />
+                                            </div>
+                                            <h5 className="text-xs text-scale-1200">
+                                              {table.name}
+                                            </h5>
+                                          </div>
+                                        </div>
+
+                                        {/* <ReactMarkdown>{table.content}</ReactMarkdown> */}
+                                        {content && <MDXRemote {...content} />}
+                                      </div>
+                                    )
+                                  })}
+                                {sql && (
+                                  <CodeBlock
+                                    className="useless-code-block-class"
+                                    language="sql"
+                                    hideLineNumbers={true}
+                                  >
+                                    {sql}
+                                  </CodeBlock>
+                                )}
                                 <CodeBlock
                                   className="useless-code-block-class"
                                   language="js"
                                   hideLineNumbers={true}
                                 >
                                   {exampleString +
-                                    (x.js &&
-                                      x.js.replace('```', '').replace('js', '').replace('```', ''))}
-                                </CodeBlock>
-                                <CodeBlock
-                                  className="useless-code-block-class"
-                                  language="json"
-                                  hideLineNumbers={true}
-                                >
-                                  {`{
-  data: [
-    {
-      id: 1,
-      name: "Afghanistan",
-    },
-    {
-      id: 2,
-      name: "Albania",
-    },
-    {
-      id: 3,
-      name: "Algeria",
-    },
-  ],
-  status: 200,
-  statusText: "OK",
-}
-
-                                  `}
+                                    (example.code &&
+                                      example.code
+                                        .replace('```', '')
+                                        .replace('js', '')
+                                        .replace('```', ''))}
                                 </CodeBlock>
+                                {response && (
+                                  <CodeBlock
+                                    className="useless-code-block-class"
+                                    language="json"
+                                    hideLineNumbers={true}
+                                  >
+                                    {response}
+                                  </CodeBlock>
+                                )}
                               </Tabs.Panel>
                             )
                           })}
@@ -288,8 +359,8 @@ export async function getStaticProps({ params }: { params: { slug: string[] } })
     { title: 'Deleting data', id: 'delete()' },
   ]
 
-  const pages = Object.keys(jsSpec.pages)
-  // console.log('pages', pages)
+  const pages = jsSpec.functions.map((x) => x.id)
+  console.log('pages', pages)
 
   /**
    * Read all the markdown files that might have
@@ -306,7 +377,7 @@ export async function getStaticProps({ params }: { params: { slug: string[] } })
       const pathName = `docs/ref/js/${x}.mdx`
 
       function checkFileExists(x) {
-        console.log('checking this ', x)
+        // console.log('checking this ', x)
         if (fs.existsSync(x)) {
           return true
         } else {
@@ -316,10 +387,14 @@ export async function getStaticProps({ params }: { params: { slug: string[] } })
 
       const markdownExists = checkFileExists(pathName)
 
+      console.log(x, 'markdownExists', markdownExists)
+
       const fileContents = markdownExists ? fs.readFileSync(pathName, 'utf8') : ''
       const { data, content } = matter(fileContents)
-      console.log('docBySlug', content)
+      // console.log('docBySlug', content)
       // console.log()
+
+      if (content) console.log(content)
       return {
         id: x,
         title: x,
@@ -330,7 +405,7 @@ export async function getStaticProps({ params }: { params: { slug: string[] } })
     })
   )
 
-  console.log('allMarkdownDocs', allMarkdownDocs)
+  // console.log('allMarkdownDocs', allMarkdownDocs)
 
   return {
     props: {

apps/docs/pages/tutorials/nextjs.mdx

@@ -1,6 +1,4 @@
-import TutorialLayout2 from '~/layouts/tutorials/TutorialLayout2'
-
-import { Tabs } from 'ui'
+import Layout from '~/layouts/tutorials/TutorialLayout'
 
 export const meta = {
   title: 'Creating a user management dashboard with NextJS and Supabase',
@@ -723,4 +721,4 @@ At this stage you have a fully functional application!
 - Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
 - Sign in: [app.supabase.com](https://app.supabase.com)
 
-export default ({ children }) => <TutorialLayout2 meta={meta} children={children} />
+export default ({ children }) => <Layout meta={meta} children={children} />

spec/Makefile

@@ -94,6 +94,16 @@ combine.tsdoc.v2:
 	$(REPO_DIR)/enrichments/tsdoc_v2/functions_dereferenced.json \
 	> $(REPO_DIR)/enrichments/tsdoc_v2/combined.json
 
+combine-raw.tsdoc.v2:
+	jq -s '{ name: "Combined Specs", children: [.[0], .[1], .[2], .[3], .[4], .[5]] }' \
+	$(REPO_DIR)/enrichments/tsdoc_v2/supabase.json \
+	$(REPO_DIR)/enrichments/tsdoc_v2/gotrue.json \
+	$(REPO_DIR)/enrichments/tsdoc_v2/postgrest.json \
+	$(REPO_DIR)/enrichments/tsdoc_v2/realtime.json \
+	$(REPO_DIR)/enrichments/tsdoc_v2/storage.json \
+	$(REPO_DIR)/enrichments/tsdoc_v2/functions.json \
+	> $(REPO_DIR)/enrichments/tsdoc_v2/combined_raw.json
+
 ###############################################################################
 # Format everything - easier for git to track changes
 ###############################################################################