mediahub-fe/app/[locale]/layout.tsx

114 lines
3.7 KiB
TypeScript

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "./theme.css";
import "../../style/ckeditor.css";
import { ThemeProvider } from "@/providers/theme-provider";
import MountedProvider from "@/providers/mounted.provider";
import { Toaster } from "@/components/ui/toaster";
import { Toaster as SonnerToaster } from "@/components/ui/sonner";
const inter = Inter({
subsets: ["latin"],
display: 'swap',
preload: true,
fallback: ['system-ui', 'arial']
});
// language
import { getLangDir } from "rtl-detect";
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import DirectionProvider from "@/providers/direction-provider";
import AuthProvider from "@/providers/auth.provider";
export const metadata: Metadata = {
title: "Media Hub | POLRI",
description: "Media Hub Platform for POLRI",
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://mediahub.polri.go.id'),
openGraph: {
title: "Media Hub | POLRI",
description: "Media Hub Platform for POLRI",
},
twitter: {
card: 'summary_large_image',
title: "Media Hub | POLRI",
description: "Media Hub Platform for POLRI",
},
other: {
'X-DNS-Prefetch-Control': 'on',
},
};
export default async function RootLayout({
children,
params: { locale },
}: Readonly<{
children: React.ReactNode;
params: { locale: string };
}>) {
const messages = await getMessages();
const direction = getLangDir(locale);
return (
<html lang={locale} dir={direction}>
<head>
{/* DNS Prefetch for external domains */}
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//cdn.userway.org" />
{/* Preconnect to external domains */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
{/* Preload critical fonts */}
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
as="style"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
rel="stylesheet"
/>
</noscript>
{/* Load UserWay script only when needed */}
<script
dangerouslySetInnerHTML={{
__html: `
// Load UserWay script only after page load
window.addEventListener('load', function() {
setTimeout(function() {
const script = document.createElement('script');
script.src = 'https://cdn.userway.org/widget.js';
script.setAttribute('data-account', 'X36s1DpjqB');
script.setAttribute('data-position', '5');
script.async = true;
document.head.appendChild(script);
}, 2000);
});
`,
}}
/>
</head>
<body className={`${inter.className} dashcode-app`}>
<NextIntlClientProvider messages={messages} locale={locale}>
<AuthProvider>
<ThemeProvider attribute="class" defaultTheme="light">
<DirectionProvider direction={direction}>
{children}
</DirectionProvider>
<Toaster />
<SonnerToaster />
</ThemeProvider>
</AuthProvider>
</NextIntlClientProvider>
</body>
</html>
);
}