---
title:                                  Roundtrip
tagline:                                Algolia Online Search
description:                            Using Algolia Index API for static sites

tags:                                   [ Template, Roundtrip, Search, Engine, Algolia]
index:                                  []
categories:                             [ pages ]

permalink:                              /pages/public/start/roundtrip/search_engine/
regenerate:                             true

resources:                              [ algolia ]
resource_options:
  - masthead:
      opacity:                          0.2
      slides:
        - url:                          /assets/images/widescreen/featured-1920x800.jpg
          alt:                          featured-1920x800
---

// Enable the Liquid Preprocessor
// -----------------------------------------------------------------------------
:page-liquid:

// Set other global page attributes here
// -----------------------------------------------------------------------------

// Liquid procedures
// -----------------------------------------------------------------------------
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}

// Initialize entry document paths
// -----------------------------------------------------------------------------
{% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls
// -----------------------------------------------------------------------------
include::{includedir}/attributes.asciidoc[tag=tags]
include::{includedir}/attributes.asciidoc[tag=urls]
include::{includedir}/attributes.asciidoc[tag=data]

// Additional Asciidoc page attributes goes here
// -----------------------------------------------------------------------------

// Include sub-documents
// -----------------------------------------------------------------------------


The module *Site Search* is based on an _Elasticsearch_ Index hostet at
_Algolia_. To access the `Algolia index`, the Javascript library
_InstantSearch_ (instansearch.js) is fully integrated with _J1_. *Site Search*
is bundled with the template like all other modules, e.g. *Toccer*, *Header*
or *Navigator* -- simple to use as only a configuration is need to make this
functionality available with a site.

J1 Template integrates the `jekyll-algolia` Gem, a data collector create the
search *record data* needed and push the content in an Algolia index in a
single step.

Find the default search client below; packed with the *Site Search* module as
well.

== Algolia Site Search

++++
  <!-- CurrentRefinedValues widget -->
  <div id="current-refined-values"></div>

  <!-- ClearAll widget -->
  <div id="clear-all"></div>

  <!-- SearchBox widget -->
  <div id="search-searchbar" class="mb-4"> </div>

  <!-- HitsPerPage widget -->
  <!-- div id="hits-per-page-selector"></div -->

  <div id="searcher" class"row">
    <div class="col-md-4 col-xs-6">
      <!-- CurrentRefinedValues widget -->
      <div id="current-refined-values"></div>
      <!-- RefinementList widget -->
      <div id="refinement-list" class="limit-y"></div>
    </div>

    <div class="col-md-8 col-xs-6">
      <!-- Pagination widget -->
      <div id="pagination"></div>
      <!-- Hits widget -->
      <ul class="list-unstyled">
        <div id="search-hits" class="result-list" >
          <div class="result-item"></div>
        </div>
      </ul>
    </div>

  </div>
++++

++++
<style>

#refinement-list {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

#refinement-list::-webkit-scrollbar {
  width: 0px; /* WebKit */
}

input:focus{
  outline: none;
//  box-shadow: 0px 0px 5px #61C5FA;
  border: 1px solid #424242;
}

input:hover {
  border: 1px solid #424242;
  border-radius: 5px;
}

input:focus:hover{
  outline: none;
  box-shadow: 0px 0px 5px #424242;
  border: 1px solid #3f51b5;
  border-radius:0;
}

.limit-y {
  max-height: 800px;
  overflow-y: auto;
}

.ais-pagination {
  -webkit-box-shadow: 0 !important;
  box-shadow: 0 !important;
  width: 100%;
}

.ais-refinement-list {
    margin-top: 1.25rem;
}

.search-result-item {
  margin-bottom: 0px;
}

.ais-search-box {
  max-width: 100%;
  margin-bottom: 15px;
}

.ais-search-box--input {
  padding-left: 2.5rem !important;
}

.ais-search-box--magnifier {
  top: 1rem !important;
  right: 1rem !important;
  left: 1rem !important;
}

.ais-search-box--reset {
  top: 1rem !important;
  right: 1rem !important;
}

em.ais-Highlight {
  font-weight: bold;
  /* font-size: 1.125rem; */
  /* font-style: inherit; */
  color: #ef2929;
  font-style: unset !important;
}

</style>
++++

== What's next?

Hopefully you've enjoyed exploring all the possibilities J1 offers for managing
themes. But much, much more can the J1 do for your Web Site.

This was the last place to go for the roundtrip. More details of the most
common elements of Bootstrap can be found on the previewer for a theme. Have
a look at the link:{previewer-theme}[Theme Previewer, window="_blank"].

To make things real for your new Web, go for *Web in a Day*. This tutorial
guides you through all the steps to build a Web - your Web using Jekyll and the
Template J1. It's really a nice journey to *explore* and *learn* J1 - start with
link:{kickstarter-web-in-a-day}[Web in a Day here, window="_blank"]!