Gatsby

Gatsby, derleme zamanında statik HTML oluşturur ve istemci tarafında yeniden canlandırır. CDN betikleri yalnızca tarayıcı API’lerinde yüklenmelidir — gatsby-browser.js doğru yerdir.

@wink/elements npm paketi TypeScript tipleri ile CDN paketini yükleyin ve kurun.

Kurulum

npm install @wink/elements

gatsby-browser.js üzerinden yükleme

onClientEntry API’si, Gatsby’nin çalışma zamanı tarayıcıda başlar başlamaz bir kez çalışır:

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

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

Ortam değişkenleri

Gatsby, yalnızca GATSBY_ ile başlayan değişkenleri tarayıcı paketine açar:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Sayfalarda ve bileşenlerde kullanımı

import React from 'react';

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

TypeScript

Gatsby React kullanır, bu yüzden React entegrasyonundaki aynı JSX intrinsic bildirimlerini ekleyin:

// Tam bildirim dosyası için /integrations/react bölümüne bakınız

gatsby-ssr.js — değişiklik gerekmez

gatsby-ssr.js dosyasını değiştirmenize gerek yoktur. <wink-*> etiketleri statik çıktı olarak düz HTML elemanları şeklinde render edilir ve CDN betiği sayfa tarayıcıda yüklendiğinde bunları yükseltir.