{"id":15289210,"url":"https://github.com/humanseelabs/gatsby-plugin-lunr","last_synced_at":"2025-08-19T21:31:22.359Z","repository":{"id":57244680,"uuid":"138985232","full_name":"humanseelabs/gatsby-plugin-lunr","owner":"humanseelabs","description":"Gatsby plugin for full text search implementation based on lunr client-side index. Supports multilanguage search.","archived":false,"fork":false,"pushed_at":"2023-04-25T22:49:57.000Z","size":213,"stargazers_count":65,"open_issues_count":14,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T05:21:46.396Z","etag":null,"topics":["full-text-search","gatsby","gatsby-plugin","gatsbyjs","jamstack","lunr","plugin","search"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/humanseelabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-28T07:53:17.000Z","updated_at":"2024-03-19T11:19:27.000Z","dependencies_parsed_at":"2024-01-14T00:21:02.011Z","dependency_job_id":"712215c8-1757-4da8-954b-a012607d6504","html_url":"https://github.com/humanseelabs/gatsby-plugin-lunr","commit_stats":{"total_commits":31,"total_committers":7,"mean_commits":4.428571428571429,"dds":"0.25806451612903225","last_synced_commit":"d94a605bd4ee224d17ba74d09f9608e3b7c106b6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanseelabs%2Fgatsby-plugin-lunr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanseelabs%2Fgatsby-plugin-lunr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanseelabs%2Fgatsby-plugin-lunr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanseelabs%2Fgatsby-plugin-lunr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/humanseelabs","download_url":"https://codeload.github.com/humanseelabs/gatsby-plugin-lunr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230367928,"owners_count":18215338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["full-text-search","gatsby","gatsby-plugin","gatsbyjs","jamstack","lunr","plugin","search"],"created_at":"2024-09-30T15:59:50.973Z","updated_at":"2024-12-19T03:08:08.237Z","avatar_url":"https://github.com/humanseelabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Search Plugin for Gatsby\n\nGatsby plugin for full text search implementation based on Lunr.js client-side index. It supports multilanguage search. Search index is placed into the /public folder during build time and has to be downloaded on client side on run time.\n\n## Getting Started\n\nInstall `gatsby-plugin-lunr`\n\n```\n    npm install --save gatsby-plugin-lunr\n```\n\nor\n\n```\n    yarn add gatsby-plugin-lunr\n```\n\nAdd `gatsby-plugin-lunr` configuration to the `gatsby-config.js` as following:\n\n```javascript\nmodule.exports = {\n    plugins: [\n        {\n            resolve: `gatsby-plugin-lunr`,\n            options: {\n                languages: [\n                    {\n                        // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details\n                        name: 'en',\n                        // A function for filtering nodes. () =\u003e true by default\n                        filterNodes: node =\u003e node.frontmatter.lang === 'en',\n                        // Add to index custom entries, that are not actually extracted from gatsby nodes\n                        customEntries: [{ title: 'Pictures', content: 'awesome pictures', url: '/pictures' }],\n                    },\n                    {\n                        name: 'fr',\n                        filterNodes: node =\u003e node.frontmatter.lang === 'fr',\n                    },\n                ],\n                // Fields to index. If store === true value will be stored in index file.\n                // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details\n                fields: [\n                    { name: 'title', store: true, attributes: { boost: 20 } },\n                    { name: 'content' },\n                    { name: 'url', store: true },\n                ],\n                // How to resolve each field's value for a supported node type\n                resolvers: {\n                    // For any node of type MarkdownRemark, list how to resolve the fields' values\n                    MarkdownRemark: {\n                        title: node =\u003e node.frontmatter.title,\n                        content: node =\u003e node.rawMarkdownBody,\n                        url: node =\u003e node.fields.url,\n                    },\n                },\n                //custom index file name, default is search_index.json\n                filename: 'search_index.json',\n                //custom options on fetch api call for search_ındex.json\n                fetchOptions: {\n                    credentials: 'same-origin'\n                },\n            },\n        },\n    ],\n}\n```\n\n### Using plugins\n```javascript\nconst myPlugin = (lunr) =\u003e (builder) =\u003e {\n  // removing stemmer\n  builder.pipeline.remove(lunr.stemmer)\n  builder.searchPipeline.remove(lunr.stemmer)\n  // or similarity tuning\n  builder.k1(1.3)\n  builder.b(0)\n}\n```\nPass it to the `gatsby-config.js`:\n...\nlanguages: [\n            {\n             name: 'en',\n             ...\n             plugins: [myPlugin]\n            }\n           ]\n...        \n\n## Implementing Search in Your Web UI using Functional Components\n\nThe search data will be available on the client side via `window.__LUNR__` that is an object with the following fields:\n\n-   `index` - a lunr index instance\n-   `store` - object where the key is a gatsby node ID and value is a collection of field values.\n\n```javascript\nimport React, { useState, useEffect } from 'react'\nimport { Link } from 'gatsby'\n\nconst Search = () =\u003e {\n  const [query, setQuery] = useState(``)\n  const [results, setResults] = useState([])\n\n  useEffect(\n    () =\u003e {\n      if (!query || !window.__LUNR__) {\n        setResults([])\n        return\n      }\n      const lunrIndex = window.__LUNR__['en']\n      const searchResults = lunrIndex.index.search(query)\n      setResults(\n        searchResults.map(({ ref }) =\u003e {\n          return lunrIndex.store[ref]\n        })\n      )\n    },\n    [query]\n  )\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        type='text'\n        defaultValue={query}\n        onChange={event =\u003e {\n          setQuery(event.target.value)\n        }}\n      /\u003e\n      \u003cul\u003e\n        {results.map(({ url, title }) =\u003e {\n          return (\n            \u003cli key={url}\u003e\n              \u003cLink to={url}\u003e{title}\u003c/Link\u003e\n            \u003c/li\u003e\n          )\n        })}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default Search\n```\n\n## Implementing Search in Your Web UI using Class Components\n\nThe search data will be available on the client side via `window.__LUNR__` that is an object with the following fields:\n\n-   `index` - a lunr index instance\n-   `store` - object where the key is a gatsby node ID and value is a collection of field values.\n\n```javascript\nimport React, { Component } from 'react'\n\n// Search component\nexport default class Search extends Component {\n    constructor(props) {\n        super(props)\n        this.state = {\n            query: ``,\n            results: [],\n        }\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cinput type=\"text\" value={this.state.query} onChange={this.search} /\u003e\n                \u003cul\u003e{this.state.results.map(page =\u003e \u003cli\u003e{page.title}\u003c/li\u003e)}\u003c/ul\u003e\n            \u003c/div\u003e\n        )\n    }\n\n    getSearchResults(query) {\n        if (!query || !window.__LUNR__) return []\n        const lunrIndex =  window.__LUNR__[this.props.lng];\n        const results = lunrIndex.index.search(query) // you can  customize your search , see https://lunrjs.com/guides/searching.html\n        return results.map(({ ref }) =\u003e lunrIndex.store[ref])\n    }\n\n    search = event =\u003e {\n        const query = event.target.value\n        const results = this.getSearchResults(query)\n        this.setState(s =\u003e {\n            return {\n                results,\n                query,\n            }\n        })\n    }\n}\n```\n\nSample code and example on implementing search within gatsby starter project could be found in the article at: https://medium.com/humanseelabs/gatsby-v2-with-a-multi-language-search-plugin-ffc5e04f73bc\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanseelabs%2Fgatsby-plugin-lunr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanseelabs%2Fgatsby-plugin-lunr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanseelabs%2Fgatsby-plugin-lunr/lists"}