refactor: migrate guides to app router

apps/docs/app/error.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Link from 'next/link'
+import { Button } from 'ui'
+
+const ErrorPage = () => (
+  <div className="h-full w-full flex flex-col gap-8 p-8 items-center justify-center">
+    <span className="text-center text-5xl text-foreground-lighter">
+      Sorry, something went wrong
+    </span>
+    <Button asChild type="secondary" className="w-fit p-4 text-lg">
+      <Link href="/">Return to homepage</Link>
+    </Button>
+  </div>
+)
+
+export default ErrorPage

apps/docs/app/guides/[...slug]/page.tsx

@@ -0,0 +1,19 @@
+import {
+  getGuidesMarkdown,
+  genGuideMeta,
+  genGuidesStaticParams,
+} from '~/features/docs/GuidesMdx.utils'
+import { GuideTemplate } from '~/features/docs/GuidesMdx.template'
+
+type Params = { slug: string[] }
+
+const GuidePage = async ({ params }: { params: Params }) => {
+  const data = await getGuidesMarkdown(params)
+  return <GuideTemplate {...data!} />
+}
+
+const generateStaticParams = genGuidesStaticParams()
+const generateMetadata = genGuideMeta(getGuidesMarkdown)
+
+export default GuidePage
+export { generateStaticParams, generateMetadata }

apps/docs/app/guides/ai/python/[slug]/page.tsx

