feat: add gatsby-ssg example app

examples/gatsby/gatsby-ssg/.env.development.example

@@ -0,0 +1,7 @@
+# Rename this file to .env.development and fill in the values for the following environment variables
+GATSBY_CTFL_ENVIRONMENT=
+GATSBY_CTFL_SPACE=
+GATSBY_CTFL_ACCESS_TOKEN=
+GATSBY_CTFL_PREVIEW_ACCESS_TOKEN=
+GATSBY_CTFL_EXPERIENCE_TYPE=
+GATSBY_CTFL_DOMAIN=

examples/gatsby/gatsby-ssg/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.cache/
+public
+src/gatsby-types.d.ts
+.env.development

examples/gatsby/gatsby-ssg/README.md

@@ -0,0 +1,43 @@
+# Studio Experiences with Gatsby static site generation rendering example
+
+This example demonstrates how to use [Gatsby](https://www.gatsbyjs.com/) to create a server rendered page with Studio Experiences.
+
+> This example is a work-in-progress, and does not indicate that Gatsby is an officially supported framework for Studio Experiences. 
+
+## Getting started
+
+Before you begin, you should already have a Contentful space with Studio Experiences enabled and configured. If you do not yet have a space, please contact your Contentful account representative.
+
+1. Clone the repo and install the app
+
+To get started with this example, clone the repo, go into the examples/gatsby/gatsby-ssg directory, and install the app:
+
+```bash
+npm install
+```
+
+2. Set up your environment variables
+
+Next, set up your environment variables. Copy the `.env.development.example` file to `.env.development` and fill in the following variables:
+
+- CTFL_SPACE: This is the Space ID of your Contentful space. This can be found in Settings>General Settings.
+- CTFL_ACCESS_TOKEN: This is the Content Delivery API access token, which is used for fetching published data from your Contentful space. This can be found in Settings>API Keys.
+- CTFL_PREVIEW_ACCESS_TOKEN: This is the Content Preview API access token, which is used for fetching draft data from your Contentful space. This can be found in Settings>API Keys.
+- CTFL_ENVIRONMENT: This is the environment of your Contentful space. This can be found in Settings>General Settings. This can be found in Settings>Environments.
+- CTFL_EXPERIENCE_TYPE= This is the content type id of the Experience content type in your Contentful space. This can be found in Content Model>Experience.
+
+3. Verify the setup in **gatsby-node.mjs** file
+
+The **gatsby-node.mjs** file is configured to pull down all Experience content types (based on your `CTFL_EXPERIENCE_TYPE` environment variable) and create a page for each Experience. You might need to tweak this file to match your needs.
+
+> Note: The `gatsby-node.mjs` file is written in ESM syntax (and not TypeScript) because there is an error when importing the `@contentful/experiences-sdk-react` package in TypeScript. This is a known issue and will be fixed in a future release.
+
+3. Start the development server
+
+Now that you have set up your environment variables, you can start the development server:
+
+```bash
+npm run start
+```
+
+The app is set up to run on `http://localhost:8000`. By default, the root URL will pull up an experience with the slug of 'home-page'. The locale will be determined by your browser settings.

examples/gatsby/gatsby-ssg/gatsby-config.ts

@@ -0,0 +1,15 @@
+import type { GatsbyConfig } from "gatsby"
+
+const config: GatsbyConfig = {
+  siteMetadata: {
+    title: `gatsby-ssg`,
+    siteUrl: `https://www.yourdomain.tld`,
+  },
+  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
+  // If you use VSCode you can also use the GraphQL plugin
+  // Learn more at: https://gatsby.dev/graphql-typegen
+  graphqlTypegen: true,
+  plugins: [],
+}
+
+export default config

examples/gatsby/gatsby-ssg/gatsby-node.mjs

@@ -0,0 +1,74 @@
+// This file is mjs and not ts because there are errors currently when using `@contentful/experiences-sdk-react` in this file when it's TypeScript.
+import { createClient } from 'contentful';
+import {
+  detachExperienceStyles,
+  fetchBySlug,
+} from '@contentful/experiences-sdk-react';
+import dotenv from 'dotenv';
+import path from 'path';
+//import studio config so values are available at build time
+import './src/studio-config.mjs';
+
+dotenv.config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
+const isPreview = true;
+const contentType = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || '';
+
+const clientConfig = {
+    space: process.env.GATSBY_CTFL_SPACE || '',
+    environment: process.env.GATSBY_CTFL_ENVIRONMENT || '',
+    host: isPreview
+        ? `preview.${process.env.GATSBY_CTFL_DOMAIN}` || 'preview.contentful.com'
+        : `cdn.${process.env.GATSBY_CTFL_DOMAIN}` || 'cdn.contentful.com',
+    accessToken: isPreview
+        ? process.env.GATSBY_CTFL_PREVIEW_ACCESS_TOKEN || ''
+        : process.env.GATSBY_CTFL_ACCESS_TOKEN || '',
+    experienceTypeId: contentType,
+};
+const client = createClient(clientConfig);
+
+export const createPages = async function ({ actions }) {
+  const localeCode = 'en-US';
+
+  const entries = await client.getEntries({
+    content_type: contentType,
+    select: ['fields.slug'],
+  });
+
+  for (const item of entries.items) {
+    try {
+      const { slug } = item.fields || {};
+      if (typeof slug !== 'string' || slug === '') {
+        console.warn(`Invalid slug found for entry ${item.sys.id}`);
+        return;
+      }
+
+      const experience = await fetchBySlug({
+        client,
+        slug,
+        experienceTypeId: contentType,
+        localeCode,
+        isEditorMode: false,
+      });
+      if (!experience) {
+        console.warn(`Experience not found for slug ${slug}`);
+        return;
+      };
+      const stylesheet = detachExperienceStyles(experience);
+      actions.createPage({
+        path: slug,
+        component: path.resolve(`./src/templates/ExperienceTemplate.tsx`),
+        context: {
+          experienceJson: JSON.stringify(experience),
+          stylesheet,
+          localeCode,
+        },
+      });
+      console.log(`created page for slug ${slug}`);
+    } catch (e) {
+      console.warn('Error when fetching experience', e.message);
+    }
+  }
+};