Skip to content
This repository has been archived by the owner on May 26, 2019. It is now read-only.

Setup Algolia documentation search and see how it works #1184

Closed
acorncom opened this issue Jan 21, 2016 · 2 comments
Closed

Setup Algolia documentation search and see how it works #1184

acorncom opened this issue Jan 21, 2016 · 2 comments

Comments

@acorncom
Copy link
Contributor

- Copy the following CSS/JS snippets and add them to your page

<!-- at the end of the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
<!-- at the end of the BODY -->

<script
type="text/javascript"
src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>

<script
type="text/javascript"> docsearch({
apiKey:
'70c6f2593b56f14e561a361d1b787a1e',

indexName: 'emberjs',
inputSelector: '### REPLACE ME ####',
algoliaOptions: {
'hitsPerPage': 5,
'facetFilters': '### REPLACE ME ####'
}
}); 
</script>

- Add a search input if you don't have any yet, and update the inputSelector value in the code snippet to a CSS selector that targets your input field.
- Add the logic to search only in the good set of tags:
if you want to search on guide 2.3.0 and the api:
'facetFilters': '(tags:api,tags:v2.3.0)'
If you want to search only in the api it will look like:
'facetFilters': '(tags:api)’

Possible tags are: “api”, “v1.10.0”, “v1.11.0”, “v1.12.0”, “v1.13.0”, “v2.0.0”, “v2.1.0”, “v2.2.0”, “v2.3.0” 

- Optionally customize the look and feel by following the DocSearch documentation

If this works well, I imagine we're going to want to add it to the API pages and the main website as well. Probably worth putting in a separate JS file that we'll aim to make global (and have it read the versions.js file for the appropriate version tag to use).

@jeradg
Copy link
Contributor

jeradg commented Jan 21, 2016

I'll investigate this afternoon.

jeradg added a commit to jeradg/guides that referenced this issue Jan 22, 2016
…Search

Removed Swiftype gem, scripts and styles.

Added DocSearch scripts and styles.

Changed default DocSearch colours to Ember colours.
jeradg added a commit to jeradg/guides that referenced this issue Jan 22, 2016
…eaks

Fixed alignment problem with search input at small screen sizes.

DocSearch styling changes.

Added padding above version select at small screen sizes.
jeradg added a commit to jeradg/guides that referenced this issue Jan 28, 2016
…Search

Removed Swiftype gem, scripts and styles.

Added DocSearch scripts and styles.

Changed default DocSearch colours to Ember colours.

Fixed alignment problem with search input at small screen sizes.

Added padding above version select at small screen sizes.
jeradg added a commit to jeradg/guides that referenced this issue Jan 28, 2016
…Search

Removed Swiftype gem, scripts and styles.

Added DocSearch scripts and styles.

Changed default DocSearch colours to Ember colours.

Fixed alignment problem with search input at small screen sizes.

Added padding above version select at small screen sizes.
homu added a commit that referenced this issue Jan 28, 2016
…corncom

Change search provider to DocSearch

This PR changes the Guides search provider from Swiftkey to DocSearch.

See issues #1184 and #1183 for discussion.

Functionality checked in Chrome and Firefox latest.

### Screenshots

*Small width:*
![docsearch-small-width](https://cloud.githubusercontent.com/assets/1948799/12516424/5f8aa0d6-c0fb-11e5-9ffe-acdb56bd20fa.png)

*Large width:*
![docsearch-large](https://cloud.githubusercontent.com/assets/1948799/12516422/5f83255e-c0fb-11e5-8ea6-6cd96f8ce676.png)

*Typo correction:*
![docsearch-spellcheck](https://cloud.githubusercontent.com/assets/1948799/12516423/5f898ffc-c0fb-11e5-8dcf-8fe63b6c2bf7.png)
@acorncom
Copy link
Contributor Author

This has been merged, thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants