feat: improve metadata (#1308)

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -49,6 +49,10 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
           title: board.metaTitle ?? createMetaTitle(t("board.content.metaTitle", { boardName: board.name })),
           icons: {
             icon: board.faviconImageUrl ? board.faviconImageUrl : undefined,
+            apple: board.faviconImageUrl ? board.faviconImageUrl : undefined,
+          },
+          appleWebApp: {
+            startupImage: { url: board.faviconImageUrl ? board.faviconImageUrl : "/logo/logo.png" },
           },
         };
       } catch (error) {

apps/nextjs/src/app/[locale]/layout.tsx

@@ -28,8 +28,7 @@ const fontSans = Inter({
   variable: "--font-sans",
 });
 
-export const metadata: Metadata = {
-  metadataBase: new URL("http://localhost:3000"),
+export const generateMetadata = (): Metadata => ({
   title: "Homarr",
   description:
     "Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips.",
@@ -40,12 +39,17 @@ export const metadata: Metadata = {
     url: "https://homarr.dev",
     siteName: "Homarr Documentation",
   },
-  twitter: {
-    card: "summary_large_image",
-    site: "@jullerino",
-    creator: "@jullerino",
+  icons: {
+    icon: "/logo/logo.png",
+    apple: "/logo/logo.png",
   },
-};
+  appleWebApp: {
+    title: "Homarr",
+    capable: true,
+    startupImage: { url: "/logo/logo.png" },
+    statusBarStyle: getColorScheme() === "dark" ? "black-translucent" : "default",
+  },
+});
 
 export const viewport: Viewport = {
   themeColor: [
@@ -56,7 +60,7 @@ export const viewport: Viewport = {
 
 export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
   const session = await auth();
-  const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "dark";
+  const colorScheme = getColorScheme();
   const tCommon = await getScopedI18n("common");
   const direction = tCommon("direction");
 
@@ -95,3 +99,7 @@ export default async function Layout(props: { children: React.ReactNode; params:
     </html>
   );
 }
+
+const getColorScheme = () => {
+  return cookies().get("homarr-color-scheme")?.value ?? "dark";
+};