Introduction

Ez az oldal a storefronton futó Live Editor működését foglalja össze a Krosy Medusa docs elrendezésére építve: bal oldali navigáció, középső cikkterület, jobb oldali tartalomjegyzék.

Cél, hogy egy helyen lásd a szerkesztő UI flow-t, a háttér API végpontokat és a jelenlegi adatmodell logikát.

Installation

  1. Futtasd a storefrontot: yarn dev.
  2. Nyisd meg a docs oldalt: /{countryCode}/docs/getting-started.
  3. Nyisd meg a szerkeszthető nézetet: /{countryCode}/sites/{siteSlug}.
  4. Dashboard elérés: /{countryCode}/account/content-editor.

Adatbázis migrációk futtatása lokálisan:

scripts/local/run-live-editor-migrations.sh
1for f in db/migrations/*.sql; do psql "$EDITOR_DATABASE_URL" -f "$f"; done

Architecture

A Live Editor két fő részből áll: a storefront renderer és az overlay szerkesztő réteg. A renderer a publikált dokumentumot jeleníti meg, míg az overlay kijelölés, szerkesztés, widget beszúrás és publish műveleteket ad.

  • Renderer: src/modules/live-editor/renderer/site-document-renderer.tsx
  • Overlay csomag: packages/live-editor-overlay/src/
  • API route-ok: src/app/api/live-editor/** és src/app/api/admin/live-editor/**