feat(www): code for blocks (#5756)

* feat: update blocks

* fix: scrollbars

* fix: code viewer

* test(shadcn): fix

Author: shadcn

apps/www/__registry__/index.tsx

@@ -1,27 +1,18 @@
 import * as React from "react"
-import { unstable_cache } from "next/cache"
 
 import { getAllBlockIds } from "@/lib/blocks"
 import { BlockDisplay } from "@/components/block-display"
 
-const BLOCKS_WHITELIST_PREFIXES = ["sidebar", "login"]
-
-const getBlocks = unstable_cache(async () => {
-  return (await getAllBlockIds()).filter((name) =>
-    BLOCKS_WHITELIST_PREFIXES.some((prefix) => name.startsWith(prefix))
-  )
-}, ["blocks"])
+import "@/styles/mdx.css"
 
 export default async function BlocksPage() {
-  const blocks = await getBlocks()
+  const blocks = await getAllBlockIds()
 
   return (
     <div className="gap-3 md:flex md:flex-row-reverse md:items-start">
       <div className="grid flex-1 gap-12 md:gap-24 lg:gap-48">
-        {blocks.map((name, index) => (
-          <React.Suspense key={`${name}-${index}`}>
-            <BlockDisplay name={name} />
-          </React.Suspense>
+        {blocks.map((name) => (
+          <BlockDisplay key={name} name={name} />
         ))}
       </div>
     </div>

apps/www/app/(app)/blocks/page.tsx

@@ -1,14 +1,20 @@
+import * as React from "react"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
 import { siteConfig } from "@/config/site"
-import { getAllBlockIds, getBlock } from "@/lib/blocks"
+import { getAllBlockIds } from "@/lib/blocks"
 import { absoluteUrl, cn } from "@/lib/utils"
-import { BlockChunk } from "@/components/block-chunk"
-import { BlockWrapper } from "@/components/block-wrapper"
 import { Style, styles } from "@/registry/registry-styles"
 
 import "@/styles/mdx.css"
+import { getRegistryComponent, getRegistryItem } from "@/lib/registry"
+
+const getCachedRegistryItem = React.cache(
+  async (name: string, style: Style["name"]) => {
+    return await getRegistryItem(name, style)
+  }
+)
 
 export async function generateMetadata({
   params,
@@ -19,23 +25,23 @@ export async function generateMetadata({
   }
 }): Promise<Metadata> {
   const { name, style } = params
-  const block = await getBlock(name, style)
+  const item = await getCachedRegistryItem(name, style)
 
-  if (!block) {
+  if (!item) {
     return {}
   }
 
-  const title = block.name
-  const description = block.description
+  const title = item.name
+  const description = item.description
 
   return {
-    title: `${block.description} - ${block.name}`,
+    title: `${item.name}${item.description ? ` - ${item.description}` : ""}`,
     description,
     openGraph: {
       title,
       description,
       type: "article",
-      url: absoluteUrl(`/blocks/${block.name}`),
+      url: absoluteUrl(`/blocks/${style}/${item.name}`),
       images: [
         {
           url: siteConfig.ogImage,
@@ -76,39 +82,22 @@ export default async function BlockPage({
   }
 }) {
   const { name, style } = params
-  const block = await getBlock(name, style)
+  const item = await getCachedRegistryItem(name, style)
+  const Component = getRegistryComponent(name, style)
 
-  if (!block) {
+  if (!item || !Component) {
     return notFound()
   }
 
-  const Component = block.component
-
-  const chunks = block.chunks?.map((chunk) => ({ ...chunk }))
-  delete block.component
-  block.chunks?.map((chunk) => delete chunk.component)
-
   return (
     <>
-      {/* <ThemesStyle /> */}
       <div
         className={cn(
           "themes-wrapper bg-background",
-          block.container?.className
+          item.meta?.containerClassName
         )}
       >
-        <BlockWrapper block={block}>
-          <Component />
-          {chunks?.map((chunk, index) => (
-            <BlockChunk
-              key={chunk.name}
-              block={block}
-              chunk={block.chunks?.[index]}
-            >
-              <chunk.component />
-            </BlockChunk>
-          ))}
-        </BlockWrapper>
+        <Component />
       </div>
     </>
   )

apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx

@@ -2,7 +2,7 @@ import "@/styles/globals.css"
 import { Metadata, Viewport } from "next"
 
 import { META_THEME_COLORS, siteConfig } from "@/config/site"
-import { fontSans } from "@/lib/fonts"
+import { fontMono, fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
 import { Analytics } from "@/components/analytics"
 import { ThemeProvider } from "@/components/providers"
@@ -92,7 +92,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <body
           className={cn(
             "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable
+            fontSans.variable,
+            fontMono.variable
           )}
         >
           <ThemeProvider

apps/www/app/layout.tsx

@@ -1,32 +1,52 @@
-import { unstable_cache } from "next/cache"
+import * as React from "react"
+import { z } from "zod"
 
-import { getBlock } from "@/lib/blocks"
-import { BlockPreview } from "@/components/block-preview"
+import { highlightCode } from "@/lib/highlight-code"
+import {
+  createFileTreeForRegistryItemFiles,
+  getRegistryItem,
+} from "@/lib/registry"
+import { BlockViewer } from "@/components/block-viewer"
+import { registryItemFileSchema } from "@/registry/schema"
 
-const getBlockByName = unstable_cache(
-  async (name: string) => {
-    const block = await getBlock(name)
+export async function BlockDisplay({ name }: { name: string }) {
+  const item = await getCachedRegistryItem(name)
+
+  if (!item?.files) {
+    return null
+  }
+
+  const [tree, highlightedFiles] = await Promise.all([
+    getCachedFileTree(item.files),
+    getCachedHighlightedFiles(item.files),
+  ])
+
+  return (
+    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles} />
+  )
+}
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
 
-    if (!block) {
+const getCachedFileTree = React.cache(
+  async (files: Array<{ path: string; target?: string }>) => {
+    if (!files) {
       return null
     }
 
-    return {
-      name: block.name,
-      style: block.style,
-      description: block.description,
-      container: block.container,
-    }
-  },
-  ["block"]
+    return await createFileTreeForRegistryItemFiles(files)
+  }
 )
 
-export async function BlockDisplay({ name }: { name: string }) {
-  const block = await getBlockByName(name)
-
-  if (!block) {
-    return null
+const getCachedHighlightedFiles = React.cache(
+  async (files: z.infer<typeof registryItemFileSchema>[]) => {
+    return await Promise.all(
+      files.map(async (file) => ({
+        ...file,
+        highlightedContent: await highlightCode(file.content ?? ""),
+      }))
+    )
   }
-
-  return <BlockPreview key={block.name} block={block} />
-}
+)