Ajouter ou mettre à jour des plugins

Copiez un prompt de configuration incluant les étapes d'installation et le guide markdown complet pour ce plugin.

Ce guide explique comment ajouter de nouveaux plugins Capacitor au site web Capgo ou mettre à jour la documentation des plugins existants. C'est utile pour les contributeurs, les mainteneurs et les agents IA qui aident à la maintenance de la documentation.

Aperçu

Lors de l'ajout d'un nouveau plugin à l'écosystème Capgo, vous devez mettre à jour plusieurs fichiers et emplacements sur le site pour garantir que le plugin apparaisse correctement partout :

Configuration de la liste des plugins - Ajouter les métadonnées du plugin à la liste principale
Page d'index des plugins - Ajouter le plugin à la page de liste des plugins par catégorie
Navigation latérale - Ajouter le plugin à la barre latérale de la documentation
Documentation du plugin - Créer les pages d'aperçu et de démarrage
Tutoriel du plugin - Créer un tutoriel complet

Emplacements des fichiers

Fichiers clés à mettre à jour

Fichier	Objectif
`/src/config/plugins.ts`	Liste maîtresse des plugins avec métadonnées
`/src/content/docs/docs/plugins/index.mdx`	Page d'index des plugins par catégories
`/astro.config.mjs`	Configuration de la navigation latérale
`/src/content/docs/docs/plugins/[plugin-name]/`	Répertoire de la documentation des plugins
`/src/content/plugins-tutorials/en/`	Fichiers du tutoriel en anglais

Guide étape par étape

Ajouter le plugin à la liste principale

Ouvrez /src/config/plugins.ts et ajoutez votre plugin au actions tableau :

// First, import an appropriate Heroicon
import YourIconName from 'astro-heroicons/mini/IconName.astro'

// Then add to the actions array
{
  name: '@capgo/your-plugin-name',
  author: 'github.com/Cap-go',
  description: 'Brief description of what the plugin does',
  href: 'https://github.com/Cap-go/your-plugin-name/',
  title: 'Display Name',
  icon: YourIconName,
}

Icônes disponibles : Vérifier /node_modules/astro-heroicons/mini/ pour les icônes disponibles.

Ajouter le plugin à la page d'index
Section intitulée « Ajouter un plugin à la page d'index »

Ouvrez /src/content/docs/docs/plugins/index.mdx et ajoutez votre plugin sous la catégorie appropriée :
```
<LinkCard
  title="Your Plugin Name"
  description="Brief description of what the plugin does"
  href="/docs/plugins/your-plugin-name/"
/>
```
Catégories:
- ⭐ Plugins mis en avant
- 📱 Plugins appareil et système
- 🎥 Plugins média et caméra
- 🛠️ Plugins utilitaires
- 🤖 IA et média avancé
- 📍 Localisation & services d'arrière-plan
- 📞 Communication & analytics
- 🔐 Sécurité & système
- 📊 Fonctionnalités spécifiques à Android
- 📥 Téléchargement & navigation
Ajouter à la navigation latérale
Section intitulée « Ajouter à la navigation latérale »

Ouvrez /astro.config.mjs et ajoutez votre plugin à la configuration de la barre latérale (vers la ligne 540) :
```
{
  label: 'Your Plugin Name',
  items: [
    { label: 'Overview', link: '/docs/plugins/your-plugin-name/' },
    { label: 'Getting started', link: '/docs/plugins/your-plugin-name/getting-started' },
  ],
  collapsed: true,
}
```
Les plugins sont listés par ordre alphabétique dans la barre latérale.
Créer le répertoire de documentation du plugin
Section intitulée « Créer le répertoire de documentation du plugin »

Créez un nouveau répertoire pour la documentation de votre plugin :
Fenêtre de terminal
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

Créer la page de présentation du plugin

Créer /src/content/docs/docs/plugins/your-plugin-name/index.mdx:

---
title: "@capgo/your-plugin-name"
description: Brief description of the plugin's purpose
tableOfContents: false
next: false
prev: false
sidebar:
  order: 1
  label: "Introduction"
