2026-05-19 09:47:13 +01:00
|
|
|
import type { Metadata, Viewport } from 'next';
|
2026-08-07 18:05:49 +01:00
|
|
|
import { Manrope, Inter } from 'next/font/google';
|
2026-02-20 15:52:53 +00:00
|
|
|
import Script from 'next/script';
|
2026-02-02 20:34:35 +00:00
|
|
|
import { Navigation } from '@/components/Navigation';
|
|
|
|
|
import { Footer } from '@/components/Footer';
|
2026-03-05 09:33:47 +00:00
|
|
|
import { ComparisonToast } from '@/components/ComparisonToast';
|
2026-02-02 20:34:35 +00:00
|
|
|
import { ComparisonProvider } from '@/context/ComparisonProvider';
|
|
|
|
|
import './globals.css';
|
|
|
|
|
|
2026-08-07 18:05:49 +01:00
|
|
|
// Manrope carries headings and key messaging — the guideline's "friendly,
|
|
|
|
|
// modern personality". It never sets body copy or a control.
|
|
|
|
|
const manrope = Manrope({
|
2026-02-02 21:39:40 +00:00
|
|
|
subsets: ['latin'],
|
2026-08-07 18:05:49 +01:00
|
|
|
weight: ['500', '600', '700'],
|
|
|
|
|
variable: '--font-manrope',
|
2026-02-02 21:39:40 +00:00
|
|
|
display: 'swap',
|
|
|
|
|
});
|
|
|
|
|
|
2026-08-07 18:05:49 +01:00
|
|
|
// Inter carries body copy, every control and every figure — chosen in the
|
|
|
|
|
// guideline for clarity and legibility. Its tabular numerals hold a column
|
|
|
|
|
// properly, which matters on a page that is mostly percentages.
|
|
|
|
|
const inter = Inter({
|
2026-02-02 21:39:40 +00:00
|
|
|
subsets: ['latin'],
|
2026-08-07 18:05:49 +01:00
|
|
|
weight: ['400', '500', '600', '700'],
|
|
|
|
|
variable: '--font-inter',
|
2026-02-02 21:39:40 +00:00
|
|
|
display: 'swap',
|
|
|
|
|
});
|
|
|
|
|
|
2026-05-19 09:47:13 +01:00
|
|
|
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',
|
2026-08-06 12:13:04 +01:00
|
|
|
// These must match --bg-primary in globals.css for each theme, or the
|
|
|
|
|
// browser chrome and the page disagree at the top edge of the screen.
|
2026-05-19 09:47:13 +01:00
|
|
|
themeColor: [
|
2026-08-07 18:05:49 +01:00
|
|
|
{ media: '(prefers-color-scheme: light)', color: '#FAFAF8' },
|
|
|
|
|
{ media: '(prefers-color-scheme: dark)', color: '#111A20' },
|
2026-05-19 09:47:13 +01:00
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
2026-02-02 20:34:35 +00:00
|
|
|
export const metadata: Metadata = {
|
2026-05-19 09:47:13 +01:00
|
|
|
appleWebApp: {
|
|
|
|
|
capable: true,
|
2026-08-07 18:33:30 +01:00
|
|
|
title: 'schoolcompare',
|
2026-05-19 09:47:13 +01:00
|
|
|
statusBarStyle: 'default',
|
|
|
|
|
},
|
2026-02-02 20:34:35 +00:00
|
|
|
title: {
|
2026-08-07 18:33:30 +01:00
|
|
|
default: 'schoolcompare | Compare School Performance',
|
|
|
|
|
template: '%s | schoolcompare',
|
2026-02-02 20:34:35 +00:00
|
|
|
},
|
2026-03-28 14:59:40 +00:00
|
|
|
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',
|
2026-08-07 18:33:30 +01:00
|
|
|
authors: [{ name: 'schoolcompare' }],
|
2026-02-02 20:34:35 +00:00
|
|
|
manifest: '/manifest.json',
|
2026-08-06 12:13:04 +01:00
|
|
|
// No `icons` key on purpose: setting it here would override the file
|
|
|
|
|
// conventions. app/icon.svg and app/apple-icon.tsx are the source, and
|
|
|
|
|
// app/opengraph-image.tsx supplies og:image and twitter:image.
|
|
|
|
|
metadataBase: new URL('https://schoolcompare.co.uk'),
|
2026-02-02 20:34:35 +00:00
|
|
|
openGraph: {
|
|
|
|
|
type: 'website',
|
2026-08-07 18:33:30 +01:00
|
|
|
title: 'schoolcompare | Compare School Performance',
|
2026-03-28 14:59:40 +00:00
|
|
|
description: 'Compare primary and secondary school SATs and GCSE performance across England',
|
2026-02-02 20:34:35 +00:00
|
|
|
url: 'https://schoolcompare.co.uk',
|
2026-08-07 18:33:30 +01:00
|
|
|
siteName: 'schoolcompare',
|
2026-02-02 20:34:35 +00:00
|
|
|
},
|
|
|
|
|
twitter: {
|
2026-08-06 12:13:04 +01:00
|
|
|
// summary_large_image now that there is an image worth showing.
|
|
|
|
|
card: 'summary_large_image',
|
2026-08-07 18:33:30 +01:00
|
|
|
title: 'schoolcompare | Compare School Performance',
|
2026-03-28 14:59:40 +00:00
|
|
|
description: 'Compare primary and secondary school SATs and GCSE performance across England',
|
2026-02-02 20:34:35 +00:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default function RootLayout({
|
|
|
|
|
children,
|
|
|
|
|
}: Readonly<{
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}>) {
|
|
|
|
|
return (
|
2026-08-06 13:38:17 +01:00
|
|
|
// The font variable classes must sit on <html>, not <body>. globals.css
|
2026-08-07 18:33:30 +01:00
|
|
|
// declares --font-display on :root as var(--font-manrope) and --font-ui as
|
|
|
|
|
// var(--font-inter), and a custom property's var() references resolve on
|
|
|
|
|
// the element that declares it. With the classes on <body>, those two are
|
|
|
|
|
// undefined at :root, so --font-display computes to the guaranteed-invalid
|
|
|
|
|
// value and every font-family referencing it silently falls back — which
|
|
|
|
|
// once shipped the whole site in Times. Nothing throws and no unit test
|
|
|
|
|
// fails, so the e2e typeface assertion is the only guard.
|
2026-08-07 18:05:49 +01:00
|
|
|
<html lang="en" className={`${manrope.variable} ${inter.variable}`}>
|
2026-02-20 15:52:53 +00:00
|
|
|
<head>
|
2026-06-02 13:46:45 +01:00
|
|
|
<link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
|
|
|
|
|
<link rel="preconnect" href="https://api.postcodes.io" />
|
2026-07-03 13:24:14 +01:00
|
|
|
{/* data-domains: the tracker only fires on the production hostnames,
|
|
|
|
|
so staging (same image, different host) never pollutes Umami */}
|
2026-02-20 15:52:53 +00:00
|
|
|
<Script
|
|
|
|
|
src="https://analytics.schoolcompare.co.uk/script.js"
|
|
|
|
|
data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
|
2026-07-03 13:24:14 +01:00
|
|
|
data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
|
2026-05-19 22:56:33 +01:00
|
|
|
data-performance="true"
|
2026-02-20 15:52:53 +00:00
|
|
|
strategy="afterInteractive"
|
|
|
|
|
/>
|
2026-07-21 16:03:18 +01:00
|
|
|
{/* 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"
|
|
|
|
|
/>
|
2026-02-20 15:52:53 +00:00
|
|
|
</head>
|
2026-08-06 13:38:17 +01:00
|
|
|
<body>
|
2026-02-02 20:34:35 +00:00
|
|
|
<ComparisonProvider>
|
2026-03-25 20:28:03 +00:00
|
|
|
<a href="#main-content" className="skip-link">Skip to main content</a>
|
2026-02-02 21:39:40 +00:00
|
|
|
<Navigation />
|
2026-03-25 20:28:03 +00:00
|
|
|
<main id="main-content" className="main">
|
2026-02-02 21:39:40 +00:00
|
|
|
{children}
|
|
|
|
|
</main>
|
2026-03-05 09:33:47 +00:00
|
|
|
<ComparisonToast />
|
2026-02-02 21:39:40 +00:00
|
|
|
<Footer />
|
2026-02-02 20:34:35 +00:00
|
|
|
</ComparisonProvider>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
