Sistema i meta della PWA e traduce le schermate di sistema

`viewport-fit=cover` mancava, quindi `env(safe-area-inset-bottom)` valeva
sempre 0: il codice safe-area della BottomNav c'era già ma era inerte, e su
iPhone in standalone la barra finiva sotto la home bar.

`theme-color` e `background_color` erano `#111111` su un'app con fondo quasi
bianco: barra di stato nera e splash nero prima di una UI chiara.

`lang="en"` su un'app interamente in italiano: gli screen reader leggevano
tutto con fonetica inglese. Con esso 404 e schermata d'errore, che erano
rimaste in inglese.

L'anteprima social puntava a un'immagine di preview Lovable su R2 ormai
scaduta e dichiarava `twitter:site @Lovable`: ora usa l'icona della squadra,
con `summary` al posto di `summary_large_image` visto che l'unica immagine
disponibile è quadrata.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 12:41:36 +02:00
co-authored by Claude Opus 5
parent 38e0185325
commit 230ea1d156
2 changed files with 30 additions and 28 deletions
+27 -26
View File
@@ -24,17 +24,17 @@ function NotFoundComponent() {
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4">
<div className="max-w-md text-center">
<h1 className="text-7xl font-bold text-foreground">404</h1>
<h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
<h1 className="font-display-lg text-7xl text-foreground">404</h1>
<h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
<p className="mt-2 text-sm text-muted-foreground">
The page you're looking for doesn't exist or has been moved.
La pagina che cerchi non esiste o è stata spostata.
</p>
<div className="mt-6">
<Link
to="/"
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
>
Go home
Torna alla home
</Link>
</div>
</div>
@@ -53,26 +53,27 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
<div className="flex min-h-screen items-center justify-center bg-background px-4">
<div className="max-w-md text-center">
<h1 className="text-xl font-semibold tracking-tight text-foreground">
This page didn't load
Questa pagina non si è caricata
</h1>
<p className="mt-2 text-sm text-muted-foreground">
Something went wrong on our end. You can try refreshing or head back home.
Qualcosa è andato storto da parte nostra. Puoi riprovare o tornare alla home.
</p>
<div className="mt-6 flex flex-wrap justify-center gap-2">
<button
type="button"
onClick={() => {
router.invalidate();
reset();
}}
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
>
Try again
Riprova
</button>
<a
href="/"
className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground"
>
Go home
Torna alla home
</a>
</div>
</div>
@@ -84,7 +85,12 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
// `viewport-fit=cover` è obbligatorio perché env(safe-area-inset-*) sia
// diverso da 0 su iOS: senza, la BottomNav finisce sotto la home bar.
{
name: "viewport",
content: "width=device-width, initial-scale=1, viewport-fit=cover",
},
{ title: "CrAPP — L'app del CRAP Volley" },
{
name: "description",
@@ -92,7 +98,9 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
"Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
},
{ name: "author", content: "CRAP Volley" },
{ name: "theme-color", content: "#111111" },
// Deve combaciare con --background, altrimenti la barra di stato resta
// nera sopra un'interfaccia chiara.
{ name: "theme-color", content: "#fafafb" },
{ property: "og:title", content: "CrAPP — L'app del CRAP Volley" },
{
property: "og:description",
@@ -100,24 +108,17 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
"Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
},
{ property: "og:type", content: "website" },
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:site", content: "@Lovable" },
// `summary` e non `summary_large_image`: l'unica immagine è l'icona
// quadrata della squadra, non una copertina 2:1.
{ name: "twitter:card", content: "summary" },
{ name: "twitter:title", content: "CrAPP — L'app del CRAP Volley" },
{
name: "twitter:description",
content:
"Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
},
{
property: "og:image",
content:
"https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
},
{
name: "twitter:image",
content:
"https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
},
{ property: "og:image", content: "/icon-512.png" },
{ name: "twitter:image", content: "/icon-512.png" },
],
links: [
{
@@ -143,7 +144,7 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
function RootShell({ children }: { children: ReactNode }) {
return (
<html lang="en">
<html lang="it">
<head>
<HeadContent />
</head>