Aggiungi o Aggiorna Plugin

Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.

Questa guida spiega come aggiungere nuovi Capacitor plugin al sito web Capgo o aggiornare la documentazione esistente del plugin. Ciò è utile per i contributori, i mantenitori e gli agenti AI che aiutano a mantenere la documentazione.

Panoramica

Quando si aggiunge un nuovo plugin all'ecosistema Capgo, è necessario aggiornare diversi file e posizioni sul sito web per assicurarsi che il plugin sia visualizzato correttamente in tutti i luoghi pertinenti:

Configurazione della lista dei plugin - Aggiungi i metadati del plugin alla lista principale
Pagina di indice dei plugin - Aggiungi il plugin alla pagina di elenco dei plugin categorizzati
Navigazione laterale - Aggiungi il plugin alla barra di navigazione della documentazione
Documentazione del Plugin - Crea pagine di panoramica e avvio
Tutorial del Plugin - Crea un tutorial esaustivo

Posizioni dei File

File Chiave da Aggiornare

File	Scopo
`/src/config/plugins.ts`	Elenco principale dei plugin con metadati
`/src/content/docs/docs/plugins/index.mdx`	Pagina di indice dei plugin con categorie
`/astro.config.mjs`	Configurazione della navigazione del lato laterale
`/src/content/docs/docs/plugins/[plugin-name]/`	Directory dei documenti del plugin
`/src/content/plugins-tutorials/en/`	File del tutorial in inglese

Guida Passo-dopo-Passo

Aggiungi Plugin alla Lista Principale

Apri /src/config/plugins.ts e aggiungi il tuo plugin all' actions array:

// 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,
}

Icone disponibiliControlla /node_modules/astro-heroicons/mini/ per le icone disponibili.

Aggiungi Plugin alla Pagina di Indice
Sottosezione intitolata “Aggiungi Plugin alla Pagina di Indice”

Apri /src/content/docs/docs/plugins/index.mdx e aggiungi il tuo plugin nella categoria appropriata:
```
<LinkCard
  title="Your Plugin Name"
  description="Brief description of what the plugin does"
  href="/docs/plugins/your-plugin-name/"
/>
```
Categorie:
- ⭐ Plugin più popolari
- 📱 Plugin per dispositivi e sistema
- 🎥 Plugin per media e fotocamera
- 🛠️ Plugin di utilità
- 🤖 Intelligenza Artificiale & Media Avanzati
- 📍 Servizi di Localizzazione & Background
- 📞 Comunicazione & Analisi
- 🔐 Sicurezza & Sistema
- 📊 Caratteristiche Specifiche per Android
- 📥 Download & Navigazione
Aggiungi alla Navigazione del Lato
Sezione intitolata “Aggiungi alla Navigazione del Lato”

