Reorder Files

.gitignore

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

gatsby-config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  flags: {
+    FAST_DEV: true,
+    DEV_SSR: true,
+  },
+  plugins: [
+    {
+      resolve: "gatsby-source-drupal",
+      options: {
+        baseUrl: `https://${process.env.JSONAPI_HOST}/`,
+        apiBase: "jsonapi",
+        fastBuilds: true,
+        skipFileDownloads: true,
+        imageCDN: false,
+        languageConfig: {
+          defaultLanguage: "en",
+          enabledLanguages:
+          process.env.GATSBY_ES_ENABLED === ["en", "es"],
+          translatableEntities: [
+            "node--reference_page",
+          ],
+          nonTranslatableEntities: [],
+        },
+        filters: {
+          "node--reference_page":"filter[status][value]=1",
+        },
+      },
+    },
+  ],
+};

gatsby-node.js

@@ -0,0 +1,44 @@
+const path = require(`path`);
+
+exports.createPages = async ({ actions, graphql }) => {
+  const [references] =
+    await Promise.all([
+      graphql(`
+        query {
+          allNodeReferencePage {
+            edges {
+              node {
+                id
+                langcode
+                drupal_internal__nid
+                path {
+                  alias
+                }
+                imageids
+                relationships {
+                  field_topics {
+                    drupal_internal__tid
+                  }
+                }
+              }
+            }
+          }
+        }
+      `),
+    ]);
+  };
+
+  references.data.allNodeReferencePage.edges.map((edge) => {
+    if (edge.node.path.alias) {
+      actions.createPage({
+        path: edge.node.path.alias,
+        component: path.resolve(`./src/templates/reference.tsx`),
+        context: {
+          id: edge.node.id,
+          nid: edge.node.drupal_internal__nid,
+          locale: edge.node.langcode,
+        },
+      });
+    }
+  });
+};

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "multi-lingual",
+  "private": true,
+  "description": "Gatsby Application",
+  "version": "0.1.0",
+  "license": "0BSD",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "lint": "eslint .",
+    "deploy": "gatsby-plugin-s3 deploy --yes",
+    "parse": "i18next 'src/**/*.tsx'"
+  },
+  "dependencies": {
+    "@reach/skip-nav": "^0.18.0",
+    "dotenv": "^16.0.0",
+    "gatsby": "^5.5.0",
+    "gatsby-cli": "^5.5.0",
+    "gatsby-plugin-image": "^3.5.0",
+    "gatsby-plugin-manifest": "^5.5.0",
+    "gatsby-plugin-no-sourcemaps": "^5.5.0",
+    "gatsby-plugin-react-i18next": "^3.0.1",
+    "gatsby-plugin-robots-txt": "^1.5.5",
+    "gatsby-plugin-sass": "^6.5.0",
+    "gatsby-plugin-sharp": "^5.5.0",
+    "gatsby-plugin-sitemap": "^6.5.0",
+    "gatsby-source-drupal": "^6.5.0",
+    "gatsby-source-drupal-menu-links": "^3.0.1",
+    "gatsby-source-filesystem": "^5.5.0",
+    "gatsby-transformer-sharp": "^5.5.0",
+    "i18next": "^22.4.9",
+    "install": "^0.13.0",
+    "msgpackr": "^1.5.0",
+    "node-fetch": "^3.3.0",
+    "query-string": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-html-parser": "^2.0.2",
+    "react-i18next": "^12.1.4",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.32.6",
+    "style-to-object": "^0.4.1",
+    "webpack-filter-warnings-plugin": "^1.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@types/react": "^18.0.0",
+    "@types/react-html-parser": "^2.0.1",
+    "babel-jest": "^29.4.1",
+    "babel-loader": "^9.1.2",
+    "babel-preset-gatsby": "^3.5.0",
+    "babel-preset-react-app": "^10.0.1",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "i18next-parser": "^7.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "path-to-regexp": "^6.2.1",
+    "prettier": "^2.8.8",
+    "react-is": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "browserslist": [
+    ">0.25%, not dead and supports es6-module"
+  ]
+}

src/templates/reference.tsx

@@ -0,0 +1,11 @@
+import { graphql } from "gatsby";
+import React, { useEffect, useState } from "react";
+
+const Reference = ({ pageContext, data }) => {
+  return (
+    <div>
+    </div>
+  );
+};
+
+export default Reference;