fix: UI library more fixes (#34573)

* Fix a react warning.

* Fix the command for yarn.

* Add a link to the block on the landing page.

* Fix links in the command menu.

* Fix a type error.

* Add meta setup.

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>

apps/ui-library/app/(app)/page.tsx

@@ -29,10 +29,7 @@ export default function Home() {
             {/* Grid Content */}
             <div className="grid grid-cols-12 gap-0 relative z-20 pb-32">
               {/* Heading Section */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-8 pb-8"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-8 pb-8">
                 <div className="flex flex-col gap-8 justify-start pt-16 md:pt-32">
                   <div className="max-w-2xl">
                     <h1 className="text-4xl text-foreground mb-3 font-medium tracking-tight">
@@ -50,17 +47,17 @@ export default function Home() {
               </div>
 
               {/* Password-based Authentication */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Password-based Authentication
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Password-based Authentication</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/password-based-auth"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4">
                   <BlockPreview name="password-based-auth/auth/sign-up" />
                 </div>
@@ -68,17 +65,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Cursors */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Cursors
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Cursors</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-cursor"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 flex rounded-lg overflow-hidden">
                   <BlockPreview name="realtime-cursor-demo" isPair />
                   <BlockPreview name="realtime-cursor-demo" isPair />
@@ -87,17 +84,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Dropzone */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                File Upload
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative  flex justify-between items-center">
+                <span>File Upload</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/dropzone"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="dropzone-demo" showCode={false} />
                 </div>
@@ -105,17 +102,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Current User Avatar */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Current User Avatar
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Current User Avatar</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/current-user-avatar"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="current-user-avatar-preview" showCode={false} />
                 </div>
@@ -123,17 +120,17 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Avatar Stack */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Avatar Stack
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Avatar Stack</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-avatar-stack"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 -mb-12">
                   <ComponentPreview name="realtime-avatar-stack-preview" showCode={false} />
                 </div>
@@ -141,22 +138,23 @@ export default function Home() {
               <HorizontalGridLine />
 
               {/* Realtime Chat */}
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative"
-              >
-                Realtime Chat
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 pt-16 pb-6 text-xs uppercase font-mono text-foreground-light tracking-wider relative flex justify-between items-center">
+                <span>Realtime Chat</span>
+                <Link
+                  className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+                  href="/docs/nextjs/realtime-chat"
+                >
+                  Go to block ➔
+                </Link>
               </div>
               <HorizontalGridLine />
-              <div
-                data-grid-item
-                className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative"
-              >
+              <div className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative">
                 <div className="-mt-4 flex rounded-lg overflow-hidden">
                   <BlockPreview name="realtime-chat-demo" isPair />
                   <BlockPreview name="realtime-chat-demo" isPair />
                 </div>
               </div>
+              <HorizontalGridLine />
             </div>
           </div>
         </div>

apps/ui-library/app/layout.tsx

@@ -1,15 +1,35 @@
 import type { Metadata } from 'next'
 
 import '@/styles/globals.css'
+import { genFaviconData } from 'common/MetaFavicons/app-router'
 import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
 
 const inter = Inter({ subsets: ['latin'] })
 
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
+
 export const metadata: Metadata = {
+  applicationName: 'Supabase UI Library',
   title: 'Supabase UI Library',
   description: 'Provides a library of components for your project',
+  metadataBase: new URL('https://supabase.com'),
+  icons: genFaviconData(BASE_PATH),
+  openGraph: {
+    type: 'article',
+    authors: 'Supabase',
+    url: `${BASE_PATH}`,
+    images: `${BASE_PATH}/img/supabase-og-image.png`,
+    publishedTime: new Date().toISOString(),
+    modifiedTime: new Date().toISOString(),
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@supabase',
+    creator: '@supabase',
+    images: `${BASE_PATH}/img/supabase-og-image.png`,
+  },
 }
 
 interface RootLayoutProps {

apps/ui-library/components/command-menu.tsx

@@ -72,30 +72,12 @@ export function CommandMenu({ ...props }: DialogProps) {
         <CommandInput_Shadcn_ placeholder="Type a command or search..." />
         <CommandList_Shadcn_>
           <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          {/* <CommandGroup_Shadcn_ heading="Links">
-            {docsConfig.mainNav
-              .filter((navitem) => !navitem.external)
-              .map((navItem) => (
-                <CommandItem_Shadcn_
-                  key={navItem.href}
-                  value={navItem.title}
-                  onSelect={() => {
-                    runCommand(() => router.push(navItem.href as string))
-                  }}
-                >
-                  <FileIcon className="mr-2 h-4 w-4" strokeWidth={1} />
-                  {navItem.title}
-                </CommandItem_Shadcn_>
-              ))}
-          </CommandGroup_Shadcn_> */}
           <CommandGroup_Shadcn_ key="pages" heading="Pages">
             {COMMAND_ITEMS.map((navItem) => (
               <CommandItem_Shadcn_
                 key={navItem.href}
                 value={navItem.label}
-                onSelect={() => {
-                  runCommand(() => router.push(navItem.href as string))
-                }}
+                onSelect={() => runCommand(() => router.push(navItem.href as string))}
               >
                 <div className="mr-2 flex h-4 w-4 items-center justify-center">
                   <CircleIcon className="h-3 w-3" strokeWidth={1} />

apps/ui-library/components/command.tsx

@@ -33,7 +33,7 @@ export function Command({ name, highlight }: CommandCopyProps) {
   const commands: Record<PackageManager, string> = {
     npm: `npx shadcn@latest add ${baseUrl}${componentPath}`,
     pnpm: `pnpm dlx shadcn@latest add ${baseUrl}${componentPath}`,
-    yarn: `npx shadcn@latest add ${baseUrl}${componentPath}`,
+    yarn: `yarn dlx shadcn@latest add ${baseUrl}${componentPath}`,
     bun: `bunx --bun shadcn@latest add ${baseUrl}${componentPath}`,
   }
 

apps/ui-library/config/docs.ts

@@ -101,9 +101,9 @@ export const COMMAND_ITEMS = [
     label: item.commandItemLabel,
     href: item.href,
   })),
-  ...Object.entries(componentPages).map(([_, component]) => ({
-    label: component.commandItemLabel,
-    href: component.href,
+  ...componentPages.items.map((item) => ({
+    label: item.commandItemLabel,
+    href: item.href,
   })),
 ]
 

apps/ui-library/public/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

apps/ui-library/public/favicon/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "Supabase",
+  "short_name": "Supabase",
+  "description": "The open source Firebase alternative.",
+  "display": "standalone",
+  "theme_color": "#1C1C1C",
+  "background_color": "#1C1C1C",
+  "icons": [
+    {
+      "src": "/favicon/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/favicon/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/favicon/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/favicon/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/favicon/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/favicon/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}