Merge pull request #39 from swiftype/fancy-readme

Adds fancy README

README.md

@@ -1,18 +1,24 @@
-jQuery Plugin for Swiftype Site Search
-=========
+<p align="center"><img src="https://github.com/swiftype/swiftype-search-jquery/blob/master/logo-site-search.png?raw=true" alt="Elastic Site Search Logo"></p>
 
-The official [Swiftype Site Search](http://www.swiftype.com/site-search) jQuery plugin for adding search functionality backed by data from the Swiftype Site Search API. Learn more about Swiftype by visiting [swiftype.com](http://www.swiftype.com) and creating an account.
+> A first-party [Elastic Site Search](https://swiftype.com/documentation/site-search/overview) jQuery plugin for website search.
 
-> **Note:** This client has been developed for the [Swiftype Site Search](https://www.swiftype.com/site-search) API endpoints only. You may refer to the [Swiftype Site Search API Documentation](https://swiftype.com/documentation/site-search/overview) for additional context.
+## Contents
 
-Prerequisites
-------------
-1. A Swiftype account. Sign up at [swiftype.com](http://www.swiftype.com).
-2. A Swiftype Site Search engine with some data in it.
++ [Getting started](#getting-started-)
++ [Usage](#usage)
++ [Customization tutorial](#customization-tutorial)
++ [FAQ](#faq-)
++ [Contribute](#contribute-)
++ [License](#license-)
 
+***
 
-Installation
-------------
+## Getting started 🐣
+
+Requirements:
+
+1. Site Search account. Sign up at [swiftype.com](https://app.swiftype.com/signup).
+2. Site Search Engine with some data in it.
 
 Include the following in the header of your webpage:
 
@@ -30,9 +36,10 @@ All together it should look like this:
 <link type="text/css" rel="stylesheet" href="search.css" media="all" />
 ```
 
+> **Note:** This client has been developed for the [Elastic Site Search](https://www.swiftype.com/site-search) API endpoints only. You may refer to the [Elastic Site Search API Documentation](https://swiftype.com/documentation/site-search/overview) for additional context.
 
-Basic Usage
------
+
+## Usage
 
 Start by having at least these three elements on the page: a form, an input field within the form, and a container for results.
 
@@ -43,7 +50,7 @@ Start by having at least these three elements on the page: a form, an input fiel
 <div id="st-results-container"></div>
 ```
 
-Simply apply the swiftype method to an existing search input field within a form on your webpage and provide a container for results. For example, add it to a search input field with id `st-search-input` as follows:
+Apply the swiftype method to an existing search input field within a form on your webpage and provide a container for results. For example, add it to a search input field with id `st-search-input` as follows:
 
 ```js
 $('#st-search-input').swiftypeSearch({
@@ -54,17 +61,15 @@ $('#st-search-input').swiftypeSearch({
 
 Be sure to change the `engineKey` attribute shown above to match the one assigned to your Swiftype search engine. If you are using the web interface, the search engine key is listed on the first page of your dashboard.
 
-
-Customization Tutorial
--------------
+## Customization tutorial
 
 This plugin is written to be flexible based on your specific use-case.
 For example you might want to retrieve more data for each result, customize
 the way data is display to the user, or restrict the search query to certain elements of your search engine.
 
 Let's go through an example that does all of this. For this example, let's assume you followed the QuickStart tutorial for our [Ruby Gem](https://github.com/swiftype/swiftype-rb), and now you have data for a Bookstore indexed in your example search engine.
 
-#### Changing the number of results per page
+### Changing the number of results per page
 
 To specify the number of results per page, use the `perPage` attribute.
 
@@ -96,7 +101,7 @@ The `highlightFields` option accepts a hash containing the fields you want to ha
 
 See the [custom.html](https://github.com/swiftype/swiftype-search-jquery/blob/master/custom.html) file for an additional example of `highlightFields`.
 
-#### Fetching only the fields you specify
+### Fetching only the fields you specify
 
 To specify the fields you would like returned from the API, set the `fetchFields` attribute to a hash containing an array listing the fields you want returned for each document type. For example, if you have indexed `title`, `genre`, and `published_on` fields for each document, you can have them returned as follows:
 
@@ -109,7 +114,7 @@ $('#st-search-input').swiftypeSearch({
 
 These additional fields will be returned with each item, and they can be accessed in the rendering function as shown in the next section.
 
-#### Customizing the display
+### Customizing the display
 
 Now that you have more data for each result item, you'll want to customize the item rendering function to make use of them.
 
@@ -140,7 +145,7 @@ $('#st-search-input').swiftypeSearch({
 });
 ```
 
-#### Restricting matching to particular fields
+### Restricting matching to particular fields
 
 By default, the Swiftype search library will match the submitted query to any `string` or `text` field indexed for your documents. So if you would like to ensure that it only matches entries in the `title` field, for example, you can specify the `searchFields` option:
 
@@ -155,7 +160,7 @@ $('#st-search-input').swiftypeSearch({
 
 Similarly to the `fetchFields` option, `searchFields` accepts a hash containing an array of fields for each document_type on which you would like the user's query to match.
 
-#### Specifying additional query conditions
+### Specifying additional query conditions
 
 Now let's say you only want your results to display books that are of the **fiction** `genre` and are **in_stock**. In order to restrict search results, you can pass additional query conditions to the search API by specifying them as a dictionary in the `filters` field. Multiple clauses in the filters field are combined with AND logic:
 
@@ -169,7 +174,29 @@ $('#st-search-input').swiftypeSearch({
 });
 ```
 
+## FAQ 🔮
+
+### Where do I report issues with the client?
+
+If something is not working as expected, please open an [issue](https://github.com/swiftype/swiftype-search-jquery/issues/new).
+
+### Where can I learn more about Site Search?
+
+Your best bet is to read the [documentation](https://swiftype.com/documentation/site-search).
+
+### Where else can I go to get help?
+
+You can checkout the [Elastic Site Search community discuss forums](https://discuss.elastic.co/c/site-search).
+
+## Contribute 🚀
+
+We welcome contributors to the project. Before you begin, a couple notes...
+
++ Before opening a pull request, please create an issue to [discuss the scope of your proposal](https://github.com/swiftype/swiftype-search-jquery/issues).
++ Please write simple code and concise documentation, when appropriate.
+
+## License 📗
+
+[MIT](https://github.com/swiftype/swiftype-search-jquery/blob/master/LICENSE) © [Elastic](https://github.com/elastic)
 
-Questions?
-----------
-Get in touch! We would be happy to help you get up and running.
+Thank you to all the [contributors](https://github.com/swiftype/swiftype-search-jquery/graphs/contributors)!