Apre /astro.config.mjs e aggiungi il tuo plugin alla configurazione della navigazione del lato (circa riga 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,
}
```
I plugin sono elencati in ordine alfabetico nella navigazione del lato.
Crea la directory di documentazione del plugin
Sezione intitolata “Crea la directory di documentazione del plugin”

Crea una nuova directory per la documentazione del tuo plugin:
Finestra del terminale
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

Crea la pagina di panoramica del plugin

Crea /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>

Crea la guida per l'avvio

Crea /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]

Crea file di tutorial

Crea /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]

Struttura della documentazione del plugin

File richiesti

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

File facoltativi

Per plugin complessi, potresti aggiungere pagine di documentazione aggiuntive:

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

Linee guida del contenuto

Scrivere le descrizioni dei plugin

Sii Conciso: Mantieni le descrizioni sotto i 100 caratteri
Sii Preciso: Spiega cosa fa il plugin, non cosa è
Usa Verbi di Azione: Inizia con verbi come “Controllo”, “Integrazione”, “Abilita”

Esempi Buoni:

“Controlla il dispositivo con la semplice attivazione/spenta del flash e della torcia”
“Integra la chat live Crisp e il supporto al cliente nel tuo app”
“Abilita l'autenticazione sicura utilizzando Face ID e Touch ID”

Esempi Cattivi:

“Un plugin per il flash”
“Questo è un plugin Crisp”
“Plugin biometrico”

Scrivere la Documentazione

Inizia con l'Installazione: Inizia sempre con passaggi di installazione chiari
Fornisci Configurazione: Includi le richieste di configurazione specifiche per piattaforma
Mostra Esempi di Utilizzo: Fornisci esempi di lavoro code funzionanti
Includi la Documentazione di Riferimento API: Documenta tutti i metodi e i parametri
Aggiungi Esempi Completi: Mostra modelli di utilizzo realistici
Elenco le Migliori Pratiche: Condividi consigli per un utilizzo ottimale
Documenta le Differenze di Piattaforma: Clarifica il comportamento iOS vs Android
Aggiungi Risoluzione dei Problemi: Risolvi le questioni comuni

Code Esempi

Usa TypeScript per tutti gli code esempi
Includi le importazioni in alto
Aggiungi commenti che spiegano i passaggi chiave
Mostra il gestione degli errori
Demonstra sia l'utilizzo base che avanzato

Checklist

Usa questa checklist quando si aggiunge un nuovo plugin:

Riferimento alle icone

Icone comuni utilizzate per i plugin (da astro-heroicons/mini/):

Icone	Uso di caso
`BoltIcon`	Flash, potenza, energia
`CameraIcon`	Camera, foto, video
`ChatBubbleLeftIcon`	Chat, messaggistica, comunicazione
`FingerPrintIcon`	Biometrica, sicurezza, autenticazione
`MapPinIcon`	Posizione, geolocalizzazione, mappe
`SpeakerWaveIcon`	Audio, suono, musica
`VideoCameraIcon`	Video, registrazione, streaming
`CreditCardIcon`	Pagamenti, acquisti
`PlayCircleIcon`	Lettori multimediali, lettori video
`SignalIcon`	Connettività, rete, beacon
`RadioIcon`	Beacon, broadcast, wireless
`ChatBubbleOvalLeftIcon`	Social media, WeChat

Aggiornamento dei Plugin Esistenti

Quando si aggiorna un plugin esistente:

Aggiorna i numeri di versione nelle documentazioni
Aggiungi guide di migrazione se esistono cambiamenti di versione
Aggiorna il riferimento a API con nuove funzioni
Aggiungi nuovi esempi per nuove funzionalità
Aggiorna le richieste della piattaforma se cambiate
Rivedi le migliori pratiche basate su nuove funzionalità
Mantieni il tutorial aggiornato con gli ultimi API

Percorsi linguistici

Scrivi e revisiona le documentazioni dei plugin in inglese. Le percorrenze localizzate sono generate dai metadati del sito e tradotte all'edge dal Worker di traduzione.

Testare le tue modifiche

Dopo aver aggiunto o aggiornato la documentazione dei plugin:

Costruisci il sito localmente:
Finestra del terminale
```
bun run build
```
Controlla gli errori:
- Verifica che tutti i collegamenti funzionino
- Assicurati che le immagini si caricano correttamente
- Conferma che gli esempi code sono validi
- Testa il funzionamento della navigazione
Anteprima del sito:
Finestra del terminale
```
bun run dev
```
Verifica che il tuo plugin sia presente:
- Verifica pagina elenco plugin
- Verifica navigazione laterale
- Testa tutte le pagine di documentazione
- Verifica pagina tutorial funziona

Pitfall comune

Ottenere Aiuto

Se hai bisogno di aiuto per aggiungere o aggiornare la documentazione del plugin:

Discord: Unisciti alla nostra community di Discord
GitHub: Apri un issue nel repository del sito web
Email: Contattaci al supporto@capgo.app

Esempi

Per riferimento, controlla questi plugin ben documentati:

Aggiornatore: /src/content/docs/docs/plugins/updater/ (plugin complesso con più pagine)
Flash: /src/content/docs/docs/plugins/flash/ (plugin semplice, buon esempio di partenza)
Login Sociale: /src/content/docs/docs/plugins/social-login/ (plugin con sottopagine)

Riepilogo

L'aggiunta di un plugin alla documentazione Capgo consiste nelle seguenti fasi:

Aggiungere metadati alla configurazione principale
Aggiungere il plugin all'indice di pagina categorizzato
Configurare la navigazione del lato laterale
Creare pagine di documentazione esaustive
Scrivere un tutorial dettagliato
Testare tutte le modifiche localmente

Seguendo questa guida, si assicura che i plugin siano documentati in modo coerente e facilmente scopribili dagli utenti.

Continua da Aggiungere o Aggiornare Plugin

Se stai utilizzando Aggiungere o Aggiornare Plugin per pianificare il lavoro sui plugin nativi, connettilo con Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Alternative per plugin aziendali di Ionic per il flusso di lavoro del prodotto in Alternative per plugin aziendali di Ionic, Costruzioni native di Capgo per il flusso di lavoro del prodotto in Costruzioni native di Capgo, e I plugin di Capacitor: Cosa devi sapere per il contesto pratico in I plugin di Capacitor: Cosa devi sapere.