feat(doc): page documentation /doc (guide + captures) + lien footer + PDF téléchargeable
8 changed files +161 −2
modified
autoka/web.py
+10 −1
@@ -13,7 +13,7 @@ from pathlib import Path | ||
| 13 | 13 | from fastapi import BackgroundTasks, Body, FastAPI, HTTPException, Query |
| 14 | 14 | from fastapi.middleware.cors import CORSMiddleware |
| 15 | 15 | from fastapi.middleware.gzip import GZipMiddleware |
| 16 | −from fastapi.responses import FileResponse | |
| 16 | +from fastapi.responses import FileResponse, RedirectResponse | |
| 17 | 17 | from fastapi.staticfiles import StaticFiles |
| 18 | 18 | |
| 19 | 19 | from . import auth, db, ingest, seo |
@@ -453,6 +453,15 @@ app.include_router(seo.router) | ||
| 453 | 453 | if FRONTEND_DIST.exists(): |
| 454 | 454 | app.mount("/assets", StaticFiles(directory=FRONTEND_DIST / "assets"), name="assets") |
| 455 | 455 | |
| 456 | + # Documentation statique (/doc/) — servie avant le catch-all SPA | |
| 457 | + doc_dir = FRONTEND_DIST / "doc" | |
| 458 | + if doc_dir.is_dir(): | |
| 459 | + @app.get("/doc", include_in_schema=False) | |
| 460 | + def doc_slash(): | |
| 461 | + return RedirectResponse("/doc/", status_code=308) | |
| 462 | + | |
| 463 | + app.mount("/doc", StaticFiles(directory=doc_dir, html=True), name="doc") | |
| 464 | + | |
| 456 | 465 | @app.get("/{full_path:path}") |
| 457 | 466 | def spa(full_path: str): |
| 458 | 467 | target = FRONTEND_DIST / full_path |
added
frontend/public/doc/auto-ka-documentation.pdf
+0 −0
Binary file not shown.
added
frontend/public/doc/img/etape1.png
+0 −0
Binary file not shown.
added
frontend/public/doc/img/etape2.png
+0 −0
Binary file not shown.
added
frontend/public/doc/img/etape3.png
+0 −0
Binary file not shown.
added
frontend/public/doc/img/etape4.png
+0 −0
Binary file not shown.
added
frontend/public/doc/index.html
+150 −0
@@ -0,0 +1,150 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="fr"> | |
| 3 | +<head> | |
| 4 | +<meta charset="utf-8"> | |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | |
| 6 | +<title>Documentation — Auto·Ka</title> | |
| 7 | +<meta name="description" content="Comment fonctionne Auto·Ka : guide pas à pas, données, architecture."> | |
| 8 | +<style> | |
| 9 | + :root{ --ink:#101014; --paper:#faf9f6; --accent:#ff5a2a; --muted:#6b6b70; --line:#e6e4de; } | |
| 10 | + *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink); | |
| 11 | + font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%} | |
| 12 | + .container{max-width:960px;margin:0 auto;padding:0 20px} | |
| 13 | + header.doc{background:var(--ink);color:var(--paper);padding:20px 0} | |
| 14 | + header.doc .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} | |
| 15 | + header.doc a{color:var(--paper);text-decoration:none} | |
| 16 | + .wordmark{font-weight:800;font-size:20px;letter-spacing:.02em} | |
| 17 | + .wordmark .ka{color:var(--accent)} | |
| 18 | + .btn-pdf{display:inline-block;background:var(--accent);color:var(--ink);font-weight:700; | |
| 19 | + padding:10px 18px;border-radius:999px;text-decoration:none;font-size:15px} | |
| 20 | + .hero{padding:48px 0 8px} | |
| 21 | + .hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 12px} | |
| 22 | + .hero h1 mark{background:var(--accent);color:var(--ink);padding:2px 8px} | |
| 23 | + .hero p.lead{font-size:18px;color:var(--muted);max-width:640px} | |
| 24 | + .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); | |
| 25 | + border-left:3px solid var(--accent);padding-left:10px;margin:40px 0 8px;font-weight:700} | |
| 26 | + section{padding:8px 0 16px} | |
| 27 | + h2{font-size:26px;margin:6px 0 12px} | |
| 28 | + .step{display:grid;grid-template-columns:56px 1fr;gap:16px;margin:26px 0;align-items:start} | |
| 29 | + .step .num{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent); | |
| 30 | + display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} | |
| 31 | + .step h3{margin:6px 0 6px;font-size:19px} | |
| 32 | + .step p{margin:0 0 12px;color:#3a3a40} | |
| 33 | + .shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(16,16,20,.08)} | |
| 34 | + .shot img{display:block;width:100%;height:auto} | |
| 35 | + .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0} | |
| 36 | + .card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff} | |
| 37 | + .card b{display:block;margin-bottom:6px} | |
| 38 | + table{border-collapse:collapse;width:100%;font-size:15px} | |
| 39 | + th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top} | |
| 40 | + th{background:var(--ink);color:var(--paper)} | |
| 41 | + footer.doc{margin-top:56px;background:var(--ink);color:var(--paper);padding:28px 0;font-size:14px} | |
| 42 | + footer.doc a{color:var(--accent);text-decoration:none} | |
| 43 | + @media print{ | |
| 44 | + header.doc .btn-pdf{display:none} | |
| 45 | + .shot{box-shadow:none;break-inside:avoid} | |
| 46 | + .step{break-inside:avoid} | |
| 47 | + a{color:inherit;text-decoration:none} | |
| 48 | + } | |
| 49 | + @media(max-width:640px){ .step{grid-template-columns:40px 1fr} .step .num{width:34px;height:34px;font-size:15px} } | |
| 50 | +</style> | |
| 51 | +</head> | |
| 52 | +<body> | |
| 53 | +<header class="doc"> | |
| 54 | + <div class="container"> | |
| 55 | + <a class="wordmark" href="/">Auto<span class="ka">·Ka</span></a> | |
| 56 | + <nav style="display:flex;gap:14px;align-items:center"> | |
| 57 | + <a href="/">← Retour au site</a> | |
| 58 | + <a class="btn-pdf" href="./auto-ka-documentation.pdf" download>Télécharger le PDF</a> | |
| 59 | + </nav> | |
| 60 | + </div> | |
| 61 | +</header> | |
| 62 | + | |
| 63 | +<div class="container"> | |
| 64 | + <div class="hero"> | |
| 65 | + <p class="kicker">Documentation · mise à jour 2026-08-24</p> | |
| 66 | + <h1>Comment fonctionne <mark>Auto·Ka</mark></h1> | |
| 67 | + <p class="lead">Toutes les voitures, motos et scooters usagés à vendre au Québec — agrégés à la source, un seul endroit.</p> | |
| 68 | + </div> | |
| 69 | + | |
| 70 | + <section> | |
| 71 | + <p class="kicker">Vue d'ensemble</p> | |
| 72 | + <h2>À quoi sert le site</h2> | |
| 73 | + <p>Chercher une auto usagée, c'est normalement ouvrir des dizaines de sites de concessionnaires — chacun avec sa navigation, ses filtres, son format. Auto·Ka retourne le problème : un connecteur dédié par commerce visite chaque site directement à la source (aucune plateforme d'annonces revendue), normalise chaque véhicule vers un schéma unique et détecte les changements en continu — arrivages, baisses de prix et ventes. Chaque fiche garde toujours le lien direct vers l'annonce originale du concessionnaire.</p> | |
| 74 | + <div class="cards"> | |
| 75 | + <div class="card"><b>48 456 véhicules</b>en vente, autos, motos et scooters confondus.</div> | |
| 76 | + <div class="card"><b>138 concessionnaires</b>connectés (129 sources actives), dans les 18 régions du Québec.</div> | |
| 77 | + <div class="card"><b>16 969 rappels</b>de sécurité constructeurs croisés avec les fiches.</div> | |
| 78 | + <div class="card"><b>9 889 doublons VIN</b>détectés et masqués : un véhicule annoncé sur plusieurs sites n'apparaît qu'une fois.</div> | |
| 79 | + </div> | |
| 80 | + </section> | |
| 81 | + | |
| 82 | + <section> | |
| 83 | + <p class="kicker">Guide pas à pas</p> | |
| 84 | + <h2>Utiliser le site en 4 étapes</h2> | |
| 85 | + | |
| 86 | + <div class="step"> | |
| 87 | + <div class="num">1</div> | |
| 88 | + <div> | |
| 89 | + <h3>Arriver sur l'accueil : le marché en un coup d'œil</h3> | |
| 90 | + <p>La page d'accueil affiche le parc complet : nombre de véhicules en vente, concessionnaires connectés, régions couvertes, prix moyen et fil des régions en temps réel. Les onglets <b>Autos</b>, <b>Motos</b> et <b>Scooters</b> donnent accès aux trois verticales, chacune avec ses propres filtres.</p> | |
| 91 | + <div class="shot"><img src="./img/etape1.png" alt="Étape 1 — accueil Auto·Ka"></div> | |
| 92 | + </div> | |
| 93 | + </div> | |
| 94 | + | |
| 95 | + <div class="step"> | |
| 96 | + <div class="num">2</div> | |
| 97 | + <div> | |
| 98 | + <h3>Filtrer la recherche</h3> | |
| 99 | + <p>Le panneau de recherche combine marque, modèle, région, carrosserie, carburant, transmission, année minimale, prix maximal et kilométrage maximal — les facettes affichent le nombre de véhicules disponibles pour chaque valeur. Ici, « Toyota » sous 30 000 $ retourne 2 070 véhicules, triables par arrivages récents, prix ou kilométrage.</p> | |
| 100 | + <div class="shot"><img src="./img/etape2.png" alt="Étape 2 — recherche filtrée Toyota, prix max 30 000 $"></div> | |
| 101 | + </div> | |
| 102 | + </div> | |
| 103 | + | |
| 104 | + <div class="step"> | |
| 105 | + <div class="num">3</div> | |
| 106 | + <div> | |
| 107 | + <h3>Ouvrir une fiche véhicule</h3> | |
| 108 | + <p>Chaque fiche présente la galerie photos complète, le prix (avec l'ancien prix barré s'il a baissé), et les caractéristiques standardisées : année, kilométrage, transmission, carburant, motricité, carrosserie, moteur, couleurs, numéro de stock. Le bouton <b>« Voir chez [le concessionnaire] »</b> mène toujours à l'annonce originale — prix et disponibilité confirmés à la source.</p> | |
| 109 | + <div class="shot"><img src="./img/etape3.png" alt="Étape 3 — fiche véhicule : galerie, prix, caractéristiques"></div> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + | |
| 113 | + <div class="step"> | |
| 114 | + <div class="num">4</div> | |
| 115 | + <div> | |
| 116 | + <h3>Consulter l'historique de prix et le suivi</h3> | |
| 117 | + <p>Plus bas dans la fiche : les équipements, l'<b>historique de prix</b> daté (chaque baisse détectée automatiquement — ici 16 999 $ → 14 934 $), le <b>suivi Auto·Ka</b> (repéré le, vérifié le, statut), les rappels de sécurité s'il y en a, et les véhicules similaires toutes sources confondues. Avec un compte KA ID (gratuit), le cœur ajoute le véhicule à vos favoris « Mon univers Ka ».</p> | |
| 118 | + <div class="shot"><img src="./img/etape4.png" alt="Étape 4 — équipements, historique de prix et suivi Auto·Ka"></div> | |
| 119 | + </div> | |
| 120 | + </div> | |
| 121 | + </section> | |
| 122 | + | |
| 123 | + <section> | |
| 124 | + <p class="kicker">Sous le capot</p> | |
| 125 | + <h2>D'où viennent les données</h2> | |
| 126 | + <p>Auto·Ka entretient un <b>connecteur dédié par commerce</b> (familles de plateformes D2C Media, SM360, AMVOQ/AutoUsagee, EvalAuto, Convertus, PowerGo, HGrégoire…). Les sites de concessionnaires n'offrent pas de webhooks ; Auto·Ka en reproduit l'équivalent : un processus de <b>resynchronisation autonome</b> revisite toutes les sources en continu (cycle d'environ 2 heures), et un <b>diff engine</b> compare le hash de contenu de chaque annonce pour détecter les nouveautés, les changements de prix et les ventes. Un véhicule qui disparaît du site source est marqué vendu — sa page renvoie alors un vrai <code>410 Gone</code> aux moteurs de recherche. La <b>déduplication par VIN</b> masque les annonces multi-sites d'un même véhicule. Règle de fidélité : aucun prix inventé — si la source n'affiche pas de prix, la fiche indique « Prix sur demande » ; le crawl reste poli (délai entre requêtes, backoff, User-Agent identifié).</p> | |
| 127 | + </section> | |
| 128 | + | |
| 129 | + <section> | |
| 130 | + <p class="kicker">Questions fréquentes</p> | |
| 131 | + <h2>FAQ</h2> | |
| 132 | + <div class="cards"> | |
| 133 | + <div class="card"><b>Les prix sont-ils à jour ?</b>Chaque source est resynchronisée en continu (cycle ~2 h) et chaque fiche affiche sa date de dernière vérification. Le prix et la disponibilité restent toujours confirmés à la source, via le lien direct vers l'annonce du concessionnaire.</div> | |
| 134 | + <div class="card"><b>Peut-on acheter sur Auto·Ka ?</b>Non — Auto·Ka est un agrégateur indépendant. Chaque fiche mène à l'annonce originale du concessionnaire, où se conclut la transaction.</div> | |
| 135 | + <div class="card"><b>Que devient une annonce vendue ?</b>Quand un véhicule disparaît du site source, il est marqué vendu (après un délai de grâce) et sa page renvoie un vrai 410 aux moteurs de recherche.</div> | |
| 136 | + <div class="card"><b>Pourquoi un même véhicule n'apparaît-il qu'une fois ?</b>Les annonces publiées sur plusieurs sites sont détectées par leur VIN : 9 889 doublons sont masqués pour ne garder qu'une fiche par véhicule.</div> | |
| 137 | + <div class="card"><b>À quoi sert le compte KA ID ?</b>C'est le compte unique du Groupe KA (« Se connecter avec KA ID ») : mêmes identifiants sur les 13 plateformes, favoris centralisés dans « Mon univers Ka ».</div> | |
| 138 | + </div> | |
| 139 | + </section> | |
| 140 | +</div> | |
| 141 | + | |
| 142 | +<footer class="doc"> | |
| 143 | + <div class="container"> | |
| 144 | + <p><b>Auto·Ka</b> — un service <a href="https://www.groupe-ka.com">Groupe KA</a>. | |
| 145 | + Écosystème : les 13 plateformes sont liées au pied de chaque site.</p> | |
| 146 | + <p>© 2026 Groupe KA — Simon-Pierre Boucher · <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a></p> | |
| 147 | + </div> | |
| 148 | +</footer> | |
| 149 | +</body> | |
| 150 | +</html> | |
modified
frontend/src/App.tsx
+1 −1
@@ -282,7 +282,7 @@ export default function App() { | ||
| 282 | 282 | /> |
| 283 | 283 | </Routes> |
| 284 | 284 | </main> |
| 285 | − <KaFooter siteId="auto-ka" /> | |
| 285 | + <KaFooter siteId="auto-ka" localLegal={[{ label: "Documentation", href: "/doc/" }]} /> | |
| 286 | 286 | </AccountProvider> |
| 287 | 287 | ); |
| 288 | 288 | } |
| 289 | 289 | |