From a187c116de8d174f8185b15d7d6245f123586d46 Mon Sep 17 00:00:00 2001 From: Florian Trayon <26360935+FlorianLeChat@users.noreply.github.com> Date: Sun, 24 Nov 2024 16:14:01 +0100 Subject: [PATCH] Fixed modal loading for cookies consent during server-side rendering --- app/[locale]/components/header.tsx | 113 ++++++++++++++++++++ app/[locale]/page.tsx | 104 +----------------- app/[locale]/settings/components/routes.tsx | 3 +- 3 files changed, 120 insertions(+), 100 deletions(-) create mode 100644 app/[locale]/components/header.tsx diff --git a/app/[locale]/components/header.tsx b/app/[locale]/components/header.tsx new file mode 100644 index 0000000..e5d91af --- /dev/null +++ b/app/[locale]/components/header.tsx @@ -0,0 +1,113 @@ +// +// Composant de l'en-tête du site. +// + +"use client"; + +import Link from "next/link"; +import type { Session } from "next-auth"; +import type { Metadata } from "next"; +import { useTranslations } from "next-intl"; +import { showPreferences } from "vanilla-cookieconsent"; +import { LogIn, Cookie, LayoutDashboard } from "lucide-react"; +import { Button, buttonVariants } from "./ui/button"; + +export default function Footer( { + meta, + session +}: { + meta: Metadata & { source: string }; + session: Session | null; +} ) +{ + // Déclaration des variables d'état. + const headerMessages = useTranslations( "header" ); + const navigationMessages = useTranslations( "navigation" ); + + // Affichage du rendu HTML du composant. + return ( +
+ {/* Titre du site */} +

+ 💾 {meta.title as string} +

+ + + + {/* Affichage de l'animation du logo vers le dépôt GitHub */} + {/* Source : https://tholman.com/github-corners/ */} + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 27c1bbc..10522f2 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -4,25 +4,17 @@ // // Importation des dépendances. -import Link from "next/link"; -import { Eye, - Zap, - Lock, - Smile, - LogIn, - Share2, - Cookie, - PocketKnife, - LayoutDashboard } from "lucide-react"; +import { lazy } from "react"; import type { Metadata } from "next"; import { setRequestLocale, getTranslations } from "next-intl/server"; +import { Eye, Zap, Lock, Smile, Share2, PocketKnife } from "lucide-react"; // Importation des fonctions utilitaires. import { auth } from "@/utilities/next-auth"; import { generateMetadata as getMetadata } from "./layout"; // Importation des composants. -import { Button, buttonVariants } from "./components/ui/button"; +const Header = lazy( () => import( "./components/header" ) ); // Déclaration des propriétés de la page. export async function generateMetadata(): Promise @@ -55,93 +47,8 @@ export default async function Page( { // Affichage du rendu HTML de la page. return ( <> -
- {/* Titre du site */} -

- 💾 {meta.title as string} -

- - - - {/* Affichage de l'animation du logo vers le dépôt GitHub */} - {/* Source : https://tholman.com/github-corners/ */} - - - - - - - -
+ {/* En-tête de la page */} +
{/* Contenu de la page */}
@@ -194,7 +101,6 @@ export default async function Page( {

- {" "} {messages( "index.features.title_4" )}

diff --git a/app/[locale]/settings/components/routes.tsx b/app/[locale]/settings/components/routes.tsx index 887bed1..4a9c4ee 100644 --- a/app/[locale]/settings/components/routes.tsx +++ b/app/[locale]/settings/components/routes.tsx @@ -10,6 +10,7 @@ import { Cookie } from "lucide-react"; import { routes } from "@/config/routes"; import { usePathname } from "next/navigation"; import { useTranslations } from "next-intl"; +import { showPreferences } from "vanilla-cookieconsent"; import { Button, buttonVariants } from "../../components/ui/button"; export default function Routes() @@ -44,7 +45,7 @@ export default function Routes()