From 02471fe41ee0380617c3e81fca35137a609f237d Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 14 Dec 2022 17:52:51 +0800
Subject: [PATCH] fix link issue. move homepage content

---
 apps/docs/pages/index.mdx     | 385 ++++++++++++++++++++++++++--------
 apps/docs/pages/new/index.mdx | 323 ----------------------------
 2 files changed, 303 insertions(+), 405 deletions(-)
 delete mode 100644 apps/docs/pages/new/index.mdx

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 19433105df3..a47df32ed83 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -1,101 +1,322 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import NewContent from '~/pages/new/index.mdx'
+import Layout from '~/layouts/DefaultLayout'
+import Link from 'next/link'
+import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
 
 export const meta = {
-  id: 'introduction',
-  title: 'Introduction',
-  description: 'Introduction to Supabase',
-  hide_table_of_contents: false,
+  title: 'Supabase Docs',
+  description:
+    'Supabase is an open source Firebase alternative providing all the backend features you need to build a product.',
+  subtitle: 'Supabase Developer Documentation and API Reference',
 }
 
-export function CheckDoc() {
-  if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') return NewContent
-}
+<h2 className="text-base max-w-xl m-0">
+  Supabase is an open source Firebase alternative providing all the backend features you need to
+  build a product. [Learn more](/docs/architecture) about Supabase, start with the
+  [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different products
+  and APIs.
+</h2>
 
-Supabase is an open source Firebase alternative providing all the backend features you need to build a product.
-You can use it completely, or just the features you need.
+{/* start container */}
 
-[Start a project](https://app.supabase.com) with the hosted platform or learn how to [host Supabase](/docs/guides/hosting/overview) yourself.
+<div className="flex flex-col gap-12 my-12">
 
-## Learn about features
+<div className="space-y-8 hidden">
+  <div className="
+    border border-scale-400
+    relative overflow-hidden
+    grid grid-cols-12
+    rounded-lg
+    px-8 md:px-12 py-5 md:py-12
+    ">
+    <div className="col-span-12 lg:col-span-7 flex flex-col gap-6">
+      <img className="hidden lg:visible absolute right-0 top-0 w-[500px]" src="/docs/img/cards/dark.png" />
+      <div classNam="">
+        <h3 className="text-2xl m-0 mb-3">Getting Started</h3>
+
+        Discover how to set up a database to an app making queries in just a few minutes.
+
+        <div className="font-mono uppercase text-xs mb-2">What you will learn</div>
+
+        <div className="flex flex-col">
+          <div className="flex flex-row items-center gap-3">
+            <div className="text-brand-900">
+              <IconChevronRight size={14} strokeWidth={1.5} />
+            </div>
+            <span className="text-scale-1200">Setting up a Supabase project and app</span>
+          </div>
+          <div className="flex flex-row items-center gap-3">
+            <div className="text-brand-900">
+              <IconChevronRight size={14} strokeWidth={1.5} />
+            </div>
+            <span className="text-scale-1200">Adding some sample data to your project</span>
+          </div>
+          <div className="flex flex-row items-center gap-3">
+            <div className="text-brand-900">
+              <IconChevronRight size={14} strokeWidth={1.5} />
+            </div>
+            <span className="text-scale-1200">Select() from your new database table</span>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <div className="hidden">
+          <Button size="small">Get started</Button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
+            <Link href={`/getting-started/quickstarts/reactjs`} passHref>
+              <a className="no-underline">
+                <IconPanel title="ReactJS" icon="/docs/img/icons/react-icon" />
+              </a>
+            </Link>
+            <Link href={`/getting-started/quickstarts/nextjs`} passHref>
+              <a className="no-underline">
+            <IconPanel title="NextJS" icon="/docs/img/icons/nextjs-icon" />
+            </a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
 
-<div className="grid md:grid-cols-12 gap-4 not-prose">
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/auth'}
-      title={'Auth'}
-      description={'User management with Row Level Security.'}
-      style={{ height: '100%' }}
-    />
   </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/api'}
-      title={'Auto-generated APIs'}
-      description={'Instantly generate APIs for your database.'}
-      style={{ height: '100%' }}
+  <div
+    className="
+      border
+      relative
+      px-8 md:px-12 h-20
+      border-scale-400
+      overflow-hidden
+      min-w-full
+      rounded-lg
+      flex flex-row gap-6 items-center
+      "
+  >
+
+    <img
+      className="w-[48px] lg:w-[64px]"
+      src="/docs/img/cards/tutorials-small.svg"
     />
-  </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/database'}
-      title={'Database'}
-      description={'A dedicated, scalable Postgres database.'}
-      style={{ height: '100%' }}
-    />
-  </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/functions'}
-      title={'Edge Functions'}
-      description={'Server-side functions, distributed globally.'}
-      style={{ height: '100%' }}
-    />
-  </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/realtime'}
-      title={'Realtime'}
-      description={'Build with Broadcast, Presence, and Postgres Changes.'}
-      style={{ height: '100%' }}
-    />
-  </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/storage'}
-      title={'File Storage'}
-      description={'Store, organize, and serve large files.'}
-      style={{ height: '100%' }}
-    />
-  </div>
-  <div className="col-span-4">
-    <ButtonCard
-      className="card"
-      to={'/guides/platform/logs'}
-      title={'Observability'}
-      description={'Monitor and debug your infrastucture.'}
-      style={{ height: '100%' }}
+    <img
+      className="z-0 absolute -left-32 -bottom-48 w-[320px]"
+      src="/docs/img/purple-glow-dark.png"
     />
+    <div className="
+      flex flex-col md:flex-row not-prose
+      h-full justify-center
+      md:items-center md:gap-3
+    ">
+      <h2 className="text-sm lg:text-base text-scale-1200 m-0">Ready to make a fully working app?</h2>
+      <p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
+    </div>
+
   </div>
 </div>
 
-## Start with a framework
+<div>
+  <div className="max-w-xl">
 
-Supabase is just Postgres, which makes it compatible with a large number of tools and frameworks.
+    ### Product Documentation
 
-<Frameworks />
+  </div>
 
-export const Page = ({ children }) => {
-  if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
-    return NewContent()
-  }
-  return <Layout meta={meta} children={children} />
-}
+  <div className="grid grid-cols-12 gap-6 not-prose">
+    {products.map((product) => {
+      return (
+        <Link
+          href={`${product.href}`}
+          key={product.title}
+          passHref
+        >
+          <a className={product.span ?? 'col-span-12 md:col-span-4'}>
+            <GlassPanel {...product} background={true} showIconBg={true} showLink={true}>
+              {product.description}
+            </GlassPanel>
+          </a>
+        </Link>
+      )
+
+})}
+
+    {platform.map((product) => {
+      return (
+        <Link
+          href={`/${product.href}`}
+          key={product.title}
+          passHref
+        >
+          <a className={'col-span-12 md:col-span-4'}>
+            <GlassPanel {...product} background={false} showIconBg={true}>
+              {product.description}
+            </GlassPanel>
+          </a>
+        </Link>
+      )
+
+})}
+
+  </div>
+
+</div>
+
+<div>
+
+  <div className="max-w-xl">
+
+    ### Reference Documentation
+
+  </div>
+
+  <div className="grid grid-cols-12 gap-6 not-prose">
+    {apis.map((product) => {
+      return (
+        <Link
+          href={`/${product.href}`}
+          key={product.title}
+          passHref
+        >
+          <a className={product.span ?? 'col-span-12 lg:col-span-4'}>
+            <GlassPanel {...product} background={false}>
+              {product.description}
+            </GlassPanel>
+          </a>
+        </Link>
+      )
+
+})}
+
+  </div>
+</div>
+
+{/* end of container */}
+
+</div>
+
+export const products = [
+  {
+    title: 'Database',
+    icon: '/docs/img/icons/menu/database',
+    hasLightIcon: true,
+    href: '/guides/database',
+    description:
+      'Supabase provides a full Postgres database for every project with Realtime functionality, database backups, extensions, and more.',
+    span: 'col-span-12 md:col-span-6',
+  },
+  {
+    title: 'Auth',
+    icon: '/docs/img/icons/menu/auth',
+    hasLightIcon: true,
+    href: '/guides/auth/overview',
+    description:
+      'Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.',
+    span: 'col-span-12 md:col-span-6',
+  },
+  {
+    title: 'Storage',
+    icon: '/docs/img/icons/menu/storage',
+    hasLightIcon: true,
+    href: '/guides/storage',
+    description:
+      'Store, organize, transform, and serve large files—fully integrated with your Postgres database with Row Level Security access policies.',
+  },
+  {
+    title: 'Realtime',
+    icon: '/docs/img/icons/menu/realtime',
+    hasLightIcon: true,
+    href: '/guides/realtime',
+    description:
+      'Listen to database changes, store and sync user states across clients, broadcast data to clients subscribed to a channel, and more.',
+  },
+  {
+    title: 'Edge Functions',
+    icon: '/docs/img/icons/menu/functions',
+    hasLightIcon: true,
+    href: '/guides/functions',
+    description:
+      'Globally distributed, server-side functions to execute your code closest to your users for the lowest latency.',
+  },
+]
+
+export const apis = [
+  {
+    title: 'JavaScript Client Library',
+    icon: '/docs/img/icons/menu/reference-javascript',
+    hasLightIcon: true,
+    href: 'reference/javascript/introduction',
+    description: 'Official client libraries for JavaScript and TypeScript.',
+  },
+  {
+    title: 'Flutter Client Library',
+    icon: '/docs/img/icons/menu/reference-dart',
+    hasLightIcon: true,
+    href: 'reference/dart/introduction',
+    description: 'Official client libraries for Flutter and Dart.',
+  },
+  {
+    title: 'Management API',
+    icon: '/docs/img/icons/menu/reference-api',
+    hasLightIcon: true,
+    href: 'reference/api/introduction',
+    description: 'Manage your Supabase projects and organizations programmatically.',
+  },
+  {
+    title: 'Supabase CLI',
+    icon: '/docs/img/icons/menu/reference-api',
+    hasLightIcon: true,
+    href: 'reference/cli/introduction',
+    description:
+      'Use the CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.',
+  },
+  {
+    title: 'Self-Hosting Auth',
+    icon: '/docs/img/icons/menu/reference-auth',
+    hasLightIcon: true,
+    href: 'reference/self-hosting-auth/introduction',
+    description: 'Self-host your own Auth server.',
+  },
+  {
+    title: 'Self-Hosting Storage',
+    icon: '/docs/img/icons/menu/reference-storage',
+    hasLightIcon: true,
+    href: 'reference/self-hosting-storage/introduction',
+    description: 'Self-host your own Storage server.',
+  },
+  {
+    title: 'Self-Hosting Realtime',
+    icon: '/docs/img/icons/menu/reference-realtime',
+    hasLightIcon: true,
+    href: 'reference/self-hosting-realtime/introduction',
+    description: 'Self-host your own Realtime server.',
+  },
+]
+
+export const platform = [
+  {
+    // header: '/docs/img/cards/sample-card-header-3.svg',
+    title: 'Platform Guides',
+    icon: '/docs/img/icons/menu/platform',
+    hasLightIcon: true,
+    href: 'guides/platform',
+    description:
+      'Learn more about the tools and services powering the Supabase Platform, available add-ons, and how to customize the platform for your needs.',
+  },
+  {
+    // header: '/docs/img/cards/sample-card-header-2.svg',
+    title: 'Resources',
+    icon: '/docs/img/icons/menu/resources',
+    hasLightIcon: true,
+    href: 'guides/resources',
+    description: 'View examples, curated content from the community, migration guides, and more.',
+  },
+  {
+    // header: '/docs/img/cards/sample-card-header-2.svg',
+    title: 'Integrations',
+    icon: '/docs/img/icons/menu/integrations',
+    hasLightIcon: true,
+    href: 'guides/integrations',
+    description: 'Explore a variety of integrations from Supabase partners.',
+  },
+]
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx
deleted file mode 100644
index b9762af04b1..00000000000
--- a/apps/docs/pages/new/index.mdx
+++ /dev/null
@@ -1,323 +0,0 @@
-import Layout from '~/layouts/DefaultLayout'
-import Link from 'next/link'
-import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
-
-export const meta = {
-  title: 'Supabase Docs',
-  description:
-    'Supabase is an open source Firebase alternative providing all the backend features you need to build a product.',
-  subtitle: 'Supabase Developer Documentation and API Reference',
-}
-
-<h2 className="text-base max-w-xl m-0">
-  Supabase is an open source Firebase alternative providing all the backend features you need to
-  build a product.
-  
-  [Learn more](/docs/architecture) about Supabase, start with the
-  [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different products and APIs.
-</h2>
-
-{/* start container */}
-
-<div className="flex flex-col gap-12 my-12">
-
-<div className="space-y-8 hidden">
-  <div className="
-    border border-scale-400
-    relative overflow-hidden
-    grid grid-cols-12
-    rounded-lg
-    px-8 md:px-12 py-5 md:py-12
-    ">
-    <div className="col-span-12 lg:col-span-7 flex flex-col gap-6">
-      <img className="hidden lg:visible absolute right-0 top-0 w-[500px]" src="/docs/img/cards/dark.png" />
-      <div classNam="">
-        <h3 className="text-2xl m-0 mb-3">Getting Started</h3>
-
-        Discover how to set up a database to an app making queries in just a few minutes.
-
-        <div className="font-mono uppercase text-xs mb-2">What you will learn</div>
-
-        <div className="flex flex-col">
-          <div className="flex flex-row items-center gap-3">
-            <div className="text-brand-900">
-              <IconChevronRight size={14} strokeWidth={1.5} />
-            </div>
-            <span className="text-scale-1200">Setting up a Supabase project and app</span>
-          </div>
-          <div className="flex flex-row items-center gap-3">
-            <div className="text-brand-900">
-              <IconChevronRight size={14} strokeWidth={1.5} />
-            </div>
-            <span className="text-scale-1200">Adding some sample data to your project</span>
-          </div>
-          <div className="flex flex-row items-center gap-3">
-            <div className="text-brand-900">
-              <IconChevronRight size={14} strokeWidth={1.5} />
-            </div>
-            <span className="text-scale-1200">Select() from your new database table</span>
-          </div>
-        </div>
-
-        <div className="mt-6">
-          <div className="hidden">
-          <Button size="small">Get started</Button>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
-            <Link href={`/getting-started/quickstarts/reactjs`} passHref>
-              <a className="no-underline">
-                <IconPanel title="ReactJS" icon="/docs/img/icons/react-icon" />
-              </a>
-            </Link>
-            <Link href={`/getting-started/quickstarts/nextjs`} passHref>
-              <a className="no-underline">
-            <IconPanel title="NextJS" icon="/docs/img/icons/nextjs-icon" />
-            </a>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-  <div
-    className="
-      border
-      relative
-      px-8 md:px-12 h-20
-      border-scale-400
-      overflow-hidden
-      min-w-full
-      rounded-lg
-      flex flex-row gap-6 items-center
-      "
-  >
-
-    <img
-      className="w-[48px] lg:w-[64px]"
-      src="/docs/img/cards/tutorials-small.svg"
-    />
-    <img
-      className="z-0 absolute -left-32 -bottom-48 w-[320px]"
-      src="/docs/img/purple-glow-dark.png"
-    />
-    <div className="
-      flex flex-col md:flex-row not-prose
-      h-full justify-center
-      md:items-center md:gap-3
-    ">
-      <h2 className="text-sm lg:text-base text-scale-1200 m-0">Ready to make a fully working app?</h2>
-      <p className="text-sm lg:text-base text-scale-1100 m-0">Follow the step-by-step <Link href="/guides/tutorials"><a className="m-0 text-scale-1200 underline">tutorials</a></Link>.</p>
-    </div>
-
-  </div>
-</div>
-
-<div>
-  <div className="max-w-xl">
-
-    ### Product Documentation
-
-  </div>
-
-  <div className="grid grid-cols-12 gap-6 not-prose">
-    {products.map((product) => {
-      return (
-        <Link
-          href={`${product.href}`}
-          key={product.title}
-          passHref
-        >
-          <a className={product.span ?? 'col-span-12 md:col-span-4'}>
-            <GlassPanel {...product} background={true} showIconBg={true} showLink={true}>
-              {product.description}
-            </GlassPanel>
-          </a>
-        </Link>
-      )
-
-})}
-
-    {platform.map((product) => {
-      return (
-        <Link
-          href={`/${product.href}`}
-          key={product.title}
-          passHref
-        >
-          <a className={'col-span-12 md:col-span-4'}>
-            <GlassPanel {...product} background={false} showIconBg={true}>
-              {product.description}
-            </GlassPanel>
-          </a>
-        </Link>
-      )
-
-})}
-
-  </div>
-
-</div>
-
-<div>
-
-  <div className="max-w-xl">
-
-    ### Reference Documentation
-
-  </div>
-
-  <div className="grid grid-cols-12 gap-6 not-prose">
-    {apis.map((product) => {
-      return (
-        <Link
-          href={`/${product.href}`}
-          key={product.title}
-          passHref
-        >
-          <a className={product.span ?? 'col-span-12 lg:col-span-4'}>
-            <GlassPanel {...product} background={false}>
-              {product.description}
-            </GlassPanel>
-          </a>
-        </Link>
-      )
-
-})}
-
-  </div>
-</div>
-
-{/* end of container */}
-
-</div>
-
-export const products = [
-  {
-    title: 'Database',
-    icon: '/docs/img/icons/menu/database',
-    hasLightIcon: true,
-    href: '/guides/database',
-    description:
-      'Supabase provides a full Postgres database for every project with Realtime functionality, database backups, extensions, and more.',
-    span: 'col-span-12 md:col-span-6',
-  },
-  {
-    title: 'Auth',
-    icon: '/docs/img/icons/menu/auth',
-    hasLightIcon: true,
-    href: '/guides/auth',
-    description:
-      'Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.',
-    span: 'col-span-12 md:col-span-6',
-  },
-  {
-    title: 'Storage',
-    icon: '/docs/img/icons/menu/storage',
-    hasLightIcon: true,
-    href: '/guides/storage',
-    description:
-      'Store, organize, transform, and serve large files—fully integrated with your Postgres database with Row Level Security access policies.',
-  },
-  {
-    title: 'Realtime',
-    icon: '/docs/img/icons/menu/realtime',
-    hasLightIcon: true,
-    href: '/guides/realtime',
-    description:
-      'Listen to database changes, store and sync user states across clients, broadcast data to clients subscribed to a channel, and more.',
-  },
-  {
-    title: 'Edge Functions',
-    icon: '/docs/img/icons/menu/functions',
-    hasLightIcon: true,
-    href: '/guides/functions',
-    description:
-      'Globally distributed, server-side functions to execute your code closest to your users for the lowest latency.',
-  },
-]
-
-export const apis = [
-  {
-    title: 'JavaScript Client Library',
-    icon: '/docs/img/icons/menu/reference-javascript',
-    hasLightIcon: true,
-    href: 'reference/javascript/introduction',
-    description: 'Official client libraries for JavaScript and TypeScript.',
-  },
-  {
-    title: 'Flutter Client Library',
-    icon: '/docs/img/icons/menu/reference-dart',
-    hasLightIcon: true,
-    href: 'reference/dart/introduction',
-    description: 'Official client libraries for Flutter and Dart.',
-  },
-  {
-    title: 'Management API',
-    icon: '/docs/img/icons/menu/reference-api',
-    hasLightIcon: true,
-    href: 'reference/api/introduction',
-    description: 'Manage your Supabase projects and organizations programmatically.',
-  },
-  {
-    title: 'Supabase CLI',
-    icon: '/docs/img/icons/menu/reference-api',
-    hasLightIcon: true,
-    href: 'reference/cli/introduction',
-    description:
-      'Use the CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.',
-  },
-  {
-    title: 'Self-Hosting Auth',
-    icon: '/docs/img/icons/menu/reference-auth',
-    hasLightIcon: true,
-    href: 'reference/self-hosting-auth/introduction',
-    description: 'Self-host your own Auth server.',
-  },
-  {
-    title: 'Self-Hosting Storage',
-    icon: '/docs/img/icons/menu/reference-storage',
-    hasLightIcon: true,
-    href: 'reference/self-hosting-storage/introduction',
-    description: 'Self-host your own Storage server.',
-  },
-  {
-    title: 'Self-Hosting Realtime',
-    icon: '/docs/img/icons/menu/reference-realtime',
-    hasLightIcon: true,
-    href: 'reference/self-hosting-realtime/introduction',
-    description: 'Self-host your own Realtime server.',
-  },
-]
-
-export const platform = [
-  {
-    // header: '/docs/img/cards/sample-card-header-3.svg',
-    title: 'Platform Guides',
-    icon: '/docs/img/icons/menu/platform',
-    hasLightIcon: true,
-    href: 'guides/platform',
-    description:
-      'Learn more about the tools and services powering the Supabase Platform, available add-ons, and how to customize the platform for your needs.',
-  },
-  {
-    // header: '/docs/img/cards/sample-card-header-2.svg',
-    title: 'Resources',
-    icon: '/docs/img/icons/menu/resources',
-    hasLightIcon: true,
-    href: 'guides/resources',
-    description: 'View examples, curated content from the community, migration guides, and more.',
-  },
-  {
-    // header: '/docs/img/cards/sample-card-header-2.svg',
-    title: 'Integrations',
-    icon: '/docs/img/icons/menu/integrations',
-    hasLightIcon: true,
-    href: 'guides/integrations',
-    description: 'Explore a variety of integrations from Supabase partners.',
-  },
-]
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page