Astro

Astro pagal numatytuosius nustatymus nepateikia jokio JavaScript ir atvaizduoja visus komponentus kaip statinį HTML serveryje. Wink žiniatinklio komponentai turi būti įkelti per kliento pusės <script> žymą. Astro salų architektūra tai palengvina.

@wink/elements npm paketas Įdiekite ir įkelkite CDN paketą su TypeScript tipais.

Įdiegimas

npm install @wink/elements

Įkėlimas bendrame išdėstyme

Pridėkite įkėlimo scenarijų prie pagrindinio išdėstymo, kad jis būtų vykdomas kiekviename puslapyje:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mano svetainė</title>
  </head>
  <body>
    <slot />

    <script>
      import { load } from '@wink/elements';
      load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
    </script>
  </body>
</html>

Naudojimas puslapyje

Kadangi Astro komponentai atvaizduojami serveryje, <wink-*> žymos išvedamos kaip statinis HTML. CDN scenarijus užregistruoja pasirinktinius elementus, kai puslapis įkeliamas naršyklėje:

---
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <main>
    <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
    <wink-lookup />
  </main>
</Layout>

Viduje karkaso komponento (saloje)

Jei naudojate React, Vue ar Svelte salas kartu su Wink, įkelkite @wink/elements į išdėstymą (kaip aukščiau) ir naudokite <wink-*> žymas savo salų komponentuose įprastai — pasirinktini elementai bus užregistruoti iki salos hidratuojant.

// src/components/HotelCard.tsx (React sala)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() jau iškviestas išdėstyme — saugu atvaizduoti čia
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

---
import HotelCard from '../components/HotelCard.tsx';
---
<HotelCard client:load layoutId="YOUR_LAYOUT_ID" />

Aplinkos kintamieji

Astro naršyklei atskleidžia tik kintamuosius, prasidedančius PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id