Exemple pas à pas

Dans ce tutoriel, vous construisez un petit site de présentation, puis vous lui ajoutez une page À propos avec une section d'équipe, un composant personnalisé, une icône et une traduction allemande. Au passage, vous utilisez presque toutes les commandes d'aarshi.

1. Créer le projet

aarshi setup portfolio --languages fr,en --default-language fr --yes
cd portfolio

aarshi crée le projet Next.js, installe les dépendances et écrit aarshi.toml. Le français est la langue par défaut : / redirige vers /fr.

2. Ajouter une page

aarshi add -p a-propos

aarshi crée trois choses pour la page :

• views/a-propos/a-propos.view.tsx, la vue qui affiche la page ;
• app/[locale]/a-propos/page.tsx, la route, qui sert /fr/a-propos et /en/a-propos ;
• une entrée dans app/sitemap.ts, pour que les moteurs de recherche la trouvent.

Elle ajoute aussi la clé "a-propos.title" dans lib/i18n/dictionaries/fr.ts et en.ts, avec une valeur vide. Remplissez-les :

// lib/i18n/dictionaries/fr.ts
"a-propos.title": "À propos",

// lib/i18n/dictionaries/en.ts
"a-propos.title": "About",

3. Ajouter une section avec le menu

Une section est un bloc de la page. Tapez la commande sans argument :

aarshi add

1. Choisissez Section dans le premier menu.
2. Tapez le nom equipe.
3. Dans le menu des pages, choisissez a-propos.

aarshi crée views/a-propos/sections/equipe.tsx, l'ajoute à la vue, et ajoute "a-propos.equipe.title" dans les deux dictionnaires. Remplissez-la comme précédemment, par exemple "Notre équipe" et "Our team".

4. Ajouter un composant personnalisé

aarshi add -c carte-membre

Cela crée components/custom/carte-membre.tsx, un composant de départ que vous pouvez utiliser dans la section. Le composant vous appartient : aarshi ne le modifie plus ensuite.

5. Convertir une icône

Enregistrez une icône exportée depuis votre outil de dessin sous components/icons/logo.svg, puis lancez :

aarshi icons --all

aarshi écrit components/icons/logo.tsx, un composant React au même dessin. Importez-le comme n'importe quel composant.

6. Ajouter une traduction allemande

aarshi add-lang de

aarshi crée lib/i18n/dictionaries/de.ts avec toutes les clés du dictionnaire par défaut, toutes vides, et ajoute de aux langues. Le site est maintenant aussi servi sous /de, mais ses textes sont encore vides. Remplissez-les : "a-propos.title": "Über uns",, et ainsi de suite pour chaque clé.

7. Vérifier le projet

aarshi status

Tant que toutes les valeurs ne sont pas remplies, aarshi status liste les valeurs vides comme todo dans la section i18n. Ce ne sont pas des erreurs : le code de sortie reste 0. Une fois tout rempli, le rapport se termine par ✓ project is conformant.

Pour ne voir que l'essentiel, lancez aarshi status --errors-only.

8. Voir le résultat

npm run dev

Ouvrez http://localhost:3000/fr/a-propos, puis /en/a-propos et /de/a-propos. Le sélecteur de langue de l'en-tête change la langue de la page courante.

Ce que vous avez fait

Vous écrivez les textes et le design. aarshi écrit les fichiers qui les relient : les dossiers, les routes, le plan du site et les clés des dictionnaires, que le compilateur vérifie par rapport à la langue par défaut.