@tsimons/gatsby-plugin-elasticlunr-search
Advanced tools
Comparing version 1.0.3 to 1.0.4
@@ -107,3 +107,3 @@ "use strict"; | ||
} = boundActionCreators; | ||
const existingNodes = getNodes().filter(n => n.internal.owner === `@andrew-codes/gatsby-plugin-elasticlunr-search`); | ||
const existingNodes = getNodes().filter(n => n.internal.owner === `@tsimons/gatsby-plugin-elasticlunr-search`); | ||
existingNodes.forEach(n => touchNode(n.id)); | ||
@@ -125,3 +125,3 @@ }; | ||
if (filter && !filter(node)) { | ||
if (filter && !filter(node, getNode)) { | ||
return; | ||
@@ -128,0 +128,0 @@ } |
{ | ||
"name": "@tsimons/gatsby-plugin-elasticlunr-search", | ||
"version": "1.0.3", | ||
"version": "1.0.4", | ||
"description": | ||
"Search for gatsby; implemented via elastic lunr. Forked from https://www.npmjs.com/package/@andrew-codes/gatsby-plugin-elasticlunr-search", | ||
"Search for gatsby; implemented via elastic lunr. Forked from @andrew-codes/gatsby-plugin-elasticlunr-search", | ||
"main": "index.js", | ||
@@ -13,13 +13,12 @@ "scripts": { | ||
"type": "git", | ||
"url": "git+https://github.com/andrew-codes/gatsby-plugin-search.git" | ||
"url": "git+https://github.com/tsimons/gatsby-plugin-search.git" | ||
}, | ||
"keywords": ["gatsby", "gatsby-plugin", "lunr", "search", "elastic lunr"], | ||
"author": | ||
"TJ Simons <tjsimons@invisionapp.com>, Andrew Smith <andrew@andrew.codes>", | ||
"Andrew Smith <andrew@andrew.codes>, TJ Simons <t.simons88@gmail.com>", | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/tsimons/gatsby-plugin-elasticlunr-search" | ||
"url": "https://github.com/tsimons/gatsby-plugin-search/issues" | ||
}, | ||
"homepage": | ||
"https://github.com/tsimons/gatsby-plugin-elasticlunr-search#readme", | ||
"homepage": "https://github.com/tsimons/gatsby-plugin-search#readme", | ||
"devDependencies": { | ||
@@ -26,0 +25,0 @@ "@babel/cli": "^7.0.0-beta.32", |
171
README.md
[![Maintainability](https://api.codeclimate.com/v1/badges/124348de2ee6850d682f/maintainability)](https://codeclimate.com/github/andrew-codes/gatsby-plugin-elasticlunr-search/maintainability) | ||
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/7230ae7191f44a9489834553760310c2)](https://www.codacy.com/app/andrew-codes/gatsby-plugin-elasticlunr-search?utm_source=github.com&utm_medium=referral&utm_content=andrew-codes/gatsby-plugin-elasticlunr-search&utm_campaign=Badge_Grade) | ||
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/7230ae7191f44a9489834553760310c2)](https://www.codacy.com/app/andrew-codes/gatsby-plugin-elasticlunr-search?utm_source=github.com&utm_medium=referral&utm_content=andrew-codes/gatsby-plugin-elasticlunr-search&utm_campaign=Badge_Grade) | ||
# Search Plugin for Gatsby | ||
This plugin enables search integration via elastic lunr. Content is indexed and then made available via graphql to rehydrate into an `elasticlunr` index. From there, queries can be made against this index to retrieve pages by their ID. | ||
@@ -13,4 +14,22 @@ | ||
## Setup in `gatsby-config` | ||
## Usage | ||
In order to add documents to the search index, you will need to inform the plugin which types of documents are relevant to your search needs. If you are unsure of the exact type, open gatsby's graphiql endpoint via a web browser of the graphiql app. Search the docs explorer for you schema, then perform a query on it like so: | ||
``` | ||
query GetTypeQuery { | ||
wordpress__POST { | ||
internal { | ||
type | ||
} | ||
} | ||
} | ||
``` | ||
The output of type is what you will use in your resolver as demonstrated below. | ||
### Basic Example | ||
```javascript | ||
// gatsby-config.js | ||
module.exports = { | ||
@@ -22,6 +41,3 @@ plugins: [ | ||
// Fields to index | ||
fields: [ | ||
'title', | ||
'keywords', | ||
], | ||
fields: ['title', 'keywords'], | ||
// How to resolve each field's value for a supported node type | ||
@@ -32,25 +48,116 @@ resolvers: { | ||
title: node => node.frontmatter.title, | ||
keywords: node => node.frontmatter.keywords, | ||
}, | ||
keywords: node => node.frontmatter.keywords | ||
} | ||
} | ||
} | ||
} | ||
] | ||
}; | ||
``` | ||
### Resolve relational Data | ||
Some data sources store necesary fields in foreign nodes. One example of this is WordPress. It store categories, tags, authors, and posts in separate DB tables/rows. Gatsby handles stitching these together for you. However, at this stage of the build, it only has the ID of the node it relates to. In order to add the data from the related node, we will need to resolve it ourselves. Below is an example of adding the author name to the document in the search index for a wordpress poet. | ||
```javascript | ||
// gatsby-config.js | ||
module.exports = { | ||
plugins: [ | ||
{ | ||
resolve: `@andrew-codes/gatsby-plugin-elasticlunr-search`, | ||
options: { | ||
// Fields to index | ||
fields: ['title', 'author'], | ||
// How to resolve each field's value for a supported node type | ||
resolvers: { | ||
// For any node of type wordpress__POST, list how to resolve the fields' values | ||
wordpress__POST: { | ||
title: node => node.title, | ||
author: (node, getNode) => | ||
getNode(node.author___NODE).name | ||
} | ||
} | ||
} | ||
} | ||
] | ||
}; | ||
``` | ||
### Filter nodes that are added to the index | ||
gatsby-plugin-elasticlunr-search allows you to filter the nodes that go in to the index to avoid unnecessary memory usage. | ||
```javascript | ||
// gatsby-config.js | ||
module.exports = { | ||
plugins: [ | ||
{ | ||
resolve: `@andrew-codes/gatsby-plugin-elasticlunr-search`, | ||
options: { | ||
// Fields to index | ||
fields: ['title', 'keywords'], | ||
// How to resolve each field's value for a supported node type | ||
resolvers: { | ||
// For any node of type MarkdownRemark, list how to resolve the fields' values | ||
MarkdownRemark: { | ||
title: node => node.frontmatter.title, | ||
keywords: node => node.frontmatter.keywords | ||
} | ||
}, | ||
}, | ||
}, | ||
], | ||
filter: (node, getNode) => node.post_type !== 'page' | ||
} | ||
} | ||
] | ||
}; | ||
``` | ||
### Filter nodes that are added to the index, based on props of another node | ||
```javascript | ||
// gatsby-config.js | ||
module.exports = { | ||
plugins: [ | ||
{ | ||
resolve: `@andrew-codes/gatsby-plugin-elasticlunr-search`, | ||
options: { | ||
// Fields to index | ||
fields: ['title', 'keywords'], | ||
// How to resolve each field's value for a supported node type | ||
resolvers: { | ||
// For any node of type MarkdownRemark, list how to resolve the fields' values | ||
MarkdownRemark: { | ||
title: node => node.frontmatter.title, | ||
keywords: node => node.frontmatter.keywords | ||
} | ||
}, | ||
filter: (node, getNode) => { | ||
const categoryIds = node.category___NODE; | ||
const categoryNames = categoryIds.map( | ||
id => getNode(id).name | ||
); | ||
return !categorynames.includes('no-search'); | ||
} | ||
} | ||
} | ||
] | ||
}; | ||
``` | ||
## Consuming in Your Site | ||
The serialized search index will be available via graphql. Once queried, a component can create a new elastic lunr index with the value retrieved from the graphql query. Search queries can be made against the hydrated search index. The results is an array of document IDs. The index can return the full document given a document ID | ||
```javascript | ||
import React, {Component} from 'react'; | ||
import {Index} from 'elasticlunr'; | ||
import React, { Component } from 'react'; | ||
import { Index } from 'elasticlunr'; | ||
// Graphql query used to retrieve the serialized search index. | ||
export const query = graphql`query | ||
SearchIndexExampleQuery { | ||
siteSearchIndex { | ||
index | ||
export const query = graphql` | ||
query SearchIndexExampleQuery { | ||
siteSearchIndex { | ||
index | ||
} | ||
} | ||
}`; | ||
`; | ||
@@ -63,3 +170,3 @@ // Search component | ||
query: ``, | ||
results: [], | ||
results: [] | ||
}; | ||
@@ -71,3 +178,7 @@ } | ||
<div> | ||
<input type="text" value={this.state.query} onChange={this.search}/> | ||
<input | ||
type="text" | ||
value={this.state.query} | ||
onChange={this.search} | ||
/> | ||
<ul> | ||
@@ -84,8 +195,9 @@ {this.state.results.map(page => ( | ||
getOrCreateIndex = () => this.index | ||
? this.index | ||
// Create an elastic lunr index and hydrate with graphql query results | ||
: Index.load(this.props.data.siteSearchIndex.index); | ||
getOrCreateIndex = () => | ||
this.index | ||
? this.index | ||
: // Create an elastic lunr index and hydrate with graphql query results | ||
Index.load(this.props.data.siteSearchIndex.index); | ||
search = (evt) => { | ||
search = evt => { | ||
const query = evt.target.value; | ||
@@ -96,10 +208,9 @@ this.index = this.getOrCreateIndex(); | ||
// Query the index with search string to get an [] of IDs | ||
results: this.index.search(query) | ||
results: this.index | ||
.search(query) | ||
// Map over each ID and return the full document | ||
.map(({ | ||
ref, | ||
}) => this.index.documentStore.getDoc(ref)), | ||
.map(({ ref }) => this.index.documentStore.getDoc(ref)) | ||
}); | ||
} | ||
}; | ||
} | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
247020
210
2
1