Hinzufügen oder Aktualisieren von Plugins

This guide explains how to add new Capacitor plugins to the Capgo website or update existing plugin documentation. This is useful for contributors, maintainers, and AI agents helping to maintain the documentation.

Abschnitt mit dem Titel „Übersicht“

When adding a new plugin to the Capgo ecosystem, you need to update several files and locations across the website to ensure the plugin appears correctly in all relevant places:

1. - Plugin-Metadaten zur Masterliste hinzufügen - Add plugin metadata to the master list
2. Plugin-Index-Seite - Plugin zur kategorierte Plugin-Verzeichnisseite hinzufügen
3. Navi-Sidebar - Plugin zur Dokumentations-Sidebar hinzufügen
4. Plugin-Dokumentation - Überblicks- und Anfängerschritte erstellen
5. Plugin-Tutorial - Umfassenden Tutorial erstellen

Dateilocationen

Schlüsseldateien zum Aktualisieren

Datei	Zweck
/src/config/plugins.ts	Kapgo-Marketing-Website, Bereich: Kurzbeschreibung oder Navigationselement
/src/content/docs/docs/plugins/index.mdx	Master-Plugin-Liste mit Metadaten
/astro.config.mjs	Plugin-Index-Seite mit Kategorien
/src/content/docs/docs/plugins/[plugin-name]/	Sidebar-Navigation-Konfiguration
/src/content/plugins-tutorials/en/	Plugin-Dokumentationsverzeichnis

Englische Tutorial-Dateien

1. Schritt-für-Schritt-Anleitung

   Zum Master-Plugin-Liste hinzufügen /src/config/plugins.ts und fügen Sie Ihr Plugin hinzu zu dem 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,
   }

   Verfügbare Icons: Überprüfen Sie /node_modules/astro-heroicons/mini/ für verfügbare Icons.

2. Hinzufügen von Plugin zur Indexseite

   Öffnen /src/content/docs/docs/plugins/index.mdx und fügen Sie Ihr Plugin unter der entsprechenden Kategorie ein:

   <LinkCard
     title="Your Plugin Name"
     description="Brief description of what the plugin does"
     href="/docs/plugins/your-plugin-name/"
   />

   Kategorien:

   • ⭐ Hervorhebende Plugins
   • 📱 Geräte- und System-Plugins
   • 🎥 Medien- und Kamera-Plugins
   • 🛠️ Werkzeug-Plugins
   • 🤖 KI- und fortgeschrittene Medien
   • 📍 Standort- und Hintergrunddienste
   • 📞 Kommunikation und Analytics
   • 🔐 Sicherheit und System
   • 📊 Android-spezifische Funktionen
   • 📥 Herunterladen und Navigation

3. Zum Seitenleisten-Navigation hinzufügen

   Öffnen /astro.config.mjs und fügen Sie Ihrem Plugin der Seitenleiste (in der Nähe von Zeile 540) hinzu:

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

   Plugins werden alphabetisch in der Seitenleiste aufgelistet.

4. Verzeichnis für Plugin-Dokumentation erstellen

   Erstellen Sie ein neues Verzeichnis für die Dokumentation Ihres Plugins:

   mkdir -p /src/content/docs/docs/plugins/your-plugin-name/

5. Übersichtsseite für Plugin erstellen

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

6. Erstelle Anleitung für Anfänger

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

7. Erstelle Tutorial-Datei

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

Struktur der Plugin-Dokumentation

Erforderliche Dateien

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

Zusätzliche Dateien

Für komplexe Plugins können Sie zusätzliche Dokumentationsseiten hinzufügen:

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

Inhaltliche Richtlinien

Pluginbeschreibungen schreiben

• Seien Sie knapp: Beschreibungen sollten unter 100 Zeichen bleiben
• Sei Spezifisch: Erkläre, was das Plugin tut, nicht was es ist
• Verwende Handlungsverben: Beginne mit Verben wie „Steuerung“, „Integrierung“, „Aktivierung“

Gute Beispiele:

• “Steuerung des Geräte-Blitzlichts und des Taschenlampenlichts mit einfacher Ein-/Ausschalttaste”
• “Integriere Crisp-Lebenslauf-Chat und Kundenunterstützung in deine App”
• “Aktiviere sichere Authentifizierung mit Face ID und Touch ID”

