Gathering detailed insights and metrics for @e11ty/eleventy-plugin-search-index
Gathering detailed insights and metrics for @e11ty/eleventy-plugin-search-index
Collection of plugins and various modules I use for 11ty
Installations
npm install @e11ty/eleventy-plugin-search-indexDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.10.0
NPM Version
10.2.3
Score
52.3
Supply Chain
31.8
Quality
73.2
Maintenance
100
Vulnerability
97.3
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
5
TypeScript
JavaScript
Liquid
Shell
HTML
TypeScript (92%)
JavaScript (5.43%)
Liquid (1.12%)
Shell (1.09%)
HTML (0.36%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
panoply
Download Statistics
Total Downloads
365
Last Day
1
Last Week
2
Last Month
27
Last Year
365
GitHub Statistics
6 Stars
50 Commits
1 Forks
1 Watchers
1 Branches
2 Contributors
Updated on Dec 18, 2024
Maintainers
1
Package Meta Information
Latest Version
0.0.5
Package Id
@e11ty/eleventy-plugin-search-index@0.0.5
Unpacked Size
63.08 kB
Size
20.25 kB
File Count
6
NPM Version
10.2.3
Node Version
20.10.0
Published on
Sep 09, 2024
Total Downloads
Cumulative downloads
Total Downloads
365
Last Day
0%
1
Compared to previous day
Last Week
-33.3%
2
Compared to previous week
Last Month
-10%
27
Compared to previous month
Last Year
0%
365
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Peer Dependencies
1
@e11ty/eleventy-plugin-search-index
An Eleventy plugin which generates JSON structures from markdown files. Use the output to implement an auto-complete search module.
NOTE
This plugin isn't universally compatible with all Eleventy static sites. It's tailored to my specific development approach, which means usage might require adjustments in certain contexts due to its particular requirements and methods.
Why?
Fuck algolia, that's why.
Install
The @11ty/eleventy module is a peer and needs to be installed along side it.
1pnpm add @e11ty/eleventy-plugin-json-fusion -DUsage
Provide the plugin via eleventyConfig and handling options. The onHeading and onText methods will allow you to hook into the parse operations and give you control of the the generated JSON. You can manipulate the final structure using onOutput method before it is written.
Optionally use with 11ty.ts wrapper for type completions.
1const { defineConfig } = require('11ty.ts'); // Optional 2const {search } = require('@e11ty/eleventy-plugin-search-index'); 3 4module.exports = defineConfig(eleventyConfig => { 5 6 eleventyConfig.addPlugin(search, { 7 shortCode:'search', 8 output: '.', 9 minify: false, 10 stripHtml: true, // Strips markup tags occurrences (ignores codeblocks) 11 stripMarkdown: true, // Strips markdown syntax occurrences (ignores codeblocks) 12 ignore: { 13 syntax: [], // Syntax (regexp) to ignore from processing 14 heading: [], // Headings (lowercase string) to ignore 15 }, 16 codeblock: [ 17 'bash' // Process inner content of bash codeblocks 18 ], 19 content: [ 20 'text', // Process all paragraph content 21 'quote', // Process all blockquote content 22 'list' // Process all list content 23 ], 24 onHeading (heading) { 25 // return string to replace 26 // return false to skip 27 }, 28 onContent (text) { 29 // return string to replace 30 // return false to skip 31 }, 32 onOutput (json) { 33 // Return new array to replace before writing 34 } 35 }) 36 37});
Example
The plugin will compose a JSON file containing an array list of objects that describe the contents of markdown files. Each page requires a frontmatter reference of title and permalink for a record to be created, failure to provide these will result in the page output not being generated.
Shortcode
In your layout file, include the liquid shortcode. You can customize the shortcode name but it defaults to search
1<html> 2 <head> 3 <title>{{ title }}</title> 4 <meta charset="UTF-8"> 5 <meta name="description" content="{{ description }}"> 6 </head> 7 <body> 8 9 {{ content }} 10 11 {% search 'demo' %} {% # ← output filename: '_site/demo.json' %} 12 13 </body> 14</html>
Markdown File
Take the following markdown file, we have provided the required frontmatter references and have some content. The plugin will read, parse and generate an object representation of the page and add it to the output array.
1--- 2title: 'Foo Page' 3description: 'Hello World' 4permalink: '/foo/index.html' 5layout: 'base.liquid' 6tags: 7 - 'xxx' 8--- 9 10# First Heading 11 12Example text 13 14### Second Heading 15 16Lorem ipsum dolor
JSON Output
Based on the above structure, the object record generated will take the following shape. There are 3 properties in the structure, pages and heading and content, every reference can be associated with one another. You'll typically be using the content[] reference for your search client.
1{ 2 "pages": [ 3 { 4 "title": "Foo Page", 5 "description": "Hello World", 6 "url": "/foo/", 7 "tags": ["xxx"], 8 "pidx": 0, // page index (i.e, this index) 9 "hidx": [0, 1], // heading indexes start and end location 10 "cidx": [0, 3], // content indexes start and end location 11 } 12 ], 13 "heading": [ 14 { 15 "anchor": "/foo#first-heading", 16 "pidx": 0, // page index 17 "hidx": 0, // heading index (i.e, this index) 18 "cidx": [0, 1], // content indexes start and end location 19 }, 20 { 21 "anchor": "/foo#second-heading", 22 "pidx": 0, // page index 23 "hidx": 1, // heading index (i.e, this index) 24 "cidx": [2, 3], // content indexes start and end location 25 } 26 ], 27 "content": [ 28 { 29 "text": "Default Structure", 30 "type": "heading", 31 "sort": 1, // sort integer for filtering 32 "cidx": 0, // content index (i.e, this index) 33 "hidx": 0, // index of the heading entry within heading[] 34 "pidx": 0, // index of the page entry within pages[] 35 }, 36 { 37 "text": "Example text", 38 "type": "text", // the type of content 39 "sort": 2, // sort integer for filtering 40 "cidx": 1, // content index (i.e, this index) 41 "hidx": 0, // index of the heading entry within heading[] 42 "pidx": 0, // index of the page entry within pages[] 43 }, 44 { 45 "text": "Second heading", 46 "type": "heading", 47 "sort": 1, // sort integer for filtering 48 "cidx": 2, // content index (i.e, this index) 49 "hidx": 1, // index of the heading entry within heading[] 50 "pidx": 0, // index of the page entry within pages[] 51 }, 52 { 53 "text": "Lorem ipsum dolor", 54 "type": "text", // the type of content 55 "sort": 1, // sort integer for filtering 56 "cidx": 3, // content index (i.e, this index) 57 "hidx": 1, // index of the heading entry within heading[] 58 "pidx": 0, // index of the page entry within pages[] 59 } 60 ] 61}
Client Integration
This plugin was designed specifically to be used with a third party solution. The implementation on the client is not the job of this plugin, that logic is left up to you. For those seeking a rough example of how you can go about using the generated JSON output to create your own fuzzy-search can take a look at how I've done this using the static site framework I wrote called spx.
WARNING
SPX (15kb gzip) is a full fledged framework and not suitable for isolated usage, meaning you should not install SPX just to use this plugin but instead, use the linked examples as a reference.
License
No vulnerabilities found.
No security vulnerabilities found.