.
This commit is contained in:
@@ -111,9 +111,6 @@
|
||||
@layer base {
|
||||
html {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@@ -139,10 +136,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
html[data-ui-ready="0"] body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
4. Site shell + ambient effects
|
||||
The .site-shell class is on the <main> element in page.tsx. The two
|
||||
|
||||
+1
-26
@@ -62,32 +62,7 @@ export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="en-GB" suppressHydrationWarning data-ui-ready="0">
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function () {
|
||||
var root = document.documentElement;
|
||||
root.dataset.uiReady = "0";
|
||||
try {
|
||||
var consent = window.localStorage.getItem("novarix-cookie-consent");
|
||||
var introSeen = window.sessionStorage.getItem("novarix-intro-seen");
|
||||
var shouldShowBanner = consent !== "ack" && consent !== "rst";
|
||||
var shouldPlayIntro = !shouldShowBanner && !introSeen;
|
||||
|
||||
root.dataset.showCookieBanner = shouldShowBanner ? "1" : "0";
|
||||
root.dataset.showIntro = shouldPlayIntro ? "1" : "0";
|
||||
} catch (error) {
|
||||
root.dataset.showCookieBanner = "1";
|
||||
root.dataset.showIntro = "0";
|
||||
}
|
||||
root.dataset.uiReady = "1";
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<html lang="en-GB" suppressHydrationWarning>
|
||||
<body>
|
||||
{children}
|
||||
<CookieBanner />
|
||||
|
||||
+7
-20
@@ -25,7 +25,7 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useMemo, useState } from "react";
|
||||
import { site } from "@/content";
|
||||
import { openCookieBanner } from "@/components/CookieBanner";
|
||||
|
||||
@@ -42,23 +42,18 @@ export default function HomePage() {
|
||||
// pointer — the mouse position (in % of page width/height). Used by the
|
||||
// soft glow that follows the cursor in the background.
|
||||
// ---------------------------------------------------------------------------
|
||||
const [showIntro, setShowIntro] = useState(() => {
|
||||
if (typeof document === "undefined") return false;
|
||||
return document.documentElement.dataset.showIntro === "1";
|
||||
});
|
||||
const [showIntro, setShowIntro] = useState(false);
|
||||
const [pointer, setPointer] = useState<PointerState>({ x: 50, y: 22 });
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// INTRO OVERLAY EFFECT
|
||||
// Plays the animated logo + wordmark the first time someone visits the
|
||||
// site in this browser tab. We decide before hydration whether to play it,
|
||||
// which avoids the homepage flashing briefly before the intro appears.
|
||||
// After the user accepts cookies on their first visit, we trigger the intro
|
||||
// immediately from the banner close action.
|
||||
// site in this browser tab. The initial check runs in useLayoutEffect so
|
||||
// the intro can mount before the first browser paint, avoiding a visible
|
||||
// flash of the homepage underneath.
|
||||
// ---------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
useLayoutEffect(() => {
|
||||
function playIntro() {
|
||||
document.documentElement.dataset.showIntro = "1";
|
||||
setShowIntro(true);
|
||||
try {
|
||||
window.sessionStorage.setItem(INTRO_SEEN_KEY, "true");
|
||||
@@ -67,7 +62,6 @@ export default function HomePage() {
|
||||
}
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
document.documentElement.dataset.showIntro = "0";
|
||||
setShowIntro(false);
|
||||
}, 3950);
|
||||
|
||||
@@ -79,21 +73,14 @@ export default function HomePage() {
|
||||
try {
|
||||
const introSeen = window.sessionStorage.getItem(INTRO_SEEN_KEY);
|
||||
const consent = window.localStorage.getItem("novarix-cookie-consent");
|
||||
const shouldPlayNow =
|
||||
document.documentElement.dataset.showIntro === "1" &&
|
||||
consent === "ack" &&
|
||||
!introSeen;
|
||||
const shouldPlayNow = consent === "ack" && !introSeen;
|
||||
|
||||
if (shouldPlayNow) {
|
||||
timer = playIntro();
|
||||
} else {
|
||||
document.documentElement.dataset.showIntro = "0";
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setShowIntro(false);
|
||||
}
|
||||
} catch {
|
||||
document.documentElement.dataset.showIntro = "0";
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setShowIntro(false);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user