Plugins hinzufügen oder aktualisieren

Diese Anleitung erklärt, wie man neue Capacitor-Plugins zum Capgo-Website hinzufügt oder bestehende Plugin-Dokumentation aktualisiert. Dies ist nützlich für Beiträger, Maintainer und KI-Agenten, die dabei helfen, die Dokumentation zu pflegen.

Übersicht

Wenn Sie ein neues Plugin zum Capgo-Ökosystem hinzufügen, müssen Sie mehrere Dateien und Orte auf der Website aktualisieren, um sicherzustellen, dass das Plugin in allen relevanten Bereichen richtig angezeigt wird:

1. Einstellungen für die Plugin-Liste - Hinzufügen von Plugin-Metadaten zur Masterliste
2. Plugin-Index-Seite - Hinzufügen des Plugins zur kategoriellen Plugin-Verzeichnisseite
3. Navi-Sidebar - Hinzufügen des Plugins zur Dokumentations-Sidebar
4. Plugin-Dokumentation - Erstellen von Übersichts- und Anfängs-Seiten
5. Plugin-Tutorial - Erstellen eines umfassenden Tutorials

Dateilocationen

Schlüsseldateien zum Aktualisieren

Datei	Zweck
/src/config/plugins.ts	Kapgo-Marketing-Website, Bereich: Zweck, Rolle: Kurz-UI-Label oder Navigationspunkt, Nachrichtenschlüssel `subprocessors_table_purpose` (Zweck der Tabelle der Unterprozessoren).
/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]/	Konfiguration der Seitenleiste
/src/content/plugins-tutorials/en/	Verzeichnis für Plugin-Dokumentation

Englische Tutorial-Dateien

1. Abschnitt mit dem Titel „Schritt-für-Schritt-Anleitung“

   Abschnitt mit dem Titel „Hinzufügen von Plugin zur Masterliste“ /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 Sie 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- & System-Plugins
   • 🎥 Medien- & Kamera-Plugins
   • 🛠️ Werkzeug-Plugins
   • 🤖 KI- & Advanced-Media
   • 📍 Standort- & Hintergrunddienste
   • 📞 Kommunikation- & Analytics
   • 🔐 Sicherheit- & System
   • 📊 Android-Spezifische Funktionen
   • 📥 Download- & Navigation

3. Zum Seitenleisten-Navigation hinzufügen

   Öffnen /astro.config.mjs und fügen Sie Ihre Erweiterung der Sidebar-Konfiguration (um Zeile 540 herum) 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,
   }

   Die Erweiterungen werden alphabetisch in der Sidebar aufgelistet.

4. Verzeichnis für Plugin-Dokumentation erstellen

   Erstellen Sie ein neues Verzeichnis für die Dokumentation Ihrer Erweiterung:

   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

Optional 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”, “Integrieren”, “Aktivieren”

Gute Beispiele:

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

Schlechte Beispiele:

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

Dokumentation schreiben

1. Mit der Installation beginnen: Beginnen Sie immer mit klaren Installationsanweisungen
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. Vollständige Beispiele hinzufügen: Zeigen Sie realistische Verwendungsmuster
6. Liste der Best Practices: Teile Tipps für den optimalen Einsatz
7. Documentiere Plattformunterschiede: Kläre iOS vs Android-Verhalten
8. Hinzufügen von Fehlersuche: Beantworte häufige Probleme

Code Beispiele

• Verwende TypeScript für alle code Beispiele
• Fügen Sie Importe an der Spitze hinzu
• Fügen Sie Kommentare hinzu, die wichtige Schritte erklären
• Zeige 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
• Angemessenen Icon aus Heroicons ausgewählt
• Hinzugefügtes Plugin zu /src/content/docs/docs/plugins/index.mdx unter der richtigen Kategorie
• Eintrag in der Seitenleiste in /astro.config.mjs
• Plugin-Dokumentationsverzeichnis erstellt
• Erstellt index.mdx Übersichtsseite
• Erstellt getting-started.mdx Richtlinie
• Erstellte Anleitung in /src/content/plugins-tutorials/en/
• Einschließlich Installationsschritte
• Dokumentierte iOS-Konfiguration
• Dokumentierte Android-Konfiguration
• Bereitgestellte Verwendungsexempel
• Fügte API-Referenz hinzu
• Einschließlich vollständiger Arbeitsbeispiel
• Listete beste Praktiken auf
• Fügte Plattform-spezifische Hinweise hinzu
• Testete alle Links, die korrekt funktionieren

