Readme.md

Getting Started with Lunr

There are two ways to use lunr to index some documents, The simplest way is to just build the index client side each time the page is loaded. search.js shows an example of this.

If your data is relatively static it might be more efficient to generate the index server side and then load this on each page load, your can see an example of generating the index in node in builder.js.

You can load a serialised index like this:

var idx = lunr.Index.load(JSON.parse(json_string))

json_string is a json string of the built index.

I used the rss feed of your blog for some example documents, hope you don't mind!

builder.js

var lunr = require('lunr'),
    fs = require('fs')

var idx = lunr(function () {
  this.ref('url')
  this.field('title', { boost: 10 })
  this.field('summary')
  this.field('categories', { boost: 100 })
})

fs.readFile('./feed.json', function (err, data) {
  if (err) throw err

  var feed = JSON.parse(data)

  feed.forEach(function (entry) {
    idx.add(entry)
  })

  fs.writeFile('./index.json', JSON.stringify(idx), function (err) {
    if (err) throw err
    console.log('done')
  })
})

feed.json

[
  {
    "categories": [
      "Developer Blog",
      "git",
      "Linux",
      "ssh",
      "Ubuntu"
    ],
    "summary": "<p>Background I&#8217;m in the process of setting up a new Droplet on DigitalOcean. Mine is a Ubuntu droplet. The joy about DigitalOcean is that you have full control over your (super fast) server (and at a great price). You want Apache? you can install it yourself. You want git? same deal. Trying out node.js? You...  <a href=\"http://www.gilluminate.com/2013/04/04/ubuntu-ssh-agent-and-you/\" class=\"more-link\" title=\"Read Ubuntu, ssh-agent and You!\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2013/04/04/ubuntu-ssh-agent-and-you/\">Ubuntu, ssh-agent and You!</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2013/04/04/ubuntu-ssh-agent-and-you/",
    "title": "Ubuntu, ssh-agent and You!"
  },
  {
    "categories": [
      "Developer Blog"
    ],
    "summary": "<p>My MediaWiki extension, FancyBoxThumbs, has been completely rewritten from the ground up and has been released. This extension makes use of, and provides functionality for using the fancyBox JQuery lightbox plugin. The default behavior of MediaWiki is to take you to a dedicated image page when a thumbnail is clicked, which is less than ideal...  <a href=\"http://www.gilluminate.com/2013/01/30/fancyboxthumbs-extension-v2-0-released/\" class=\"more-link\" title=\"Read FancyBoxThumbs Extension v2.0 released\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2013/01/30/fancyboxthumbs-extension-v2-0-released/\">FancyBoxThumbs Extension v2.0 released</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2013/01/30/fancyboxthumbs-extension-v2-0-released/",
    "title": "FancyBoxThumbs Extension v2.0 released"
  },
  {
    "categories": [
      "Developer Blog"
    ],
    "summary": "<p>Google released an awesome tool this year as a Chrome Extension called Accessibility Developer Tools which adds a feature to the Audits panel of Chromes dev tools. With this extension enabled, you can run an audit on the accessibility compliance of the page you are viewing (either by refreshing or in its current state). This...  <a href=\"http://www.gilluminate.com/2013/01/03/accessibility-tools-for-html5/\" class=\"more-link\" title=\"Read Accessibility Tools for HTML5\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2013/01/03/accessibility-tools-for-html5/\">Accessibility Tools for HTML5</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2013/01/03/accessibility-tools-for-html5/",
    "title": "Accessibility Tools for HTML5"
  },
  {
    "categories": [
      "Developer Blog",
      "Annoynances",
      "Live Meeting",
      "Microsoft"
    ],
    "summary": "<p>I struggled for over a week trying to get my MacBook Pro to connect with the Live Meetings that were happening at work. I&#8217;ve been working from home a lot and needing to join the conversation remotely. After searching the internet high and low, it seemed that I kept running into the same dead ends,...  <a href=\"http://www.gilluminate.com/2012/07/26/microsoft-live-meeting-on-a-mac/\" class=\"more-link\" title=\"Read Microsoft Live Meeting on a Mac\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2012/07/26/microsoft-live-meeting-on-a-mac/\">Microsoft Live Meeting on a Mac</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2012/07/26/microsoft-live-meeting-on-a-mac/",
    "title": "Microsoft Live Meeting on a Mac"
  },
  {
    "categories": [
      "Developer Blog"
    ],
    "summary": "<p>As web developers, we&#8217;ve all heard at least one client or member of corporate management express concern about the design and layout of a site because things are appearing &#8220;below the fold.&#8221; The concept of the fold seems to make sense at first glance, which is probably why it is one of those myths that...  <a href=\"http://www.gilluminate.com/2012/04/07/is-the-fold-a-myth/\" class=\"more-link\" title=\"Read Is the Fold a Myth?\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2012/04/07/is-the-fold-a-myth/\">Is the Fold a Myth?</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2012/04/07/is-the-fold-a-myth/",
    "title": "Is the Fold a Myth?"
  },
  {
    "categories": [
      "Developer Blog",
      "WordPress"
    ],
    "summary": "<p>I think I may have just discovered a major issue with WordPress. It would seem that WordPress is loading two pages at a time, the second loading after the first one has rendered on the screen, the other somehow in the background. Here&#8217;s what I did to discover it. I&#8217;m hoping someone else can verify...  <a href=\"http://www.gilluminate.com/2012/02/17/wordpress-loading-two-pages-at-a-time/\" class=\"more-link\" title=\"Read WordPress Loading Two Pages at a Time?\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2012/02/17/wordpress-loading-two-pages-at-a-time/\">WordPress Loading Two Pages at a Time?</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2012/02/17/wordpress-loading-two-pages-at-a-time/",
    "title": "WordPress Loading Two Pages at a Time?"
  },
  {
    "categories": [
      "Developer Blog",
      "WordPress"
    ],
    "summary": "<p>I was having an issue with my newly created theme not even appearing in the Appearance -&#62; Themes settings page on WordPress. After much searching online I never did find an answer so I&#8217;m posting it here. I did some trial and error of adding and removing files and realized that WordPress not only requires...  <a href=\"http://www.gilluminate.com/2012/02/10/wordpress-theme-not-showing-up/\" class=\"more-link\" title=\"Read WordPress Theme Not Showing Up\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2012/02/10/wordpress-theme-not-showing-up/\">WordPress Theme Not Showing Up</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2012/02/10/wordpress-theme-not-showing-up/",
    "title": "WordPress Theme Not Showing Up"
  },
  {
    "categories": [
      "Developer Blog",
      "PHP",
      "Plugins",
      "private",
      "WordPress"
    ],
    "summary": "<p>Update It looks like there is a fully fledged plugin for accomplishing this feat for both plugins and themes. I recommend using it instead of this hack: https://github.com/jeremyclark13/automatic-theme-plugin-update The Problem The biggest appeal WordPress has is it&#8217;s extensibility via plugins. But if you create a private plugin for personal use or for a corporation with...  <a href=\"http://www.gilluminate.com/2011/12/23/host-your-own-custom-wordpress-plugin-updater/\" class=\"more-link\" title=\"Read Host Your Own Custom WordPress Plugin Auto-Updater\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2011/12/23/host-your-own-custom-wordpress-plugin-updater/\">Host Your Own Custom WordPress Plugin Auto-Updater</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2011/12/23/host-your-own-custom-wordpress-plugin-updater/",
    "title": "Host Your Own Custom WordPress Plugin Auto-Updater"
  },
  {
    "categories": [
      "Developer Blog",
      "iPad",
      "MailChimp"
    ],
    "summary": "<p>If you want to use a transparent PNG in MailChimp&#8217;s Chimpadeedoo iPad app, the file must be saved, not synced. In other words, if you try to transfer a png to your iPad by syncing it with iTunes, it&#8217;s going to get flattened and the transparency removed. But, if you email it to yourself and...  <a href=\"http://www.gilluminate.com/2011/09/09/chimpadeedoo-transparent-png-logo/\" class=\"more-link\" title=\"Read Chimpadeedoo Transparent PNG Logo\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2011/09/09/chimpadeedoo-transparent-png-logo/\">Chimpadeedoo Transparent PNG Logo</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2011/09/09/chimpadeedoo-transparent-png-logo/",
    "title": "Chimpadeedoo Transparent PNG Logo"
  },
  {
    "categories": [
      "Developer Blog",
      "CForms",
      "WordPress"
    ],
    "summary": "<p>Using Cforms II, when I select font17.ttf as the captcha font (the one that looks comic book style) it will not validate…ever. I continue to get the message &#8220;Please double-check your verification code.&#8221; If I switch fonts, it validates just fine. This has nothing to do with disabling other plugins and using default theme, as...  <a href=\"http://www.gilluminate.com/2011/08/09/cforms-captcha-not-working/\" class=\"more-link\" title=\"Read CForms CAPTCHA Not Working\">Read more &#187;</a></p><p>The post <a href=\"http://www.gilluminate.com/2011/08/09/cforms-captcha-not-working/\">CForms CAPTCHA Not Working</a> appeared first on <a href=\"http://www.gilluminate.com\">Gilluminate</a>.</p>",
    "url": "http://www.gilluminate.com/2011/08/09/cforms-captcha-not-working/",
    "title": "CForms CAPTCHA Not Working"
  }
]

index.html

<!doctype html>
<head>
  <script src="http://lunrjs.com/lunr.js"></script>
  <script src="/search.js"></script>
</head>

search.js

var idx = lunr(function () {
  this.ref('url')
  this.field('title', { boost: 10 })
  this.field('summary')
  this.field('categories', { boost: 100 })
})

var feedLoaded = function (e) {
  var feed = JSON.parse(e.target.response)

  feed.forEach(function (entry) {
    idx.add(entry)
  })

  console.log('idx ready')
}

var xhr = new XMLHttpRequest

xhr.open('get', '/feed.json')
xhr.addEventListener('load', feedLoaded)
xhr.send()