Hinzufügen oder Aktualisieren von Plugins

Eine Einrichtungsanfrage mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation für diesen Plugin kopieren.

Diese Anleitung erklärt, wie Sie neue Capacitor-Plugins für die Capgo-Website hinzufügen oder bestehende Plugin-Dokumentation aktualisieren können. Dies ist nützlich für Beitragssteller, Maintainer und KI-Agenten, die dabei helfen, die Dokumentation zu pflegen.

Übersicht

Wenn Sie ein neues Plugin in das 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:

Plugin-Listeneinstellungen - Hinzufügen von Plugin-Metadaten zur Masterliste
Plugin-Index-Seite - Hinzufügen Sie das Plugin zur kategorierte Plugin-Verzeichnisseite
Navi-Sidebar - Hinzufügen Sie das Plugin zur Dokumentations-Sidebar
Plugin-Dokumentation - Erstellen Sie eine Übersichts- und Anfängerseite
Plugin-Tutorial - Erstellen Sie einen umfassenden Tutorial

Dateilagen

Schlüsseldateien zum Aktualisieren

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

Schritt-für-Schritt-Anleitung

Hinzufügen von Plugin zur Master-Liste

Öffnen /src/config/plugins.ts und fügen Sie Ihre Erweiterung 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.

Hinzufügen Sie Erweiterung zur Index-Seite
Abschnitt mit dem Titel “Hinzufügen Sie Erweiterung zur Index-Seite”

Öffnen /src/content/docs/docs/plugins/index.mdx und fügen Sie Ihre Erweiterung unter der entsprechenden Kategorie hinzu:
```
<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
Zum Seitenleisten-Navigationsmenü hinzufügen
Abschnitt mit der Überschrift „Zum Seitenleisten-Navigationsmenü hinzufügen“

Öffnen /astro.config.mjs und fügen Sie Ihre Erweiterung zur 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.
Erweiterungsdokumentationsverzeichnis erstellen
Abschnitt mit dem Titel “Erweiterungsdokumentationsverzeichnis erstellen”

Erstellen Sie ein neues Verzeichnis für die Dokumentation Ihrer Erweiterung:
Terminal-Fenster
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

Erweiterungsinhaltsseite 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>

Anleitung erstellen

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

Tutorial-Datei erstellen

Erstellen /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 liegen
Sei Spezifisch: Erkläre, was das Plugin tut, nicht was es ist
Verwende Handlungsverben: Beginne mit Verben wie „Steueren“, „Integrieren“, „Aktivieren“

Gute Beispiele:

“Control device flashlight and torch with simple on/off toggle”
„Steueren Sie das Geräte-Blitzlicht und das Taschenlampenlicht mit einem einfachen An/ Aus-Schalter“
„Integrieren Sie Crisp-Lebenslauf und Kundenunterstützung in Ihre App“

„Aktivieren Sie eine sichere Authentifizierung mit Face ID und Touch ID“:

Schlechte Beispiele
“This is a Crisp plugin”
„Ein Blitzlicht-Plugin“

Dokumentation schreiben

Mit der Installation beginnen: Beginnen Sie immer mit klaren Installationsanweisungen
Konfiguration bereitstellen: Fügen Sie Plattform-spezifische Einrichtungsanforderungen hinzu
Verwendung beispielhaft darstellen: Bereitstellen Sie funktionierende code Beispiele
Referenz mit API enthalten: Dokumentieren Sie alle Methoden und Parameter
Vollständige Beispiele hinzufügen: Zeigen Sie realistische Verwendungsmuster an
Liste von Best Practices: Teile Tipps für den optimalen Einsatz
Dokumentiere Plattformunterschiede: Kläre iOS- gegenüber Android-Verhalten
Füge Fehlersuche hinzu: Beantworte häufige Probleme

Code Beispiele

Verwende TypeScript für alle code Beispiele
Füge Importe an der Oberseite hinzu
Füge Kommentare hinzu, die wichtige Schritte erklären
Zeige Fehlerbehandlung an
Beide grundlegende und fortgeschrittene Verwendung demonstrieren

Überprüfungsliste

Verwenden Sie diese Überprüfungsliste, wenn Sie ein neues Plugin hinzufügen:

Iconenverweis

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

Icon	Verwendungsbereich
`BoltIcon`	Blitz, Strom, Energie
`CameraIcon`	Kamera, Foto, Video
`ChatBubbleLeftIcon`	Chat, Nachrichten, Kommunikation
`FingerPrintIcon`	Biometrische, Sicherheit, Authentifizierung
`MapPinIcon`	Ort, Geolocation, Karten
`SpeakerWaveIcon`	Audio, Ton, Musik
`VideoCameraIcon`	Video, Aufzeichnung, Streaming
`CreditCardIcon`	Zahlungen, Kaufabrechnungen
`PlayCircleIcon`	Mediaplayer, Videoplayer
`SignalIcon`	Verbindung, Netzwerk, Beacon
`RadioIcon`	Beacon, Senden, drahtlos
`ChatBubbleOvalLeftIcon`	Soziale Medien, WeChat

Aktualisierung bestehender Plugins

Wenn ein bestehendes Plugin aktualisiert wird:

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

Sprachpfade

Dokumentationen von Plugins auf Englisch erstellen und überprüfen. Lokalisierte Pfade werden durch die Site-Metadaten generiert und an der Edge durch den Übersetzungswerker übersetzt.

Ihre Änderungen testen

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

Die Site lokal bauen:
Terminal-Fenster
```
bun run build
```
Fehler überprüfen:
- Stellen Sie sicher, dass alle Links funktionieren
- Stellen Sie sicher, dass Bilder korrekt geladen werden
- Bestätigen Sie, dass code-Beispiele gültig sind
- Überprüfen Sie, ob die Navigation funktioniert
Vorschau der Website:
Terminalfenster
```
bun run dev
```
Ü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

Gemeinsame Fallstricke

Hilfe

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

Discord: Beitritt zu unserem Discord-Community
GitHub: Open an issue on the Website-Repository
E-Mail: 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, gute Anfangsbeispiel)
Social Login: /src/content/docs/docs/plugins/social-login/ (Plugin mit Unterseiten)

Zusammenfassung

Das Hinzufügen eines Plugins zur Capgo Dokumentation umfasst:

Die Hinzufügung von Metadaten zur Master-Konfiguration
Das Hinzufügen des Plugins zur kategoriellen Indexseite
Die Konfiguration der Seitenleiste
Die Erstellung umfassender Dokumentationsseiten
Das Schreiben eines detaillierten Tutorials
Das Testen aller Änderungen lokal

Durch das Befolgen dieser Anleitung stellen Sie sicher, dass Plugins konsistent dokumentiert und leicht von Benutzern entdeckt werden können.