Iconenverweis

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

Icon	Anwendungsbereich
BoltIcon	Blitz, Energie, Strom
CameraIcon	Kamera, Foto, Video
ChatBubbleLeftIcon	Chat, Nachrichten, Kommunikation
FingerPrintIcon	Biometrische Daten, Sicherheit, Authentifizierung
MapPinIcon	Ort, Standort, Karten
SpeakerWaveIcon	Töne, Musik, Sound
VideoCameraIcon	Video, Aufzeichnung, Streaming
CreditCardIcon	Zahlungen, Kaufabwicklung
PlayCircleIcon	Mediaplayer, Videoplayer
SignalIcon	Verbindung, Netzwerk, Beacon
RadioIcon	Beacon, Senden, drahtlos
ChatBubbleOvalLeftIcon	Soziale Medien, WeChat

Bestehende Plugins aktualisieren

Wenn Sie ein bestehendes Plugin aktualisieren:

1. Versionen aktualisieren im Dokumentation
2. Migrationsanleitungen hinzufügen falls sich die Änderungen auf das Plugin auswirken
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 den Tutorial aktuell mit den neuesten API

Sprachpfade

Schreiben und überprüfen Sie Plugin-Dokumentation in Englisch. Lokalisierte Pfade werden durch die Site-Metadaten generiert und an der Edge durch den Übersetzungswerker übersetzt.

Deine Änderungen testen

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

1. Die Site lokal bauen:

   bun run build

2. Nach Fehlern suchen:

   • Überprüfen, ob alle Links funktionieren
   • Stellen Sie sicher, dass Bilder richtig geladen werden
   • Bestätigen Sie, 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 Falle

Vorsicht

Vermeide diese häufigen Fehler:

1. Vergiss nicht zu synchronisieren: Führe immer bunx cap sync in Beispielen
2. Inkonsistente Namensgebung: Verwende überall denselben Plugin-Namen
3. Fehlende Plattform-Konfiguration: Dokumentiere sowohl die iOS- als auch die Android-Einrichtung
4. Gebrochene Links: Verwende relative Links und überprüfe, ob sie funktionieren
5. Keine Fehlerbehandlung: Zeige 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 holen

Wenn Sie Hilfe benötigen, um ein Plugin hinzuzufügen oder zu aktualisieren:

• Discord: Beitrittsanfrage zu unserem Discord-Community
• GitHub: Öffnen Sie ein Issue auf dem Webseite-Repository
• Email: Kontaktiere das Team bei support@capgo.app

Beispiele

Zum Verweisenszweck überprü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/ Hinweis (Plugin mit Unterseiten)

Zusammenfassung

Das Hinzufügen eines Plugins zur Capgo Dokumentation umfasst:

1. Metadaten zur Master-Konfiguration hinzufügen
2. Das Plugin zur kategoriellen Index-Seite hinzufügen
3. Die Seitenleiste konfigurieren
4. Komplette Dokumentationsseiten erstellen
5. Eine detaillierte Anleitung schreiben
6. Alle Änderungen lokal testen

Indem Sie diese Anleitung befolgen, stellen Sie sicher, dass Plugins konsistent dokumentiert und leicht von Benutzern zu finden sind.

Fortsetzen mit Hinzufügen oder Aktualisieren von Plugins

Wenn Sie Hinzufügen oder Aktualisieren von Plugins zum Planen von native Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis für die Implementierungsdetails in Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen für den Produktworkflow in Capgo Native Builds für den Produktworkflow in Capgo Native Builds Capacitor Plugins: Was Sie wissen müssen für den praktischen Kontext in Capacitor Plugins: Was Sie wissen müssen.