Tools for static websites starting with search

Drop your email below for early access!

We'll never share your email with anyone else.
README.md

COMING SOON! This is in early development and nothing is public yet. If you want to get early access, be sure to enter your email!

We’re making a super easy drop in search box that will index your site automatically or via a REST request.

  1. Authorize a domain for indexing by sending a REST request or creating an account.
  2. Put some HTML for the search box and include the jQuery plugin for searching.
  3. Optionally request an index when content changes via a REST request.

API

Index

On the first time an index is requested for a new site, we’ll authorize the site by emailing the administrator email registered to the domain.

Once that email is confirmed by clicking a link in the email, indexing will
start.

Re-indexing will happen again upon another call to the index resource OR after a week goes by.

POST https://api.cloudsh.com/v1/index

Params:

  • index: Required. The domain to index.
  • altEmail: Optional. An different email to use for verification but it must be on the domain registration.

Request Body: application/json

{"index": "www.cloudsh.com"}

Response Body

{
  "index": "www.cloudsh.com",
  "status": "ok"
}

Sample HTML

Create a form with results below the search box

<div class="row mb-4">
  <div class="col">
    <form class="search form-inline">
      <div class="form-group">
        <input class="form-control" id="q" placeholder="search" type="text"></input>
        <button class="btn btn-primary">Search</button> </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="col">
    <div id="results"></div>
  </div>
</div>

The form needs to have an iput with a q id on it.

There needs to be a div with the id results.

Create a form that submits to the search page

<form class="search form-inline" method="get" action="/my-search-page">
  <div class="form-group">
    <input class="form-control" id="q" placeholder="search" type="text"></input>
    <button class="btn btn-primary">Search</button>
  </div>
</form>

For other forms, just submit to the search page via GET with a q querystring.

jQuery Plugin

The plugin only needs to be included on the search page.

<script src="/js/cloudsh.js"></script>
<script>
  // init the search plugin. Only needed on the search page  
  $(function() {
    $("form.search").cshSearch({
      // Set the AJAX spinner CSS class. Default:
      spinnerCss: ".spinner{margin:100px auto;width:50px;height:40px;text-align:center;font-size:10px}.spinner > div{background-color:#333;height:100%;width:6px;display:inline-block;margin:0 4px 0 0;padding:0;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}@-webkit-keyframes sk-stretchdelay{0%,100%,40%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,100%,40%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}",
      // Set the spinner HTML. Default:
      spinnerHtml: "<div class='spinner'><div class='rect1'></div><div class='rect2'></div><div class='rect3'></div><div class='rect4'></div><div class='rect5'></div></div>",
      // Set the ID of the results element. Default:
      resultsElement: "#results",
      // Set the no results message. Default:
      notFound: "No results",
      // Set the query input jQuery finder. Default:
      queryInput: "#q",
      // Set the number of results per page. Default:
      perPage: 10,
      // Set the index, like 'www.cloudsh.com'. Required.
      index: "www.cloudsh.com",
    });
  });
</script>