Merge pull request #41 from algolia/docSearch-docsearch
chore(naming): use `docsearch` everywhere
This commit is contained in:
Sylvain Utard
commit
27c599ed3f
4 changed files with 73 additions and 29 deletions
32
README.md
32
README.md
|
|
@ -43,7 +43,7 @@ We're scratching our own itch here. As developers, we spend a lot of time readin
|
|||
|
||||
Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free.
|
||||
|
||||
Just submit the form on the [website][12] and we'll get back to you with what you need to integrate your new search into your website.
|
||||
Just submit the form on the [website][https://community.algolia.com/docsearch/] and we'll get back to you with what you need to integrate your new search into your website.
|
||||
|
||||
1. We'll crawl your documentation pages,
|
||||
2. We'll configure your search experience,
|
||||
|
|
@ -57,7 +57,7 @@ Once we've crawled your documentation website we'll send you the credentials you
|
|||
<link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.css" />
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docSearch({
|
||||
docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
|
||||
|
|
@ -69,7 +69,7 @@ docSearch({
|
|||
|
||||
The default colorscheme is blue and gray:
|
||||
|
||||
![Default colorscheme][13]
|
||||
![Default colorscheme][12]
|
||||
|
||||
To update the colors to suit your website, you just need to override a few
|
||||
colors. Here is an example of a CSS file that you can use as a basis and that
|
||||
|
|
@ -115,7 +115,7 @@ sets white and purples colors.
|
|||
}
|
||||
```
|
||||
|
||||
Advanced users can also clone the repository, edit the [_variables.scss][14]
|
||||
Advanced users can also clone the repository, edit the [_variables.scss][13]
|
||||
file and re-build the CSS file using `npm run build:css`.
|
||||
|
||||
<!-- END documentation.md -->
|
||||
|
|
@ -127,7 +127,7 @@ file and re-build the CSS file using `npm run build:css`.
|
|||
We use a simple documentation example website as a way to develop the docsearch library.
|
||||
|
||||
Requirements:
|
||||
- [Node.js][17]
|
||||
- [Node.js][15]
|
||||
- npm@2
|
||||
|
||||
```sh
|
||||
|
|
@ -148,11 +148,11 @@ npm run dev
|
|||
|
||||
### Documentation website
|
||||
|
||||
This is the [Jekyll][18] instance running at [https://community.algolia.com/docsearch](https://community.algolia.com/docsearch).
|
||||
This is the [Jekyll][16] instance running at [https://community.algolia.com/docsearch](https://community.algolia.com/docsearch).
|
||||
|
||||
Requirements:
|
||||
- [Ruby][19]
|
||||
- [Bundler][20]
|
||||
- [Ruby][17]
|
||||
- [Bundler][18]
|
||||
|
||||
```sh
|
||||
npm run dev:docs
|
||||
|
|
@ -181,12 +181,10 @@ bundle config build.eventmachine --with-cppflags=-I$(brew --prefix openssl)/incl
|
|||
[9]: #local-example
|
||||
[10]: #documentation-website
|
||||
[11]: #macos
|
||||
[12]: https://community.algolia.com/docsearch/
|
||||
[13]: ./docs/img/default-colorscheme.png
|
||||
[14]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
|
||||
[15]: https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css
|
||||
[16]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
|
||||
[17]: https://nodejs.org/en/
|
||||
[18]: https://jekyllrb.com/
|
||||
[19]: https://www.ruby-lang.org/en/
|
||||
[20]: http://bundler.io/
|
||||
[12]: ./docs/img/default-colorscheme.png
|
||||
[13]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
|
||||
[14]: https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css
|
||||
[15]: https://nodejs.org/en/
|
||||
[16]: https://jekyllrb.com/
|
||||
[17]: https://www.ruby-lang.org/en/
|
||||
[18]: http://bundler.io/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import docSearch from '../index.js';
|
||||
import docsearch from '../index.js';
|
||||
|
||||
docSearch({
|
||||
docsearch({
|
||||
apiKey: '52a6d7ab710fcef44537c3cff5290e55',
|
||||
indexName: 'tim_stripe',
|
||||
inputSelector: '#search-input'
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@ permalink: /documentation/
|
|||
|
||||
## Introduction
|
||||
|
||||
We're scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
|
||||
We're scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn't always easy to find the information we need.
|
||||
|
||||
Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free.
|
||||
|
||||
Just submit the form on the [community.algolia.com/docsearch/](https://community.algolia.com/docsearch/) website and we'll get back to you with what you need to integrate your new search into your website.
|
||||
Just submit the form on the [website][https://community.algolia.com/docsearch/] and we'll get back to you with what you need to integrate your new search into your website.
|
||||
|
||||
1. We'll crawl your documentation pages,
|
||||
2. We'll configure your search experience,
|
||||
3. and you'll need to add the a small JS/CSS code snippet to your website.
|
||||
3. You'll need to add a bit of JavaScript and CSS code to your website.
|
||||
|
||||
## Setup
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Once we've crawled your documentation website we'll send you the credentials you
|
|||
<link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.css" />
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docSearch({
|
||||
docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
|
||||
|
|
@ -34,8 +34,54 @@ docSearch({
|
|||
|
||||
## Customization
|
||||
|
||||
To customize the look & feel of the dropdown menu, you can either:
|
||||
The default colorscheme is blue and gray:
|
||||
|
||||
* edit the color [variables](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) and rebuild this project CSS,
|
||||
* or override the colors like we did in [dev/docsearch-styling.css](https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css).
|
||||
![Default colorscheme][12]
|
||||
|
||||
To update the colors to suit your website, you just need to override a few
|
||||
colors. Here is an example of a CSS file that you can use as a basis and that
|
||||
sets white and purples colors.
|
||||
|
||||
```css
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #3A3DD1;
|
||||
}
|
||||
/* Main category headers */
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background-color: #4B54DE;
|
||||
}
|
||||
/* Highlighted search terms */
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #3A33D1;
|
||||
}
|
||||
/* Highligted search terms in the main category headers */
|
||||
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||
background-color: #4D47D5;
|
||||
}
|
||||
/* Currently selected suggestion */
|
||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||
color: #272296;
|
||||
}
|
||||
.aa-cursor .algolia-docsearch-suggestion {
|
||||
background: #EBEBFB;
|
||||
}
|
||||
|
||||
/* For bigger screens, when displaying results in two columns */
|
||||
@media (min-width: 768px) {
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #7671df;
|
||||
}
|
||||
/* Left column, with secondary category header */
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
border-right-color: #7671df;
|
||||
background-color: #F2F2FF;
|
||||
color: #4E4726;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Advanced users can also clone the repository, edit the [_variables.scss][13]
|
||||
file and re-build the CSS file using `npm run build:css`.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import toFactory from 'to-factory';
|
|||
import DocSearch from './DocSearch';
|
||||
import version from './version.js';
|
||||
|
||||
let docSearch = toFactory(DocSearch);
|
||||
docSearch.version = version;
|
||||
let docsearch = toFactory(DocSearch);
|
||||
docsearch.version = version;
|
||||
|
||||
export default docSearch;
|
||||
export default docsearch;
|
||||
|
|
|
|||
Loading…
Reference in a new issue