💄 style(meta): Fix and add metadata

public/manifest.json

@@ -1,20 +1,15 @@
 {
-  "background_color": "#fff",
+  "background_color": "#000000",
   "display": "fullscreen",
   "icons": [
     {
-      "src": "icons/icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "icons/icon-96x96.png",
-      "sizes": "96x96",
+      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "icons/icon-192x192.png",
-      "sizes": "192x192",
+      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
       "type": "image/png"
     }
   ],
@@ -23,5 +18,6 @@
   "scope": "/",
   "short_name": "LobeChat",
   "splash_pages": null,
-  "start_url": "/"
+  "start_url": "/",
+  "theme_color": "#000000"
 }

src/app/StyleRegistry.tsx

@@ -14,6 +14,7 @@ const StyleRegistry = ({ children }: PropsWithChildren) => {
 
     isInsert.current = true;
 
+    // @ts-ignore
     return extractStaticStyle().map((item) => item.style);
   });
 

src/app/layout.page.tsx

@@ -1,5 +1,4 @@
 import { Analytics } from '@vercel/analytics/react';
-import { Metadata } from 'next';
 import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
@@ -12,11 +11,6 @@ import Layout from '@/layout/GlobalLayout';
 
 import StyleRegistry from './StyleRegistry';
 
-export const metadata: Metadata = {
-  manifest: '/manifest.json',
-  title: 'LobeChat',
-};
-
 const RootLayout = ({ children }: PropsWithChildren) => {
   // get default theme config to use with ssr
   const cookieStore = cookies();
@@ -43,3 +37,5 @@ const RootLayout = ({ children }: PropsWithChildren) => {
 };
 
 export default RootLayout;
+
+export { default as metadata } from './metadata';

src/app/metadata.ts

@@ -0,0 +1,62 @@
+import { Metadata } from 'next';
+
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import pkg from '../../package.json';
+
+const title = genSiteHeadTitle();
+const description = pkg.description;
+const metadata: Metadata = {
+  appleWebApp: {
+    statusBarStyle: 'black-translucent',
+    title: title,
+  },
+  description: description,
+  icons: {
+    apple:
+      'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/apple-touch-icon.png',
+    icon: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/favicon-32x32.png',
+    other: {
+      rel: 'mask-icon',
+      url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/safari-pinned-tab.svg',
+    },
+  },
+  manifest: '/manifest.json',
+  openGraph: {
+    description: description,
+    images: [
+      {
+        alt: title,
+        height: 192,
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-192x192.png',
+        width: 192,
+      },
+      {
+        alt: title,
+        height: 512,
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-512x512.png',
+        width: 512,
+      },
+    ],
+    locale: 'en_US',
+    siteName: title,
+    title: title,
+    type: 'website',
+    url: pkg.homepage,
+  },
+  themeColor: [
+    { color: '#fff', media: '(prefers-color-scheme: light)' },
+    { color: '#000', media: '(prefers-color-scheme: dark)' },
+  ],
+  title: genSiteHeadTitle(),
+  viewport: {
+    initialScale: 1,
+    maximumScale: 1,
+    minimumScale: 1,
+    userScalable: false,
+    viewportFit: 'cover',
+    width: 'device-width',
+  },
+};
+
+export default metadata;