Merge pull request #348 from storybookjs/sidnioulz/external-framework-consolidation

External framework consolidation

Author: kylegach

apps/frontpage/components/docs/mdx/community-renderers.tsx

@@ -0,0 +1,83 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export function CommunityRenderers() {
+  return (
+    <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <Card
+        href="https://analogjs.org/docs/integrations/storybook"
+        logo="logo-analog.svg"
+        title="Analog"
+        subtitle="with Vite"
+      />
+      <Card
+        href="https://storybook.nuxtjs.org/"
+        logo="logo-nuxt.svg"
+        title="Nuxt"
+        subtitle="with Vite"
+      />
+      <Card
+        href="https://github.com/solidjs-community/storybook"
+        logo="logo-solidjs.svg"
+        title="SolidJS"
+        subtitle="with Vite"
+      />
+      <Card
+        href="https://storybook.rsbuild.dev/guide/framework/react.html"
+        logo="logo-react.svg"
+        title="React"
+        subtitle="with Rspack / Rsbuild"
+      />
+      <Card
+        href="https://storybook.rsbuild.dev/guide/framework/vue.html"
+        logo="logo-vue.svg"
+        title="Vue"
+        subtitle="with Rspack / Rsbuild"
+      />
+      <Card
+        href="https://storybook.rsbuild.dev/guide/framework/web-components.html"
+        logo="logo-web-components.svg"
+        title="Web Components"
+        subtitle="with Rspack / Rsbuild"
+      />
+    </div>
+  );
+}
+
+function Card({
+  href,
+  logo,
+  title,
+  subtitle,
+}: {
+  href: string;
+  logo: string;
+  title: string;
+  subtitle?: string;
+}) {
+  return (
+    <Link
+      className="flex h-20 items-center gap-3 rounded-md border border-slate-200 pl-5 transition-all hover:-translate-y-px hover:border-slate-300 dark:border-slate-700 dark:hover:border-slate-600"
+      href={href}
+    >
+      <Image
+        alt=""
+        height="28"
+        src={`/images/logos/renderers/${logo}`}
+        width="28"
+      />
+      {subtitle ? (
+        <div>
+          <p className="text-md font-bold text-black dark:text-white">
+            {title}
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {subtitle}
+          </p>
+        </div>
+      ) : (
+        <p className="text-md font-bold text-black dark:text-white">{title}</p>
+      )}
+    </Link>
+  );
+}

apps/frontpage/components/docs/mdx/home-renderers.tsx

@@ -14,6 +14,14 @@ export function HomeRenderers({ activeVersion }: HomeRenderersProps) {
         logo="logo-nextjs.svg"
         title="Next.js"
       />
+      {Number(activeVersion.id) >= 8.5 ? (
+        <Card
+          href="/docs/get-started/frameworks/nextjs-vite/?renderer=react"
+          logo="logo-nextjs.svg"
+          subtitle="with Vite"
+          title="Next.js"
+        />
+      ) : null}
       <Card
         href="/docs/get-started/frameworks/react-vite/?renderer=react"
         logo="logo-react.svg"

apps/frontpage/components/docs/mdx/index.tsx

@@ -1,5 +1,6 @@
 export { A } from './a';
 export { CodeSnippets } from './code-snippets';
+export { CommunityRenderers } from './community-renderers';
 export { FeatureSnippets } from './feature-snippets';
 export { HomeConcepts } from './home-concepts';
 export { HomeRenderers } from './home-renderers';

apps/frontpage/lib/get-page.tsx

@@ -6,6 +6,7 @@ import type { ReactNode, ReactElement } from 'react';
 import {
   A,
   CodeSnippets,
+  CommunityRenderers,
   FeatureSnippets,
   HomeConcepts,
   HomeRenderers,
@@ -83,6 +84,7 @@ export const getPageData = async (
       CodeSnippets: (props) => (
         <CodeSnippets activeVersion={activeVersion} {...props} />
       ),
+      CommunityRenderers,
       FeatureSnippets,
       FrameworkSupportTable: (props: { children: ReactNode }) => (
         <div {...props}>{props.children}</div>