Files
school_compare/nextjs-app/app/layout.tsx
T
TudorandClaude Opus 4.8 1f80571b1f
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m4s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Failing after 42s
feat(analytics): load Umami heatmap recorder
Adds the Umami session recorder (recorder.js) that powers heatmaps,
alongside the existing analytics tracker. Loaded via next/script with
the same data-domains guard as the main tracker so it only fires on the
production hostnames — staging runs the same image under a different
host and must not feed the heatmap.

Cookieless: recorder.js uses Umami's server-side session model (no
cookie or local storage on the device), so it adds no new PECR
consent trigger.

Verified with tsc --noEmit and next build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
2026-07-21 16:03:18 +01:00

112 lines
3.7 KiB
TypeScript

import type { Metadata, Viewport } from 'next';
import { DM_Sans, Playfair_Display } from 'next/font/google';
import Script from 'next/script';
import { Navigation } from '@/components/Navigation';
import { Footer } from '@/components/Footer';
import { ComparisonToast } from '@/components/ComparisonToast';
import { ComparisonProvider } from '@/context/ComparisonProvider';
import './globals.css';
const dmSans = DM_Sans({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
variable: '--font-dm-sans',
display: 'swap',
});
const playfairDisplay = Playfair_Display({
subsets: ['latin'],
weight: ['600', '700'],
variable: '--font-playfair',
display: 'swap',
});
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
// viewport-fit=cover lets us paint behind the notch / Dynamic Island so
// env(safe-area-inset-*) values resolve to real numbers on iPhone.
viewportFit: 'cover',
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#faf7f2' },
{ media: '(prefers-color-scheme: dark)', color: '#1a1612' },
],
};
export const metadata: Metadata = {
appleWebApp: {
capable: true,
title: 'SchoolCompare',
statusBarStyle: 'default',
},
title: {
default: 'SchoolCompare | Compare School Performance',
template: '%s | SchoolCompare',
},
description: 'Compare primary and secondary school SATs and GCSE performance across England',
keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
authors: [{ name: 'SchoolCompare' }],
manifest: '/manifest.json',
icons: {
icon: '/favicon.svg',
shortcut: '/favicon.svg',
apple: '/favicon.svg',
},
openGraph: {
type: 'website',
title: 'SchoolCompare | Compare School Performance',
description: 'Compare primary and secondary school SATs and GCSE performance across England',
url: 'https://schoolcompare.co.uk',
siteName: 'SchoolCompare',
},
twitter: {
card: 'summary',
title: 'SchoolCompare | Compare School Performance',
description: 'Compare primary and secondary school SATs and GCSE performance across England',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
<link rel="preconnect" href="https://api.postcodes.io" />
{/* data-domains: the tracker only fires on the production hostnames,
so staging (same image, different host) never pollutes Umami */}
<Script
src="https://analytics.schoolcompare.co.uk/script.js"
data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
data-performance="true"
strategy="afterInteractive"
/>
{/* Heatmap / session recorder — same data-domains guard so staging
(same image, different host) never feeds the heatmap. */}
<Script
src="https://analytics.schoolcompare.co.uk/recorder.js"
data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
strategy="afterInteractive"
/>
</head>
<body className={`${dmSans.variable} ${playfairDisplay.variable}`}>
<div className="noise-overlay" />
<ComparisonProvider>
<a href="#main-content" className="skip-link">Skip to main content</a>
<Navigation />
<main id="main-content" className="main">
{children}
</main>
<ComparisonToast />
<Footer />
</ComparisonProvider>
</body>
</html>
);
}