feat: pages contenu + SEO + Umami + sitemap
Some checks are pending
Deploy info-canicule / deploy (push) Waiting to run
Some checks are pending
Deploy info-canicule / deploy (push) Waiting to run
- Pages /a-propos, /mentions-legales, /dependances, /soutenir (Ko-fi) - Header/footer enrichis (lien Soutenir, mentions, API publique) - @astrojs/sitemap + /sitemap-departements.xml.ts (96 dépts) - robots.txt + og-image.svg + JSON-LD Schema.org - Meta tags Open Graph + Twitter Card + canonical - Umami snippet conditionnel (UMAMI_WEBSITE_ID env) - Slot SENTRY_DSN dans .env.tmpl (GlitchTip — SDK à wire ultérieurement) - @tailwindcss/typography pour les pages contenu Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian
parent
e075d963bc
commit
86352eb436
14 changed files with 727 additions and 23 deletions
|
|
@ -4,12 +4,43 @@ import '../styles/global.css';
|
|||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
canonical?: string;
|
||||
ogImage?: string;
|
||||
noindex?: boolean;
|
||||
}
|
||||
|
||||
const SITE = 'https://info-canicule.nocleus.com';
|
||||
const {
|
||||
title = 'Info Canicule — Vigilance météo en temps réel',
|
||||
description = 'Suivi en temps réel des alertes Vigilance Météo France et conseils officiels en cas de canicule, orages, tempêtes.',
|
||||
title = 'Info Canicule — Vigilance météo France en temps réel',
|
||||
description = 'Suivi gratuit et sans publicité des alertes Vigilance Météo France (canicule, orages, tempêtes), avec carte interactive par département et conseils officiels.',
|
||||
canonical,
|
||||
ogImage = '/og-image.svg',
|
||||
noindex = false,
|
||||
} = Astro.props;
|
||||
|
||||
const canonicalUrl = canonical ?? new URL(Astro.url.pathname, SITE).toString();
|
||||
const fullOgImage = ogImage.startsWith('http') ? ogImage : `${SITE}${ogImage}`;
|
||||
const umamiId = import.meta.env.UMAMI_WEBSITE_ID;
|
||||
const umamiSrc = import.meta.env.UMAMI_SRC ?? 'https://analytics.nocleus.com/script.js';
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'WebSite',
|
||||
name: 'Info Canicule',
|
||||
url: SITE,
|
||||
description,
|
||||
inLanguage: 'fr-FR',
|
||||
publisher: {
|
||||
'@type': 'Person',
|
||||
name: 'Florian Bouchet',
|
||||
url: 'https://nocleus.com',
|
||||
},
|
||||
potentialAction: {
|
||||
'@type': 'SearchAction',
|
||||
target: `${SITE}/departement/{code}`,
|
||||
'query-input': 'required name=code',
|
||||
},
|
||||
};
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -18,24 +49,46 @@ const {
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="robots" content="index, follow" />
|
||||
{noindex ? <meta name="robots" content="noindex, nofollow" /> : <meta name="robots" content="index, follow, max-image-preview:large" />}
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Info Canicule" href={`${SITE}/sitemap-index.xml`} />
|
||||
<title>{title}</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonicalUrl} />
|
||||
<meta property="og:image" content={fullOgImage} />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta property="og:site_name" content="Info Canicule" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={fullOgImage} />
|
||||
|
||||
<meta name="theme-color" content="#ea580c" />
|
||||
<meta name="format-detection" content="telephone=yes" />
|
||||
|
||||
<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
|
||||
|
||||
{umamiId && (
|
||||
<script defer src={umamiSrc} data-website-id={umamiId} data-do-not-track="true"></script>
|
||||
)}
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<header class="border-b border-slate-200 bg-white">
|
||||
<div class="container-tight flex items-center justify-between py-4">
|
||||
<div class="container-tight flex flex-wrap items-center justify-between gap-3 py-4">
|
||||
<a href="/" class="flex items-center gap-2 no-underline">
|
||||
<span class="text-2xl">🌡️</span>
|
||||
<span class="text-lg font-bold text-canicule-700">Info Canicule</span>
|
||||
</a>
|
||||
<nav class="flex items-center gap-6 text-sm font-medium text-slate-600">
|
||||
<a href="/">Carte Vigilance</a>
|
||||
<nav class="flex flex-wrap items-center gap-x-5 gap-y-1 text-sm font-medium text-slate-600">
|
||||
<a href="/">Carte</a>
|
||||
<a href="/conseils">Conseils</a>
|
||||
<a href="/a-propos">À propos</a>
|
||||
<a href="/soutenir" class="text-canicule-700">☕ Soutenir</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -44,22 +97,37 @@ const {
|
|||
</main>
|
||||
<footer class="border-t border-slate-200 bg-white">
|
||||
<div class="container-tight py-6 text-sm text-slate-500">
|
||||
<p>
|
||||
Données :
|
||||
<a href="https://meteo.data.gouv.fr/" class="text-canicule-700" rel="noopener">Météo France</a>
|
||||
via
|
||||
<a href="https://public.opendatasoft.com/" class="text-canicule-700" rel="noopener">Opendatasoft</a>
|
||||
— Licence Ouverte 2.0.
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Service d'information publique sans valeur officielle. En cas de doute, suivre les consignes de
|
||||
la Préfecture (
|
||||
<a href="tel:112" class="text-canicule-700">112</a>
|
||||
en urgence).
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-slate-400">
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<p class="font-semibold text-slate-700">Info Canicule</p>
|
||||
<p class="mt-1 text-xs">
|
||||
Service d'information publique gratuit, sans publicité, non lucratif.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-slate-700">Liens</p>
|
||||
<ul class="mt-1 space-y-0.5">
|
||||
<li><a href="/a-propos">À propos</a></li>
|
||||
<li><a href="/mentions-legales">Mentions légales</a></li>
|
||||
<li><a href="/dependances">Dépendances</a></li>
|
||||
<li><a href="/soutenir">Soutenir</a></li>
|
||||
<li><a href="/api/vigilance">API JSON publique</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-slate-700">Données</p>
|
||||
<p class="mt-1 text-xs">
|
||||
<a href="https://meteo.data.gouv.fr/" rel="noopener">Météo France</a>
|
||||
— <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>.
|
||||
En urgence : <a href="tel:112" class="text-canicule-700 font-semibold">112</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-slate-400">
|
||||
Un projet
|
||||
<a href="https://nocleus.com" class="text-canicule-700" rel="noopener">Nocleus</a>.
|
||||
Code source :
|
||||
<a href="https://git.nocleus.com/florian/info-canicule" class="text-canicule-700" rel="noopener">git.nocleus.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue