feat(WebflowMigration): docs sous /docs et landing placeholder#25
Open
Zallom wants to merge 42 commits into
Open
feat(WebflowMigration): docs sous /docs et landing placeholder#25Zallom wants to merge 42 commits into
Zallom wants to merge 42 commits into
Conversation
Étape 1 de la migration depuis Webflow : la documentation passe sous `/docs` pour libérer la racine, qui accueille une landing minimale servie depuis Docusaurus. Les pages Webflow (legal/terms/privacy/cookies) seront portées en MDX dans une PR suivante. - routeBasePath docs: '/' → '/docs' - url: docs.raidprotect.bot → raidprotect.bot - customFields.urls.main pointe vers les chemins internes Docusaurus - announcementBar, JSON-LD, sitemap.createSitemapItems mis à jour - 424 liens absolus internes préfixés par /docs/ dans blog + i18n - Nouvelle landing placeholder en src/pages/index.tsx (avec <Translate>) - Plugin Docusaurus pages réactivé - LICENSE-CONTENT.md couvre désormais /src/pages
- Nouveau composant LegalLayout (hero + nav inter-pages + Layout Docusaurus)
- Pages MDX FR : legal, terms, privacy, cookies (depuis src Webflow FR)
- Traductions EN/DE/ES depuis Webflow + PT traduit depuis FR (Webflow n'a pas de PT)
- customFields.urls.{legal,terms,privacy,cookies} pointent désormais en interne
- Clés <Translate> du menu ajoutées dans i18n/{locale}/code.json
Note : les fichiers Webflow DE et ES contenaient des placeholders EN/DE pour
plusieurs pages. Les traductions concernées ont été régénérées depuis le FR
(à valider par les natifs).
Les pages MDX dans src/pages/ sont automatiquement enveloppées par MDXPageLayout (qui inclut déjà <Layout>), ce qui doublait navbar et footer puisque LegalLayout en remettait un. Les MDX généraient aussi une TOC indésirable à droite. Conversion en TSX : LegalLayout reste l'unique fournisseur de <Layout>, pas de TOC, contenu structuré en JSX (<section>, <h2>, <hr />, <p>, etc.).
- Hero en card centrée sombre (#070417, border #242328, radius 20px, padding 50px) - Titre 62px en Nohemi (police heading déjà importée) - Menu badges en pill shape, fond #040114, bordure et état actif --ifm-color-primary-darker - Container narrow 740px pour le contenu, dividers 1px entre sections - Responsive aligné sur les breakpoints Webflow (991/767/479)
Le swizzle remplaçait to:'main' par le chemin local ("/" en FR, "/en/" en EN…)
sans activeBaseRegex, donc le NavLink considérait toutes les routes comme actives.
On dérive maintenant un activeBaseRegex strict du chemin local.
feat(legal-pages): port des pages légales Webflow en MDX
5 sections décomposées en composants modulaires : - Hero (titre dégradé, pre-title pill, 2 CTAs) - Servers (marquee CSS-only de 15 serveurs Discord clients, sans JS Webflow) - About (4 KPI counters + fetch docs.raidprotect.bot/counts.json comme l'original) - Features (6 cartes vers /docs/features/*) - Pricing (3 tiers : Gratuit / Founder 2,99 $ / Business) 50 images Webflow copiées dans static/img/landing/. Page composée via un unique <Layout> dans src/pages/index.tsx. Traductions EN/DE/ES/PT à venir dans une sous-PR séparée.
Les 6 liens de la section Features pointaient encore vers docs.raidprotect.bot (extérieur). On passe en <Link to="/docs/features/..."> Docusaurus interne qui respecte la migration vers /docs et évite le full reload.
Le lien Documentation du footer pointait vers /, qui est maintenant la landing depuis la migration vers routeBasePath /docs.
…al,terms,privacy,cookies} Maintenant que les pages existent dans le site Docusaurus, Link résout automatiquement /legal, /terms, /privacy, /cookies (avec préfixe locale en i18n). Le mapping customFields.urls.* n'est plus nécessaire pour ces pages.
Seuls Hero et Servers restent des composants extraits (ils seront réutilisés dans les pages /frame/* à venir). Les 3 autres sections étaient spécifiques à la landing sans plan de réutilisation : on évite le surdécoupage en les fondant dans la page (un seul index.tsx + index.module.css avec classes préfixées par section).
Le Hero reçoit serverCount en prop et affiche un nombre arrondi au palier inférieur de 50 000 (Math.floor(count/50000)*50000) avec toLocaleString fr-FR. Effet checkpoint : 358 000 → 350 000, 401 000 → 400 000. Fallback 350 000 au SSR avant que le fetch côté client renvoie les vraies stats.
scroll-behavior: smooth global sur html, scopé par prefers-reduced-motion pour respecter les utilisateurs qui désactivent les animations.
feat(landing): port de la landing Webflow en TSX
Page invitée OAuth Discord : - Logo + texte de remerciement, card centrée style Webflow - Widget serveur dynamique : fetch Discord widget + invite à partir de ?guild_id, affiche carte avec icône + nom + membres + badge PARTNERED/VERIFIED - Warning permissions BigInt à partir de ?permissions : compare avec REQUIRED_PERMISSIONS et liste les permissions manquantes (ou avertit pour Administrateur seul) - 2 CTAs : Discord externe + <Link to="/docs"> interne Erreurs réseau silencieuses, aucun fetch côté SSR.
Écarts identifiés vs raidprotectbot.webflow.css : - .page : min-height 70vh→100vh, align-items center (link-in-bio-wrap) - .title : font-size 28px→18px, retirer font heading (un simple <p> Webflow) - .clientServer : gap 15→30, padding 20-24→30, border-radius 12px→0.8rem - .centerServer : margin-bottom 20→30 - .buttonRow : padding-bottom 0→20 Le 'Merci d'avoir invité RaidProtect' est en fait un <p> standard côté Webflow (pas un titre), donc fonte body et couleur grise héritée.
…age Webflow Plus de navbar/footer Docusaurus : la page est désormais plein écran (min-height 100vh sur .page) comme le Webflow .utility-page-wrap. On garde uniquement <Head> pour le titre et la description ; le data-theme dark est appliqué côté client par le script inline Docusaurus.
Reproduits du Webflow source : - .decoration : halo central (linear-gradient + blur 150px) derrière la card - .footerThank : grid 2 cols, dropdown langue à gauche + 4 socials à droite - .langDropdown : ouvert au hover/focus-within, items style .dropdown-link-3 - .socialWrap + .socialLink + .socialIcon : 4 icones (Discord/X/YouTube/GitHub) - .title margin-bottom 20→50px pour aérer entre 'Merci' et 'Pour bien débuter'
- .title margin-bottom 50→32px (espace 'Merci ↔ Pour bien débuter' resserré) - .buttonRow padding-bottom 20→0 (espace boutons ↔ footer resserré) - .footerThank margin-top 20→8px (espace boutons ↔ footer resserré) - .langTrigger::after : flèche bas en bordure CSS, identique au pseudo Webflow inline (.navbar__link:after)
Reproduit le setTimeout 60000ms du Webflow source qui redirige vers https://discord.com/invite/HfMYDHbgqc. Cleanup via clearTimeout au unmount pour éviter de rediriger si l'utilisateur navigue ailleurs entre temps.
feat(error-pages): port thank-you Webflow + validation 404
Pages embeddables (iframe) sans Layout Docusaurus : - /frame/hero : réutilise les composants <Hero /> + <Servers /> de la landing, avec fetch counts.json pour le pre-title dynamique - /frame/cta : section CTA inline (titre 'Garder une longueur d'avance' + 2 boutons : Ajouter le bot / Rejoindre le serveur) Wrapper .frame partagé : background #070510 (var --color--top-gg du Webflow). <meta robots noindex, nofollow> comme les frames Webflow. Traductions EN/DE/ES/PT à venir dans une sous-PR séparée.
Webflow utilisait body color #e1e0e9 (gray-4) qui rend les paragraphes légèrement grisâtres. Sur le rendu réel le contraste est trop faible, on passe à blanc pur partout : Hero description, Servers title/marquee items, index (featuresSubtitle/pricingDescription/itemTagline/counterLabel/ aboutSubtitle), et frame/cta description.
…aut et bas) - .description margin-bottom 10→0 (le seul espace vient du padding-top du buttonRow) - .buttonRow padding-bottom 0→20px (espace en-dessous des boutons) - .footerThank margin-top 8→0 (l'espace vient du buttonRow padding-bottom) Résultat : 20px entre description et boutons, 20px entre boutons et footer.
feat(frame-pages): /frame/hero et /frame/cta (FR)
fix(thank-you): symétriser les espacements autour des boutons
…Hero/Servers
Composants partagés Hero, Servers, frame/cta refactorés avec <Translate>
(traductions dans i18n/{locale}/code.json, 13 nouvelles clés × 5 locales).
Overlays par locale pour les pages longues :
- i18n/{en,de,es,pt}/docusaurus-plugin-content-pages/index.tsx (landing)
- i18n/{en,de,es,pt}/docusaurus-plugin-content-pages/thank-you.tsx
(avec PERMISSION_MESSAGES traduites via les libellés Discord officiels
de chaque locale)
Sources Webflow utilisées pour EN/DE/ES quand disponibles ; PT et la
section Pricing (absente côté EN/DE/ES Webflow) traduits depuis FR.
Le frame/cta-pt.html Webflow contenait du contenu espagnol — PT
ré-traduit proprement en portugais européen.
Fix incident : le dropdown langue de thank-you utilisait <Link> qui
auto-préfixait la locale (/fr/en/thank-you), passé en <a href>.
Build confirmé FR + EN.
…plus d'overlays
Une seule source TSX par page, toutes les chaînes dans i18n/{locale}/code.json
(~80 nouvelles clés × 5 locales). Une modif de structure = 1 fichier à toucher.
- landing.{about,features,pricing}.* couvrent toutes les sections inline
- thankYou.* + permission.* (22 noms Discord) pour la page invitée OAuth
- FEATURES driven par un array slugé : anti-spam/raid/captcha/mod/tag/dm
- PERMISSION_MESSAGES en tuples [id, defaultLabel, BigInt], discriminateur
admin basé sur l'id et non la chaîne traduite (locale-safe)
- Highlights <span> via placeholders {highlight} (compatibles syntaxe FR/DE
où le mot mis en évidence n'est pas toujours en fin de phrase)
Supprime 8 overlays : i18n/{en,de,es,pt}/docusaurus-plugin-content-pages/{index,thank-you}.tsx.
Conserve les overlays legal/terms/privacy/cookies (scope différent).
Build OK FR + EN + DE + ES + PT.
feat(translations): EN/DE/ES/PT pour landing, thank-you, frame/cta + Hero/Servers
Trois patterns laissés à l'ancien schéma de routing : - DocCard hrefs des readme.mdx (toutes versions, toutes locales) : href: '/beta/X' → '/docs/beta/X' href: '/3.3.X/X' → '/docs/3.3.X/X' href: '/setup|language|features|guides|useful-links' → '/docs/...' - Liens absolus dans 2 blog posts qui avaient échappé au préfixage initial : blog/3.1.0/3.1.0-interactions-update.md : /features/reports → /docs/features/reports blog/3.3.1/3.3.1-jail-and-mute.md : /features/display → /docs/features/display - Anchor #advanced dans readme.mdx : la section "Configuration avancée" de setup.md est commentée (HTML <!-- ... -->), donc l'ancre n'existe pas dans le rendu. Redirection vers #recommended (l'autre mode de config). Build OK sur les 5 locales (fr, en, de, es, pt) sans aucun warning broken link/anchor.
fix(broken-links): préfixer /docs/ sur DocCard hrefs + blog liens + #advanced
Reproduit l'anim Webflow : quand la section About entre dans le viewport, les 4 compteurs montent de 0 jusqu'à leur valeur cible en 2s avec un easing cubic ease-out (1 - (1-p)^3), via requestAnimationFrame. - IntersectionObserver attaché au counterItem (threshold 0.1) - animatedRef évite de relancer l'animation au re-render - prefers-reduced-motion : on saute l'animation et on affiche directement la valeur finale
feat(count-up-animation): count-up animation des stats avec IntersectionObserver
…rectes Les swizzles src/theme/* importent ces deux packages directement, mais ils n'étaient présents qu'en dépendances transitives via @docusaurus/preset-classic. pnpm isole strictement les modules transitifs : webpack ne les trouve plus au build sur une install fresh, même avec shamefully-hoist=true. Les déclarer en dependencies explicites règle le souci et reste cohérent avec les recommandations Docusaurus pour les projets qui swizzlent.
Webflow source listait deux ensembles distincts de serveurs Discord : - FR (15 serveurs) : Wankil Studio, Rocket League France, ZetFar, Ligue 1, Jobless, Blox Fruits FR, CYRILmp4, Fortnite House, PUBG France, Mastu, Clash Royale FR, Team Vitality, Genshin Impact FR, Slash FR, NationGlory - International / EN/DE/ES/PT (15 serveurs) : FlexingSeal, Eclipse, Art of War 3, The Forge, Ligue 1, Chatzone, PUBG UK, District 10, Rocket Baguette, Clash.GG, NationGlory, Team Vitality, WeWard, Meta Lock, Slash FR On sélectionne la liste sur currentLocale (fr → SERVERS_FR, sinon SERVERS_INTL).
…sitemap Disallow ajusté à la nouvelle URL des docs (routeBasePath /docs). Les pages /frame/* et /thank-you portent déjà <meta robots noindex,nofollow>, inutile de les ajouter en disallow.
Zallom
force-pushed
the
feat(WebflowMigration)
branch
from
b09d90f to
438ed77
Compare
Cohérent avec les pages /frame/* et avec le fait que la page est paramétrée par ?guild_id (donc sans valeur SEO). Évite aussi d'avoir besoin d'un Disallow explicite dans robots.txt.
Docusaurus mémorise la dernière version consultée dans localStorage (`docs-preferred-version-default`). En arrivant sur la landing, on efface cette préférence pour que le dropdown retombe sur `lastVersion` (stable). Évite que le sélecteur affiche "Bêta" ou "Ancienne" si l'utilisateur revient sur l'accueil après avoir consulté ces versions.
Le hook useDocsPreferredVersion lance ReactContextError pendant le prerender de /index car DocsPreferredVersionContextProvider n'est monté que sur les pages servies par le plugin docs. On efface directement la clé localStorage 'docs-preferred-version-default' dans un useEffect ; au prochain rendu de la navbar, le dropdown retombe sur lastVersion (stable), même effet visible sans casser le SSG.
Le graph global ne contenait qu'un node Organization vide. On le complète avec name, url, logo, description et sameAs (discord, x, youtube, github) + une description sur le node WebSite. Sur chaque landing (FR + EN/DE/ES/PT), on injecte en plus un node SoftwareApplication ancré à @id=#software, lié à #organization et #website, avec inLanguage et description localisés, applicationCategory SecurityApplication, operatingSystem Discord et une offer gratuite. La même entité bot est ainsi décrite en 5 langues. BreadcrumbList (docs) et BlogPosting (blog) sont déjà auto-émis par Docusaurus, on ne duplique pas.
useAlternatePageUtils de Docusaurus 3.10 fait pathname.replace(baseUrl,'') pour extraire le suffixe partagé entre locales. Sur le build d'un locale non-default (baseUrl = '/en/' par ex.), si l'utilisateur arrive sur '/en' sans slash final le replace ne matche pas et le suffixe '/en' est recollé tel quel à chaque base de locale, d'où des liens en double slash type 'https://raidprotect.bot//en' et 'https://raidprotect.bot/es//en'. On remplace la logique d'AlternateLangHeaders pour stripper manuellement le préfixe locale en tolérant l'absence du slash final, puis on reconstruit chaque alternate à partir de localeConfigs[locale].baseUrl.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Étape 1 : routeBasePath
/docs, landing placeholder, liens internes mis à jour. Sous-PRs à venir pour porter les pages Webflow (legal/terms/privacy/cookies, landing finale).