Chore: design system favicon (#42336)

- add favicon to the design system app
- fix broken introduction pages

apps/design-system/app/layout.tsx

@@ -1,15 +1,118 @@
 import '@/styles/globals.css'
 import '../../studio/styles/typography.scss'
-import type { Metadata } from 'next'
+
+import type { Metadata, Viewport } from 'next'
+
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
 import { customFont, sourceCodePro } from './fonts'
 
 const className = `${customFont.variable} ${sourceCodePro.variable}`
 
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
+
+const genFaviconData = (basePath: string): Metadata['icons'] => ({
+  icon: {
+    url: `${basePath}/favicon/favicon.ico`,
+    type: 'image/x-icon',
+  },
+  shortcut: `${basePath}/favicon/favicon.ico`,
+  apple: `${basePath}/favicon/favicon.ico`,
+  other: [
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-57x57.png`,
+      sizes: '57x57',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-60x60.png`,
+      sizes: '60x60',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-72x72.png`,
+      sizes: '72x72',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-76x76.png`,
+      sizes: '76x76',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-114x114.png`,
+      sizes: '114x114',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-120x120.png`,
+      sizes: '120x120',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-144x144.png`,
+      sizes: '144x144',
+    },
+    {
+      rel: 'apple-touch-icon-precomposed',
+      url: `${basePath}/favicon/apple-icon-152x152.png`,
+      sizes: '152x152',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-16x16.png`,
+      type: 'image/png',
+      sizes: '16x16',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-32x32.png`,
+      type: 'image/png',
+      sizes: '32x32',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-48x48.png`,
+      type: 'image/png',
+      sizes: '48x48',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-96x96.png`,
+      type: 'image/png',
+      sizes: '96x96',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-128x128.png`,
+      type: 'image/png',
+      sizes: '128x128',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-180x180.png`,
+      type: 'image/png',
+      sizes: '180x180',
+    },
+    {
+      rel: 'icon',
+      url: `${basePath}/favicon/favicon-196x196.png`,
+      type: 'image/png',
+      sizes: '196x196',
+    },
+  ],
+})
+
 export const metadata: Metadata = {
+  applicationName: 'Supabase Design System',
   title: 'Supabase Design System',
   description: 'Design resources for building consistent user experiences at Supabase.',
+  icons: genFaviconData(BASE_PATH),
+}
+
+export const viewport: Viewport = {
+  themeColor: '#1E1E1E',
 }
 
 interface RootLayoutProps {

apps/design-system/config/docs.ts

@@ -61,7 +61,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/ui-patterns/ui-patterns',
+          href: '/docs/ui-patterns/introduction',
           items: [],
           priority: true,
         },
@@ -108,7 +108,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/fragments/fragment-components',
+          href: '/docs/fragments/introduction',
           items: [],
           priority: true,
         },
@@ -210,7 +210,7 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'Introduction',
-          href: '/docs/components/atom-components',
+          href: '/docs/components/introduction',
           items: [],
           priority: true,
         },

apps/design-system/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/design-system/public/favicon/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "Supabase Design System",
+  "short_name": "Supabase Design System",
+  "description": "Design resources for building consistent user experiences at Supabase.",
+  "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"
+    }
+  ]
+}