hero:
  tagline: Detailed tagline explaining what the plugin does
  image:
    file: ~public/your-plugin-icon.svg
  actions:
    - text: Get started
      link: /docs/plugins/your-plugin-name/getting-started/
      icon: right-arrow
      variant: primary
    - text: Github
      link: https://github.com/Cap-go/your-plugin-name/
      icon: external
      variant: minimal
---

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid stagger>
  <Card title="Feature 1" icon="puzzle">
    Description of first key feature
  </Card>
  <Card title="Feature 2" icon="rocket">
    Description of second key feature
  </Card>
  <Card title="Cross-platform" icon="puzzle">
    Works on both iOS and Android 📱
  </Card>
  <Card title="Comprehensive Documentation" icon="open-book">
    Check the [Documentation](/docs/plugins/your-plugin-name/getting-started/) to master the plugin.
  </Card>
</CardGrid>

Créer le guide de démarrage

Créer /src/content/docs/docs/plugins/your-plugin-name/getting-started.mdx:

---
title: Getting Started
description: Learn how to install and use the plugin in your Capacitor app.
sidebar:
  order: 2
---

import { Steps } from '@astrojs/starlight/components';
import { PackageManagers } from 'starlight-package-managers'

<Steps>
1. **Install the package**
   <PackageManagers pkg="@capgo/your-plugin-name" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />

2. **Sync with native projects**
   <PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />
</Steps>

## Configuration

### iOS Configuration
[iOS-specific setup instructions]

### Android Configuration
[Android-specific setup instructions]

## Usage

[Basic usage examples]

## API Reference

[Detailed API documentation]

## Complete Example

[Full working example]

## Best Practices

[Recommended practices and tips]

## Platform Notes

[Platform-specific notes and limitations]

Créer le fichier du tutoriel

Créer /src/content/plugins-tutorials/en/your-plugin-name.md:

---
locale: en
---
# Using @capgo/your-plugin-name Package

The `@capgo/your-plugin-name` package [brief description]. In this tutorial, we will guide you through the installation, configuration, and usage of this package in your Ionic Capacitor app.

## Installation

[Installation steps]

## Configuration

[Configuration steps for iOS and Android]

## API Usage

[Detailed API usage examples]

## Complete Example

[Full working example]

## Best Practices

[Tips and best practices]

## Troubleshooting

[Common issues and solutions]

## Conclusion

[Summary and links to additional resources]

Structure de la documentation du plugin

Fichiers requis

src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx           # Overview page with hero and feature cards
└── getting-started.mdx # Installation and usage guide

src/content/plugins-tutorials/en/
└── your-plugin-name.md # Comprehensive tutorial

Fichiers optionnels

Pour les plugins complexes, vous pouvez ajouter des pages de documentation supplémentaires :

src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx
├── getting-started.mdx
├── api-reference.mdx   # Detailed API documentation
├── examples.mdx        # Additional examples
├── troubleshooting.mdx # Troubleshooting guide
└── migrations.mdx      # Migration guides

Règles de contenu

Rédiger les descriptions de plugins

Soyez concis: Gardez les descriptions sous les 100 caractères
Soyez spécifique: Expliquez ce que fait le plugin, pas ce qu'il est
Utilisez des verbes d'action: Commencez par des verbes comme « Contrôler », « Intégrer », « Activer »

Bons exemples:

« Contrôlez la lampe torche de l'appareil avec un simple bouton on/off »
« Intégrez le chat en direct Crisp et le support client dans votre app »
« Activez l'authentification sécurisée via Face ID et Touch ID »

Mauvais exemples:

« Un plugin pour le flash »
« C'est un plugin Crisp »
« Plugin biométrique »

Rédiger la documentation

Commencez par l'installation: Commencez toujours par des étapes d'installation claires
Fournir la configuration: Inclure les prérequis de configuration par plateforme
Afficher des exemples d'utilisation: Fournir des exemples code fonctionnels
Inclure la référence API: Documenter toutes les méthodes et paramètres
Ajouter des exemples complets: Montrer des cas d'usage réels
Lister les bonnes pratiques: Partager des conseils pour une utilisation optimale
Documenter les différences entre plateformes: Clarifier le comportement iOS vs Android
Ajouter une section de dépannage: Résoudre les problèmes courants

