fix: updated guides data out of mdx into separate tsx file (#42751)

2026-05-07 06:27:16 +08:00 · 2026-02-12 12:45:25 -07:00
parent 3a98d32b6e
commit e99ea31e0a
5 changed files with 112 additions and 98 deletions
--- a/apps/docs/content/guides/ai.mdx
+++ b/apps/docs/content/guides/ai.mdx
@@ -31,7 +31,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
 {/* <!-- vale off --> */}

 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {examples.map((x) => (
+  {aiExamples.map((x) => (
    <div className="col-span-4" key={x.href}>
      <Link href={x.href} passHref>
        <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
@@ -42,40 +42,6 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
  ))}
 </div>

-export const examples = [
-  {
-    name: 'Headless Vector Search',
-    description: 'A toolkit to perform vector similarity search on your knowledge base embeddings.',
-    href: '/guides/ai/examples/headless-vector-search',
-  },
-  {
-    name: 'Image Search with OpenAI CLIP',
-    description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
-    href: '/guides/ai/examples/image-search-openai-clip',
-  },
-  {
-    name: 'Hugging Face inference',
-    description: 'Generate image captions using Hugging Face.',
-    href: '/guides/ai/examples/huggingface-image-captioning',
-  },
-  {
-    name: 'OpenAI completions',
-    description: 'Generate GPT text completions using OpenAI in Edge Functions.',
-    href: '/guides/ai/examples/openai',
-  },
-  {
-    name: 'Building ChatGPT Plugins',
-    description: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.',
-    href: '/guides/ai/examples/building-chatgpt-plugins',
-  },
-  {
-    name: 'Vector search with Next.js and OpenAI',
-    description:
-      'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
-    href: '/guides/ai/examples/nextjs-vector-search',
-  },
-]
-
 {/* <!-- vale on --> */}

 ## Integrations
@@ -83,7 +49,7 @@ export const examples = [
 {/* <!-- vale off --> */}

 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {integrations.map((x) => (
+  {aiIntegrations.map((x) => (
    <div className="col-span-4" key={x.href}>
      <Link href={x.href} passHref>
        <GlassPanel title={x.name}>{x.description}</GlassPanel>
@@ -92,38 +58,6 @@ export const examples = [
  ))}
 </div>

-export const integrations = [
-  {
-    name: 'OpenAI',
-    description:
-      'OpenAI is an AI research and deployment company. Supabase provides a simple way to use OpenAI in your applications.',
-    href: '/guides/ai/examples/building-chatgpt-plugins',
-  },
-  {
-    name: 'Amazon Bedrock',
-    description:
-      'A fully managed service that offers a choice of high-performing foundation models from leading AI companies.',
-    href: '/guides/ai/integrations/amazon-bedrock',
-  },
-  {
-    name: 'Hugging Face',
-    description:
-      "Hugging Face is an open-source provider of NLP technologies. Supabase provides a simple way to use Hugging Face's models in your applications.",
-    href: '/guides/ai/hugging-face',
-  },
-  {
-    name: 'LangChain',
-    description:
-      'LangChain is a language-agnostic, open-source, and self-hosted API for text translation, summarization, and sentiment analysis.',
-    href: '/guides/ai/langchain',
-  },
-  {
-    name: 'LlamaIndex',
-    description: 'LlamaIndex is a data framework for your LLM applications.',
-    href: '/guides/ai/integrations/llamaindex',
-  },
-]
-
 {/* <!-- vale on --> */}

 ## Case studies
--- a/apps/docs/content/guides/self-hosting.mdx
+++ b/apps/docs/content/guides/self-hosting.mdx
@@ -34,7 +34,7 @@ The fastest and recommended way to self-host Supabase is using Docker.
 There are several other ways to deploy Supabase with the help of community-driven projects. These projects may be outdated and are seeking active maintainers. If you're interested in maintaining one of these projects, [contact the Community team](/open-source/contributing/supasquad).

 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {community.map((x) => (
+  {selfHostingCommunity.map((x) => (
    <div className="md:col-span-6 xl:col-span-3" key={x.href}>
      <Link href={x.href} passHref>
        <GlassPanel
@@ -54,19 +54,6 @@ There are several other ways to deploy Supabase with the help of community-drive

 </div>

-export const community = [
-  {
-    name: 'Kubernetes',
-    description: 'Helm charts to deploy a Supabase on Kubernetes.',
-    href: 'https://github.com/supabase-community/supabase-kubernetes',
-  },
-  {
-    name: 'Traefik',
-    description: 'A self-hosted Supabase setup with Traefik as a reverse proxy.',
-    href: 'https://github.com/supabase-community/supabase-traefik',
-  },
-]
-
 ## About self-hosting

 Self-hosting is a good fit if you need full control over your data, have compliance requirements that prevent using managed services, or want to run Supabase in an isolated environment.
--- a/apps/docs/content/guides/storage.mdx
+++ b/apps/docs/content/guides/storage.mdx
@@ -71,7 +71,7 @@ Specialized storage for vector embeddings and similarity search operations. Desi
 Check out all of the Storage [templates and examples](https://github.com/supabase/supabase/tree/master/examples/storage) in our GitHub repository.

 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {examples.map((x) => (
+  {storageExamples.map((x) => (
    <div className="col-span-12" key={x.href}>
      <Link href={x.href} passHref>
        <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
@@ -82,15 +82,6 @@ Check out all of the Storage [templates and examples](https://github.com/supabas
  ))}
 </div>

-export const examples = [
-  {
-    name: 'Resumable Uploads with Uppy',
-    description:
-      'Use Uppy to upload files to Supabase Storage using the TUS protocol (resumable uploads).',
-    href: 'https://github.com/supabase/supabase/tree/master/examples/storage/resumable-upload-uppy',
-  },
-]
-
 ## Resources

 Find the source code and documentation in the Supabase GitHub repository.
--- a/apps/docs/features/docs/MdxBase.tsx
+++ b/apps/docs/features/docs/MdxBase.tsx
@@ -1,14 +1,14 @@
+import { preprocessMdxWithDefaults } from '~/features/directives/utils'
+import { components } from '~/features/docs/MdxBase.shared'
+import { guidesData } from '~/lib/guidesData'
+import { SerializeOptions } from '~/types/next-mdx-remote-serialize'
+import { isFeatureEnabled } from 'common'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { type ComponentProps } from 'react'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'

-import { isFeatureEnabled } from 'common'
-import { preprocessMdxWithDefaults } from '~/features/directives/utils'
-import { components } from '~/features/docs/MdxBase.shared'
-import { SerializeOptions } from '~/types/next-mdx-remote-serialize'
-
 const mdxOptions: SerializeOptions = {
  blockJS: false,
  mdxOptions: {
@@ -40,7 +40,7 @@ const MDXRemoteBase = async ({
  } = mdxOptions

  const finalOptions = {
-    scope: { isFeatureEnabled },
+    scope: { isFeatureEnabled, ...guidesData },
    ...mdxOptions,
    ...otherOptions,
    mdxOptions: {
--- a/apps/docs/lib/guidesData.ts
+++ b/apps/docs/lib/guidesData.ts
@@ -0,0 +1,102 @@
+/**
+ * Data used in guide MDX files.
+ *
+ * This data is passed to MDX files via scope to avoid using `export const`
+ * within MDX content, which is not supported by next-mdx-remote.
+ *
+ * @see https://github.com/hashicorp/next-mdx-remote#import--export
+ */
+
+export const guidesData = {
+  // apps/docs/content/guides/self-hosting.mdx
+  selfHostingCommunity: [
+    {
+      name: 'Kubernetes',
+      description: 'Helm charts to deploy a Supabase on Kubernetes.',
+      href: 'https://github.com/supabase-community/supabase-kubernetes',
+    },
+    {
+      name: 'Traefik',
+      description: 'A self-hosted Supabase setup with Traefik as a reverse proxy.',
+      href: 'https://github.com/supabase-community/supabase-traefik',
+    },
+  ],
+
+  // apps/docs/content/guides/ai.mdx
+  aiExamples: [
+    {
+      name: 'Headless Vector Search',
+      description:
+        'A toolkit to perform vector similarity search on your knowledge base embeddings.',
+      href: '/guides/ai/examples/headless-vector-search',
+    },
+    {
+      name: 'Image Search with OpenAI CLIP',
+      description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
+      href: '/guides/ai/examples/image-search-openai-clip',
+    },
+    {
+      name: 'Hugging Face inference',
+      description: 'Generate image captions using Hugging Face.',
+      href: '/guides/ai/examples/huggingface-image-captioning',
+    },
+    {
+      name: 'OpenAI completions',
+      description: 'Generate GPT text completions using OpenAI in Edge Functions.',
+      href: '/guides/ai/examples/openai',
+    },
+    {
+      name: 'Building ChatGPT Plugins',
+      description: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.',
+      href: '/guides/ai/examples/building-chatgpt-plugins',
+    },
+    {
+      name: 'Vector search with Next.js and OpenAI',
+      description:
+        'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
+      href: '/guides/ai/examples/nextjs-vector-search',
+    },
+  ],
+
+  aiIntegrations: [
+    {
+      name: 'OpenAI',
+      description:
+        'OpenAI is an AI research and deployment company. Supabase provides a simple way to use OpenAI in your applications.',
+      href: '/guides/ai/examples/building-chatgpt-plugins',
+    },
+    {
+      name: 'Amazon Bedrock',
+      description:
+        'A fully managed service that offers a choice of high-performing foundation models from leading AI companies.',
+      href: '/guides/ai/integrations/amazon-bedrock',
+    },
+    {
+      name: 'Hugging Face',
+      description:
+        "Hugging Face is an open-source provider of NLP technologies. Supabase provides a simple way to use Hugging Face's models in your applications.",
+      href: '/guides/ai/hugging-face',
+    },
+    {
+      name: 'LangChain',
+      description:
+        'LangChain is a language-agnostic, open-source, and self-hosted API for text translation, summarization, and sentiment analysis.',
+      href: '/guides/ai/langchain',
+    },
+    {
+      name: 'LlamaIndex',
+      description: 'LlamaIndex is a data framework for your LLM applications.',
+      href: '/guides/ai/integrations/llamaindex',
+    },
+  ],
+
+  // apps/docs/content/guides/storage.mdx
+  storageExamples: [
+    {
+      name: 'Resumable Uploads with Uppy',
+      description:
+        'Use Uppy to upload files to Supabase Storage using the TUS protocol (resumable uploads).',
+      href: 'https://github.com/supabase/supabase/tree/master/examples/storage/resumable-upload-uppy',
+    },
+  ],
+}