Schlechte Beispiele:

• “Ein Plugin für Blitzlicht”
• “Dies ist ein Crisp-Plugin”
• “Biometrisches Plugin”

Dokumentation schreiben

1. Mit der Installation beginnen: Beginnen Sie immer mit klaren Schritt-für-Schritt-Anleitungen zur Installation
2. Konfiguration bereitstellen: Fügen Sie Plattform-spezifische Einrichtungsanforderungen hinzu
3. Verwendung beispielhaft darstellen: Bereitstellen Sie funktionierende code Beispiele
4. API Referenz einfügen: Dokumentieren Sie alle Methoden und Parameter
5. Komplettbeispiele hinzufügen: Zeigen Sie realistische Verwendungsmuster
6. Liste der Best Practices: Teile Tipps für eine optimale Verwendung
7. Dokumentiere Plattformunterschiede: Kläre das Verhalten von iOS gegenüber Android
8. Fügen Sie Fehlersuche hinzu: Beantworte häufige Probleme

Code Beispiele

• Verwenden Sie TypeScript für alle code Beispiele
• Fügen Sie Importe am Anfang hinzu
• Fügen Sie Kommentare hinzu, die wichtige Schritte erklären
• Zeigen Sie Fehlerbehandlung an
• Beide grundlegende und fortgeschrittene Verwendung demonstrieren

Checkliste

Verwenden Sie diese Checkliste, wenn Sie ein neues Plugin hinzufügen:

• Hinzugefügtes Plugin zu /src/config/plugins.ts
• Wählte geeignete Icon aus Heroicons
• Hinzugefügtes Plugin zu /src/content/docs/docs/plugins/index.mdx unter der richtigen Kategorie
• Hinzugefügtes Eintrag in der Seitenleiste /astro.config.mjs
• Erstellte Plugin-Dokumentationsverzeichnis
• Erstellte index.mdx Übersichtsseite
• Erstellt getting-started.mdx Richtlinie
• Erstellte Anleitung in /src/content/plugins-tutorials/en/
• Beinhaltet Installationsanweisungen
• Beschrieb die iOS-Konfiguration
• Beschrieb die Android-Konfiguration
• Bereitgestellte Verwendungsexempel
• Fügte API-Referenz hinzu
• Beinhaltet vollständiges funktionierendes Beispiel
• Listete gutes Verhalten auf
• Fügte Plattform-spezifische Hinweise hinzu
• Überprüfte, dass alle Links korrekt funktionieren

Iconenverweis

Gemeinsame Icons für Plugins (von astro-heroicons/mini/):

Icon	Anwendungsbereich
BoltIcon	context":"Seite/Bereich: Capgo-Lösungen-Marketingseite. Rolle: Kurzer UI-Label oder Navigationspunkt. Gesehen in: Seite solutions/cordova-to-capacitor-ai.astro. Nachrichtenschlüssel `solutions_cordova_to_capacitor_ai_table_use_case` (Solutions Cordova To Capacitor Ai Table Use Case)."
CameraIcon	Blitz, Energie, Leistung
ChatBubbleLeftIcon	Kamera, Foto, Video
FingerPrintIcon	Chat, Nachrichten, Kommunikation
MapPinIcon	Biometrische, Sicherheit, Authentifizierung
SpeakerWaveIcon	Ort, Geolocation, Karten
VideoCameraIcon	Audio, Ton, Musik
CreditCardIcon	Zahlungen, Kaufabwicklung
PlayCircleIcon	Mediaplayer, Videoplayer
SignalIcon	Verbindung, Netzwerk, Beacon
RadioIcon	Beacon, Senden, drahtlos
ChatBubbleOvalLeftIcon	Soziale Medien, WeChat

Aktualisierung bestehender Plugins

Wenn Sie ein bestehendes Plugin aktualisieren:

