From 19044b8edf8c8058c78f71a4297da79958ab8d8d Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 5 Mar 2024 12:54:09 -0700
Subject: [PATCH] Make content conditional on required renderer

---
 docs/get-started/nextjs.md    | 20 ++++++++++++++++++++
 docs/get-started/vue3-vite.md | 20 ++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/docs/get-started/nextjs.md b/docs/get-started/nextjs.md
index 126a22c98c1..14b9a0bbb04 100644
--- a/docs/get-started/nextjs.md
+++ b/docs/get-started/nextjs.md
@@ -2,6 +2,8 @@
 title: Storybook for Next.js
 ---
 
+export const SUPPORTED_RENDERER = 'react';
+
 Storybook for Next.js is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications. It includes:
 
 - 🔀 Routing
@@ -11,6 +13,20 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
 - 🎛 Webpack & Babel config
 - 💫 and more!
 
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for Next.js is only supported in [React](?renderer=react) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
 ## Requirements
 
 - Next.js ≥ 13.5
@@ -933,3 +949,7 @@ Props to pass to every instance of `next/image`. See [next/image docs](https://n
 Type: `string`
 
 The absolute path to the `next.config.js` file. This is necessary if you have a custom `next.config.js` file that is not in the root directory of your project.
+
+<!-- End supported renderers -->
+
+</If>
diff --git a/docs/get-started/vue3-vite.md b/docs/get-started/vue3-vite.md
index 25d6a0dcf50..0418e80a7d5 100644
--- a/docs/get-started/vue3-vite.md
+++ b/docs/get-started/vue3-vite.md
@@ -2,6 +2,8 @@
 title: Storybook for Vue & Vite
 ---
 
+export const SUPPORTED_RENDERER = 'vue';
+
 Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Vite](https://vitejs.dev/). It includes:
 
 - 🏎️ Pre-bundled for performance
@@ -9,6 +11,20 @@ Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes
 - 🧠 Comprehensive docgen
 - 💫 and more!
 
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
 ## Requirements
 
 - Vue ≥ 3
@@ -306,3 +322,7 @@ Default: `'vue-docgen-api'`
 Since: `8.0`
 
 Choose which docgen tool to use when generating controls for your components. See [Using `vue-component-meta`](#using-vue-component-meta) for more information.
+
+<!-- End supported renderers -->
+
+</If>