fix(pwa): reput metadata in DOM

This commit is contained in:
Julien Froidefond
2025-02-13 21:11:19 +01:00
parent 7c14c0fb5b
commit 898a2b7207

View File

@@ -1,60 +1,22 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { cn } from "@/lib/utils";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "StripStream - Komga Reader", title: {
template: "%s - StripStream",
default: "StripStream",
},
description: "Votre bibliothèque numérique pour lire vos BD, mangas et comics préférés", description: "Votre bibliothèque numérique pour lire vos BD, mangas et comics préférés",
manifest: "/manifest.json", manifest: "/manifest.json",
themeColor: "#4F46E5", keywords: ["comics", "manga", "bd", "reader", "komga", "stripstream"],
appleWebApp: { authors: [{ name: "Julien Froidefond" }],
capable: true, colorScheme: "dark light",
statusBarStyle: "black-translucent", formatDetection: {
startupImage: [ telephone: false,
{
url: "/images/splash/splash-2048x2732.png",
media:
"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
},
{
url: "/images/splash/splash-1668x2388.png",
media:
"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
},
{
url: "/images/splash/splash-1536x2048.png",
media:
"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
},
{
url: "/images/splash/splash-1125x2436.png",
media:
"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
},
{
url: "/images/splash/splash-1242x2688.png",
media:
"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
},
{
url: "/images/splash/splash-828x1792.png",
media:
"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
},
{
url: "/images/splash/splash-750x1334.png",
media:
"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)",
},
{
url: "/images/splash/splash-1242x2208.png",
media:
"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)",
},
],
title: "StripStream",
}, },
icons: { icons: {
icon: [ icon: [
@@ -89,28 +51,6 @@ export const metadata: Metadata = {
}, },
], ],
}, },
viewport: {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
viewportFit: "cover",
},
applicationName: "StripStream",
generator: "Next.js",
keywords: ["comics", "manga", "bd", "reader", "komga", "stripstream"],
authors: [{ name: "Julien Froidefond" }],
colorScheme: "dark light",
formatDetection: {
telephone: false,
},
other: {
"mobile-web-app-capable": "yes",
"apple-mobile-web-app-capable": "yes",
"apple-mobile-web-app-status-bar-style": "black-translucent",
"msapplication-TileColor": "#4F46E5",
"msapplication-tap-highlight": "no",
},
}; };
// Composant client séparé pour le layout // Composant client séparé pour le layout
@@ -119,7 +59,60 @@ import ClientLayout from "@/components/layout/ClientLayout";
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="fr" suppressHydrationWarning> <html lang="fr" suppressHydrationWarning>
<body className={inter.className}> <head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="StripStream" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#4F46E5" />
<meta name="msapplication-TileColor" content="#4F46E5" />
<meta name="msapplication-tap-highlight" content="no" />
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-2048x2732.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-1668x2388.png"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-1536x2048.png"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-1125x2436.png"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-1242x2688.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-828x1792.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-750x1334.png"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/images/splash/splash-1242x2208.png"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
</head>
<body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
<ClientLayout>{children}</ClientLayout> <ClientLayout>{children}</ClientLayout>
</body> </body>
</html> </html>