From 078dfe66072c4ca780bbc99d4ad4b13b1f44fe7e Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 4 Sep 2024 00:37:57 +0400 Subject: [PATCH] docs(www): Open in v0 docs (#4734) * feat(www): open in v0 * feat: update copy * fix: sidebar link * fix(tests): snapshots --- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 18 ++++----- apps/www/components/open-in-v0-cta.tsx | 35 ++++++++++++++++++ apps/www/components/toc.tsx | 2 +- apps/www/config/docs.ts | 6 +++ apps/www/content/docs/v0.mdx | 30 +++++++++++++++ apps/www/public/images/open-in-v0-dark.png | Bin 0 -> 3289 bytes apps/www/public/images/open-in-v0.png | Bin 0 -> 3644 bytes .../registry-resolve-items-tree.test.ts.snap | 2 - 8 files changed, 80 insertions(+), 13 deletions(-) create mode 100644 apps/www/components/open-in-v0-cta.tsx create mode 100644 apps/www/content/docs/v0.mdx create mode 100644 apps/www/public/images/open-in-v0-dark.png create mode 100644 apps/www/public/images/open-in-v0.png diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index d33ce0523..824de6563 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -11,6 +11,7 @@ import { siteConfig } from "@/config/site" import { getTableOfContents } from "@/lib/toc" import { absoluteUrl, cn } from "@/lib/utils" import { Mdx } from "@/components/mdx-components" +import { OpenInV0Cta } from "@/components/open-in-v0-cta" import { DocsPager } from "@/components/pager" import { DashboardTableOfContents } from "@/components/toc" import { badgeVariants } from "@/registry/new-york/ui/badge" @@ -135,17 +136,14 @@ export default async function DocPage({ params }: DocPageProps) { - {doc.toc && ( -
-
- -
- -
- -
+
+
+ + {doc.toc && } + +
- )} +
) } diff --git a/apps/www/components/open-in-v0-cta.tsx b/apps/www/components/open-in-v0-cta.tsx new file mode 100644 index 000000000..5ad3c5d43 --- /dev/null +++ b/apps/www/components/open-in-v0-cta.tsx @@ -0,0 +1,35 @@ +import Link from "next/link" + +import { cn } from "@/lib/utils" +import { Button } from "@/registry/new-york/ui/button" + +export function OpenInV0Cta({ className }: React.ComponentProps<"div">) { + return ( +
+
+ Bring your app built with shadcn to life on Vercel +
+
Trusted by OpenAI, Sonos, Chick-fil-A, and more.
+
+ Vercel provides tools and infrastructure to deploy apps and features at + scale. +
+ + + Deploy to Vercel + +
+ ) +} diff --git a/apps/www/components/toc.tsx b/apps/www/components/toc.tsx index 29838f03b..ffbd5b2f7 100644 --- a/apps/www/components/toc.tsx +++ b/apps/www/components/toc.tsx @@ -26,7 +26,7 @@ export function DashboardTableOfContents({ toc }: TocProps) { const activeHeading = useActiveItem(itemIds) const mounted = useMounted() - if (!toc?.items || !mounted) { + if (!toc?.items?.length) { return null } diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 48df75f2f..aa4ebcc0b 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -77,6 +77,12 @@ export const docsConfig: DocsConfig = { href: "/docs/components/typography", items: [], }, + { + title: "Open in v0", + href: "/docs/v0", + items: [], + label: "New", + }, { title: "Figma", href: "/docs/figma", diff --git a/apps/www/content/docs/v0.mdx b/apps/www/content/docs/v0.mdx new file mode 100644 index 000000000..9d6273870 --- /dev/null +++ b/apps/www/content/docs/v0.mdx @@ -0,0 +1,30 @@ +--- +title: Open in v0 +description: Open components in v0 for customization. +--- + +Every component on ui.shadcn.com is editable on [v0 by Vercel](https://v0.dev). This allows you to easily customize the components in natural language and paste into your app. + + + Open in v0 + Open in v0 + Open in v0 + + +To use v0, sign-up for a free [Vercel account here](https://vercel.com/signup?utm_source=shad&utm_medium=web&utm_campaign=docs_cta_signup). In addition to v0, this gives you free access to Vercel's frontend cloud platform by the creators of Next.js, where you can deploy and host your project for free. + +Learn more about getting started with [Vercel here](https://vercel.com/docs/getting-started-with-vercel?utm_source=shadcn_site&utm_medium=web&utm_campaign=docs_cta_about_vercel). + +Learn more about getting started with [v0 here](https://v0.dev/faq). diff --git a/apps/www/public/images/open-in-v0-dark.png b/apps/www/public/images/open-in-v0-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..7d221046c33418b1d7aee250ea47ec2898a3438d GIT binary patch literal 3289 zcmeHJeK?fq8h^)V8cd8-J`$4^veKJz#Q2)Zl+RHjo$-+oBOOLe*ge8v@|8t}UgRU? zW3r^Rno7uQiJE3sVpv&W4QlL=Ml>;JraITTuJgz4b#?wb*FOKe@AL8d-PirQ@8^E* ztb@b@>y&kr0RUL%;_T!F0BaxsfRm7L*$Osoh$j264!V02l$2DYQmJf~oSclu<2yP! za&vQ6R#pT8fw}okE|<&UaB6F75eUTS=xAG884y&=HZ(M(r>7?*B=q$3KoFFjo$c-IO&|~)92~T? zv@|s}100tM06=BL#c7ZCH@^rwQ)C_h^vV^cCR0KF`(-0&@g@EvvRm4s?(Or%HGVR9afl)wMrm-B4=f0c)I{42y>t?X1# zF%|i^QmPz~0vAr~@1&~lT*An8`_r*R%^45~?W^82XZ|`B5t*Za;bU3 zh(<7MHj)vmO|0ed^vpIDIykkJb3cz%@83s)p#|;?ZR=a{lcqEThSP(@o(e(nl30W# ztF=g)DI295edJAgi!vPyGvM6s%s=$)*A&0jN(^P|RSzxxo_`@rCa9@kR+<%z6NYl;FL^h*cfCMHP5wd#t> z0J7NwiKVBWId%%&egmL`!wlJG=EPuzSN(PX!?D`R0hHJ4<|qK{2+cJBW5`?%3D^Lj zDXk{5{kTH_9-6I^0|_vIeCyojgQ6{h*4CM~;|95DK{xZ$uJ=M@l*}qSkd&T!{$*^v=IkDE^J0(0k@vOt_kpT zoMmaWnKW~RJn*=-7=&Xu$pi>?)NS!p+(1O*rJY<}qI7KRH^c19$5QdC>~|F!;=2Xo zk=>=cdMdGChqpaFm;?yMJTL0ZU%k#&!QZcytrPk0&4%H1fu}Qeq{aybOTSQt_xVa7mTOwV`ldHnez8`(z8E%Vlbexgx-2nU59UR+pFY!mzy8V)nsN@mvu5`{!pI^wctDnRe6YmqtI*0vwAosTxsacaD&t|DqZ^>%nmbqAJ zUpz#7I)8EtWrxSSxTXC%e^j-Zcysv-*~H88=`xw?w~FBaR{!?=>Ukn{)!;xwQCEze z6|KIITV0-T<~fbWD`oP@e&0=9eUxPETA)skFB7tq+H;1?G$_C@5-SU+ z@LJOwH|_X%3bn0l_LXVbYjI<;WNy#SNCZ&JF7;(ujavu2$TXPB+jP#7qp2y-&)KxD*=Asbs;SgG6{*+ARiRb?P!`HY zVa|avvyX_bv;YmB@VwB(^?0~dTk-jS+P8I(+Fta|>R~uG;R7&k`m%AtyMZbU8WA-3 z_X|TK)4KafaT`o=ht*f4`nPObImDXO+acRTG~+au=)0uR7Zh1mXYPZPu=FYoGLxT_ zbfzv}$IGgeGF#izWTnIOOwYZVoMKz%>adrc{Dr|GJ zCS#bMtYKF|vet`;BwwxK%{P4OpM+X-966@!UT`?hzer}qkRgMc;LfLr{ECzhHxHdy zT9qWUCOUMi95rK~n+t0`;`W%w6TipZF0U``tkQJkk z99fa?BvHG~+|GJs41HkK+{lUvNW_(0Kj&9S^{sFzPKG>6CXVQA)5!XKu{Pv&*OA0_ zWj-56=f44OZ!w-vK8CfHNQtsCn{%iW2_g_Cyd%Sq7=WJLZZvaA?n6F=;$J!~#| zCw@P#rN~A;v_QtS#@Haof7L@pw2}(F?EIOh6UquAW#O4Y3xu-k&d2=T$yg4pDrWRFYY)(*$roi&a>MvTV+H~-e>=AIAvUG?ge&T|P3xY`sj*GL;kwIDr zItI*Vga}tvJk+8szH0J&0JBFffNa#gnB0vo^$l`%0c1S_l%nDj=+SNL-9}sn)0U)-hUsUXZ+Rj{83}|S4a3q>iATD&K~q{QTE*%KP8v0 XB6Qhf974oX<#QJT(W!B7Q0l(`XHzMa literal 0 HcmV?d00001 diff --git a/apps/www/public/images/open-in-v0.png b/apps/www/public/images/open-in-v0.png new file mode 100644 index 0000000000000000000000000000000000000000..5746e7e2b99ac16cb5bc1b395e3fa04c4ee4df93 GIT binary patch literal 3644 zcmeHKYdln2AD&DxG?VG3rU>D{rwdb6h=o!%gV|C002SI+}wO>YHDa`sJgn^!NDObD=RE4%+}TxjYj9^=d;;t z6B82>iPYWQ-O8`GMPWKR3-h3y1zR}TX)s10hgkHg!h&sP^)hJF*fc%EF z5**s%nVkp!0ZwZye2oN0Mci`KZuK}@|5xQHjctwtv=Z*8+Cz>K zFl`o`6Oo*VgCa;MvIFmjaw|A>R$2wL*hucNZNLggT;CtKb#pQ_odJQUA_(IRs%kzK zZ~4vXTs=5?Fd9KPGt${{vYiN{eQ|&M>4%+CQub@rWQAHitzW+`W#;jfO0BhY=({mLs}oQHF-wj{u~5 z^iopPkLa;U&0cuz1a$xphXH{|0kUcj7=pFu82tdk5R?aKGHe%T071Fi%R*7U2YlGr z&4cqbdOHVU=)t3^Ak0({ens1!Q)eweLfCSEG&E}*4z2>CELdyMgK^Lh1mz6`B{l^) zHW{IO-(1I?Kgww%YxeE7(H0m~Lwi!4Y!#L8+9@O_wBRVT~Zt#wjF86 z2@K^m=RD)(zV`h1>1VS!%jRf`+BY4OFTp0U5_)tDk?Mq+4A(6gm}rSw4CN2|w>clX z%Sk|3a9n31wr6lUi~8so7yxO}p6kM*nq}EMu9elb&dP5&>547R!`8P5g>55$=p_8v z5LN8q(-xpmd-{b7N_ygRFv~afeUk&T%isQ%@Uf-?es9AlmHp!;Uz58EHG%(PzR7Bc z$v9a7T%Lh+DMSze>5mtj1Of2RqaW0kDmXnu7wL$YnnQ|3oUbEg+-{COe<*5h;@jPh z>!r@5EA!mwC- zVPUyksg9DGBWh*L^$L=@x@7ZPsCz)en&}xnFQsu`y*Xf>v8)2Z)=G4BDR5zh9!Pb& za)`-px%{j%u*-Q1I|r3xW+r?7xykWz*{AEd*1ebal+^T&;`oeLwwd(lh2(F^yVC|s zAx7Sid(4+*g965g8y&|Yv3B(V%?ziyDzv7X%cqI%*o;VEFmVQ-5C zp0wO2>7Gj5T`L(!ss zJybl@w6SHvZJKkVL0D`U39(#KOPsg50gaTfZ1p3tPz_W!xv3%-_ri+q_{rcd|mMN1Y+s9bzn>pvI@m9qFCLPeQP%etFUD85d;`tU$D4M9SpKa#^O&ijSiF}2sByX+d*i0I!+!+ zLB|nXB`6k!pgmH?^GFcw}p@yaWMqCh6H z;84~-!?LZ!DO>h#trejrZ+ipMbYmDGy+h!3?ANASVKw>#ZqWV`C_=f@2Jm3Iv>1rW zF6Cc3EtwKW$CT;mwarxbO?SOoiypLto<+ES`FCsX`aJXeXC|C(j0U737wQa{kgxZ> z(AdR2-xsEYKlarGh?A#==5?qb*V&aM?(9_c%G<(Ncf+$sEG{%umpdDuBM45?F#ob) ztW63qhxi!gizn1la}z!p^;NnR>YZ|mbn}{$K}_>SxR?0SY~w;0zhLYaAbl|~w|Ugi=FP_$_q3KsYo_~cIDKx6jxmbU0EhL3 z(MQw59rCOv(0wW1u}C7T6jEpVZ@vY?)H|t<;dHDWX(OR#a;(bpA zJje>AxG;>N12!SJ^kV;E9xf_I3+@dl47k@R(lJ__Gx~XUq{A33h2Kt`c)gMAX&b%! zCK53j9r3rd#`oZ2v5d@0ol9IUOuU!7>ZbF(a)#Xy`>Q=!HB7D?HCSbZTEDm*v3i(X z!7jzW>a4j+!d1-11&2Ii F{tXAUiNpW^ literal 0 HcmV?d00001 diff --git a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap index 5c734cd98..2ea9442db 100644 --- a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap +++ b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap @@ -12,11 +12,9 @@ exports[`registryResolveItemTree > should resolve index 1`] = ` "tailwindcss-animate", "class-variance-authority", "lucide-react", - "", "tailwindcss-animate", "class-variance-authority", "lucide-react", - "", "@radix-ui/react-label", "clsx", "tailwind-merge",