diff --git a/public/app-icon-512x512.png b/public/app-icon-512x512.png new file mode 100644 index 0000000..ef035af Binary files /dev/null and b/public/app-icon-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..0f3744f Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png new file mode 100644 index 0000000..c242789 Binary files /dev/null and b/public/favicon-96x96.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..93057d5 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..cfdad19 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png new file mode 100644 index 0000000..30c0655 Binary files /dev/null and b/public/web-app-manifest-192x192.png differ diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png new file mode 100644 index 0000000..e00a5c2 Binary files /dev/null and b/public/web-app-manifest-512x512.png differ diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index db7f314..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 51a9ab0..ee61205 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,6 +23,14 @@ const geistMono = localFont({ export const metadata: Metadata = { title: "Radar", description: "Dashboard for AlertManager Prometheus", + icons: [ + { rel: "shortcut icon", type: "image/x-icon", url: "/favicon.ico", }, + { rel: "icon", type: "image/png", sizes: "96x96", url: "/favicon-96x96.png", }, + { rel: "icon", type: "image/png", sizes: "192x192", url: "/web-app-manifest-192x192.png", }, + { rel: "icon", type: "image/png", sizes: "512x512", url: "/web-app-manifest-512x512.png", }, + { rel: "icon", type: "image/svg+xml", sizes: "96x96", url: "/favicon.svg", }, + { rel: "apple-touch-icon", sizes: "180x180", url: "/apple-touch-icon.png", }, + ], }; export default async function RootLayout({ diff --git a/src/app/manifest.ts b/src/app/manifest.ts new file mode 100644 index 0000000..186e3b2 --- /dev/null +++ b/src/app/manifest.ts @@ -0,0 +1,18 @@ +import { MetadataRoute } from 'next' + +export default async function manifest(): Promise { + return { + name: 'Radar', + short_name: 'Radar', + description: 'Dashboard for AlertManager Prometheus', + start_url: '/', + display: 'standalone', + icons: [ + { + src: '/app-icon-512x512.png', + sizes: '512x512', + type: 'image/png', + } + ] + } +} diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx index 922aaa1..2d8cb8f 100644 --- a/src/components/layout/app-layout.tsx +++ b/src/components/layout/app-layout.tsx @@ -1,9 +1,11 @@ import { SidebarProvider } from "@/components/ui/sidebar"; import { AppSidebar } from "./app-sidebar"; +import { AppThemeColor } from "./app-theme-color"; export function AppLayout({ children }: { children: React.ReactNode }) { return ( +
diff --git a/src/components/layout/app-theme-color.tsx b/src/components/layout/app-theme-color.tsx new file mode 100644 index 0000000..212b2a1 --- /dev/null +++ b/src/components/layout/app-theme-color.tsx @@ -0,0 +1,24 @@ +'use client' + +import { useTheme } from "next-themes" +import { useEffect } from "react" + +export function AppThemeColor() { + const { resolvedTheme } = useTheme() + + useEffect(() => { + let themeColorMeta = document.querySelector( + 'meta[name="theme-color"]', + ) as HTMLMetaElement + + if (!themeColorMeta) { + themeColorMeta = document.createElement('meta') + themeColorMeta.name = 'theme-color' + document.head.appendChild(themeColorMeta) + } + + themeColorMeta.content = resolvedTheme === 'dark' ? '#171717' : '#EEF2F8' + }, [resolvedTheme]) + + return null +}