Gatsby

Gatsby generoi staattisen HTML:n rakennusvaiheessa ja elvyttää sen selaimessa. CDN-skriptit on ladattava vain selain-API:en kautta — gatsby-browser.js on oikea paikka.

@wink/elements npm -paketti Asenna ja lataa CDN-kimppu TypeScript-tyyppien kanssa.

Asennus

npm install @wink/elements

Lataus gatsby-browser.js-tiedoston kautta

onClientEntry-API suoritetaan kerran heti, kun Gatsbyn runtime käynnistyy selaimessa:

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

Ympäristömuuttujat

Gatsby altistaa selaimelle vain muuttujat, joiden etuliite on GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Käyttö sivuilla ja komponenteissa

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby käyttää Reactia, joten lisää samat JSX-intrinsic-määrittelyt kuin React-integraatiossa:

// Katso /integrations/react täydellinen määrittelytiedosto

gatsby-ssr.js — muutoksia ei tarvita

Sinun ei tarvitse muokata gatsby-ssr.js-tiedostoa. <wink-*>-tagit renderöityvät tavallisina HTML-elementteinä staattisessa tulosteessa, ja CDN-skripti päivittää ne, kun selain lataa sivun.