Gatsby

Ang Gatsby ay nagge-generate ng static HTML sa build time at nire-rehydrate sa client. Ang mga CDN script ay dapat i-load lamang sa browser APIs — ang gatsby-browser.js ang tamang lugar.

@wink/elements npm package I-install at i-load ang CDN bundle na may TypeScript types.

Install

npm install @wink/elements

Load via gatsby-browser.js

Ang onClientEntry API ay tumatakbo nang isang beses kapag nagsimula na ang runtime ng Gatsby sa browser:

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

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

Environment variables

Ipinapakita ng Gatsby ang mga variable na may prefix na GATSBY_ lamang sa browser bundle:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Gamitin sa mga pahina at components

import React from 'react';

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

TypeScript

Gumagamit ang Gatsby ng React, kaya idagdag ang parehong JSX intrinsic declarations tulad ng React integration:

// Tingnan ang /integrations/react para sa buong declaration file

gatsby-ssr.js — hindi kailangan ng pagbabago

Hindi mo kailangang baguhin ang gatsby-ssr.js. Ang mga <wink-*> tag ay nirender bilang plain HTML elements sa static output, at ina-upgrade ng CDN script ang mga ito kapag nag-load ang browser ng pahina.