gulp.task('build-search-index', (done) => {
  // load up our search-index so we can populate and export it
  const searchIndex = require('search-index')
  searchIndex({}, (openDatabaseError, index) => {
    if (openDatabaseError) {
      done(openDatabaseError)
      return
    }

  // import all the markdown files into our search index
  gulp.src('./content/**/*.md')
  .pipe(buildDocument())
  .pipe(index.defaultPipeline())
  .pipe(index.add())
  .on('finish', (pipeErr) => {
    if (pipeErr) {
      done(pipeErr)
      return
    }

{ 
  "id": "post/2017/04_march_project.md",
  "date": "2017-04-05T22:08:16+02:00",
  "title": "March Project",
  "categories": ["cru","Albania"],
  "tags": ["cru","Albania"],
  "author": "gordon",
  "body": "## We love momentum\n\nMarch 13-17 was a big week for us.  We..."
}

  index.dbReadStream({ gzip: true })
    .pipe(JSONStream.stringify(false))    // Using the JSONStream library we turn the database objects into strings
    .pipe(zlib.createGzip())              // Then we gzip the resulting stream of strings
    .pipe(fs.createWriteStream('./public/search_index.gz'))   // and write it to the output file
    .on('close', () => {
      
      // do some other checks...

      done()    // tell Gulp that this task finished successfully

function downloadIndex(url: string, cb: (err, index?: Uint8Array) => void) {
  const oReq = new XMLHttpRequest()

  oReq.onload = (oEvent) => {
    const arrayBuffer = oReq.response // Note: not oReq.responseText
    if (arrayBuffer) {
      const byteArray = new Uint8Array(arrayBuffer)
      cb(null, byteArray)
    }
  }

  oReq.onerror = (oError) => {
    cb(oError)
  }

  oReq.responseType = 'arraybuffer'
  oReq.open('GET', url, true)
  oReq.send()
}

function inflate(contents: Uint8Array, cb: (err: Error, inflated?: string) => void) {
  try {
    const inflated = pako.inflate(contents, { to: 'string' })
    cb(null, inflated)
  } catch (err) {
    if (err !== 'incorrect header check') {
      cb(err)
      return
    }

    // the browser already inflated this for us.
    // This happens if the server supports gzip encoding,
    // and sets the 'Content-Encoding: "gzip"' header.
    largeuint8ArrToString(contents, (result) => {
      cb(null, result)
    })
  }
}

function largeuint8ArrToString(uint8arr, callback) {
  const bb = new Blob([uint8arr])
  const f = new FileReader()
  f.onload = (e) => {
    callback((e.target as any).result)
  }

  f.readAsText(bb)
}

const options = this.options
SearchIndex(options, (libErr, si) => {
  if (libErr) {
    cb(libErr)
    return
  }

    // create a readable stream around our inflated string to read and JSON parse one line at a time
  let i = 0
  let lines = 0
  const docStream = new Readable({
    objectMode: true,

    read() {
      let chunk: any
      do {
        if (i >= inflated.length) {
            // we're done, tell the connected streams that we've got no more to send them.
          this.push(null)
          return
        }

          // find the next newline character and pull out this substring
        let nextNewline = inflated.indexOf('\n', i)
        if (nextNewline <= i) {
          nextNewline = undefined
        }
        const substr = inflated.substring(i, nextNewline)
        chunk = JSON.parse(substr)

          // If we didn't find another newline, we're at the end.  Can't break yet, still gotta push.
        if  (nextNewline) {
          i = nextNewline + 1
        } else {
          i = inflated.length
        }
        lines++

          // push the chunk and go read the next one, until the downstream pipe returns false.
          // If it returns false, we take a break until they call "read()" again on this instance.
      } while (this.push(chunk))
    },
  })

    // hook up our readable stream to the opened search index
  docStream
    .pipe(si.dbWriteStream({ merge: false }))
      // an empty listener lets the pipe keep moving, otherwise it gets stuck
    .on('data', () => {})
    .on('finish', () => {
        // Finished successfully!  Tell the main script that the search index is open.
      cb(null, si)
    })
    .on('error', (error) => {
      cb(error)
    })
})

public runSearch(query: string, lang?: string | SearchCallback, cb?: SearchCallback): void {
  if (!cb && typeof lang === 'function') {
    cb = lang
    lang = undefined
  }
  const results: SearchResult[] = []

  // search index only handles lower case - no matches on uppercase
  query = query.toLocaleLowerCase()

  const queryObj = {
    AND: {
      '*': query.split(' '),
    },
  }
    // add in the language to limit search results only to that language, for multilingual sites.
  if (lang) {
    (queryObj.AND as any).lang = [ lang ]
  }

  this.index.search({ query: queryObj })
    .on('data', (doc) => {
      results.push(doc)
    })
    .on('end', () => {
      cb(undefined, results)
    })
    .on('error', (error) => {
      cb(error)
    })
}

<div>
  <form id="searchForm">
    <div class='searchContainer'>
      <input type="search" placeholder="Search..."></input>
      <i id="searchSpinner" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
    </div>
  </form>
</div>

<div>
  <table id="searchResults">
  </table>
</div>

  // Initialize the search index in the page context
InitSearch(url, (err, store) => {
  if (err) {
    console.error('Error loading search index: ' + err)
    return
  }
    // Search index initialized, add it to the window.
  w.Search = store
})

const searchForm = document.getElementById('searchForm')
const output = document.getElementById('searchResults')
const spinner = document.getElementById('searchSpinner')
if (spinner) {
  spinner.style.visibility = 'hidden'   // hidden while not searching
}
if (searchForm && searchForm instanceof HTMLFormElement) {
  searchForm.onsubmit = (evt) => {
    evt.preventDefault()
    const input = form.querySelector('input') as HTMLInputElement
    const text = input.value
    if (!text || text === '') {
        // do nothing for empty string search
      return
    }

    if (spinner) {
        // turn on the spinner while we search
      spinner.style.visibility = 'visible'
    }

    if (w.Search) {
        // already loaded
      doSearch(text)
    } else {
        // wait for loading to complete then do the search
      me.addEventListener('searchIndexLoaded', () => {
        doSearch(text)
      })
    }
  }
}

function doSearch(text: string): void {
  w.Search.runSearch(text, lang, (error, results) => {
    if (error) {
      console.error(error)
      return
    }

    if (output && output instanceof HTMLTableElement) {
      writeSearchResults(output, results)
    }
    if (spinner) {
      // now we stop the spinner
      spinner.style.visibility = 'hidden'
    }
  })
}

/** Formats and writes search results to the given HTMLTableElement in the <tbody> */
function writeSearchResults(table: HTMLTableElement, results: SearchResult[]): void {
  let body: HTMLTableSectionElement
  if (table.tBodies && table.tBodies.length > 0) {
    body = table.tBodies[0]
  } else {
    body = table.createTBody()
  }

  function resultToRow(r: SearchResult, row: HTMLTableRowElement): void {
    const date = r.document.date ? new Date(r.document.date).toLocaleDateString() : undefined
    let docBody: string = r.document.body
    if (docBody) {
      docBody = docBody.substring(0, 150) + '...'
    }
    row.innerHTML =
`<td>
  <h3><a href=${r.document.relativeurl}>${r.document.title || r.document.name}</a></h3>
  <span class="date">${date}</span>
  <div class="body">
      ${docBody}
  </div>
</td>`
  }

  let i = 0
  for (; i < body.rows.length && i < results.length; i++) {
    // overwrite existing rows
    resultToRow(results[i], body.rows[i])
  }

  for (; i < results.length; i++) {
    // append new rows as necessary
    resultToRow(results[i], body.insertRow())
  }

    // delete old rows
  for (; i < body.rows.length; ) {
      // since this is a live list, as we delete items it shrinks.  Thus we don't increment i.
    body.deleteRow(i)
  }

  if (results.length === 0) {
    const row = body.insertRow()
    row.innerHTML = '<h3>No Results</h3>'
  }
}