플러그인을 추가하거나 업데이트

설치

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.

Overview

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:

플러그인 목록 구성 Plugin Index Page
Plugin List Configuration - 플러그인을 카테고리별 플러그인 목록 페이지에 추가
사이드바 네비게이션 - 문서 사이드바에 플러그인을 추가
플러그인 문서 - 개요 및 시작 가이드 페이지를 생성
플러그인 튜토리얼 - 포괄적인 튜토리얼을 생성

파일 위치

업데이트해야 할 주요 파일

파일	목적
`/src/config/plugins.ts`	마스터 플러그인 목록과 메타데이터
`/src/content/docs/docs/plugins/index.mdx`	카테고리별 플러그인 인덱스 페이지
`/astro.config.mjs`	사이드바 네비게이션 설정
`/src/content/docs/docs/plugins/[plugin-name]/`	플러그인 문서 디렉토리
`/src/content/plugins-tutorials/en/`	영어 튜토리얼 파일

단계별 안내서

마스터 목록에 플러그인을 추가

열기 /src/config/plugins.ts 플러그인을 마스터 목록에 추가하세요 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,
}

사용 가능한 아이콘: Check /node_modules/astro-heroicons/mini/ 사용 가능한 아이콘을 확인하세요.

인덱스 페이지에 플러그인을 추가하세요
인덱스 페이지에 플러그인을 추가하는 방법

열고 /src/content/docs/docs/plugins/index.mdx 적절한 카테고리 아래에 플러그인을 추가하세요:
```
<LinkCard
  title="Your Plugin Name"
  description="Brief description of what the plugin does"
  href="/docs/plugins/your-plugin-name/"
/>
```
카테고리:
- ⭐ 추천 플러그인
- 📱 기기 및 시스템 플러그인
- 🎥 미디어 및 카메라 플러그인
- 🛠️ 유틸리티 플러그인
- 🤖 AI 및 고급 미디어
- 📍 위치 및 배경 서비스
- 📞 통신 및 분석
- 🔐 보안 및 시스템
- 📊 안드로이드 전용 기능
- 📥 다운로드 및 네비게이션
사이드바 네비게이션에 추가
제목 "사이드바 네비게이션에 추가"