1. Aktualisieren Sie die Versionsnummern in der Dokumentation
2. Fügen Sie Migrationsleitfäden hinzu wenn sich Änderungen ergeben
3. Aktualisieren Sie die API-Referenz mit neuen Methoden
4. Fügen Sie neue Beispiele hinzu für neue Funktionen
5. Aktualisieren Sie die Plattformanforderungen wenn geändert
6. Überarbeiten Sie die besten Praktiken basierend auf neuen Funktionen
7. Halten Sie die Anleitung aktuell mit den neuesten API

Sprachpfade

Englische Plugin-Dokumente schreiben und überprüfen. Lokalisierte Pfade werden durch die Site-Metadaten generiert und an der Edge durch den Übersetzungsdienst übersetzt.

Ihre Änderungen testen

Nachdem Sie Plugin-Dokumentation hinzugefügt oder aktualisiert haben:

1. Die Site lokal bauen:

   bun run build

2. Fehler überprüfen:

   • Stellen Sie sicher, dass alle Links funktionieren
   • Stellen Sie sicher, dass Bilder richtig geladen werden
   • Stellen Sie sicher, dass code-Beispiele gültig sind
   • Überprüfen Sie, ob die Navigation funktioniert

3. Vorschau der Website:

   bun run dev

4. Überprüfen Sie, ob Ihr Plugin erscheint:

   • Überprüfen Sie die Plugin-Listenseite
   • Überprüfen Sie die Seitenleiste
   • Testen Sie alle Dokumentationsseiten
   • Bestätigen Sie, dass die Tutorialseite funktioniert

Häufige Fehler

Vorsicht

Achtung auf diese häufigen Fehler:

1. Vergessen Sie nicht, zu synchronisieren : Führen Sie immer bunx cap sync in Beispielen
2. Unkonsistente Namensgebung : Verwenden Sie überall denselben Plugin-Namen
3. Fehlende Plattform-Konfiguration : Dokumentieren Sie sowohl die iOS- als auch die Android-Einrichtung
4. Zerbrochene Links : Verwenden Sie relative Links und überprüfen Sie, ob sie funktionieren
5. Keine Fehlerbehandlung : Zeigen Sie immer try-catch in Beispielen
6. Fehlende Importe: Fügen Sie alle notwendigen Importe in Beispielen ein
7. Unklare Beschreibungen: Seien Sie spezifisch über das, was der Plugin tut

Hilfe erhalten

Wenn Sie Hilfe bei der Hinzufügung oder Aktualisierung der Plugin-Dokumentation benötigen:

• Discord: Beitrittsanfrage zu unserem Discord-Community
• GitHub__CAPGO_KEEP_0__ Webseite-Repository
• Email: Kontaktiere das Team bei support@capgo.app

Beispiele

Zur Referenz prüfen Sie diese gut dokumentierten Plugins:

• Updater: /src/content/docs/docs/plugins/updater/ (komplexer Plugin mit mehreren Seiten)
• Flash: /src/content/docs/docs/plugins/flash/ (einfaches Plugin, guter Anfangsbeispiel)
• Soziale Anmeldung: /src/content/docs/docs/plugins/social-login/ Ein (Plugin mit Unterseiten)

Zusammenfassung

Das Hinzufügen eines Plugins zur Capgo Dokumentation umfasst:

1. Hinzufügen von Metadaten zur Master-Konfiguration
2. Hinzufügen des Plugins zur kategoriellen Index-Seite
3. Konfigurieren der Seitenleiste
4. Erstellen umfassender Dokumentationsseiten
5. Schreiben eines detaillierten Tutorials
6. Testen aller Änderungen lokal

Durch das Befolgen dieser Anleitung stellen Sie sicher, dass Plugins konsistent dokumentiert und leicht von Benutzern zu finden sind.

Weitergehen von Hinzufügen oder Aktualisieren von Plugins

Wenn Sie "Hinzufügen oder Aktualisieren von Plugins" verwenden Hinzufügen oder Aktualisieren von Plugins um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Ionische Unternehmensplugin-Alternativen für den Produktworkflow in Ionische Unternehmensplugin-Alternativen Capgo Native Builds für den Produktworkflow in Capgo Native Builds und Capacitor Plugins: Was Sie wissen müssen für den praktischen Kontext in Capacitor Plugins: Was Sie wissen müssen.