feat: Add deployment/ci federated content and data (#48041)

apps/docs/.gitignore

@@ -46,6 +46,7 @@ public/docs/
 /content/guides/graphql.mdx
 /content/guides/deployment/terraform.mdx
 /content/guides/deployment/terraform/tutorial.mdx
+/content/guides/deployment/ci/
 
 # Downloaded TypeDoc dumps under spec/reference/<lib>/<ver>/. Regenerated by
 # `cd apps/docs/spec && make download.tsdoc.v2`. Hand-authored files in the

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

@@ -0,0 +1,26 @@
+import { GuideTemplate } from '~/features/docs/GuidesMdx.template'
+import {
+  genGuideMeta,
+  genGuidesStaticParams,
+  getGuidesMarkdown,
+} from '~/features/docs/GuidesMdx.utils'
+import { getEmptyArray } from '~/features/helpers.fn'
+import { IS_DEV } from '~/lib/constants'
+
+type Params = { slug?: string[] }
+
+const ActionDocs = async (props: { params: Promise<Params> }) => {
+  const params = await props.params
+  const slug = ['deployment', 'ci', ...(params.slug ?? [])]
+  const data = await getGuidesMarkdown(slug)
+
+  return <GuideTemplate {...data!} />
+}
+
+const generateStaticParams = !IS_DEV ? genGuidesStaticParams('deployment/ci') : getEmptyArray
+const generateMetadata = genGuideMeta((params: { slug?: string[] }) =>
+  getGuidesMarkdown(['deployment', 'ci', ...(params.slug ?? [])])
+)
+
+export default ActionDocs
+export { generateStaticParams, generateMetadata }

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

@@ -1,134 +0,0 @@
-import { notFound } from 'next/navigation'
-import { relative } from 'node:path'
-import rehypeSlug from 'rehype-slug'
-
-import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template'
-import { genGuideMeta, removeRedundantH1 } from '~/features/docs/GuidesMdx.utils'
-import { getGitHubFileContents } from '~/lib/octokit'
-import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
-import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
-import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
-import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
-import { SerializeOptions } from '~/types/next-mdx-remote-serialize'
-
-export const dynamicParams = false
-
-// We fetch these docs at build time from an external repo
-const org = 'supabase'
-const repo = 'setup-cli'
-const branch = 'gh-pages'
-const docsDir = 'docs'
-const externalSite = 'https://supabase.github.io/setup-cli'
-
-// Each external docs page is mapped to a local page
-const pageMap = [
-  {
-    slug: 'generating-types',
-    meta: {
-      title: 'Generate types using GitHub Actions',
-      description: 'End-to-end type safety across client, server, and database.',
-      subtitle: 'End-to-end type safety across client, server, and database.',
-      tocVideo: 'VSNgAIObBdw',
-    },
-    remoteFile: 'generating-types.md',
-  },
-  {
-    slug: 'testing',
-    meta: {
-      title: 'Automated testing using GitHub Actions',
-      description: 'Run your tests when you or your team make changes.',
-      subtitle: 'Run your tests when you or your team make changes.',
-    },
-    remoteFile: 'testing.md',
-  },
-  {
-    slug: 'backups',
-    meta: {
-      title: 'Automated backups using GitHub Actions',
-      description: 'Backup your database on a regular basis.',
-      subtitle: 'Backup your database on a regular basis.',
-    },
-    remoteFile: 'backups.md',
-  },
-]
-
-type Params = { slug: string }
-
-const ActionDocs = async (props: { params: Promise<Params> }) => {
-  const params = await props.params
-  const { meta, ...data } = await getContent(params)
-
-  const options = {
-    mdxOptions: {
-      remarkPlugins: [remarkMkDocsAdmonition, remarkPyMdownTabs, [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) {
-    notFound()
-  }
-
-  const { remoteFile, meta } = page
-
-  const editLink = newEditLink(`${org}/${repo}/blob/${branch}/${docsDir}/${remoteFile}`)
-
-  const content = removeRedundantH1(
-    await getGitHubFileContents({ org, repo, path: `${docsDir}/${remoteFile}`, branch })
-  )
-
-  return {
-    pathname: `/guides/deployment/ci/${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 ActionDocs
-export { generateMetadata, generateStaticParams }

apps/docs/scripts/federated-content/fetch-federated-content.ts

@@ -125,6 +125,8 @@ async function fetchPage(source: FederatedContentSource, page: FederatedPage): P
     editLink: `${source.org}/${source.repo}/blob/${source.branch}/${remotePath(source, page)}`,
   }
   if (page.meta.subtitle) frontmatter.subtitle = page.meta.subtitle
+  if (page.meta.description) frontmatter.description = page.meta.description
+  if (page.meta.tocVideo) frontmatter.tocVideo = page.meta.tocVideo
 
   return matter.stringify(`${content}\n`, frontmatter)
 }

apps/docs/scripts/federated-content/sources/ci.ts

@@ -0,0 +1,46 @@
+import type { FederatedContentSource } from '../types'
+
+// We fetch these docs at build time from an external repo
+const ci: FederatedContentSource = {
+  section: 'deployment/ci',
+  org: 'supabase',
+  repo: 'setup-cli',
+  branch: 'gh-pages',
+  docsDir: 'docs',
+  externalSite: 'https://supabase.github.io/setup-cli',
+  pageMap: [
+    {
+      slug: 'generating-types',
+      meta: {
+        title: 'Generate types using GitHub Actions',
+        description: 'End-to-end type safety across client, server, and database.',
+        subtitle: 'End-to-end type safety across client, server, and database.',
+        tocVideo: 'VSNgAIObBdw',
+      },
+      remoteFile: 'generating-types.md',
+      dropLeadingHeading: true,
+    },
+    {
+      slug: 'testing',
+      meta: {
+        title: 'Automated testing using GitHub Actions',
+        description: 'Run your tests when you or your team make changes.',
+        subtitle: 'Run your tests when you or your team make changes.',
+      },
+      remoteFile: 'testing.md',
+      dropLeadingHeading: true,
+    },
+    {
+      slug: 'backups',
+      meta: {
+        title: 'Automated backups using GitHub Actions',
+        description: 'Backup your database on a regular basis.',
+        subtitle: 'Backup your database on a regular basis.',
+      },
+      remoteFile: 'backups.md',
+      dropLeadingHeading: true,
+    },
+  ],
+}
+
+export default ci

apps/docs/scripts/federated-content/types.ts

@@ -7,6 +7,8 @@ export interface FederatedPage {
   meta: {
     title: string
     subtitle?: string
+    description?: string
+    tocVideo?: string
   }
   /** Path of the file in the remote repo, relative to `docsDir`. */
   remoteFile: string