Exemples Code

Utilisez TypeScript pour tous les exemples code
Incluez les imports en haut du fichier
Add comments explaining key steps
Montrez la gestion des erreurs
Démontrez les usages de base et avancés

Checklist

Utilisez cette checklist lors de l'ajout d'un nouveau plugin :

Référence des icônes

Icônes couramment utilisées pour les plugins (de astro-heroicons/mini/):

Icône	Cas d’usage
`BoltIcon`	Flash, puissance, énergie
`CameraIcon`	Appareil photo, photo, vidéo
`ChatBubbleLeftIcon`	Chat, messagerie, communication
`FingerPrintIcon`	Biométrie, sécurité, authentification
`MapPinIcon`	Localisation, géolocalisation, cartes
`SpeakerWaveIcon`	Audio, son, musique
`VideoCameraIcon`	Vidéo, enregistrement, streaming
`CreditCardIcon`	Paiements, achats
`PlayCircleIcon`	Lecteurs média, lecteurs vidéo
`SignalIcon`	Connectivité, réseau, beacon
`RadioIcon`	Beacon, diffusion, sans fil
`ChatBubbleOvalLeftIcon`	Réseaux sociaux, WeChat

Mettre à jour des plugins existants

Lors de la mise à jour d'un plugin existant :

Mettre à jour les numéros de version dans la documentation
Ajouter des guides de migration s'il y a des breaking changes
Mettre à jour la référence API avec les nouvelles méthodes
Ajouter de nouveaux exemples pour les nouvelles fonctionnalités
Mettre à jour les prérequis plateforme si modifié
Réviser les bonnes pratiques selon les nouvelles fonctionnalités
Maintenir le tutoriel à jour avec la dernière version de API

Chemins des langues

Rédigez et révisez la documentation des plugins en anglais. Les chemins localisés sont générés par les métadonnées du site et traduits à l'edge par le Worker de traduction.

Tester vos modifications

Après avoir ajouté ou mis à jour la documentation d'un plugin :

Compiler le site localement:
Fenêtre de terminal
```
bun run build
```
Vérifier les erreurs:
- Vérifier que tous les liens fonctionnent
- S'assurer que les images se chargent correctement
- Confirmer que les exemples code sont valides
- Tester la navigation
Prévisualiser le site:
Fenêtre de terminal
```
bun run dev
```
Vérifier que votre plugin apparaît:
- Vérifier la page de listing des plugins
- Vérifier la navigation de la barre latérale
- Tester toutes les pages de la documentation
- Confirmer que la page tutoriel fonctionne

Erreurs courantes

Obtenir de l'aide

If you need help adding or updating plugin documentation:

Discord: Rejoignez notre communauté Discord
GitHub: Ouvrez une issue sur le dépôt du site web
E-mail: Contactez l'équipe sur support@capgo.app

Exemples

Pour référence, consultez ces plugins bien documentés :

Updater: /src/content/docs/docs/plugins/updater/ (plugin complexe avec plusieurs pages)
Flash: /src/content/docs/docs/plugins/flash/ (plugin simple, bon exemple pour débuter)
Connexion sociale: /src/content/docs/docs/plugins/social-login/ (plugin avec des sous-pages)

Résumé

Ajouter un plugin à la documentation Capgo implique de :

Ajouter des métadonnées à la configuration principale
Ajouter le plugin à la page d'index par catégories
Configuration de la navigation latérale
Créer des pages de documentation complètes
Rédiger un tutoriel détaillé
Tester tous les changements en local

En suivant ce guide, vous garantissez que les plugins sont documentés de manière cohérente et facilement trouvables par les utilisateurs.

Continuer après l'ajout ou la mise à jour de plugins

Si vous utilisez Ajouter ou mettre à jour des plugins pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, Capgo Native Build pour le workflow produit dans les Capgo Native Builds, et Plugins Capacitor : ce que vous devez savoir pour le contexte pratique des Capacitor Plugins : ce qu'il faut savoir.