@@ -0,0 +1,133 @@
+import { type SerializeOptions } from 'next-mdx-remote/dist/types'
+import { redirect } from 'next/navigation'
+import { relative } from 'path'
+import rehypeSlug from 'rehype-slug'
+import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
+import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template'
+import { notFoundLink } from '~/features/recommendations/NotFound.utils'
+import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
+import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
+import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+
+// We fetch these docs at build time from an external repo
+const org = 'supabase'
+const repo = 'vecs'
+const branch = 'main'
+const docsDir = 'docs'
+const externalSite = 'https://supabase.github.io/vecs'
+
+// Each external docs page is mapped to a local page
+const pageMap = [
+  {
+    slug: 'api',
+    meta: {
+      title: 'API',
+    },
+    remoteFile: 'api.md',
+  },
+  {
+    slug: 'collections',
+    meta: {
+      title: 'Collections',
+    },
+    remoteFile: 'concepts_collections.md',
+  },
+  {
+    slug: 'indexes',
+    meta: {
+      title: 'Indexes',
+    },
+    remoteFile: 'concepts_indexes.md',
+  },
+  {
+    slug: 'metadata',
+    meta: {
+      title: 'Metadata',
+    },
+    remoteFile: 'concepts_metadata.md',
+  },
+]
+
+interface Params {
+  slug: string
+}
+
+const PythonClientDocs = async ({ params }: { params: Params }) => {
+  const { meta, ...data } = await getContent(params)
+
+  const options = {
+    mdxOptions: {
+      remarkPlugins: [remarkMkDocsAdmonition, [removeTitle, meta.title]],
+      rehypePlugins: [[linkTransform, urlTransform], rehypeSlug],
+    },
+  } as SerializeOptions
+
+  return <GuideTemplate mdxOptions={options} meta={meta} {...data} />
+}
+
+/**
+ * Fetch markdown from external repo
+ */
+const getContent = async ({ slug }: Params) => {
+  const page = pageMap.find(({ slug: validSlug }) => validSlug && validSlug === slug)
+
+  if (!page) {
+    redirect(notFoundLink(`api/python/${slug}`))
+  }
+
+  const { remoteFile, meta } = page
+
+  const editLink = newEditLink(`${org}/${repo}/blob/${branch}/${docsDir}/${remoteFile}`)
+
+  const response = await fetch(
+    `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+  )
+
+  const content = await response.text()
+
+  return {
+    pathname: `/guides/ai/python/${slug}` satisfies `/${string}`,
+    meta,
+    content,
+    editLink,
+  }
+}
+
+const urlTransform: UrlTransformFunction = (url) => {
+  try {
+    const externalSiteUrl = new URL(externalSite)
+
+    const placeholderHostname = 'placeholder'
+    const { hostname, pathname, hash } = new URL(url, `http://${placeholderHostname}`)
+
+    // Don't modify a url with a FQDN or a url that's only a hash
+    if (hostname !== placeholderHostname || pathname === '/') {
+      return url
+    }
+
+    const relativePage = (
+      pathname.endsWith('.md')
+        ? pathname.replace(/\.md$/, '')
+        : relative(externalSiteUrl.pathname, pathname)
+    ).replace(/^\//, '')
+
+    const page = pageMap.find(({ remoteFile }) => `${relativePage}.md` === remoteFile)
+
+    // If we have a mapping for this page, use the mapped path
+    if (page) {
+      return page.slug + hash
+    }
+
+    // If we don't have this page in our docs, link to original docs
+    return `${externalSite}/${relativePage}${hash}`
+  } catch (err) {
+    console.error('Error transforming markdown URL', err)
+    return url
+  }
+}
+
+const generateStaticParams = () => pageMap.map(({ slug }) => ({ slug }))
+const generateMetadata = genGuideMeta(getContent)
+
+export default PythonClientDocs
+export { generateStaticParams, generateMetadata }

apps/docs/pages/guides/cli/config.tsx → apps/docs/app/guides/cli/config/page.tsx

@@ -1,60 +1,45 @@
-import Head from 'next/head'
 import ReactMarkdown from 'react-markdown'
-
-import { CodeBlock, cn } from 'ui'
-
+import { CodeBlock } from 'ui'
 import { Heading } from 'ui/src/components/CustomHTMLElements'
-import GuidesTableOfContents from '~/components/GuidesTableOfContents'
-import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
-import { MainSkeleton } from '~/layouts/MainSkeleton'
-import { Parameter } from '~/lib/refGenerator/refTypes'
+import { type TOCHeader } from '~/components/GuidesTableOfContents'
+import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
+import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template'
+import type { Parameter } from '~/lib/refGenerator/refTypes'
 import specFile from '~/spec/cli_v1_config.yaml' assert { type: 'yml' }
 
-// Parameters are grouped on the page by tag
-const tocList = []
-const content = specFile.info.tags.map((tag) => {
-  tocList.push({ text: tag.title, link: `${tag.id}-config`, level: 2 })
+const meta = {
+  title: 'Supabase CLI config',
+}
+
+const generateMetadata = genGuideMeta(() => ({
+  pathname: '/guides/cli/config',
+  meta,
+}))
+
+const tocList: TOCHeader[] = []
+const content = specFile.info.tags.map((tag: { id: string; title: string }, id: number) => {
+  tocList.push({ id: `${id}`, text: tag.title, link: `${tag.id}-config`, level: 2 })
   return (
     <div>
       <Heading tag="h2">{tag.title} Config</Heading>
       {specFile.parameters
-        .filter((param: Parameter) => param.tags[0] === tag.id)
-        .map((parameter: Parameter) => {
-          tocList.push({ text: parameter.id, link: `#${parameter.id}`, level: 3 })
+        .filter((param: Parameter) => param.tags && param.tags[0] === tag.id)
+        .map((parameter: Parameter, id: number) => {
+          tocList.push({ id: `${id}`, text: parameter.id, link: `#${parameter.id}`, level: 3 })
           return <Info parameter={parameter} />
         })}
     </div>
   )
 })
 
-export default function Config() {
+const Config = () => {
+  const editLink = newEditLink('supabase/supabase/blob/master/apps/docs/spec/cli_v1_config.yaml')
+
   return (
-    <>
-      <Head>
-        <title>Supabase CLI config</title>
-      </Head>
-      <MainSkeleton menuId={MenuId.Cli}>
-        <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
-          <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
-            <div className="w-full prose">
-              <h1>CLI configuration</h1>
-              <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
-              <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-              <div>{content}</div>
-            </div>
-          </div>
-          <GuidesTableOfContents
-            overrideToc={tocList}
-            className={cn(
-              'col-span-3 self-start',
-              'hidden md:block md:col-span-3',
-              'sticky top-[calc(var(--header-height,40px)+2rem)]',
-              'max-h-[calc(100vh-60px-5rem)]'
-            )}
-          />
-        </div>
-      </MainSkeleton>
-    </>
+    <GuideTemplate meta={meta} editLink={editLink}>
+      <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
+      <div>{content}</div>
+    </GuideTemplate>
   )
 }
 
@@ -81,7 +66,7 @@ function Info({ parameter }: { parameter: Parameter }) {
                   <tr>
                     <td>{parameter.id}</td>
                     <td>{parameter.default ? parameter.default.toString() : 'None'}</td>
-                    <td>{parameter.required.toString()}</td>
+                    <td>{parameter.required !== undefined && parameter.required.toString()}</td>
                   </tr>
                 </tbody>
               </table>
@@ -116,3 +101,6 @@ function Info({ parameter }: { parameter: Parameter }) {
     </div>
   )
 }
+
+export default Config
+export { generateMetadata }