snake/YTVeille
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ismail SEBBANE
2026-05-22 09:17:28 +02:00
commit 26b3ed6994
33 changed files with 2943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+2
View File
@@ -0,0 +1,2 @@
YOUTUBE_API_KEY=your_youtube_data_api_v3_key_here
NEXT_PUBLIC_API_URL=http://localhost:8000
.gitignore
+26
View File
@@ -0,0 +1,26 @@
# Secrets
.env
# Données générées
data/
# Frontend
node_modules/
.next/
frontend/node_modules/
frontend/.next/
# Python
__pycache__/
*.pyc
*.pyo
.pytest_cache/
*.egg-info/
dist/
build/
.venv/
venv/
# OS
.DS_Store
Thumbs.db
README.md
+226
View File
@@ -0,0 +1,226 @@
# YTVeille — Veille automatique YouTube en français
Veille automatique des meilleures vidéos YouTube **en français** sur n'importe quel domaine technique.
Requêtes configurables dynamiquement, scoring multi-critères, dark mode, filtres avancés.
---
## Prérequis
- Docker & Docker Compose
- [Clé YouTube Data API v3](https://console.cloud.google.com/)
---
## Démarrage rapide (local)
```bash
# 1. Cloner le projet
git clone https://github.com/TON_USER/YTVeille.git
cd YTVeille
# 2. Configurer les variables d'environnement
cp .env.example .env
# Puis éditer .env et remplacer "your_youtube_data_api_v3_key_here" par ta clé
# NEXT_PUBLIC_API_URL reste http://localhost:8000 pour un usage local
# 3. Lancer les services
docker compose up -d --build
# 4. Ouvrir l'application
# Frontend : http://localhost:3000
# API docs : http://localhost:8000/docs
```
Le **worker** effectue une 1ère mise à jour au démarrage, puis quotidiennement à 6h UTC.
---
## Architecture
```
├── backend/
│ ├── api/ FastAPI — REST API, endpoints /videos, /refresh, /status, /config
│ ├── scoring/ Algorithme de scoring multi-critères (sur 100)
│ └── worker/ APScheduler — cron quotidien + pipeline fetch→score→persist
├── frontend/ Next.js 14 — Dashboard UI (filtres + cards + dark mode)
├── data/ videos.json, config.json, quota_status.json (volume Docker partagé)
└── docker-compose.yml
```
---
## Score des vidéos (0–100)
| Critère | Poids |
|---|---|
| Vues pondérées par ancienneté | 25 pts |
| Ratio likes / vues | 20 pts |
| Mots-clés techniques détectés | 25 pts |
| Durée ≥ 10 min | 10 pts |
| Présence de chapitrage | 10 pts |
| Nombre de topics distincts | 10 pts |
---
## Variables d'environnement
| Variable | Description |
|---|---|
| `YOUTUBE_API_KEY` | Clé YouTube Data API v3 (obligatoire) |
| `DATA_PATH` | Chemin du fichier JSON (défaut : `/app/data/videos.json`) |
| `NEXT_PUBLIC_API_URL` | URL publique de l'API appelée par le navigateur (défaut : `http://localhost:8000`) |
> **Important** : `NEXT_PUBLIC_API_URL` est compilée dans le bundle JavaScript au moment du `docker build`.
> Elle doit pointer vers l'IP/domaine **public** du serveur, pas le hostname Docker interne.
---
## Commandes utiles
```bash
# Voir les logs en temps réel
docker compose logs -f
# Forcer une mise à jour manuelle
curl -X POST http://localhost:8000/api/refresh
# Voir le statut de l'API (quota, vidéos, refresh en cours)
curl http://localhost:8000/api/status | jq .
# Lancer les tests unitaires (backend)
cd backend && pip install -e ".[dev]" && pytest scoring/tests/ -v
```
---
## Guide de déploiement sur un serveur distant
### 1. Provisionner un VPS
N'importe quel fournisseur : **OVH** (~3€/mois), Hetzner, DigitalOcean, AWS EC2...
OS recommandé : **Ubuntu 22.04 LTS**
### 2. Installer Docker sur le serveur
```bash
# Se connecter en SSH
ssh user@TON_IP_SERVEUR
# Installer Docker
curl -fsSL https://get.docker.com | sh
sudo usermod -aG docker $USER
# Déconnecte-toi et reconnecte-toi pour appliquer le groupe
exit
ssh user@TON_IP_SERVEUR
```
### 3. Copier le projet sur le serveur
**Option A — via Git (recommandé) :**
```bash
# Sur le serveur
git clone https://github.com/TON_USER/YTVeille.git
cd YTVeille
```
**Option B — via rsync depuis ta machine locale :**
```bash
# Depuis ta machine locale
rsync -av --exclude='node_modules' --exclude='.next' --exclude='data' \
/chemin/local/YTVeille/ \
user@TON_IP_SERVEUR:~/YTVeille/
```
### 4. Créer le fichier `.env` sur le serveur
```bash
# Sur le serveur, dans le dossier YTVeille/
cat > .env << 'EOF'
YOUTUBE_API_KEY=ta_cle_youtube_api
NEXT_PUBLIC_API_URL=http://TON_IP_SERVEUR:8000
EOF
```
> `NEXT_PUBLIC_API_URL` doit être l'IP ou le domaine **public** du serveur sur le port 8000,
> car c'est le navigateur du visiteur qui appelle l'API directement.
### 5. Ouvrir les ports du pare-feu
```bash
sudo ufw allow 22 # SSH
sudo ufw allow 3000 # Frontend
sudo ufw allow 8000 # API
sudo ufw enable
```
### 6. Lancer l'application
```bash
cd ~/YTVeille
docker compose up -d --build
docker compose ps # vérifier que tout tourne
```
L'application est accessible sur `http://TON_IP_SERVEUR:3000`
### 7. (Optionnel) Domaine + HTTPS avec nginx
Si tu as un nom de domaine (ex: `ytveille.monsite.com`) :
**Installer nginx et certbot :**
```bash
sudo apt install nginx certbot python3-certbot-nginx -y
```
**Créer la configuration nginx** (`/etc/nginx/sites-available/ytveille`) :
```nginx
server {
server_name ytveille.monsite.com;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /api/ {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
```
**Activer et sécuriser :**
```bash
sudo ln -s /etc/nginx/sites-available/ytveille /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
# Générer le certificat SSL (HTTPS gratuit)
sudo certbot --nginx -d ytveille.monsite.com
```
**Mettre à jour le `.env`** avec l'URL HTTPS :
```bash
# Modifier NEXT_PUBLIC_API_URL pour utiliser le domaine
NEXT_PUBLIC_API_URL=https://ytveille.monsite.com
# Puis rebuilder le frontend
docker compose up -d --build frontend
```
> Avec nginx, les ports 3000 et 8000 ne sont plus exposés directement :
> tout passe par le port 443 (HTTPS) via le reverse proxy.
---
## Quota YouTube API
L'API YouTube Data v3 est limitée à **10 000 unités/jour** (chaque recherche coûte 100 unités,
soit ~100 recherches max). En cas de dépassement :
- Un banner d'avertissement s'affiche automatiquement dans l'application
- Le quota se renouvelle chaque jour à **minuit heure du Pacifique** (~8h–9h UTC)
- Pour obtenir plus de quota : [console.cloud.google.com](https://console.cloud.google.com) → API & Services → Quotas
backend/api/Dockerfile
+17
View File
@@ -0,0 +1,17 @@
FROM python:3.12-slim
WORKDIR /app
COPY pyproject.toml .
RUN pip install --no-cache-dir \
"fastapi>=0.110.0" \
"uvicorn[standard]>=0.29.0" \
"httpx>=0.27.0" \
"pydantic>=2.6.0" \
"apscheduler>=3.10.4"
COPY . .
EXPOSE 8000
CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "8000"]
backend/api/__init__.py
+1
View File
@@ -0,0 +1 @@
# Backend Python packages init
backend/api/main.py
+192
View File
@@ -0,0 +1,192 @@
"""
API FastAPI — Veille YouTube Kubernetes.
"""
import logging
from datetime import datetime, timezone
from typing import Optional
from fastapi import FastAPI, Query, HTTPException, BackgroundTasks
from fastapi.middleware.cors import CORSMiddleware
from .models import Video, VideoList, RefreshResult, RefreshRequest
from .storage import load_videos, save_videos, get_last_updated, load_config, save_config, load_quota_status, save_quota_status
from .youtube_client import fetch_all_videos, QuotaExceededError
from scoring.scorer import score_video
logging.basicConfig(
level=logging.INFO,
format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
)
logger = logging.getLogger(__name__)
app = FastAPI(
title="YTVeille",
description="API de veille automatique des meilleures vidéos YouTube en français",
version="1.0.0",
)
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"],
)
_refresh_running = False
def _run_refresh() -> RefreshResult:
"""Pipeline : fetch → score → persist."""
import asyncio
config = load_config()
queries = config.get("queries")
raw = asyncio.run(fetch_all_videos(queries))
logger.info("Vidéos récupérées : %d", len(raw))
scored = []
for v in raw:
s, topics = score_video(v)
v["score"] = s
v["topics"] = topics
scored.append(v)
# Trier par score décroissant
scored.sort(key=lambda x: x["score"], reverse=True)
save_videos(scored)
logger.info("Vidéos sauvegardées : %d", len(scored))
return RefreshResult(
fetched=len(raw),
scored=len(scored),
stored=len(scored),
timestamp=datetime.now(timezone.utc),
)
@app.get("/api/videos", response_model=VideoList)
def list_videos(
q: Optional[str] = Query(None),
min_score: float = Query(0.0, ge=0, le=100),
topic: Optional[str] = Query(None),
source_query: list[str] = Query(default=[]),
days: int = Query(30, ge=1, le=90),
page: int = Query(1, ge=1),
page_size: int = Query(20, ge=1, le=100),
):
"""Liste paginée des vidéos avec filtres."""
all_videos = load_videos()
# Filtre texte (titre, chaîne, tags YouTube)
if q:
q_lower = q.lower()
all_videos = [
v for v in all_videos
if q_lower in v.get("title", "").lower()
or q_lower in v.get("channel", "").lower()
or any(q_lower in t.lower() for t in v.get("tags", []))
]
# Filtre par requête source (OR entre les requêtes sélectionnées)
if source_query:
all_videos = [
v for v in all_videos
if any(sq in v.get("source_queries", []) for sq in source_query)
]
# Filtre score
filtered = [v for v in all_videos if v.get("score", 0) >= min_score]
# Filtre topic
if topic:
filtered = [v for v in filtered if topic in v.get("topics", [])]
# Filtre date
from datetime import timedelta
cutoff = datetime.now(timezone.utc) - timedelta(days=days)
result = []
for v in filtered:
pub = v.get("published_at", "")
try:
dt = datetime.fromisoformat(str(pub).replace("Z", "+00:00"))
if dt >= cutoff:
result.append(v)
except Exception:
result.append(v)
total = len(result)
start = (page - 1) * page_size
page_items = result[start : start + page_size]
return VideoList(
total=total,
page=page,
page_size=page_size,
items=[Video(**v) for v in page_items],
)
@app.get("/api/videos/{video_id}", response_model=Video)
def get_video(video_id: str):
"""Détail d'une vidéo par ID."""
all_videos = load_videos()
for v in all_videos:
if v["id"] == video_id:
return Video(**v)
raise HTTPException(status_code=404, detail="Vidéo non trouvée")
@app.get("/api/config")
def get_config():
"""Retourne la configuration de recherche actuelle."""
return load_config()
@app.post("/api/refresh", response_model=RefreshResult)
def refresh(background_tasks: BackgroundTasks, body: Optional[RefreshRequest] = None):
"""Déclenche une mise à jour. Si body.queries fourni, sauvegarde la config."""
global _refresh_running
if _refresh_running:
raise HTTPException(status_code=409, detail="Un refresh est déjà en cours")
if body and body.queries:
save_config({"queries": body.queries})
_refresh_running = True
def _wrapped():
global _refresh_running
try:
_run_refresh()
save_quota_status(False)
except QuotaExceededError:
save_quota_status(True)
logger.warning("Quota YouTube API dépassé — refresh abandonné")
except Exception as exc:
logger.error("Erreur lors du refresh : %s", exc)
finally:
_refresh_running = False
background_tasks.add_task(_wrapped)
return RefreshResult(
fetched=0,
scored=0,
stored=0,
timestamp=datetime.now(timezone.utc),
)
@app.get("/api/status")
def status():
"""État de l'API et date de dernière mise à jour."""
last = get_last_updated()
videos = load_videos()
quota = load_quota_status()
return {
"status": "ok",
"video_count": len(videos),
"last_updated": last.isoformat() if last else None,
"refresh_running": _refresh_running,
"queries": load_config().get("queries", []),
"quota_exceeded": quota.get("exceeded", False),
"quota_exceeded_at": quota.get("exceeded_at"),
}
backend/api/models.py
+46
View File
@@ -0,0 +1,46 @@
from pydantic import BaseModel
from typing import List, Optional
from datetime import datetime
class Video(BaseModel):
id: str
title: str
channel: str
published_at: datetime
duration_seconds: int
view_count: int
like_count: int
thumbnail_url: str
youtube_url: str
tags: List[str] = []
has_chapters: bool = False
score: float = 0.0
topics: List[str] = []
source_queries: List[str] = []
class VideoList(BaseModel):
total: int
page: int
page_size: int
items: List[Video]
class FilterParams(BaseModel):
min_score: float = 0.0
topic: Optional[str] = None
days: int = 30
page: int = 1
page_size: int = 20
class RefreshRequest(BaseModel):
queries: Optional[List[str]] = None
class RefreshResult(BaseModel):
fetched: int
scored: int
stored: int
timestamp: datetime
backend/api/storage.py
+92
View File
@@ -0,0 +1,92 @@
"""
Persistance des vidéos dans un fichier JSON.
Écriture atomique pour éviter la corruption.
"""
import json
import os
import tempfile
from datetime import datetime, timezone
from pathlib import Path
from typing import Any
DATA_PATH = Path(os.environ.get("DATA_PATH", "/app/data/videos.json"))
CONFIG_PATH = DATA_PATH.parent / "config.json"
QUOTA_PATH = DATA_PATH.parent / "quota_status.json"
DEFAULT_QUERIES = [
"Kubernetes production français",
"Kubernetes architecture français",
"Kubernetes retour d'expérience",
"Kubernetes incident production français",
"Kubernetes scaling français",
"Kubernetes observabilité",
"Kubernetes tutoriel français",
"Kubernetes déploiement français",
]
def _ensure_dir() -> None:
DATA_PATH.parent.mkdir(parents=True, exist_ok=True)
def load_quota_status() -> dict:
"""Charge l'état du quota YouTube API."""
if not QUOTA_PATH.exists():
return {"exceeded": False, "exceeded_at": None}
with QUOTA_PATH.open("r", encoding="utf-8") as f:
return json.load(f)
def save_quota_status(exceeded: bool) -> None:
"""Persiste l'état du quota YouTube API."""
_ensure_dir()
tmp = QUOTA_PATH.with_suffix(".tmp")
data = {
"exceeded": exceeded,
"exceeded_at": datetime.now(timezone.utc).isoformat() if exceeded else None,
}
with tmp.open("w", encoding="utf-8") as f:
json.dump(data, f, ensure_ascii=False)
tmp.replace(QUOTA_PATH)
def load_config() -> dict:
"""Charge la configuration de recherche (queries)."""
if not CONFIG_PATH.exists():
return {"queries": DEFAULT_QUERIES}
with CONFIG_PATH.open("r", encoding="utf-8") as f:
return json.load(f)
def save_config(config: dict) -> None:
"""Sauvegarde la configuration de recherche."""
_ensure_dir()
tmp = CONFIG_PATH.with_suffix(".tmp")
with tmp.open("w", encoding="utf-8") as f:
json.dump(config, f, ensure_ascii=False, indent=2)
tmp.replace(CONFIG_PATH)
def load_videos() -> list[dict[str, Any]]:
"""Charge la liste des vidéos depuis le fichier JSON."""
if not DATA_PATH.exists():
return []
with DATA_PATH.open("r", encoding="utf-8") as f:
return json.load(f)
def save_videos(videos: list[dict[str, Any]]) -> None:
"""Sauvegarde atomique des vidéos (écriture via fichier temporaire)."""
_ensure_dir()
tmp = DATA_PATH.with_suffix(".tmp")
with tmp.open("w", encoding="utf-8") as f:
json.dump(videos, f, ensure_ascii=False, indent=2, default=str)
tmp.replace(DATA_PATH)
def get_last_updated() -> datetime | None:
"""Retourne la date de dernière modification du fichier de données."""
if not DATA_PATH.exists():
return None
return datetime.fromtimestamp(DATA_PATH.stat().st_mtime)
backend/api/youtube_client.py
+243
View File
@@ -0,0 +1,243 @@
"""
Client YouTube Data API v3.
Recherche multi-mots-clés de vidéos Kubernetes en français.
"""
import os
import re
import logging
from datetime import datetime, timedelta, timezone
from typing import Any
import httpx
logger = logging.getLogger(__name__)
class QuotaExceededError(Exception):
"""Levée quand le quota journalier YouTube API est dépassé (HTTP 403)."""
YOUTUBE_API_BASE = "https://www.googleapis.com/youtube/v3"
SEARCH_QUERIES = [
"Kubernetes production français",
"Kubernetes architecture français",
"Kubernetes retour d'expérience",
"Kubernetes incident production français",
"Kubernetes scaling français",
"Kubernetes observabilité",
"Kubernetes tutoriel français",
"Kubernetes déploiement français",
]
def _get_api_key() -> str:
key = os.environ.get("YOUTUBE_API_KEY", "")
if not key:
raise RuntimeError("YOUTUBE_API_KEY manquante dans les variables d'environnement")
return key
def _iso_days_ago(days: int = 90) -> str:
dt = datetime.now(timezone.utc) - timedelta(days=days)
return dt.strftime("%Y-%m-%dT%H:%M:%SZ")
def _parse_duration(iso_duration: str) -> int:
"""Convertit ISO 8601 duration (PT1H2M3S) en secondes."""
pattern = r"PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?"
m = re.match(pattern, iso_duration or "")
if not m:
return 0
h = int(m.group(1) or 0)
mn = int(m.group(2) or 0)
s = int(m.group(3) or 0)
return h * 3600 + mn * 60 + s
def _has_chapters(description: str) -> bool:
"""Détecte la présence de chapitrage (timestamps 0:00 dans la description)."""
return bool(re.search(r"^\s*\d+:\d+", description or "", re.MULTILINE))
_FRENCH_WORDS = {
"avec", "pour", "dans", "sur", "cette", "votre", "notre", "mais", "très",
"comme", "nous", "vous", "comment", "voici", "voilà", "pourquoi", "mise",
"une", "des", "les", "est", "par", "qui", "que", "aux", "tout", "son",
"leur", "aussi", "bien", "chez", "vers", "sous", "avoir", "être", "faire",
}
_FR_ACCENT_RE = re.compile(r"[éèêëàâùûîïôçœæ]", re.IGNORECASE)
def _is_likely_french(snippet: dict) -> bool:
"""Retourne True si la vidéo est vraisemblablement en français."""
audio_lang = (snippet.get("defaultAudioLanguage") or "").lower()
default_lang = (snippet.get("defaultLanguage") or "").lower()
title = snippet.get("title", "")
first_desc = (snippet.get("description") or "")[:400]
# Langue explicitement déclarée française
if audio_lang.startswith("fr") or default_lang.startswith("fr"):
return True
# Accents français dans le titre → signal fort
if _FR_ACCENT_RE.search(title):
return True
# Langue explicitement anglaise (ou autre non-fr) → rejeter
if audio_lang and not audio_lang.startswith("fr"):
return False
if default_lang and not default_lang.startswith("fr"):
return False
# Langue inconnue : détecter via accents ou mots français dans la description
if _FR_ACCENT_RE.search(first_desc):
return True
words = set(f"{title} {first_desc}".lower().split())
return bool(words & _FRENCH_WORDS)
_STOPWORDS = {
"en", "de", "du", "le", "la", "les", "un", "une", "des", "et", "ou",
"pour", "sur", "avec", "dans", "par", "au", "aux", "ce", "qui", "que",
"français", "french", "fr", "how", "to", "the", "and", "with",
}
def _extract_keywords(query: str) -> list[str]:
"""Extrait les mots-clés significatifs d'une requête (mots > 2 chars, hors stopwords)."""
return [w for w in query.lower().split() if len(w) > 2 and w not in _STOPWORDS]
def _is_relevant(video: dict, source_queries: list[str]) -> bool:
"""Retourne True si au moins un mot-clé de la requête source est dans le titre, les tags ou la description."""
title = video.get("title", "").lower()
tags = " ".join(video.get("tags", [])).lower()
desc = video.get("_desc_preview", "").lower()
text = f"{title} {tags} {desc}"
for query in source_queries:
for kw in _extract_keywords(query):
if kw in text:
return True
return False
def _add_french_hint(query: str) -> str:
"""Ajoute 'français' à la requête si aucun indicateur de langue n'est présent."""
lower = query.lower()
if any(w in lower for w in ["français", "francais", "french", " fr "]):
return query
return f"{query} français"
async def search_videos(query: str, client: httpx.AsyncClient, api_key: str) -> list[str]:
"""Retourne une liste d'IDs vidéos pour une requête donnée."""
params = {
"part": "id",
"q": _add_french_hint(query),
"type": "video",
"relevanceLanguage": "fr",
"regionCode": "FR",
"publishedAfter": _iso_days_ago(90),
"maxResults": 25,
"key": api_key,
}
resp = await client.get(f"{YOUTUBE_API_BASE}/search", params=params, timeout=15.0)
try:
resp.raise_for_status()
except httpx.HTTPStatusError as e:
if e.response.status_code == 403:
raise QuotaExceededError("Quota YouTube API journalier dépassé (HTTP 403)") from e
raise
data = resp.json()
return [item["id"]["videoId"] for item in data.get("items", [])]
async def get_video_details(video_ids: list[str], client: httpx.AsyncClient, api_key: str) -> list[dict[str, Any]]:
"""Retourne les détails enrichis pour une liste d'IDs vidéos."""
if not video_ids:
return []
# Batches de 50 (limite API)
results = []
for i in range(0, len(video_ids), 50):
batch = video_ids[i : i + 50]
params = {
"part": "snippet,contentDetails,statistics",
"id": ",".join(batch),
"key": api_key,
}
resp = await client.get(f"{YOUTUBE_API_BASE}/videos", params=params, timeout=15.0)
resp.raise_for_status()
results.extend(resp.json().get("items", []))
videos = []
for item in results:
snippet = item.get("snippet", {})
stats = item.get("statistics", {})
details = item.get("contentDetails", {})
duration_s = _parse_duration(details.get("duration", ""))
description = snippet.get("description", "")
if not _is_likely_french(snippet):
continue
title = snippet.get("title", "")
videos.append({
"id": item["id"],
"title": title,
"channel": snippet.get("channelTitle", ""),
"published_at": snippet.get("publishedAt", ""),
"duration_seconds": duration_s,
"view_count": int(stats.get("viewCount", 0)),
"like_count": int(stats.get("likeCount", 0)),
"thumbnail_url": snippet.get("thumbnails", {}).get("high", {}).get("url", ""),
"youtube_url": f"https://www.youtube.com/watch?v={item['id']}",
"tags": snippet.get("tags", [])[:20],
"has_chapters": _has_chapters(description),
"_desc_preview": description[:600], # temporaire, nettoyé après filtrage
})
return videos
async def fetch_all_videos(queries: list[str] | None = None) -> list[dict[str, Any]]:
"""Lance la recherche sur tous les mots-clés, déduplique par ID et tracke les requêtes sources."""
if queries is None:
queries = SEARCH_QUERIES
api_key = _get_api_key()
# Map video_id → liste des requêtes qui l'ont renvoyé
id_to_queries: dict[str, list[str]] = {}
async with httpx.AsyncClient() as client:
for query in queries:
try:
ids = await search_videos(query, client, api_key)
for vid_id in ids:
id_to_queries.setdefault(vid_id, []).append(query)
logger.info("Requête '%s' → %d IDs", query, len(ids))
except QuotaExceededError:
logger.warning("Quota YouTube dépassé — arrêt des requêtes restantes")
raise
except Exception as exc:
logger.error("Erreur pour la requête '%s': %s", query, exc)
if not id_to_queries:
return []
all_videos = await get_video_details(list(id_to_queries.keys()), client, api_key)
# Attacher les requêtes sources à chaque vidéo
for video in all_videos:
video["source_queries"] = id_to_queries.get(video["id"], [])
# Filtrer les vidéos non pertinentes (titre/tags/description sans aucun mot-clé de la requête)
before = len(all_videos)
all_videos = [v for v in all_videos if _is_relevant(v, v["source_queries"])]
logger.info("Filtre pertinence : %d → %d vidéos", before, len(all_videos))
# Supprimer le champ temporaire avant persistance
for v in all_videos:
v.pop("_desc_preview", None)
return all_videos
backend/pyproject.toml
+29
View File
@@ -0,0 +1,29 @@
[build-system]
requires = ["setuptools>=68"]
build-backend = "setuptools.backends.legacy:build"
[project]
name = "ytveille-backend"
version = "1.0.0"
requires-python = ">=3.12"
dependencies = [
"fastapi>=0.110.0",
"uvicorn[standard]>=0.29.0",
"httpx>=0.27.0",
"pydantic>=2.6.0",
"apscheduler>=3.10.4",
]
[project.optional-dependencies]
dev = [
"pytest>=8.0.0",
"pytest-asyncio>=0.23.0",
"httpx>=0.27.0",
]
[tool.setuptools.packages.find]
where = ["."]
[tool.pytest.ini_options]
testpaths = ["scoring/tests"]
python_files = ["test_*.py"]
backend/scoring/__init__.py
+1
View File
@@ -0,0 +1 @@
# Scoring package
backend/scoring/keywords.py
+54
View File
@@ -0,0 +1,54 @@
"""
Mots-clés techniques Kubernetes pour le scoring sémantique.
Organisés par thème / topic.
"""
from typing import Dict, List
TOPIC_KEYWORDS: Dict[str, List[str]] = {
"incident": [
"incident", "post-mortem", "postmortem", "panne", "outage",
"crash", "debug", "root cause", "rca", "blameless",
],
"architecture": [
"architecture", "diagram", "schema", "multi-cluster", "multi cluster",
"federation", "service mesh", "sidecar", "istio", "linkerd",
],
"observabilité": [
"prometheus", "grafana", "alertmanager", "loki", "tracing",
"jaeger", "opentelemetry", "metrics", "slo", "sla", "sli",
"observabilité", "monitoring", "dashboards",
],
"sécurité": [
"rbac", "pod security", "opa", "gatekeeper", "falco",
"network policy", "secret", "vault", "trivy", "kubescape",
],
"ci_cd": [
"argocd", "argo cd", "flux", "fluxcd", "helm", "kustomize",
"gitops", "pipeline", "ci/cd", "tekton", "jenkins",
],
"scaling": [
"hpa", "vpa", "keda", "scalabilité", "scaling", "autoscaling",
"horizontal", "vertical", "cluster autoscaler", "cost",
],
"migration": [
"migration", "upgrade", "mise à jour", "version", "deprecation",
"zero downtime", "rolling update", "canary", "blue green",
],
"storage": [
"pvc", "persistent volume", "csi", "storage class", "statefulset",
"rook", "ceph", "nfs", "longhorn", "backup", "velero",
],
}
# Liste plate pour détection rapide
ALL_KEYWORDS: List[str] = [kw for kws in TOPIC_KEYWORDS.values() for kw in kws]
# Mots-clés avancés (bonus score élevé)
ADVANCED_KEYWORDS: List[str] = [
"post-mortem", "postmortem", "root cause", "blameless",
"service mesh", "istio", "linkerd", "opentelemetry",
"rbac", "opa", "gatekeeper", "falco",
"argocd", "gitops", "keda", "hpa",
"multi-cluster", "federation", "zero downtime",
"slo", "sla", "sli", "cluster autoscaler",
]
backend/scoring/scorer.py
+115
View File
@@ -0,0 +1,115 @@
"""
Algorithme de scoring des vidéos YouTube Kubernetes.
Score normalisé sur 100.
Critères :
- Vues pondérées par ancienneté : 25 pts
- Ratio likes / vues : 20 pts
- Mots-clés techniques détectés : 25 pts
- Durée >= 10 min : 10 pts
- Présence de chapitrage : 10 pts
- Nombre de topics détectés : 10 pts
"""
from __future__ import annotations
import math
from datetime import datetime, timezone
from typing import TYPE_CHECKING, List, Tuple
from .keywords import TOPIC_KEYWORDS, ADVANCED_KEYWORDS
if TYPE_CHECKING:
from api.models import Video
def _detect_topics(text: str) -> List[str]:
"""Retourne les topics détectés dans un texte (titre + tags)."""
text_lower = text.lower()
topics = []
for topic, keywords in TOPIC_KEYWORDS.items():
if any(kw in text_lower for kw in keywords):
topics.append(topic)
return topics
def _keyword_score(text: str) -> float:
"""Score basé sur les mots-clés techniques (0-25)."""
text_lower = text.lower()
# Nombre de mots-clés avancés trouvés
advanced_hits = sum(1 for kw in ADVANCED_KEYWORDS if kw in text_lower)
# Nombre de mots-clés totaux
from .keywords import ALL_KEYWORDS
total_hits = sum(1 for kw in ALL_KEYWORDS if kw in text_lower)
# On plafonne à 5 hits avancés et 10 hits totaux
score = min(advanced_hits / 5, 1.0) * 15 + min(total_hits / 10, 1.0) * 10
return round(score, 2)
def _view_score(view_count: int, age_days: float) -> float:
"""Vues pondérées par ancienneté (0-25)."""
if age_days <= 0:
age_days = 1
# Vues par jour, log-normalisé
vpd = view_count / age_days
# Référence : 1000 vues/jour = score max
score = min(math.log1p(vpd) / math.log1p(1000), 1.0) * 25
return round(score, 2)
def _like_ratio_score(like_count: int, view_count: int) -> float:
"""Ratio likes/vues (0-20). Référence : 5% = max."""
if view_count == 0:
return 0.0
ratio = like_count / view_count
score = min(ratio / 0.05, 1.0) * 20
return round(score, 2)
def _duration_score(duration_seconds: int) -> float:
"""10 pts si durée >= 10 min, sinon 0."""
return 10.0 if duration_seconds >= 600 else 0.0
def _chapters_score(has_chapters: bool) -> float:
"""10 pts si la vidéo a des chapitres."""
return 10.0 if has_chapters else 0.0
def _topics_score(topics: list[str]) -> float:
"""10 pts selon le nb de topics distincts (max 3)."""
return round(min(len(topics) / 3, 1.0) * 10, 2)
def score_video(video_data: dict) -> Tuple[float, List[str]]:
"""
Calcule le score d'une vidéo et retourne (score, topics).
video_data doit contenir les clés du modèle Video.
"""
now = datetime.now(timezone.utc)
published_at = video_data["published_at"]
if isinstance(published_at, str):
from datetime import datetime as dt
published_at = dt.fromisoformat(published_at.replace("Z", "+00:00"))
age_days = (now - published_at).total_seconds() / 86400
# Texte analysable : titre + tags
tags_text = " ".join(video_data.get("tags", []))
full_text = f"{video_data['title']} {tags_text}"
topics = _detect_topics(full_text)
raw = (
_view_score(video_data["view_count"], age_days)
+ _like_ratio_score(video_data["like_count"], video_data["view_count"])
+ _keyword_score(full_text)
+ _duration_score(video_data["duration_seconds"])
+ _chapters_score(video_data.get("has_chapters", False))
+ _topics_score(topics)
)
# Normaliser sur 100 (max théorique = 25+20+25+10+10+10 = 100)
final_score = round(min(raw, 100.0), 1)
return final_score, topics
backend/scoring/tests/__init__.py
+1
View File
@@ -0,0 +1 @@
# Tests scoring
backend/scoring/tests/test_scorer.py
+89
View File
@@ -0,0 +1,89 @@
"""Tests du scorer Kubernetes."""
import pytest
from datetime import datetime, timezone, timedelta
from scoring.scorer import score_video, _detect_topics, _keyword_score
def _base_video(**kwargs) -> dict:
defaults = {
"id": "test123",
"title": "Kubernetes en production",
"channel": "DevOps France",
"published_at": datetime.now(timezone.utc) - timedelta(days=5),
"duration_seconds": 1800, # 30 min
"view_count": 5000,
"like_count": 250,
"thumbnail_url": "https://example.com/thumb.jpg",
"youtube_url": "https://youtube.com/watch?v=test123",
"tags": ["kubernetes", "production", "devops"],
"has_chapters": True,
}
defaults.update(kwargs)
return defaults
class TestScoreVideo:
def test_score_is_between_0_and_100(self):
v = _base_video()
score, topics = score_video(v)
assert 0 <= score <= 100
def test_long_video_scores_higher_than_short(self):
long_v = _base_video(duration_seconds=1800)
short_v = _base_video(duration_seconds=300)
score_long, _ = score_video(long_v)
score_short, _ = score_video(short_v)
assert score_long > score_short
def test_chapters_increase_score(self):
with_ch = _base_video(has_chapters=True)
without_ch = _base_video(has_chapters=False)
s_with, _ = score_video(with_ch)
s_without, _ = score_video(without_ch)
assert s_with > s_without
def test_advanced_keywords_increase_score(self):
basic = _base_video(title="Kubernetes débutant", tags=[])
advanced = _base_video(
title="Kubernetes post-mortem ArgoCD Prometheus",
tags=["istio", "hpa", "keda"],
)
s_basic, _ = score_video(basic)
s_advanced, _ = score_video(advanced)
assert s_advanced > s_basic
def test_topics_detected(self):
v = _base_video(title="Kubernetes ArgoCD CI/CD pipeline GitOps", tags=["argocd", "fluxcd"])
_, topics = score_video(v)
assert "ci_cd" in topics
def test_incident_topic_detected(self):
v = _base_video(title="Kubernetes post-mortem incident production outage")
_, topics = score_video(v)
assert "incident" in topics
def test_zero_views_handled(self):
v = _base_video(view_count=0, like_count=0)
score, _ = score_video(v)
assert score >= 0
class TestDetectTopics:
def test_returns_list(self):
topics = _detect_topics("Kubernetes monitoring Prometheus")
assert isinstance(topics, list)
def test_empty_text(self):
topics = _detect_topics("")
assert topics == []
class TestKeywordScore:
def test_no_keywords(self):
s = _keyword_score("bonjour le monde")
assert s == 0.0
def test_advanced_keyword(self):
s = _keyword_score("post-mortem kubernetes production")
assert s > 0
backend/worker/Dockerfile
+15
View File
@@ -0,0 +1,15 @@
FROM python:3.12-slim
WORKDIR /app
COPY pyproject.toml .
RUN pip install --no-cache-dir \
"fastapi>=0.110.0" \
"uvicorn[standard]>=0.29.0" \
"httpx>=0.27.0" \
"pydantic>=2.6.0" \
"apscheduler>=3.10.4"
COPY . .
CMD ["python", "worker/scheduler.py"]
backend/worker/__init__.py
+1
View File
@@ -0,0 +1 @@
# Worker package
backend/worker/scheduler.py
+73
View File
@@ -0,0 +1,73 @@
"""
Worker cron — Veille YouTube Kubernetes.
Mise à jour quotidienne à 6h UTC via APScheduler.
"""
import asyncio
import logging
import os
from datetime import datetime, timezone
from apscheduler.schedulers.blocking import BlockingScheduler
from apscheduler.triggers.cron import CronTrigger
# Ajout du répertoire parent au path Python
import sys
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
from api.storage import save_videos, load_config
from api.youtube_client import fetch_all_videos
from scoring.scorer import score_video
logging.basicConfig(
level=logging.INFO,
format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
)
logger = logging.getLogger(__name__)
def run_pipeline() -> None:
"""Pipeline complet : fetch → score → persist."""
logger.info("=== Démarrage du pipeline de mise à jour ===")
start = datetime.now(timezone.utc)
try:
config = load_config()
queries = config.get("queries")
raw = asyncio.run(fetch_all_videos(queries))
logger.info("Vidéos récupérées : %d", len(raw))
scored = []
for v in raw:
s, topics = score_video(v)
v["score"] = s
v["topics"] = topics
scored.append(v)
scored.sort(key=lambda x: x["score"], reverse=True)
save_videos(scored)
elapsed = (datetime.now(timezone.utc) - start).total_seconds()
logger.info(
"=== Pipeline terminé : %d vidéos en %.1f secondes ===",
len(scored),
elapsed,
)
except Exception as exc:
logger.error("Erreur pipeline : %s", exc, exc_info=True)
if __name__ == "__main__":
# Exécution immédiate au démarrage puis cron quotidien
logger.info("Worker démarré — exécution immédiate puis cron à 6h UTC")
run_pipeline()
scheduler = BlockingScheduler(timezone="UTC")
scheduler.add_job(
run_pipeline,
trigger=CronTrigger(hour=6, minute=0),
id="daily_refresh",
name="Mise à jour quotidienne des vidéos",
)
logger.info("Scheduler configuré : cron 6h00 UTC")
scheduler.start()
docker-compose.yml
+43
View File
@@ -0,0 +1,43 @@
services:
api:
build:
context: ./backend
dockerfile: api/Dockerfile
ports:
- "8000:8000"
environment:
- YOUTUBE_API_KEY=${YOUTUBE_API_KEY}
- DATA_PATH=/app/data/videos.json
volumes:
- ./data:/app/data
restart: unless-stopped
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:8000/api/status"]
interval: 30s
timeout: 10s
retries: 3
worker:
build:
context: ./backend
dockerfile: worker/Dockerfile
environment:
- YOUTUBE_API_KEY=${YOUTUBE_API_KEY}
- DATA_PATH=/app/data/videos.json
volumes:
- ./data:/app/data
depends_on:
- api
restart: unless-stopped
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
args:
- NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:8000}
ports:
- "3000:3000"
depends_on:
- api
restart: unless-stopped
frontend/Dockerfile
+21
View File
@@ -0,0 +1,21 @@
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json ./
RUN npm install
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ARG NEXT_PUBLIC_API_URL=http://localhost:8000
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]
frontend/app/globals.css
+353
View File
@@ -0,0 +1,353 @@
/* ===== DESIGN SYSTEM =====
Palette inspirée Sparklite : rouge primaire, fond clair, typographie propre
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #E8401C;
--primary-dark: #c43415;
--primary-light: #fde8e3;
--bg: #F5F5F7;
--surface: #ffffff;
--surface-dark: #1A1A2E;
--border: #e5e7eb;
--text: #111827;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--sidebar-width: 240px;
--filter-width: 280px;
--radius: 12px;
--shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
--shadow-hover: 0 4px 20px rgba(232,64,28,.15);
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark {
--primary-light: rgba(232,64,28,.18);
--bg: #0f172a;
--surface: #1e293b;
--surface-dark: #0a0f1e;
--border: #334155;
--text: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
--shadow-hover: 0 4px 20px rgba(232,64,28,.25);
}
html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }
/* ===== LAYOUT ===== */
.app-shell {
display: grid;
grid-template-columns: var(--filter-width) 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"filters topbar"
"filters main";
height: 100vh;
overflow: hidden;
}
/* ===== TOPBAR ===== */
.topbar {
grid-area: topbar;
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
background: var(--surface);
border-bottom: 1px solid var(--border);
z-index: 10;
}
.topbar__search {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 16px;
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition);
}
.topbar__search:hover { border-color: var(--primary); }
.topbar__search input {
border: none; background: transparent; outline: none; width: 100%; font-size: 14px; color: var(--text);
}
.topbar__btn {
display: flex; align-items: center; gap: 6px;
background: var(--primary); color: white; border: none;
border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600;
cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.topbar__btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.topbar__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.topbar__status { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.topbar__theme-btn {
width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--border);
background: var(--bg); cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: var(--transition); flex-shrink: 0;
}
.topbar__theme-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
/* ===== SIDEBAR ===== */
.sidebar {
grid-area: sidebar;
display: flex; flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 20px 0;
overflow-y: auto;
}
.sidebar__logo {
display: flex; align-items: center; gap: 10px;
padding: 0 20px 20px;
font-size: 18px; font-weight: 700; color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.sidebar__logo-icon {
width: 36px; height: 36px; background: var(--primary);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px;
}
.sidebar__nav { flex: 1; }
.sidebar__nav-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; cursor: pointer;
font-size: 14px; font-weight: 500; color: var(--text-secondary);
transition: var(--transition); border-radius: 0; position: relative;
text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.sidebar__nav-item:hover { background: var(--bg); color: var(--text); }
.sidebar__nav-item--active { color: var(--primary); background: var(--primary-light); }
.sidebar__nav-item--active::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: var(--primary); border-radius: 0 3px 3px 0;
}
.sidebar__badge {
margin-left: auto; background: var(--primary); color: white;
border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700;
}
.sidebar__section-title {
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--text-muted); letter-spacing: .08em;
padding: 16px 20px 8px;
}
.sidebar__footer {
padding: 16px 20px 0; border-top: 1px solid var(--border);
}
/* ===== MAIN CONTENT ===== */
.main {
grid-area: main;
overflow-y: auto;
padding: 24px;
display: flex; flex-direction: column; gap: 16px;
}
.main__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.main__title { font-size: 20px; font-weight: 700; }
.main__count { font-size: 14px; color: var(--text-secondary); }
.main__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.main__empty {
text-align: center; padding: 80px 20px;
color: var(--text-muted); font-size: 15px;
}
.main__loading {
display: flex; gap: 16px; flex-wrap: wrap;
}
/* ===== VIDEO CARD ===== */
.video-card {
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
transition: var(--transition); display: flex; flex-direction: column;
text-decoration: none; color: inherit;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e5e7eb; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-card__thumb img { transform: scale(1.04); }
.video-card__score {
position: absolute; top: 10px; right: 10px;
background: var(--primary); color: white;
border-radius: 999px; padding: 3px 10px;
font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(232,64,28,.4);
}
.video-card__duration {
position: absolute; bottom: 8px; right: 8px;
background: rgba(0,0,0,.75); color: white;
border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 600;
}
.video-card__chapters {
position: absolute; bottom: 8px; left: 8px;
background: rgba(0,0,0,.6); color: #fbbf24;
border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600;
}
.video-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.video-card__title {
font-size: 14px; font-weight: 600; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.video-card__meta-item { display: flex; align-items: center; gap: 3px; }
.video-card__topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.topic-tag {
background: var(--primary-light); color: var(--primary);
border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
}
.topic-tag--dark { background: var(--surface-dark); color: #a5b4fc; }
/* Skeleton */
.skeleton {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height: 300px; }
/* ===== FILTER PANEL ===== */
.filters {
grid-area: filters;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 24px 20px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 24px;
}
.filters__title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.filters__group { display: flex; flex-direction: column; gap: 10px; }
.filters__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.filters__slider { width: 100%; accent-color: var(--primary); cursor: pointer; }
.filters__score-display {
display: flex; justify-content: space-between; font-size: 13px;
font-weight: 600; color: var(--primary);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
border: 1.5px solid var(--border); border-radius: 999px;
padding: 5px 12px; font-size: 12px; font-weight: 500;
cursor: pointer; transition: var(--transition); background: var(--surface); color: var(--text-secondary);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip--active { background: var(--primary); border-color: var(--primary); color: white; }
.filters__days { display: flex; gap: 6px; }
.day-btn {
flex: 1; padding: 6px 0; border-radius: 8px; border: 1.5px solid var(--border);
font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition);
background: var(--surface); color: var(--text-secondary);
}
.day-btn:hover { border-color: var(--primary); color: var(--primary); }
.day-btn--active { background: var(--primary); border-color: var(--primary); color: white; }
.filters__reset {
border: 1.5px solid var(--border); border-radius: 8px; padding: 8px;
font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition);
background: transparent; color: var(--text-secondary); width: 100%;
}
.filters__reset:hover { border-color: var(--primary); color: var(--primary); }
/* Brand */
.filters__brand {
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700; color: var(--text);
padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.filters__brand-icon {
width: 36px; height: 36px; background: var(--primary);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 16px;
}
.filters__divider { height: 1px; background: var(--border); }
/* Query list */
.filters__queries { display: flex; flex-direction: column; gap: 6px; }
.query-item {
display: flex; align-items: center; justify-content: space-between;
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px; gap: 8px;
}
.query-item__text { font-size: 12px; color: var(--text); flex: 1; word-break: break-word; }
.query-item__remove {
background: none; border: none; cursor: pointer; color: var(--text-muted);
font-size: 16px; font-weight: 600; line-height: 1; padding: 0 2px; flex-shrink: 0;
transition: var(--transition);
}
.query-item__remove:hover { color: var(--primary); }
/* Add query */
.filters__add-query { display: flex; gap: 6px; }
.filters__query-input {
flex: 1; border: 1.5px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-size: 12px; outline: none;
background: var(--surface); color: var(--text); transition: var(--transition);
}
.filters__query-input:focus { border-color: var(--primary); }
.filters__add-btn {
width: 32px; height: 32px; border-radius: 8px; border: none;
background: var(--primary); color: white; font-size: 18px; font-weight: 600;
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: var(--transition);
}
.filters__add-btn:hover { background: var(--primary-dark); }
/* Launch button */
.filters__launch {
width: 100%; padding: 10px; border-radius: 8px; border: none;
background: var(--primary); color: white; font-size: 13px; font-weight: 700;
cursor: pointer; transition: var(--transition);
}
.filters__launch:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.filters__launch:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* Quota banner */
.main__quota-banner {
background: #fef3c7; color: #92400e;
border: 1px solid #f59e0b; border-radius: var(--radius);
padding: 12px 16px; font-size: 13px; font-weight: 600;
display: flex; align-items: flex-start; gap: 10px; line-height: 1.6;
}
.main__quota-banner span:last-child { font-weight: 400; }
.main__quota-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
html.dark .main__quota-banner {
background: rgba(245,158,11,.1); color: #fbbf24;
border-color: rgba(245,158,11,.3);
}
/* Launching banner */
.main__launching {
background: var(--primary-light); color: var(--primary);
border-radius: var(--radius); padding: 10px 16px;
font-size: 13px; font-weight: 600; text-align: center;
}
/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px 0; }
.page-btn {
border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 14px;
font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
background: var(--surface); color: var(--text-secondary);
}
.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn--active { background: var(--primary); border-color: var(--primary); color: white; }
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
.filters { display: none; }
}
frontend/app/layout.tsx
+16
View File
@@ -0,0 +1,16 @@
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "YTVeille — Veille automatique YouTube en français",
description:
"Veille automatique des meilleures vidéos YouTube en français sur n'importe quel domaine technique.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>{children}</body>
</html>
);
}
frontend/app/page.tsx
+255
View File
@@ -0,0 +1,255 @@
"use client";
import { useState, useEffect, useCallback, useRef } from "react";
import TopBar from "@/components/TopBar";
import VideoCard from "@/components/VideoCard";
import FilterPanel from "@/components/FilterPanel";
import { fetchVideos, fetchStatus, fetchConfig, triggerRefresh, type Video, type Filters } from "@/lib/api";
interface FilterState {
min_score: number;
days: number;
}
const DEFAULT_FILTERS: FilterState = { min_score: 0, days: 30 };
const PAGE_SIZE = 18;
export default function HomePage() {
const [videos, setVideos] = useState<Video[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [filters, setFilters] = useState<FilterState>(DEFAULT_FILTERS);
const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");
const [loading, setLoading] = useState(true);
const [initialQueries, setInitialQueries] = useState<string[]>([]);
const [launching, setLaunching] = useState(false);
const [activeQueryFilters, setActiveQueryFilters] = useState<string[]>([]);
const [dark, setDark] = useState(false);
// Lire la préférence stockée au montage
useEffect(() => {
const stored = localStorage.getItem("theme");
const isDark = stored === "dark" || (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches);
setDark(isDark);
document.documentElement.classList.toggle("dark", isDark);
}, []);
const handleToggleDark = () => {
setDark((prev) => {
const next = !prev;
document.documentElement.classList.toggle("dark", next);
localStorage.setItem("theme", next ? "dark" : "light");
return next;
});
};
const [status, setStatus] = useState<{ video_count: number; last_updated: string | null; refresh_running: boolean; quota_exceeded: boolean; quota_exceeded_at: string | null }>({
video_count: 0,
last_updated: null,
refresh_running: false,
quota_exceeded: false,
quota_exceeded_at: null,
});
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const loadVideos = useCallback(async (f: FilterState, p: number, q: string, sqFilters: string[]) => {
setLoading(true);
try {
const params: Filters = {
q: q || undefined,
min_score: f.min_score,
days: f.days,
page: p,
page_size: PAGE_SIZE,
source_queries: sqFilters.length > 0 ? sqFilters : undefined,
};
const result = await fetchVideos(params);
setVideos(result.items);
setTotal(result.total);
} catch {
setVideos([]);
} finally {
setLoading(false);
}
}, []);
// Charger config + statut au montage
useEffect(() => {
fetchConfig().then((c) => setInitialQueries(c.queries)).catch(() => {});
fetchStatus().then(setStatus).catch(() => {});
}, []);
// Debounce de la recherche texte (300 ms)
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearch(search);
setPage(1);
}, 300);
return () => clearTimeout(timer);
}, [search]);
// Charger vidéos à chaque changement de filtres / page / recherche / chips
useEffect(() => {
loadVideos(filters, page, debouncedSearch, activeQueryFilters);
}, [filters, page, debouncedSearch, activeQueryFilters, loadVideos]);
const handleFilterChange = (partial: Partial<FilterState>) => {
setFilters((prev) => ({ ...prev, ...partial }));
setPage(1);
};
const handleQueryFilterToggle = (q: string) => {
setActiveQueryFilters((prev) =>
prev.includes(q) ? prev.filter((x) => x !== q) : [...prev, q]
);
setPage(1);
};
const handleLaunch = async (queries: string[]) => {
setLaunching(true);
try {
await triggerRefresh(queries);
// Polling jusqu'à la fin du refresh
pollRef.current = setInterval(async () => {
try {
const s = await fetchStatus();
setStatus(s);
if (!s.refresh_running) {
clearInterval(pollRef.current!);
pollRef.current = null;
setLaunching(false);
setPage(1);
loadVideos(filters, 1, debouncedSearch, activeQueryFilters);
}
} catch {
clearInterval(pollRef.current!);
pollRef.current = null;
setLaunching(false);
}
}, 2000);
} catch {
setLaunching(false);
}
};
// Nettoyage du polling au démontage
useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);
const totalPages = Math.ceil(total / PAGE_SIZE);
// Tous les filtres (texte + chips) sont gérés côté backend.
const displayedVideos = videos;
return (
<div className="app-shell">
<TopBar
lastUpdated={status.last_updated}
videoCount={status.video_count}
onSearch={setSearch}
dark={dark}
onToggleDark={handleToggleDark}
/>
<main className="main">
<div className="main__header">
<h1 className="main__title">▶ YTVeille</h1>
<span className="main__count">{total} vidéo{total > 1 ? "s" : ""}</span>
</div>
{launching && (
<div className="main__launching">
<span>⟳ Recherche YouTube en cours, veuillez patienter...</span>
</div>
)}
{status.quota_exceeded && !launching && (
<div className="main__quota-banner">
<span className="main__quota-icon">⚠️</span>
<div>
<strong>Quota YouTube API dépassé</strong>
{status.quota_exceeded_at && (
<> — depuis le {new Intl.DateTimeFormat("fr-FR", {
day: "numeric", month: "short",
hour: "2-digit", minute: "2-digit",
}).format(new Date(status.quota_exceeded_at))}</>
)}
<br />
<span>Le quota se renouvelle chaque jour à minuit (heure du Pacifique, ~8h–9h UTC). Réessayez demain.</span>
</div>
</div>
)}
{loading ? (
<div className="main__grid">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="skeleton skeleton-card" />
))}
</div>
) : displayedVideos.length === 0 ? (
<div className="main__empty">
<p style={{ fontSize: 40, marginBottom: 12 }}>▶</p>
<p>Aucune vidéo trouvée.</p>
<p style={{ marginTop: 8, fontSize: 13 }}>
Configurez vos requêtes et lancez la veille depuis le panneau gauche.
</p>
</div>
) : (
<div className="main__grid">
{displayedVideos.map((v) => (
<VideoCard key={v.id} video={v} />
))}
</div>
)}
{/* Pagination */}
{totalPages > 1 && (
<nav className="pagination" aria-label="Pagination">
<button
id="btn-prev-page"
className="page-btn"
disabled={page === 1}
onClick={() => setPage((p) => p - 1)}
>
← Précédent
</button>
{Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
const p = i + 1;
return (
<button
key={p}
id={`btn-page-${p}`}
className={`page-btn${page === p ? " page-btn--active" : ""}`}
onClick={() => setPage(p)}
>
{p}
</button>
);
})}
<button
id="btn-next-page"
className="page-btn"
disabled={page === totalPages}
onClick={() => setPage((p) => p + 1)}
>
Suivant →
</button>
</nav>
)}
</main>
<FilterPanel
filters={filters}
onChange={handleFilterChange}
total={total}
initialQueries={initialQueries}
onLaunch={handleLaunch}
launching={launching}
activeQueryFilters={activeQueryFilters}
onQueryFilterToggle={handleQueryFilterToggle}
/>
</div>
);
}
frontend/components/FilterPanel.tsx
+159
View File
@@ -0,0 +1,159 @@
"use client";
import { useState, useEffect } from "react";
interface FilterState {
min_score: number;
days: number;
}
interface Props {
filters: FilterState;
onChange: (f: Partial<FilterState>) => void;
total: number;
initialQueries: string[];
onLaunch: (queries: string[]) => void;
launching: boolean;
activeQueryFilters: string[];
onQueryFilterToggle: (q: string) => void;
}
const DAYS_OPTIONS = [7, 30, 90];
export default function FilterPanel({ filters, onChange, total, initialQueries, onLaunch, launching, activeQueryFilters, onQueryFilterToggle }: Props) {
const [queries, setQueries] = useState<string[]>(initialQueries);
const [inputValue, setInputValue] = useState("");
useEffect(() => {
setQueries(initialQueries);
}, [initialQueries]);
const addQuery = () => {
const q = inputValue.trim();
if (q && !queries.includes(q)) {
setQueries([...queries, q]);
setInputValue("");
}
};
const removeQuery = (i: number) => {
setQueries(queries.filter((_, idx) => idx !== i));
};
return (
<aside className="filters">
{/* Brand */}
<div className="filters__brand">
<div className="filters__brand-icon">▶</div>
<span>YTVeille</span>
</div>
{/* Requêtes de recherche */}
<div className="filters__group">
<p className="filters__label">Requêtes de recherche</p>
<div className="filters__queries">
{queries.map((q, i) => (
<div key={i} className="query-item">
<span className="query-item__text">{q}</span>
<button
className="query-item__remove"
onClick={() => removeQuery(i)}
title="Supprimer"
>
×
</button>
</div>
))}
</div>
<div className="filters__add-query">
<input
type="text"
placeholder='Ex: "Docker production français"'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && addQuery()}
className="filters__query-input"
/>
<button className="filters__add-btn" onClick={addQuery} title="Ajouter">+</button>
</div>
<button
className="filters__launch"
onClick={() => onLaunch(queries)}
disabled={launching || queries.length === 0}
>
{launching ? "⟳ Recherche en cours..." : "▶ Lancer la veille"}
</button>
</div>
<div className="filters__divider" />
{/* Filtrer par requête */}
{queries.length > 0 && (
<div className="filters__group">
<p className="filters__label">Filtrer par requête</p>
<div className="filters__chips">
{queries.map((q, i) => (
<button
key={i}
className={`chip${activeQueryFilters.includes(q) ? " chip--active" : ""}`}
onClick={() => onQueryFilterToggle(q)}
>
{q}
</button>
))}
</div>
</div>
)}
{/* Score minimum */}
<div className="filters__group">
<label className="filters__label" htmlFor="slider-score">Score minimum</label>
<div className="filters__score-display">
<span>0</span>
<span style={{ color: "var(--primary)", fontWeight: 700 }}>{filters.min_score}</span>
<span>100</span>
</div>
<input
id="slider-score"
type="range"
min={0}
max={100}
step={5}
value={filters.min_score}
onChange={(e) => onChange({ min_score: Number(e.target.value) })}
className="filters__slider"
/>
</div>
{/* Période */}
<div className="filters__group">
<p className="filters__label">Période</p>
<div className="filters__days">
{DAYS_OPTIONS.map((d) => (
<button
key={d}
id={`days-${d}`}
className={`day-btn${filters.days === d ? " day-btn--active" : ""}`}
onClick={() => onChange({ days: d })}
>
{d}j
</button>
))}
</div>
</div>
{/* Reset filtres */}
<button
id="btn-reset-filters"
className="filters__reset"
onClick={() => onChange({ min_score: 0, days: 30 })}
>
↺ Réinitialiser les filtres
</button>
<p style={{ fontSize: 12, color: "var(--text-muted)", marginTop: "auto" }}>
{total} vidéo{total > 1 ? "s" : ""} trouvée{total > 1 ? "s" : ""}
</p>
</aside>
);
}
frontend/components/Sidebar.tsx
+45
View File
@@ -0,0 +1,45 @@
"use client";
export default function Sidebar() {
const navItems = [
{ icon: "▶", label: "Veille", id: "feed", badge: null, active: true },
{ icon: "🔍", label: "Explorer", id: "explore", badge: null, active: false },
{ icon: "⭐", label: "Favoris", id: "favorites", badge: null, active: false },
];
return (
<aside className="sidebar">
<div className="sidebar__logo">
<div className="sidebar__logo-icon">☸</div>
<span>K8s Veille</span>
</div>
<nav className="sidebar__nav">
{navItems.map((item) => (
<button
key={item.id}
id={`nav-${item.id}`}
className={`sidebar__nav-item${item.active ? " sidebar__nav-item--active" : ""}`}
>
<span>{item.icon}</span>
<span>{item.label}</span>
{item.badge && <span className="sidebar__badge">{item.badge}</span>}
</button>
))}
<p className="sidebar__section-title">Topics</p>
{["🔥 Incident", "🏗️ Architecture", "📊 Observabilité", "⚙️ CI/CD", "📈 Scaling"].map((t) => (
<button key={t} className="sidebar__nav-item" style={{ fontSize: "13px" }}>
{t}
</button>
))}
</nav>
<div className="sidebar__footer">
<button className="sidebar__nav-item" style={{ width: "100%", borderRadius: 8 }}>
⚙️ Paramètres
</button>
</div>
</aside>
);
}
frontend/components/TopBar.tsx
+75
View File
@@ -0,0 +1,75 @@
"use client";
import { useState } from "react";
import { triggerRefresh } from "@/lib/api";
interface Props {
lastUpdated: string | null;
videoCount: number;
onSearch: (q: string) => void;
dark: boolean;
onToggleDark: () => void;
}
export default function TopBar({ lastUpdated, videoCount, onSearch, dark, onToggleDark }: Props) {
const [refreshing, setRefreshing] = useState(false);
const [inputValue, setInputValue] = useState("");
const commitSearch = () => onSearch(inputValue);
const handleRefresh = async () => {
commitSearch();
setRefreshing(true);
try {
await triggerRefresh();
setTimeout(() => window.location.reload(), 3000);
} catch {
// silently fail
} finally {
setTimeout(() => setRefreshing(false), 3000);
}
};
return (
<header className="topbar">
<div className="topbar__search">
<span>🔍</span>
<input
id="search-input"
type="text"
placeholder="Rechercher dans les vidéos... (Entrée pour valider)"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && commitSearch()}
/>
</div>
{lastUpdated && (
<p className="topbar__status">
{videoCount} vidéos · mis à jour {new Intl.RelativeTimeFormat("fr", { numeric: "auto" }).format(
-Math.round((Date.now() - new Date(lastUpdated).getTime()) / 3600000),
"hours"
)}
</p>
)}
<button
className="topbar__theme-btn"
onClick={onToggleDark}
title={dark ? "Passer en mode clair" : "Passer en mode sombre"}
aria-label="Basculer le thème"
>
{dark ? "☀️" : "🌙"}
</button>
<button
id="btn-refresh"
className="topbar__btn"
onClick={handleRefresh}
disabled={refreshing}
>
{refreshing ? "⟳ Actualisation..." : "⟳ Actualiser"}
</button>
</header>
);
}
frontend/components/VideoCard.tsx
+78
View File
@@ -0,0 +1,78 @@
"use client";
import type { Video } from "@/lib/api";
import { formatDuration, formatDate, TOPICS } from "@/lib/api";
import Image from "next/image";
interface Props {
video: Video;
}
export default function VideoCard({ video }: Props) {
const scoreColor =
video.score >= 70 ? "var(--primary)" : video.score >= 40 ? "#f59e0b" : "#6b7280";
return (
<a
href={video.youtube_url}
target="_blank"
rel="noopener noreferrer"
className="video-card"
id={`video-${video.id}`}
aria-label={`Voir la vidéo : ${video.title}`}
>
{/* Thumbnail */}
<div className="video-card__thumb">
{video.thumbnail_url ? (
<Image
src={video.thumbnail_url}
alt={video.title}
fill
style={{ objectFit: "cover" }}
unoptimized
/>
) : (
<div style={{ background: "#e5e7eb", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 36 }}>☸</div>
)}
{/* Score badge */}
<span className="video-card__score" style={{ background: scoreColor }}>
{video.score.toFixed(0)}/100
</span>
{/* Duration */}
<span className="video-card__duration">{formatDuration(video.duration_seconds)}</span>
{/* Chapters indicator */}
{video.has_chapters && (
<span className="video-card__chapters">📑 Chapitres</span>
)}
</div>
{/* Body */}
<div className="video-card__body">
<h3 className="video-card__title">{video.title}</h3>
<div className="video-card__meta">
<span className="video-card__meta-item">📺 {video.channel}</span>
<span className="video-card__meta-item">📅 {formatDate(video.published_at)}</span>
<span className="video-card__meta-item">👁 {video.view_count.toLocaleString("fr-FR")}</span>
{video.like_count > 0 && (
<span className="video-card__meta-item">👍 {video.like_count.toLocaleString("fr-FR")}</span>
)}
</div>
{/* Topics */}
{video.topics.length > 0 && (
<div className="video-card__topics">
{video.topics.slice(0, 3).map((t) => (
<span key={t} className="topic-tag">
{TOPICS[t] ?? t}
</span>
))}
</div>
)}
</div>
</a>
);
}
frontend/lib/api.ts
+94
View File
@@ -0,0 +1,94 @@
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
export interface Video {
id: string;
title: string;
channel: string;
published_at: string;
duration_seconds: number;
view_count: number;
like_count: number;
thumbnail_url: string;
youtube_url: string;
tags: string[];
has_chapters: boolean;
score: number;
topics: string[];
source_queries: string[];
}
export interface VideoList {
total: number;
page: number;
page_size: number;
items: Video[];
}
export interface Filters {
q?: string;
min_score?: number;
topic?: string;
source_queries?: string[];
days?: number;
page?: number;
page_size?: number;
}
export async function fetchVideos(filters: Filters = {}): Promise<VideoList> {
const params = new URLSearchParams();
if (filters.q) params.set("q", filters.q);
if (filters.min_score !== undefined) params.set("min_score", String(filters.min_score));
if (filters.topic) params.set("topic", filters.topic);
if (filters.source_queries?.length) filters.source_queries.forEach((sq) => params.append("source_query", sq));
if (filters.days) params.set("days", String(filters.days));
if (filters.page) params.set("page", String(filters.page));
if (filters.page_size) params.set("page_size", String(filters.page_size));
const res = await fetch(`${API_BASE}/api/videos?${params}`, { next: { revalidate: 300 } });
if (!res.ok) throw new Error("Erreur lors du chargement des vidéos");
return res.json();
}
export async function triggerRefresh(queries?: string[]): Promise<void> {
const body = queries ? JSON.stringify({ queries }) : undefined;
await fetch(`${API_BASE}/api/refresh`, {
method: "POST",
headers: body ? { "Content-Type": "application/json" } : {},
body,
});
}
export async function fetchConfig(): Promise<{ queries: string[] }> {
const res = await fetch(`${API_BASE}/api/config`, { cache: "no-store" });
if (!res.ok) throw new Error("Erreur config");
return res.json();
}
export async function fetchStatus(): Promise<{ video_count: number; last_updated: string | null; refresh_running: boolean; quota_exceeded: boolean; quota_exceeded_at: string | null }> {
const res = await fetch(`${API_BASE}/api/status`, { cache: "no-store" });
if (!res.ok) throw new Error("Erreur status");
return res.json();
}
export function formatDuration(seconds: number): string {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
if (h > 0) return `${h}h${String(m).padStart(2, "0")}`;
return `${m}:${String(s).padStart(2, "0")}`;
}
export function formatDate(iso: string): string {
return new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "short", year: "numeric" }).format(new Date(iso));
}
export const TOPICS: Record<string, string> = {
incident: "🔥 Incident",
architecture: "🏗️ Architecture",
"observabilité": "📊 Observabilité",
"sécurité": "🔒 Sécurité",
ci_cd: "⚙️ CI/CD",
scaling: "📈 Scaling",
migration: "🔄 Migration",
storage: "💾 Storage",
};
frontend/next-env.d.ts
Vendored
+5
View File
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
frontend/next.config.js
+13
View File
@@ -0,0 +1,13 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "i.ytimg.com",
},
],
},
};
module.exports = nextConfig;
frontend/package-lock.json
Generated
+499
View File
@@ -0,0 +1,499 @@
{
"name": "k8s-veille-frontend",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "k8s-veille-frontend",
"version": "1.0.0",
"dependencies": {
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"typescript": "^5"
}
},
"node_modules/@next/env": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
"integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==",
"license": "MIT"
},
"node_modules/@next/swc-darwin-arm64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
"integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
"integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
"integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
"integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
"integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
"integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
"integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
"integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
"cpu": [
"ia32"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
"integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
"license": "Apache-2.0"
},
"node_modules/@swc/helpers": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
"integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
"license": "Apache-2.0",
"dependencies": {
"@swc/counter": "^0.1.3",
"tslib": "^2.4.0"
}
},
"node_modules/@types/node": {
"version": "20.19.33",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
"integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
"dev": true,
"license": "MIT",
"dependencies": {
"undici-types": "~6.21.0"
}
},
"node_modules/@types/prop-types": {
"version": "15.7.15",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.3.28",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
"integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.2.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.3.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^18.0.0"
}
},
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
"dependencies": {
"streamsearch": "^1.1.0"
},
"engines": {
"node": ">=10.16.0"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001774",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
"integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "CC-BY-4.0"
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"license": "ISC"
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"license": "MIT"
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"license": "MIT",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/next": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
"integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
"deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
"license": "MIT",
"dependencies": {
"@next/env": "14.2.3",
"@swc/helpers": "0.5.5",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001579",
"graceful-fs": "^4.2.11",
"postcss": "8.4.31",
"styled-jsx": "5.1.1"
},
"bin": {
"next": "dist/bin/next"
},
"engines": {
"node": ">=18.17.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "14.2.3",
"@next/swc-darwin-x64": "14.2.3",
"@next/swc-linux-arm64-gnu": "14.2.3",
"@next/swc-linux-arm64-musl": "14.2.3",
"@next/swc-linux-x64-gnu": "14.2.3",
"@next/swc-linux-x64-musl": "14.2.3",
"@next/swc-win32-arm64-msvc": "14.2.3",
"@next/swc-win32-ia32-msvc": "14.2.3",
"@next/swc-win32-x64-msvc": "14.2.3"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
"@playwright/test": "^1.41.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
"@opentelemetry/api": {
"optional": true
},
"@playwright/test": {
"optional": true
},
"sass": {
"optional": true
}
}
},
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"license": "ISC"
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
},
"peerDependencies": {
"react": "^18.3.1"
}
},
"node_modules/scheduler": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/styled-jsx": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
"integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
"license": "MIT",
"dependencies": {
"client-only": "0.0.1"
},
"engines": {
"node": ">= 12.0.0"
},
"peerDependencies": {
"react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"babel-plugin-macros": {
"optional": true
}
}
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/typescript": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/undici-types": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"dev": true,
"license": "MIT"
}
}
}
frontend/package.json
+21
View File
@@ -0,0 +1,21 @@
{
"name": "ytveille-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"typescript": "^5"
}
}
frontend/tsconfig.json
+43
View File
@@ -0,0 +1,43 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
},
"types": [
"node"
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}