algolia search config

gatsby-config.js

@@ -1,8 +1,6 @@
-/**
- * Configure your Gatsby site with this file.
- *
- * See: https://www.gatsbyjs.org/docs/gatsby-config/
- */
+const queries = require('./src/utils/algolia')
+
+require('dotenv').config()
 
 module.exports = {
   siteMetadata: {
@@ -47,6 +45,15 @@ module.exports = {
         name: 'assets',
       },
     },
+    {
+      resolve: `gatsby-plugin-algolia`,
+      options: {
+        appId: process.env.GATSBY_ALGOLIA_APP_ID,
+        apiKey: process.env.ALGOLIA_ADMIN_KEY,
+        queries,
+        chunkSize: 10000,
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

package.json

@@ -16,9 +16,12 @@
   },
   "dependencies": {
     "@reach/router": "^1.3.4",
+    "algoliasearch": "^4.3.0",
+    "dotenv": "^8.2.0",
     "esm": "^3.2.25",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.12",
+    "gatsby-plugin-algolia": "^0.11.1",
     "gatsby-plugin-local-search": "^1.1.1",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-netlify-cms": "^4.3.9",
@@ -43,6 +46,7 @@
     "react-flexbox-grid": "^2.1.2",
     "react-github-btn": "^1.2.0",
     "react-helmet": "^6.1.0",
+    "react-instantsearch-dom": "^6.6.0",
     "react-use-flexsearch": "^0.1.1"
   },
   "devDependencies": {

src/utils/algolia.js

@@ -0,0 +1,46 @@
+const articlesQuery = `
+  {
+    articles: allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "article" } } }) {
+      nodes {
+        id
+        frontmatter {
+          slug
+          title
+          category
+          image {
+            childImageSharp {
+              fluid(maxWidth: 960) {
+                aspectRatio
+                base64
+                sizes
+                src
+                srcSet
+              }
+            }
+          }
+          tags
+          description
+        }
+      }
+    }
+  }
+`
+
+const flatten = arr =>
+  arr.map(({ frontmatter, ...rest }) => ({
+    ...frontmatter,
+    ...rest,
+	}))
+
+const settings = { attributesToSnippet: [`excerpt:20`] }
+
+const queries = [
+	{
+		query: articlesQuery,
+		transformer: (({ data }) => flatten(data.articles.nodes)),
+		indexName: 'Articles',
+		settings
+	}
+]
+
+module.exports = queries