Alerte404

Composant React + scraper pour afficher les alertes enlèvement sur votre site.

Comment ça marche

Le site officiel bloque les requêtes navigateur (CORS). Le scraping passe par votre serveur :

Navigateur                      Votre serveur                  Site gouv
    │                               │                              │
    │  GET /api/alerte-enlevement   │                              │
    │──────────────────────────────>│                              │
    │                               │  GET (scrape HTML)           │
    │                               │─────────────────────────────>│
    │                               │<─────────────────────────────│
    │                               │  parse → JSON                │
    │         { title, desc, ... }  │                              │
    │<──────────────────────────────│                              │
    │                               │                              │
    │  <AlerteEnlevementCard />     │                              │
    │  affiche la carte             │                              │

Installation

npm install alerte404 cheerio

cheerio est requis uniquement côté serveur.

1. Backend — créer l'endpoint

Express / Fastify

import express from "express";
import { scrapeAlerteEnlevement } from "alerte404/server";

const app = express();

app.get("/api/alerte-enlevement", async (_req, res) => {
  const data = await scrapeAlerteEnlevement();
  res.json(data);
});

Next.js (App Router)

// app/api/alerte-enlevement/route.ts
import { scrapeAlerteEnlevement } from "alerte404/server";
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json(await scrapeAlerteEnlevement());
}

Nuxt (server route)

// server/api/alerte-enlevement.get.ts
import { scrapeAlerteEnlevement } from "alerte404/server";

export default defineEventHandler(() => scrapeAlerteEnlevement());

2. Frontend — le composant React

import { AlerteEnlevementCard } from "alerte404";

export default function MyPage() {
  return <AlerteEnlevementCard />;
}

Le composant fetch /api/alerte-enlevement automatiquement. Pas d'alerte = rien ne s'affiche. Alerte active = la carte apparaît.

Props (toutes optionnelles)

<AlerteEnlevementCard
  apiUrl="/api/alerte-enlevement"
  showPhotos={true}
  showBanner={true}
  showIcon={true}
  animateIcon={true}
  testMode={false}
  debug={false}
  showSkeleton={true}
  className="my-class"
  style={{ maxWidth: 700 }}
/>

| Prop | Défaut | Description | | ------------- | ------------------------ | --------------------------------------- | | apiUrl | /api/alerte-enlevement | URL JSON (votre backend) | | data | — | Données inline. Pas de fetch si présent | | showPhotos | true | Afficher les visuels | | showBanner | true | Bandeau rouge « Alerte Enlèvement » | | showIcon | true | Triangle d'alerte dans le bandeau | | animateIcon | true | Animation pulsation du triangle | | testMode | false | Bandeau gris + fetch Wayback auto (dev) | | debug | false | Affiche erreurs API + lien Wayback | | showSkeleton| true | Squelette pendant le chargement (false = texte « Chargement… ») | | className | — | Classe CSS sur le wrapper | | style | — | Style inline sur le wrapper |

Personnalisation CSS

Les couleurs se surchargent via des variables CSS sur le wrapper .aec :

.aec {
  --aec-banner: #d90012;
  --aec-banner-text: #ffffff;
  --aec-bg: #ffffff;
  --aec-text: #2d2d2d;
  --aec-accent: #a8000e;
  --aec-radius: 6px;
}

Mode test (dev, sans backend)

<AlerteEnlevementCard testMode debug />

Fetch directement une capture Wayback Machine. Pas besoin de backend pour voir le rendu.

Récapitulatif des imports

| Import | Quoi | Dépendance supp. | | ------------------ | ----------------------- | ---------------- | | alerte404 | Composant React (front) | react | | alerte404/server | Scraper Node (back) | cheerio |

Contribution

Toute contribution est la bienvenue : issues, pull requests, idées ou retours d’expérience.

MIT