CopyPatch
EN TR
GitHub Başlayın

CopyPatch v2 Dokümantasyonu

CopyPatch, sahip olduğunuz React uygulamalarına güvenli satır içi (inline) metin düzenleme yeteneği ekler. Yetkili editörler ve müşteriler canlı web sayfasında ?copypatch=1 adresi üzerinden metinlere tıklayıp düzenleme yapabilir ve anında yayınlayabilir; kod yapınız, JSX bileşenleriniz ve CSS stilleriniz tamamen korunur.

Temel İlke: CopyPatch harici bir SaaS veya bağımsız bir sunucu değil, uygulamanızın içine gömülen bir kütüphane çalışma zamanıdır. Uygulamanızla aynı kökende (same-origin) /__copypatch/api/v2 yolu altında çalışır; CORS yapılandırması, harici proxy katmanları veya ek sunucu maliyeti gerektirmez.

Nasıl Çalışır?

  1. Onaylanan Alanları İşaretleyin: Metin düğümlerini <EditableText contentKey="..."> ile sarın veya öznitelik değerleri için useCopyPatch() kancasını kullanın.
  2. Backend'i Gömün: v2 backend'ini çerçevenizin (Next.js App Router, Astro SSR, React Router, Express, Fastify veya Hono) içine /__copypatch/api/v2 rotasıyla mount edin.
  3. Kalıcılık Katmanını Seçin: Tek sunuculu veya konteyner ortamları için @copypatch/storage-sqlite, yatayda ölçeklenen çoklu sunucular için @copypatch/storage-postgres kullanın.
  4. Canlı Sayfada Düzenleyin: Yetkili kullanıcılar ?copypatch=1 parametresiyle sayfayı açar, Argon2id parolası veya mevcut oturumla giriş yaparak doğrudan satır içinde düzenleme yapar.
  5. Taslak Kaydedin veya Yayınlayın: Değişiklikleri onay için taslak (draft) modunda saklayın veya publisher rolüyle tek tıkla canlıya alın.

Hızlı Entegrasyon Önizlemesi

HizliBaslangic.tsx 
// 1. Sunucunuza route handler'ı ekleyin (Örn. Next.js, Express, Fastify, Hono)
// app/%5F%5Fcopypatch/api/v2/[...path]/route.ts
import { createCopyPatchRouteHandlers } from '@copypatch/next/server';
import { copypatch } from '@/lib/copypatch';

export const { GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS } =
  createCopyPatchRouteHandlers(copypatch);

// 2. İstemci bileşenlerinizi sağlayıcı ile sarın
import { CopyPatchProvider, EditableText } from '@copypatch/react';

export function Hero() {
  return (
    <CopyPatchProvider locale="tr">
      <EditableText contentKey="hero.title" as="h1">
        Metinleri müşterileriniz düzenlesin. Kodları ve tasarımı değil.
      </EditableText>
    </CopyPatchProvider>
  );
}

Çerçeve Uyumluluk Matrisi

Host Çerçevesi Sunucu Entegrasyonu Dağıtım ve Çalışma Notları
Next.js App Router @copypatch/next catch-all rota işleyicileri SSR/RSC için readPublishedSnapshot() ile doğrudan sunucu içi anlık görüntü okuma.
Astro SSR @copypatch/node yerel adaptörü Astro SSR uç noktasına bağlanır; salt statik çıktı yalnızca yedek (fallback) metinleri gösterir.
React Router v7 @copypatch/node yerel adaptörü Framework Mode sunucu giriş noktası ile tam entegrasyon.
Vite + Node / Express / Fastify / Hono @copypatch/node ara yazılım ve işleyicileri Body parser ve SPA catch-all kurallarından önce mount edilmelidir.
Salt Statik Dağıtım (SSG) Düzenleme İçin Desteklenmez Paketlenmiş metinleri render edebilir ancak API ve veritabanı olmadan düzenleme yapamaz.

v1 Sürümünden Temel Farklar

  • Gömülü Aynı Köken (Same-Origin) Çalışma Zamanı: v2, ayrı bir süreç veya port yerine mevcut Node/Next sunucunuzda /__copypatch/api/v2 altında çalışır. CORS veya harici proxy gerekmez.
  • Gelişmiş Depolama Adaptörleri: SQLite (better-sqlite3) ve PostgreSQL (pg) için sürüm takipli ve idempotent migrasyonlar.
  • Çift Kimlik Doğrulama Desteği: Dahili Argon2id parola oturumu (CSRF korumalı) veya mevcut kullanıcılarınızı kullanan authAdapter seçeneği.
  • Rol Ayrımı: Taslak güncellemesi için editor, canlıya alma için publisher rolleri.
  • İyimser Eşzamanlılık Denetimi (CAS): Çoklu editörlerin birbirlerinin değişikliklerini ezmesini önleyen revizyon doğrulaması.

Sonraki Adımlar

Kendi projenize en uygun kılavuzla kuruluma başlayın: