feat(doc): page documentation /doc (guide + captures) + lien footer + PDF téléchargeable
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
9 changed files +176 −3
modified
creaka/web.py
+13 −1
@@ -13,7 +13,7 @@ from pathlib import Path | |||||
| 13 | from fastapi import Body, FastAPI, HTTPException, Query, Request | 13 | from fastapi import Body, FastAPI, HTTPException, Query, Request | ||
| 14 | from fastapi.middleware.cors import CORSMiddleware | 14 | from fastapi.middleware.cors import CORSMiddleware | ||
| 15 | from fastapi.middleware.gzip import GZipMiddleware | 15 | from fastapi.middleware.gzip import GZipMiddleware | ||
| 16 | −from fastapi.responses import FileResponse, Response | 16 | +from fastapi.responses import FileResponse, RedirectResponse, Response | ||
| 17 | from pydantic import BaseModel, Field | 17 | from pydantic import BaseModel, Field | ||
| 18 | 18 | ||||
| 19 | from . import auth, db, ethics, hubfav, kapdf, seo | 19 | from . import auth, db, ethics, hubfav, kapdf, seo | ||
@@ -244,6 +244,18 @@ app.include_router(seo.router) | |||||
| 244 | 244 | ||||
| 245 | # --- frontend statique ----------------------------------------------------------- | 245 | # --- frontend statique ----------------------------------------------------------- | ||
| 246 | 246 | ||||
| 247 | +# Documentation utilisateur (frontend/dist/doc) — routes explicites AVANT | ||||
| 248 | +# le fallback SPA pour servir /doc/ comme un index. | ||||
| 249 | +@app.get("/doc") | ||||
| 250 | +def doc_redirect(): | ||||
| 251 | + return RedirectResponse("/doc/", status_code=308) | ||||
| 252 | + | ||||
| 253 | + | ||||
| 254 | +@app.get("/doc/") | ||||
| 255 | +def doc_index(): | ||||
| 256 | + return FileResponse(FRONTEND_DIST / "doc" / "index.html") | ||||
| 257 | + | ||||
| 258 | + | ||||
| 247 | @app.get("/") | 259 | @app.get("/") | ||
| 248 | def index(): | 260 | def index(): | ||
| 249 | idx = FRONTEND_DIST / "index.html" | 261 | idx = FRONTEND_DIST / "index.html" | ||
added
frontend/dist/doc/crea-ka-documentation.pdf
+0 −0
Binary file not shown.
added
frontend/dist/doc/img/etape1.png
+0 −0
Binary file not shown.
added
frontend/dist/doc/img/etape2.png
+0 −0
Binary file not shown.
added
frontend/dist/doc/img/etape3.png
+0 −0
Binary file not shown.
added
frontend/dist/doc/img/etape4.png
+0 −0
Binary file not shown.
added
frontend/dist/doc/index.html
+161 −0
@@ -0,0 +1,161 @@ | |||||
| 1 | +<!DOCTYPE html> | ||||
| 2 | +<!-- GABARIT COMMUN — page /doc des sites du Groupe KA (2026-08-24). | ||||
| 3 | + À adapter par site : remplacer crea-ka (id, ex. lou-ka), Créa·Ka (ex. Lou·Ka), | ||||
| 4 | + Tous les créateurs de contenu québécois, tous leurs liens — un annuaire public cross-plateforme, croisement entre un annuaire cherchable et un « Linktree collectif »., #7048e8 (couleur accent du site, ex. #b7f000), les sections | ||||
| 5 | + et les étapes (captures dans ./img/). Page auto-suffisante (aucun JS requis). --> | ||||
| 6 | +<html lang="fr"> | ||||
| 7 | +<head> | ||||
| 8 | +<meta charset="utf-8"> | ||||
| 9 | +<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | ||||
| 10 | +<title>Documentation — Créa·Ka</title> | ||||
| 11 | +<meta name="description" content="Comment fonctionne Créa·Ka : guide pas à pas, données, architecture."> | ||||
| 12 | +<style> | ||||
| 13 | + :root{ --ink:#101014; --paper:#faf9f6; --accent:#7048e8; --muted:#6b6b70; --line:#e6e4de; } | ||||
| 14 | + *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink); | ||||
| 15 | + font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%} | ||||
| 16 | + .container{max-width:960px;margin:0 auto;padding:0 20px} | ||||
| 17 | + header.doc{background:var(--ink);color:var(--paper);padding:20px 0} | ||||
| 18 | + header.doc .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} | ||||
| 19 | + header.doc a{color:var(--paper);text-decoration:none} | ||||
| 20 | + .wordmark{font-weight:800;font-size:20px;letter-spacing:.02em} | ||||
| 21 | + .wordmark .ka{color:var(--accent)} | ||||
| 22 | + .btn-pdf{display:inline-block;background:var(--accent);color:var(--ink);font-weight:700; | ||||
| 23 | + padding:10px 18px;border-radius:999px;text-decoration:none;font-size:15px} | ||||
| 24 | + .hero{padding:48px 0 8px} | ||||
| 25 | + .hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 12px} | ||||
| 26 | + .hero h1 mark{background:var(--accent);color:var(--ink);padding:2px 8px} | ||||
| 27 | + .hero p.lead{font-size:18px;color:var(--muted);max-width:640px} | ||||
| 28 | + .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); | ||||
| 29 | + border-left:3px solid var(--accent);padding-left:10px;margin:40px 0 8px;font-weight:700} | ||||
| 30 | + section{padding:8px 0 16px} | ||||
| 31 | + h2{font-size:26px;margin:6px 0 12px} | ||||
| 32 | + .step{display:grid;grid-template-columns:56px 1fr;gap:16px;margin:26px 0;align-items:start} | ||||
| 33 | + .step .num{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent); | ||||
| 34 | + display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} | ||||
| 35 | + .step h3{margin:6px 0 6px;font-size:19px} | ||||
| 36 | + .step p{margin:0 0 12px;color:#3a3a40} | ||||
| 37 | + .shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(16,16,20,.08)} | ||||
| 38 | + .shot img{display:block;width:100%;height:auto} | ||||
| 39 | + .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0} | ||||
| 40 | + .card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff} | ||||
| 41 | + .card b{display:block;margin-bottom:6px} | ||||
| 42 | + table{border-collapse:collapse;width:100%;font-size:15px} | ||||
| 43 | + th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top} | ||||
| 44 | + th{background:var(--ink);color:var(--paper)} | ||||
| 45 | + footer.doc{margin-top:56px;background:var(--ink);color:var(--paper);padding:28px 0;font-size:14px} | ||||
| 46 | + footer.doc a{color:var(--accent);text-decoration:none} | ||||
| 47 | + @media print{ | ||||
| 48 | + header.doc .btn-pdf{display:none} | ||||
| 49 | + .shot{box-shadow:none;break-inside:avoid} | ||||
| 50 | + .step{break-inside:avoid} | ||||
| 51 | + a{color:inherit;text-decoration:none} | ||||
| 52 | + } | ||||
| 53 | + @media(max-width:640px){ .step{grid-template-columns:40px 1fr} .step .num{width:34px;height:34px;font-size:15px} } | ||||
| 54 | +</style> | ||||
| 55 | +</head> | ||||
| 56 | +<body> | ||||
| 57 | +<header class="doc"> | ||||
| 58 | + <div class="container"> | ||||
| 59 | + <a class="wordmark" href="/">Créa<span class="ka">·Ka</span></a> | ||||
| 60 | + <nav style="display:flex;gap:14px;align-items:center"> | ||||
| 61 | + <a href="/">← Retour au site</a> | ||||
| 62 | + <a class="btn-pdf" href="./crea-ka-documentation.pdf" download>Télécharger le PDF</a> | ||||
| 63 | + </nav> | ||||
| 64 | + </div> | ||||
| 65 | +</header> | ||||
| 66 | + | ||||
| 67 | +<div class="container"> | ||||
| 68 | + <div class="hero"> | ||||
| 69 | + <p class="kicker">Documentation · mise à jour 2026-08-24</p> | ||||
| 70 | + <h1>Comment fonctionne <mark>Créa·Ka</mark></h1> | ||||
| 71 | + <p class="lead">Tous les créateurs de contenu québécois, tous leurs liens — un annuaire public cross-plateforme, croisement entre un annuaire cherchable et un « Linktree collectif ».</p> | ||||
| 72 | + </div> | ||||
| 73 | + | ||||
| 74 | + <section> | ||||
| 75 | + <p class="kicker">Vue d'ensemble</p> | ||||
| 76 | + <h2>À quoi sert le site</h2> | ||||
| 77 | + <p><b>Créa·Ka</b> (<a href="https://www.crea-ka.com">www.crea-ka.com</a>) est l'annuaire public, québécois et | ||||
| 78 | + cross-plateforme des créateurs de contenu. Chaque créateur a <b>une fiche canonique</b> qui regroupe tous ses comptes publics — | ||||
| 79 | + Instagram, TikTok, YouTube, Twitch, X, Facebook, Snapchat, Kick, Substack, Patreon, balado… — chacun avec son URL canonique, | ||||
| 80 | + ses métriques (abonnés, publications, vues…) et son <b>score de confiance de rattachement</b>. Pour le public qui découvre des | ||||
| 81 | + créateurs par niche, région, langue ou taille d'audience ; pour les créateurs eux-mêmes (fiche, opt-out) ; pour les marques | ||||
| 82 | + et médias. <b>L'éthique prime sur tout</b> : profils publics et professionnels seulement, opt-out immédiat et persistant, | ||||
| 83 | + régime restreint des mineurs, conformité Loi 25.</p> | ||||
| 84 | + <div class="cards"> | ||||
| 85 | + <div class="card"><b>Fiches canoniques</b>Tous les comptes publics d'un créateur regroupés, avec métriques et score de confiance par rattachement.</div> | ||||
| 86 | + <div class="card"><b>20 niches · 17 régions</b>Filtres par niche, région administrative, langue, plateforme et taille d'audience (nano/micro/macro/méga).</div> | ||||
| 87 | + <div class="card"><b>10 connecteurs</b>Découverte (listes médias, Wikidata, YouTube, balados…) + enrichissement (profils, link-in-bio).</div> | ||||
| 88 | + <div class="card"><b>Éthique d'abord</b>Opt-out immédiat et persistant (/retrait), purge des données privées, régime restreint des mineurs.</div> | ||||
| 89 | + </div> | ||||
| 90 | + </section> | ||||
| 91 | + | ||||
| 92 | + <section> | ||||
| 93 | + <p class="kicker">Guide pas à pas</p> | ||||
| 94 | + <h2>Utiliser le site en 4 étapes</h2> | ||||
| 95 | + <div class="step"> | ||||
| 96 | + <div class="num">1</div> | ||||
| 97 | + <div> | ||||
| 98 | + <h3>Explorez l'annuaire depuis l'accueil</h3> | ||||
| 99 | + <p>Cherchez un créateur par nom, ou filtrez par niche (20), région (17), langue, plateforme et taille d'audience. Chaque carte montre la plateforme principale et l'audience cumulée.</p> | ||||
| 100 | + <div class="shot"><img src="./img/etape1.png" alt="Étape 1 — Explorez l'annuaire depuis l'accueil"></div> | ||||
| 101 | + </div> | ||||
| 102 | + </div> | ||||
| 103 | + <div class="step"> | ||||
| 104 | + <div class="num">2</div> | ||||
| 105 | + <div> | ||||
| 106 | + <h3>Découvrez par plateforme</h3> | ||||
| 107 | + <p>Les pages /plateformes et /plateforme/{p} (ex. /plateforme/youtube) listent les créateurs québécois actifs sur chaque réseau, classés par audience.</p> | ||||
| 108 | + <div class="shot"><img src="./img/etape2.png" alt="Étape 2 — Découvrez par plateforme"></div> | ||||
| 109 | + </div> | ||||
| 110 | + </div> | ||||
| 111 | + <div class="step"> | ||||
| 112 | + <div class="num">3</div> | ||||
| 113 | + <div> | ||||
| 114 | + <h3>Ouvrez la fiche d'un créateur</h3> | ||||
| 115 | + <p>La fiche canonique (/createur/{id}) regroupe tous ses comptes avec leurs métriques : abonnés cumulés, engagement moyen, publications par semaine, un onglet par plateforme avec le lien canonique vérifié et son score de confiance.</p> | ||||
| 116 | + <div class="shot"><img src="./img/etape3.png" alt="Étape 3 — Ouvrez la fiche d'un créateur"></div> | ||||
| 117 | + </div> | ||||
| 118 | + </div> | ||||
| 119 | + <div class="step"> | ||||
| 120 | + <div class="num">4</div> | ||||
| 121 | + <div> | ||||
| 122 | + <h3>Consultez les statistiques sur /stats</h3> | ||||
| 123 | + <p>Le tableau de bord analytique : volumes par niche, région, plateforme et tier d'audience, plus des rapports PDF aux couleurs du groupe.</p> | ||||
| 124 | + <div class="shot"><img src="./img/etape4.png" alt="Étape 4 — Consultez les statistiques sur /stats"></div> | ||||
| 125 | + </div> | ||||
| 126 | + </div> | ||||
| 127 | + </section> | ||||
| 128 | + | ||||
| 129 | + <section> | ||||
| 130 | + <p class="kicker">Sous le capot</p> | ||||
| 131 | + <h2>D'où viennent les données</h2> | ||||
| 132 | + <p>Pipeline (calqué sur Lou·Ka) : <b>découverte → extraction → résolution d'identité → normalisation → déduplication → | ||||
| 133 | + SQLite → API/UI</b>. 10 connecteurs auto-découverts : découverte (listes-medias, wikidata-qc, onlyqueb, youtube-recherche, | ||||
| 134 | + balados-itunes) et enrichissement (instagram-profil, tiktok-profil, youtube, twitch, link-in-bio). Un watch quotidien | ||||
| 135 | + (<code>crea-ka-sync</code>) relance découverte + enrichissement : nouveaux créateurs, métriques rafraîchies, comptes croisés révélés | ||||
| 136 | + via les liens de bio. La <b>résolution d'identité</b> pondère chaque signal (profil source 0.98 · link-in-bio 0.95 · lien croisé 0.90 · | ||||
| 137 | + listes publiques 0.85 · correspondance de handle 0.75) : sous 0.50, le rattachement n'est jamais publié, et les doublons ne sont | ||||
| 138 | + fusionnés que sur un compte fort partagé — jamais sur le nom (homonymes). L'API publique est documentée : <code>/api/creators</code>, | ||||
| 139 | + <code>/api/stats</code>, <code>/api/taxonomies</code>, <code>/api/sources</code>.</p> | ||||
| 140 | + </section> | ||||
| 141 | + | ||||
| 142 | + <section> | ||||
| 143 | + <p class="kicker">Questions fréquentes</p> | ||||
| 144 | + <h2>FAQ</h2> | ||||
| 145 | + <div class="card" style="margin:10px 0"><b>Je suis créateur et je veux être retiré. Comment faire ?</b><p style="margin:6px 0 0">La page /retrait applique l'opt-out immédiatement : fiche masquée sur-le-champ, inscription sur une liste de suppression persistante, jamais ré-agrégée.</p></div> | ||||
| 146 | + <div class="card" style="margin:10px 0"><b>D'où viennent les données ?</b><p style="margin:6px 0 0">Exclusivement de profils publics et professionnels : les pages publiques des plateformes, les listes médias, Wikidata, les liens de bio. Les données privées sont purgées.</p></div> | ||||
| 147 | + <div class="card" style="margin:10px 0"><b>Que signifie le score de confiance ?</b><p style="margin:6px 0 0">Chaque rattachement compte-créateur est pondéré selon son signal d'origine ; sous 0.50 il est marqué « à vérifier » et jamais publié.</p></div> | ||||
| 148 | + <div class="card" style="margin:10px 0"><b>Comment gérez-vous les homonymes ?</b><p style="margin:6px 0 0">Deux fiches ne sont fusionnées que si elles partagent un compte fort — jamais sur la seule base du nom.</p></div> | ||||
| 149 | + <div class="card" style="margin:10px 0"><b>Les mineurs sont-ils référencés ?</b><p style="margin:6px 0 0">Un régime restreint s'applique aux créateurs mineurs, conformément à l'éthique du projet et à la Loi 25.</p></div> | ||||
| 150 | + </section> | ||||
| 151 | +</div> | ||||
| 152 | + | ||||
| 153 | +<footer class="doc"> | ||||
| 154 | + <div class="container"> | ||||
| 155 | + <p><b>Créa·Ka</b> — un service <a href="https://www.groupe-ka.com">Groupe KA</a>. | ||||
| 156 | + Écosystème : les 13 plateformes sont liées au pied de chaque site.</p> | ||||
| 157 | + <p>© 2026 Groupe KA — Simon-Pierre Boucher · <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a></p> | ||||
| 158 | + </div> | ||||
| 159 | +</footer> | ||||
| 160 | +</body> | ||||
| 161 | +</html> | ||||
modified
frontend/dist/index.html
+1 −1
@@ -1477,7 +1477,7 @@ function tabbar(active){ | |||||
| 1477 | function footer(){ | 1477 | function footer(){ | ||
| 1478 | const year=new Date().getFullYear(); | 1478 | const year=new Date().getFullYear(); | ||
| 1479 | const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | 1479 | const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | ||
| 1480 | − const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | 1480 | + const localLegal=[{label:"Documentation",href:"/doc/"},{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | ||
| 1481 | return `<div class="footer-local"><div class="container"><nav> | 1481 | return `<div class="footer-local"><div class="container"><nav> | ||
| 1482 | <span class="klabel">Créa·Ka</span> | 1482 | <span class="klabel">Créa·Ka</span> | ||
| 1483 | <a href="/compte" data-nav>Mon compte KA ID</a> | 1483 | <a href="/compte" data-nav>Mon compte KA ID</a> | ||
modified
frontend/src/index.template.html
+1 −1
@@ -839,7 +839,7 @@ function tabbar(active){ | |||||
| 839 | function footer(){ | 839 | function footer(){ | ||
| 840 | const year=new Date().getFullYear(); | 840 | const year=new Date().getFullYear(); | ||
| 841 | const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | 841 | const others=KA_ECO.sites.filter(s=>s.id!=="crea-ka"); | ||
| 842 | − const localLegal=[{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | 842 | + const localLegal=[{label:"Documentation",href:"/doc/"},{label:"Retrait (opt-out)",href:"/retrait",nav:true}]; | ||
| 843 | return `<div class="footer-local"><div class="container"><nav> | 843 | return `<div class="footer-local"><div class="container"><nav> | ||
| 844 | <span class="klabel">Créa·Ka</span> | 844 | <span class="klabel">Créa·Ka</span> | ||
| 845 | <a href="/compte" data-nav>Mon compte KA ID</a> | 845 | <a href="/compte" data-nav>Mon compte KA ID</a> | ||
| 846 | 846 | ||||