Gatsby

Gatsby býr til kyrrstætt HTML við byggingu og endurvökvar það í vafranum. CDN skrár verða að hlaðast aðeins í vafra-API — gatsby-browser.js er rétti staðurinn.

@wink/elements npm pakki Settu upp og hlaðaðu CDN pakkanum með TypeScript týpum.

Setja upp

npm install @wink/elements

Hlaða í gegnum gatsby-browser.js

onClientEntry API keyrir einu sinni um leið og Gatsby keyrir í vafranum:

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

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

Umhverfisbreytur

Gatsby gerir aðeins breytur sem byrja á GATSBY_ aðgengilegar í vafrapakkanum:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Nota í síðum og íhlutum

import React from 'react';

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

TypeScript

Gatsby notar React, svo bættu við sömu JSX innbyggðu yfirlýsingum og React samþættingin:

// Sjá /integrations/react fyrir fulla yfirlýsingu

gatsby-ssr.js — engar breytingar nauðsynlegar

Þú þarft ekki að breyta gatsby-ssr.js. <wink-*> taggar renderast sem venjulegir HTML þættir í kyrrstæðu úttaki og CDN skriftan uppfærir þá þegar vafrinn hleður síðunni.