diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8d3a7c1..10becd9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,11 +2,15 @@ Merci de votre intérêt pour contribuer au site de l'ORGANISATION KA INTERNATIONALE ! +Le site est une application **SvelteKit + Svelte 5 (runes) + TypeScript**, entièrement pré-rendue en statique. Avant de contribuer, lisez `charte-oki-design-system.md` (marque) et `svelte_core_bestpractices.md` (conventions Svelte 5). + ## Ajouter du contenu +Le contenu éditorial vit dans les bundles i18n : `src/lib/i18n/fr/*.json` et `src/lib/i18n/en/*.json` — **toujours modifier les deux locales**. + ### Ajouter un service hébergé -Éditez `src/_data/i18n/fr/services.json` (et la version `en/`) : +Éditez `src/lib/i18n/fr/services.json` (et `en/`) : ```json { @@ -18,122 +22,85 @@ Merci de votre intérêt pour contribuer au site de l'ORGANISATION KA INTERNATIO } ``` +Le service apparaîtra automatiquement dans la grille de fallback du village (`HostingVillage.svelte`). Pour qu'il ait aussi son bâtiment dans la scène SVG, voir « Modifier un composant ». + ### Ajouter un projet web -Éditez `src/_data/i18n/fr/projects.json` (et la version `en/`) : - -```json -{ - "name": "NOM.PROJET", - "icon": "📱", - "domain": "nom.projet", - "description": "Description du projet", - "url": "https://nom.projet/" -} -``` +Éditez `src/lib/i18n/fr/projects.json` (et `en/`). Le champ `icon` attend un emoji legacy qui sera remplacé au rendu par un picto du sprite — voir le mapping dans `src/lib/components/sections/pictos.ts` et choisissez-en un qui y figure. ### Ajouter un client ou partenaire -Pour les logos, privilégiez une image locale dans `src/assets/images/` et utilisez le filtre `| cdn` dans les templates. Les URLs distantes fonctionnent mais ne passent pas par le CDN. +Placez le logo dans `src/lib/assets/images/` (et `clients/` pour les clients), puis importez-le dans le composant de section concerné via vite-imagetools : + +```ts +import logo from '$lib/assets/images/mon-logo.png?format=avif;webp;png&w=320;640&as=picture'; +``` + +et affichez-le avec ``. Ne jamais référencer une image distante : tout asset est self-hébergé (doctrine souveraineté + CSP). ### Ajouter une valeur -Éditez `src/_data/i18n/fr/values.json` (et la version `en/`) : - -```json -{ - "icon": "🌟", - "title": "Titre", - "description": "Description de la valeur" -} -``` +Éditez `src/lib/i18n/fr/values.json` (et `en/`). Le champ `icon` suit le même mapping que les projets (`pictos.ts`). ### Modifier la navigation -Éditez `src/_data/i18n/fr/navigation.json` (et la version `en/`) : +Éditez `src/lib/i18n/fr/navigation.json` (et `en/`) : ```json -{ - "text": "Texte du lien", - "url": "#section", - "external": false -} +{ "text": "Texte du lien", "url": "/#ancre", "external": false } ``` -Pour un lien externe, mettez `"external": true`. +Pour un lien externe, mettez `"external": true`. Les URLs de la version EN doivent pointer sous `/en/`. ### Modifier les informations de contact -Les liens de contact sont regroupés par section dans `src/_data/i18n/fr/contact.json` (et la version `en/`). L'icône affichée est déterminée automatiquement à partir du texte du lien (`whatsapp`, `telegram`, `discord`, `labola`, `kontak`/`mail`). - -```json -{ - "title": "💬 Communauté", - "links": [ - { "text": "Discord", "url": "https://discord.gg/DPvUCA8dD" } - ] -} -``` +Les liens de contact sont regroupés dans `src/lib/i18n/fr/contact.json` (et `en/`). L'icône de chaque lien est déduite de son libellé (`whatsapp`, `telegram`, `discord`, `labola`, `kontak`/`mail`). Les emojis en tête des titres de groupes sont convertis en pictos du sprite (`pictos.ts`). ## Modifier les styles -Les styles sont dans `src/assets/css/styles.css`. - -### Variables CSS principales - -```css ---or-oki: #E8A625; ---noir-oki: #000000; ---vert-oki: #00A854; ---rouge-oki: #ED1C4C; ---blanc-creme: #F7F7F2; ---noir-profond: #1A1A1A; ---gris-sombre: #2A2A2A; ---or-clair: #F5BD4F; ---vert-clair: #00C569; ---rouge-clair: #FF2D5F; -``` +- **Tokens (couleurs, typo, espacements, motion)** : `src/lib/styles/oki-tokens.css` — ne jamais recopier une valeur de la charte à la main, utiliser les variables. +- **Primitives partagées** (boutons, cartes, tags, flag-bar, gate reduced-motion) : `src/lib/styles/base.css`. +- **Styles d'une section** : dans le `