Skip to content

Commit

Permalink
Fixed modal loading for cookies consent during server-side rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@FlorianLeChat
FlorianLeChat committed Nov 24, 2024
1 parent 28173f6 commit a187c11
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 100 deletions.
113 changes: 113 additions & 0 deletions app/[locale]/components/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<header className="mb-auto flex items-center gap-4 p-4 max-sm:mt-4 max-sm:flex-col">
{/* Titre du site */}
<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:truncate">
<Link href="/">💾 {meta.title as string}</Link>
</h1>

<nav className="flex gap-4 sm:ml-auto">
{/* Bouton vers l'authentification */}
{session ? (
<Link
href="/dashboard"
className={buttonVariants( { variant: "outline" } )}
>
<LayoutDashboard className="size-5" />

<span className="max-sm:sr-only sm:ml-2">
{headerMessages( "dashboard" )}
</span>
</Link>
) : (
<Link
href="/authentication"
className={buttonVariants( { variant: "outline" } )}
>
<LogIn className="size-5" />

<span className="max-sm:sr-only sm:ml-2">
{headerMessages( "authenticate" )}
</span>
</Link>
)}

{/* Gestion des cookies */}
<Button
type="button"
variant="outline"
onClick={() => showPreferences()}
className="justify-start text-left sm:mr-16"
>
<Cookie />

<span className="sr-only">
{navigationMessages( "cookies_title" )}

<small className="hidden lg:block">
{navigationMessages.rich( "cookies_description", {
u: ( chunks ) => <u>{chunks}</u>
} )}
</small>
</span>
</Button>
</nav>

{/* Affichage de l'animation du logo vers le dépôt GitHub */}
{/* Source : https://tholman.com/github-corners/ */}
<a
rel="noopener noreferrer"
href={meta.source}
title="GitHub"
target="_blank"
className="group fixed bottom-auto left-auto right-0 top-0 [clip-path:polygon(0_0,100%_0,100%_100%)] max-sm:hidden"
aria-label="GitHub"
>
<svg
width="80"
height="80"
viewBox="0 0 250 250"
className="fill-primary text-background"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" />
<path
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
className="origin-[130px_106px] fill-current max-md:motion-safe:animate-github md:motion-safe:group-hover:animate-github"
/>
<path
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0
5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41
2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
className="fill-current"
/>
</svg>
</a>
</header>
);
}
104 changes: 5 additions & 99 deletions app/[locale]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Metadata>
Expand Down Expand Up @@ -55,93 +47,8 @@ export default async function Page( {
// Affichage du rendu HTML de la page.
return (
<>
<header className="mb-auto flex items-center gap-4 p-4 max-sm:mt-4 max-sm:flex-col">
{/* Titre du site */}
<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:truncate">
<Link href="/">💾 {meta.title as string}</Link>
</h1>

<nav className="flex gap-4 sm:ml-auto">
{/* Bouton vers l'authentification */}
{session ? (
<Link
href="/dashboard"
className={buttonVariants( { variant: "outline" } )}
>
<LayoutDashboard className="size-5" />

<span className="max-sm:sr-only sm:ml-2">
{messages( "header.dashboard" )}
</span>
</Link>
) : (
<Link
href="/authentication"
className={buttonVariants( { variant: "outline" } )}
>
<LogIn className="size-5" />

<span className="max-sm:sr-only sm:ml-2">
{messages( "header.authenticate" )}
</span>
</Link>
)}

{/* Gestion des cookies */}
<Button
type="button"
variant="outline"
data-cc="show-preferencesModal"
className="justify-start text-left sm:mr-16"
suppressHydrationWarning
>
<Cookie />

<span className="sr-only">
{messages( "navigation.cookies_title" )}

<small className="hidden lg:block">
{messages.rich(
"navigation.cookies_description",
{
u: ( chunks ) => <u>{chunks}</u>
}
)}
</small>
</span>
</Button>
</nav>

{/* Affichage de l'animation du logo vers le dépôt GitHub */}
{/* Source : https://tholman.com/github-corners/ */}
<a
rel="noopener noreferrer"
href={meta.source}
title="GitHub"
target="_blank"
className="group fixed bottom-auto left-auto right-0 top-0 [clip-path:polygon(0_0,100%_0,100%_100%)] max-sm:hidden"
aria-label="GitHub"
>
<svg
width="80"
height="80"
viewBox="0 0 250 250"
className="fill-primary text-background"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" />
<path
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
className="origin-[130px_106px] fill-current max-md:motion-safe:animate-github md:motion-safe:group-hover:animate-github"
/>
<path
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0
5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41
2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
className="fill-current"
/>
</svg>
</a>
</header>
{/* En-tête de la page */}
<Header meta={meta} session={session} />

{/* Contenu de la page */}
<section className="container mx-auto mb-4 p-4 text-center">
Expand Down Expand Up @@ -194,7 +101,6 @@ export default async function Page( {
<Zap className="mx-auto mb-2 size-6" />

<h2 className="text-xl font-bold">
{" "}
{messages( "index.features.title_4" )}
</h2>

Expand Down
3 changes: 2 additions & 1 deletion app/[locale]/settings/components/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -44,7 +45,7 @@ export default function Routes()
<Button
type="button"
variant="ghost"
data-cc="show-preferencesModal"
onClick={() => showPreferences()}
className="h-auto min-h-10 justify-start text-left"
suppressHydrationWarning
>
Expand Down

0 comments on commit a187c11

Please sign in to comment.