열기 /astro.config.mjs 그리고 사이드바 구성 (라인 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,
}
```
플러그인은 알파벳 순으로 사이드바에 나열됩니다.
플러그인 문서 디렉토리 만들기
플러그인 문서 디렉토리 만들기

플러그인 문서 디렉토리를 위한 새로운 디렉토리를 만들세요:
터미널 창
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

플러그인 개요 페이지 만들기

만들기 /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>

기존 시작 가이드 만들기

만들기 /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]

기존 튜토리얼 파일 만들기

만들기 /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]

플러그인 문서 구조

필수 파일

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

선택적 파일

복잡한 플러그인은 추가 문서 페이지를 추가할 수 있습니다:

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

내용 지침

플러그인 설명 쓰기

간결하게: 100자 이하로 설명을 작성하세요
정확하게:
: :

: :

플러그인을 사용하는 방법을 설명하십시오. 플러그인이 무엇인지 설명하지 마십시오.
액션 단어를 사용하십시오.
:

좋은 예시입니다.:

“플래시등을 쉽게 켜고 끄는 단추”
“앱에 Crisp 라이브 채팅과 고객 지원을 통합합니다.”
“Face ID와 Touch ID를 사용하여 안전한 인증을 활성화합니다.”

: ',

설치 시작: 명확한 설치 단계부터 시작하세요
설정 제공: 플랫폼에 따라 다른 설정 요구 사항을 포함하세요
사용 예제 보여주기: 실제 code 예제를 제공하세요
API 참조 포함: 모든 메서드와 매개 변수를 문서화하세요
완전한 예제 추가: 실제-world 사용 패턴을 보여주세요
최선의 방법 목록: 최적 사용을 위한 팁 공유
플랫폼 차이 문서화: iOS와 Android의 동작을 명확히 설명
문제 해결 추가: 일반적인 문제를 해결

Code 예시

모든 code 예시에서 TypeScript 사용
위쪽에 import를 포함
중요한 단계를 설명하는 주석 추가
에러 처리를 보여주기
기본적인 사용과 고급 사용을 모두 보여주기

체크리스트

새 플러그인을 추가할 때 이 체크리스트를 사용하세요:

아이콘 참조

플러그인에 사용되는 일반 아이콘 ( astro-heroicons/mini/):

Icon	사용 사례
`BoltIcon`	전원, 에너지
`CameraIcon`	카메라, 사진, 비디오
`ChatBubbleLeftIcon`	채팅, 메시징, 통신
`FingerPrintIcon`	생체 인식, 보안, 인증
`MapPinIcon`	위치, 위치 정보, 지도
`SpeakerWaveIcon`	음성, 소리, 음악
`VideoCameraIcon`	비디오, 녹음, 스트리밍
`CreditCardIcon`	결제, 구매
`PlayCircleIcon`	미디어 플레이어, 비디오 플레이어
`SignalIcon`	연결성, 네트워크, 비콘
`RadioIcon`	비콘, 방송, 무선
`ChatBubbleOvalLeftIcon`	소셜 미디어, 웨챗

기존 플러그인 업데이트

기존 플러그인을 업데이트할 때:

버전 번호 업데이트하기 문서에 반영하기
이동 가이드 추가하기 파괴적인 변경이 존재할 때
API 참조 업데이트 새로운 메서드와 함께
새로운 기능에 대한 예제 추가 새로운 기능에 따라
플랫폼 요구 사항 업데이트 변경된 경우
새로운 기능에 따라 최적화 최신 기능에 따라
튜토리얼을 최신 상태로 유지 최신 API과 함께

언어 경로

영어로 플러그인 문서를 작성하고 검토하십시오. 지역화된 경로는 사이트 메타데이터에 의해 생성되고 변역 워커에 의해 변역됩니다.

변경을 테스트합니다.

플러그인 문서를 추가하거나 업데이트 한 후:

사이트를 로컬에서 빌드합니다.:
터미널 창
```
bun run build
```
페이지/영역: Capgo 마케팅 웹사이트. 역할: UI 레이블. 표시되는 곳: page agents/[slug].astro. 메시지 키 `agents_page_copy_label` (Agents Page Copy Label).:
- 오류를 확인합니다.
- 모든 링크가 작동하는지 확인합니다.
- Confirm code 예시들이 유효합니다.
- 예시가 유효한지 확인합니다. __CAPGO_KEEP_0__
네비게이션이 작동하는지 테스트합니다.:
터미널 창
```
bun run dev
```
플러그인이 나타나는 것을 확인하세요:
- 플러그인 목록 페이지를 확인하세요
- 사이드바 네비게이션을 확인하세요
- 모든 문서 페이지를 테스트하세요
- 튜토리얼 페이지가 작동하는 것을 확인하세요

일반적인 실수

도움말 받기

플러그인 문서 추가 또는 업데이트에 도움이 필요하시면:

디스코드 : 우리의 디스코드 커뮤니티
GitHub : __CAPGO_KEEP_0__ : __CAPGO_KEEP_0__의 이슈를 열어주세요
이메일: 팀에 연락하세요 지원팀에 연락하세요 support@capgo.app

예시

참조로, 다음 잘 설명된 플러그인을 확인하세요

업데이터: /src/content/docs/docs/plugins/updater/ (복잡한 플러그인, 여러 페이지)
플래시: /src/content/docs/docs/plugins/flash/ (단순한 플러그인, 좋은 시작 예시)
소셜 로그인: /src/content/docs/docs/plugins/social-login/ (플러그인에 서브 페이지가 있음)

개요

Capgo 문서에 플러그인을 추가하는 것은 다음과 같습니다:

마스터 구성 파일에 메타데이터를 추가하는 것
분류된 인덱스 페이지에 플러그인을 추가하는 것
사이드바 네비게이션을 구성하는 것
전반적인 문서 페이지를 생성하는 것
상세한 튜토리얼을 작성하는 것
모든 변경 사항을 로컬에서 테스트하는 것

이 가이드를 따르면, 사용자가 플러그인을 쉽게 찾을 수 있고, 일관된 문서로 플러그인을 문서화할 수 있습니다.

플러그인 추가 또는 업데이트에서 계속하기

만약에 당신이 사용 중이라면 플러그인 추가 또는 업데이트 자연 플러그인 작업을 계획하기 위해 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항 Ionic Enterprise 플러그인 대체 __CAPGO_KEEP_0__ 플러그인들에 의해 Ionic Enterprise 플러그인 대체의 제품 워크플로우 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우 Capacitor 플러그인: 당신이 알아야 할 것들 for the practical context in Capacitor 플러그인에 대한 필요한 정보.