Hinzufügen oder Aktualisieren von Plugins

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 korrekt angezeigt wird:

1. Plugin-Listeneinstellungen - Hinzufügen von Plugin-Metadaten zur Masterliste
2. Plugin-Index-Seite - Hinzufügen des Plugins zur kategoriellen Plugin-Verzeichnisseite
3. Seitenleiste - Hinzufügen des Plugins zur Seitenleiste
4. Plugin-Dokumentation - Erstellen von Übersichts- und Anfängsseiten
5. Plugin-Tutorial - Erstellen eines umfassenden Tutorials

Dateilocationen

Hauptdateien zum Aktualisieren

Datei	Zweck
/src/config/plugins.ts	Haupt-Plugin-Liste mit Metadaten
/src/content/docs/docs/plugins/index.mdx	Plugin-Index-Seite mit Kategorien
/astro.config.mjs	Konfiguration der Seitenleiste
/src/content/docs/docs/plugins/[plugin-name]/	Verzeichnis für Plugin-Dokumentation
/src/content/plugins-tutorials/en/	Englische Tutorial-Dateien

Schritt-für-Schritt-Anleitung

1. Hinzufügen von Plugin zur Hauptliste

   Öffnen /src/config/plugins.ts Fügen Sie Ihrem Plugin und fügen Sie es in das 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/ zur Verfügung stehende 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:

   • ⭐ Hervorragende 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 (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,
   }

   Plugins werden alphabetisch in der Seitenleiste aufgelistet.

4. Verzeichnis für Plugin-Dokumentation erstellen

   Erstellen Sie ein neues Verzeichnis für die Plugin-Dokumentation:

   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 eine 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 eine 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“, „Integration“, „Aktivierung“

Gute Beispiele:

• “Steuerung des Geräte-Blitzlichts und des Taschenlampenlichts mit einfacher Ein-/Ausschalt-Taste”
• “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 Installationsanweisungen
2. Konfiguration bereitstellen: Fügen Sie Plattform-spezifische Einrichtungsanforderungen hinzu
3. Verwendung beispielhaft darstellen: Bereitstellen Sie funktionierende code Beispiele
4. API Referenz einbeziehen: Dokumentieren Sie alle Methoden und Parameter
5. Vollständige Beispiele hinzufügen: Zeigen Sie realistische Verwendungsmuster
6. Liste von Best Practices: Teile Tipps für eine optimale Verwendung
7. Dokumentiere Plattformunterschiede: Kläre das Verhalten von iOS gegenüber Android
8. Füge Fehlersuche hinzu: Beantworte häufige Probleme

Code Beispiele

• Verwende TypeScript für alle code Beispiele
• Füge Importe an der Spitze hinzu
• Füge 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
• Wählte geeigneten 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/
• Eingeschlossene Installationsanweisungen
• Dokumentierte iOS-Konfiguration
• Dokumentierte Android-Konfiguration
• Bereitgestellte Verwendungsexempel
• Hinzugefügte API-Referenz
• Eingeschlossene vollständige Arbeitsbeispiel
• Aufgelistete besten Praktiken
• Hinzugefügte Plattform-spezifische Hinweise
• Getestet, dass alle Links korrekt funktionieren

Iconenverweis

Gemeinsame Icons, die für Plugins verwendet werden (von astro-heroicons/mini/):

Icon	Anwendungsbereich
BoltIcon	context
CameraIcon	Blitz, Energie, Strom
ChatBubbleLeftIcon	Kamera, Foto, Video
FingerPrintIcon	Chat, Nachrichten, Kommunikation
MapPinIcon	Biometrie, Sicherheit, Authentifizierung
SpeakerWaveIcon	Ort, Geolocation, Karten
VideoCameraIcon	Hören, 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. Update API-Referenz mit neuen Methoden
4. Hinzufügen neuer Beispiele für neue Funktionen
5. Update Plattformanforderungen falls geändert
6. Überarbeiten bester Praktiken basierend auf neuen Funktionen
7. Halten Sie die Anleitung 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.

Ihre Änderungen testen

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

1. Die Site lokal bauen:

   bun run build

2. Nach Fehlern suchen:

   • Stellen Sie sicher, dass 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

Avoid diese häufigen Fehler:

1. Vergessen Sie nicht, zu synchronisieren: Führen Sie immer bunx cap sync in Beispielen
2. Unkonsistente Namensgebung: Verwenden Sie denselben Pluginnamen überall
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 das Plugin tut

Hilfe holen

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

• Discord: Beitritt zu unserem Discord-Community
• : Öffnen Sie ein Issue auf dem GitHubpagePath Webseiten-Repository
• E-Mail: Kontaktiere das Team bei support@capgo.app

Beispiele

Zum Verweisenswertes ü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/ (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 Indexseite
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 auffindbar 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 Unternehmens-Plugin-Alternativen für den Produktworkflow in Ionische Unternehmens-Plugin-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.