npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuepress-plugin-fulltext-search

v2.2.1

Published

Adds full-text search capabilities to your vuepress site with a help of flexsearch library.

Downloads

6,705

Readme

vuepress-plugin-fulltext-search

Add full-text search capabilities to your VuePress website using the Flexsearch library.

Many thanks to Ahmad Mostafa for the idea.

Usage

First, install plugin.

npm i vuepress-plugin-fulltext-search -D
# or
yarn add vuepress-plugin-fulltext-search -D

Then, enable the plugin in your docs/.vuepress/config.js:

// docs/.vuepress/config.js
module.exports = {
  // ...
  plugins: ['fulltext-search'],
}

And that is it! Just compile your app and see for yourself.

Webpack alias @SearchBox will be replaced with plugin's implementation, so it should work automatically with any VuePress theme.

Search parameters

The query URL search parameter can be provided to automatically populate and focus the search box. This is useful for adding your VuePress website as a custom search engine in browsers. For example:

https://your-website.com?query=hello+world

Excluding pages from search

You can exclude pages from search suggestions by adding search: false to a page's frontmatter:

---
search: false
---

<!-- page content -->

Hooks

You can define several hooks to customize behaviour of various search features. For example:

// /docs/.vuepress/searchHooks.js
export default {
  async processSuggestions(suggestions, queryString, queryTerms) {
    if (queryString) {
      // add a suggestion to start a search in an external service
      suggestions.push({
        path: 'https://sourcegraph.com/search?patternType=literal&q=',
        slug: queryString,
        parentPageTitle: 'Sourcegraph',
        title: 'Search code',
        contentStr: 'Search for "' + queryString + '" on Sourcegraph',
        external: true,
      })
    }
    return suggestions
  },

  async onGoToSuggestion(index, suggestion, queryString, queryTerms) {
    // e.g. create an analytics event

    // return true if you want to prevent default navigation
    return true
  },
}

// /docs/.vuepress/config.js
// Important: Because of the way Vuepress build works, you cannot use regular import/require,
// code must be provided as plaintext. Hence syntax below is required with fs.readFileSync
const fs = require('fs')
const { path } = require('@vuepress/shared-utils')

module.exports = {
  plugins: [
    [
      'fulltext-search',
      {
        // provide the contents of a JavaScript file
        hooks: fs.readFileSync(path.resolve(__dirname, './searchHooks.js')),
      },
    ],
  ],
}

Supported hooks are:

/**
 * Augment, adjust, or manipulate the suggestions shown to users.
 */
async function processSuggestions(suggestions: Suggestion[], queryString: string, queryTerms: string[]): Suggestion[]

/**
 * Callback function to call a suggestion.
 */
async function onGoToSuggestion(index: number, suggestion: Suggestion, queryString: string, queryTerms: string[]): Boolean?

Additional configuration

You can set additional configuration options in the config file. For tokenize, split, and encode, see the flexsearch documentation for more details.

  • tokenize: The indexing mode (tokenizer). Choose one of the built-ins or pass a custom tokenizer function.
  • split: The rule to split words when using non-custom tokenizer (built-ins e.g. "forward"). Use a string/char or use a regular expression (default: /\W+/).
  • encode: The encoding type. Choose one of the built-ins or pass a custom encoding function.

The built-in searchMaxSuggestions will be used if set in the theme config.

For example:

module.exports = {
  plugins: [
    [
      'fulltext-search',
      {
        tokenize: 'full',
        split: /\s+/,
        encode: 'icase',
      },
    ],
  ],
  themeConfig: {
    searchMaxSuggestions: 10,
  },
}