Merge branch 'main' into issue-284

Author: kylegach

apps/frontpage/app/releases/[slug]/page.tsx

@@ -29,6 +29,8 @@ export default async function Page({ params: { slug } }: PageProps) {
 
   const page = await getRelease(slug);
 
+  const collator = new Intl.Collator('en', { numeric: true });
+
   return (
     <>
       <Header
@@ -41,7 +43,7 @@ export default async function Page({ params: { slug } }: PageProps) {
             <DocsMainNav />
             <div className="flex flex-col pt-4 mt-4 border-t border-zinc-200">
               {releases
-                .sort((a, b) => b.localeCompare(a))
+                .sort((a, b) => collator.compare(b, a))
                 .map((release) => (
                   <Link
                     className={cn(

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/img.tsx

@@ -15,9 +15,7 @@ interface ImgProps extends ImageProps {
 }
 
 export function Img({ src, alt, activeVersion }: ImgProps) {
-  const pathWithoutRoot = src
-    ?.replace('../../_assets/', '')
-    .replace('../_assets/', '');
+  const pathWithoutRoot = src?.replace(/^(?:\.\.\/)+_assets\//, '');
   const path = `/docs-assets/${activeVersion}/${pathWithoutRoot ?? ''}`;
   const localPath = `public${path}`;
 

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/components/home/hero/index.tsx

@@ -9,6 +9,7 @@ import { motion } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@storybook/icons';
 import { Container } from '@repo/ui';
+import { latestVersion } from '@repo/utils';
 import { Manager } from '../manager';
 import { InitCommand } from './init-command';
 import { Chrome } from './chrome';
@@ -122,7 +123,7 @@ export function Hero({
                 className="md:hidden"
                 href="https://github.com/storybookjs/storybook/releases"
               >
-                <div className="text-md text-white">v10</div>
+                <div className="text-md text-white">v{latestVersion.id.split('.')[0]}</div>
                 <div className="text-sm text-white/60">Latest version</div>
               </a>
               <div>

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>