ADAPT 1101 - Add Algolia search to site

README.md

@@ -39,6 +39,20 @@ Connecting to Storyblok
 
 You will need an access token to connect to a storyblok space. Contact a member on the project team to get one. Once you have obtained a key you will need to add it to your local environment file. In `.env.development` and/or `.env.production` add the value of the access key to the `GATSBY_STORYBLOK_ACCESS_TOKEN` variable. `Development` builds can use the `preview` access tokens from Storyblok, but `Production` builds should only ever use the `public` access tokens. This is to ensure no unpublished content is accidentally revealed to the public.
 
+Connecting to Algolia
+---
+
+The content of this site is indexed with Algolia. When the search is used, Algolia is queried by the frontend for results. In order to do that, the frontend needs several environment variables: 
+
+* `GATSBY_ALGOLIA_APP_ID`,
+* `GATSBY_ALGOLIA_SEARCH_API_KEY`,
+* `GATSBY_ALGOLIA_INDEX_NAME` and
+* `GATSBY_ALGOLIA_SUGGESTIONS_INDEX_NAME`.
+
+Set these in your `.env.development`/`.env.production` files in order for the search to work. 
+
+When building a production build, the Algolia index is also rebuilt, if and only if the environment variable `NETLIFY` is set to `true`. This is so local test builds do not trigger a index rebuild. The re-indexing needs an additional environment variable - the private Algolia admin API key `ALGOLIA_ADMIN_KEY`.
+
 Development vs Production builds.
 ---
 

example.env.development

@@ -1,3 +1,12 @@
 GATSBY_STORYBLOK_ACCESS_TOKEN={REPLACE THIS WITH THE ACCESS TOKEN FOR YOUR SPACE}
 GATSBY_BASE_PATH={DELETE THIS IF YOU ARE HOSTING ON A TOP LEVEL DOMAIN AND NOT A NESTED DIRECTORY eg: "/sub-dir/"}
 SECRET={ANY STRING YOU WANT}
+
+
+# These are the algolia related environment variables. All variables prefixed with GATSBY_ are public and will
+# be available & used in the frontend build.
+GATSBY_ALGOLIA_APP_ID={REPLACE THIS WITH THE (PUBLIC) APP ID FOUND IN THE ALGOLIA DASHBOARD}
+GATSBY_ALGOLIA_SEARCH_API_KEY={REPLACE THIS WITH THE (PUBLIC) SEARCH API KEY USED BY THE FRONTEND TO QUERY ALGOLIA}
+GATSBY_ALGOLIA_INDEX_NAME={REPLACE THIS WITH THE (PUBLIC) INDEX NAME FOUND IN THE ALGOLIA DASHBOARD}
+GATSBY_ALGOLIA_SUGGESTIONS_INDEX_NAME={REPLACE THIS WITH THE (PUBLIC) SUGGESTIONS INDEX NAME FOUND IN THE ALGOLIA DASHBOARD}
+ALGOLIA_ADMIN_KEY={REPLACE THIS WITH THE PRIVATE ALGOLIA ADMIN KEY. USED FOR RE-INDEXING WHEN BUILDING THE PAGE}

gatsby-browser.js

@@ -6,4 +6,7 @@
 
 // You can delete this file if you're not using it
 import "./src/scss/index.scss";
-import "./src/js/index.js";
+import "./src/js/index.js";
+
+import SearchOverlayProvider from './src/context/searchOverlayStatusProvider';
+export const wrapRootElement = SearchOverlayProvider;

gatsby-config.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require("path")
 
 const activeEnv =
   process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"
@@ -29,13 +29,13 @@ module.exports = {
       },
     },
     {
-      resolve: 'gatsby-plugin-robots-txt',
+      resolve: "gatsby-plugin-robots-txt",
       options: {
         policy: [
-          { userAgent: '*', allow: '/' },
-          { userAgent: '*', disallow: '/editor/' }
-        ]
-      }
+          { userAgent: "*", allow: "/" },
+          { userAgent: "*", disallow: "/editor/" },
+        ],
+      },
     },
     {
       resolve: "gatsby-plugin-google-tagmanager",
@@ -64,7 +64,7 @@ module.exports = {
           `/global-components/*`,
           `/global-components`,
         ],
-      }
+      },
     },
     {
       resolve: `gatsby-source-filesystem`,
@@ -74,10 +74,10 @@ module.exports = {
       },
     },
     {
-      resolve: 'gatsby-source-storyblok',
+      resolve: "gatsby-source-storyblok",
       options: {
         accessToken: process.env.GATSBY_STORYBLOK_ACCESS_TOKEN,
-        homeSlug: 'home',
+        homeSlug: "home",
         resolveRelations: [
           "oodQuoteSlider.quotes",
           "globalFooterPicker.globalFooter",
@@ -86,14 +86,14 @@ module.exports = {
           "contentMenuPicker.contentMenu",
           "storyPicker.story",
         ],
-        version: process.env.NODE_ENV == 'production' ? 'published' : 'draft'  // show only published on the front end site
+        version: process.env.NODE_ENV == "production" ? "published" : "draft", // show only published on the front end site
         // version: 'draft'  // would show any including drafts
-      }
+      },
     },
     {
       resolve: `gatsby-plugin-sass`,
       options: {
-        includePaths: [path.resolve(__dirname, 'node_modules')],
+        includePaths: [path.resolve(__dirname, "node_modules")],
         cssLoaderOptions: {
           camelCase: false,
         },
@@ -112,5 +112,16 @@ module.exports = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-plugin-algolia`,
+      options: {
+        appId: process.env.GATSBY_ALGOLIA_APP_ID,
+        apiKey: process.env.ALGOLIA_ADMIN_KEY,
+        // enablePartialUpdates: true,
+        queries: require("./src/utilities/algoliaQueries"),
+        // we skip the indexing completely when not in netlify build environment
+        skipIndexing: !process.env.NETLIFY,
+      },
+    },
   ],
 }

gatsby-ssr.js

@@ -3,3 +3,6 @@
  *
  * See: https://www.gatsbyjs.org/docs/ssr-apis/
  */
+
+import SearchOverlayProvider from './src/context/searchOverlayStatusProvider';
+export const wrapRootElement = SearchOverlayProvider;