Skip to content

Commit

Permalink
feat(doc): move everything to algolia.com
Browse files Browse the repository at this point in the history
  • Loading branch information
bodinsamuel committed Apr 30, 2021
1 parent d074426 commit 78f8a4e
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 152 deletions.
21 changes: 15 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
</a>
</p>
<p align="center">
<a href="https://circleci.com/gh/algolia/algoliasearch-netlify/tree/master"><img src="https://img.shields.io/circleci/build/gh/algolia/algoliasearch-netlify/master" alt="Build Status"></a>
<a href="https://algoliasearch-netlify.netlify.app/"><img src="https://img.shields.io/netlify/9209706f-d5b7-46e2-bb88-5d6bedd2823f" alt="Netlify build status" /></a>
<a href="https://www.npmjs.com/package/@algolia/netlify-plugin-crawler"><img src="https://img.shields.io/npm/v/@algolia/netlify-plugin-crawler" alt="Version"></a>
<a href="https://circleci.com/gh/algolia/algoliasearch-netlify/tree/master">
<img src="https://img.shields.io/circleci/build/gh/algolia/algoliasearch-netlify/master" alt="Build Status">
</a>
<a href="https://algoliasearch-netlify.netlify.app/">
<img src="https://img.shields.io/netlify/9209706f-d5b7-46e2-bb88-5d6bedd2823f" alt="Netlify build status" />
</a>
<a href="https://www.npmjs.com/package/@algolia/netlify-plugin-crawler">
<img src="https://img.shields.io/npm/v/@algolia/netlify-plugin-crawler" alt="Version">
</a>
</p>

<h2 align="center">Algolia Netlify plugin</h2>
Expand All @@ -17,16 +23,19 @@ Automatically index your website to Algolia when deploying your project to Netli
- [What is Algolia's Crawler?](https://www.algolia.com/doc/tools/crawler/getting-started/overview/)

<p align="center">
<a href="https://crawler.algolia.com/admin/netlify"><img width="223" alt="Sign in to Algolia with Netlify" src="https://user-images.githubusercontent.com/1637651/95232629-0ebc1d00-0805-11eb-9b77-f116a3ed1a2b.png">
</a>
<a href="https://crawler.algolia.com/admin/netlify">
<img width="223" alt="Sign in to Algolia with Netlify" src="https://user-images.githubusercontent.com/1637651/95232629-0ebc1d00-0805-11eb-9b77-f116a3ed1a2b.png">
</a>
</p>

## Documentation

- [Getting Started](https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/)
- [Plugin configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/plugin/)
- [Front-end configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/front-end/)
- [FAQ](https://www.algolia.com/doc/tools/crawler/netlify-plugin/netlify-faq/)
- [Uninstall](https://www.algolia.com/doc/tools/crawler/netlify-plugin/uninstalling/)
- [Data Extraction](https://www.algolia.com/doc/tools/crawler/netlify-plugin/extraction-strategy/)
- [Uninstall](https://www.algolia.com/doc/tools/crawler/netlify-plugin/uninstalling/)

## Troubleshooting

Expand Down
99 changes: 3 additions & 96 deletions frontend/README.md
Original file line number Diff line number Diff line change
@@ -1,103 +1,10 @@
# algoliasearch-netlify-frontend

`algoliasearch-netlify-frontend` is the front-end bundle we recommend to use with our Netlify plugin.
It's designed to be compatible with the index structure extracted by the [plugin](../plugin).
It **creates a new search input** in your website with an autocomplete menu providing search as you type results.

## Usage

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script type="text/javascript">
algoliasearchNetlify({
appId: '<YOUR_ALGOLIA_APP_ID>',
apiKey: '<YOUR_ALGOLIA_API_KEY>',
siteId: '<YOUR_NETLIFY_SITE_ID>',
branch: '<YOUR_TARGET_GIT_BRANCH>',
selector: 'div#search',
});
</script>
```

<p align="center">
<img src="/docs/screenshots/frontend/normal-theme.png?raw=true" alt="Frontend plugin light theme" width="600px">
</p>

## Available options

Here's the full list of options with their default value.

```js
algoliasearchNetlify({
// Mandatory
appId: '<YOUR_ALGOLIA_APP_ID>', // Application ID (Can be found in https://www.algolia.com/api-keys)
apiKey: '<YOUR_ALGOLIA_API_KEY>', // Search api key (Can be found in https://www.algolia.com/api-keys)
siteId: '<YOUR_NETLIFY_SITE_ID>', // Netlify Site ID (Can be found in https://crawler.algolia.com/admin/netlify)
branch: '<YOUR_TARGET_GIT_BRANCH>', // Target git branch, either a fixed one (e.g. 'master') or a dynamic one using `process.env.HEAD`. See "Using Multiple branches" in this doc.
selector: 'div#search', // Where the autocomplete will be spawned (should not be an input)

// Optional
analytics: true, // Enable search analytics
hitsPerPage: 5, // Amount of results to display
placeholder: 'Search...', // Input placeholder
openOnFocus: true, // Open search panel with default search, when focusing input
detached: { mediaQuery: '(max-width: 500px)' }, // Determine when the search popup should open in detached mode (full screen, modal experience). Can be set to `true` or `false` to always/never go in detached mode.

// Theme
theme: {
mark: '#fff', // Color of the matching content
background: '#23263b', // Background Color of the input and the panel
selected: '#111432', // Background Color of the selected item
text: '#d6d6e7', // Color of the title of the items
colorSourceIcon: '#d6d6e7' // Color of the icon on the left of results
}
});
```

## Using multiple branches

If you've setup the plugin to index multiple branches using the `branches` plugin input, each configured branch has a dedicated index.
You'll also need to pass the information of which index you want to search in using the `branch` parameter of the integration.

To get access to the currently building branch, you can configure your build tool to forward the `HEAD` environment variable.
For instance, with [`webpack`'s environment plugin](https://webpack.js.org/plugins/environment-plugin/) configured to forward `HEAD`, you would pass `branch: process.env.HEAD`.

If you've configured your plugin to index only specific branches, you'll need to duplicate the logic here so that it picks the correct branch only when appropriate.
For instance, with `branches = ['main', 'develop', 'feat/*']`, and using webpack's environment plugin to inject `HEAD`, here's how the snippet could look like:

```js
const currentBranch = process.env.HEAD; // Injected by your build tool
let targetBranch = 'main';
if (currentBranch === 'develop' || currentBranch.startsWith('feat/')) {
targetBranch = currentBranch;
}
algoliasearchNetlify({
// ...
branch: targetBranch,
});
```

## Theme

You can theme the input and the autocomplete by using the `theme` property.

```js
// Example of dark theme:
{
theme: {
mark: '#fff',
background: '#23263b',
selected: '#111432',
text: '#d6d6e7',
colorSourceIcon: '#d6d6e7'
}
}
```

<img src="/docs/screenshots/frontend/dark-theme.png?raw=true" alt="Dark theme" width="500px">

To go further you should take a look at the [autocomplete.js documentation](https://algolia-autocomplete.netlify.app/), or implement your own search with [InstantSearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).
- [Install the plugin](https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/)
- [Plugin configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/plugin/)
- [Front-end configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/front-end/)

## Development & Release

Expand Down
56 changes: 6 additions & 50 deletions plugin/README.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,12 @@
# netlify-plugin-crawler

This plugin links your Netlify site with Algolia's Crawler.
This plugin links your Netlify site with Algolia's Crawler.
It will trigger a crawl on each successful build.

## Install the plugin
- [Install the plugin](https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/)
- [Plugin configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/plugin/)
- [Front-end configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/front-end/)

Read our full documentation [here](https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/)
## Development & Release

## Available parameters

### Inputs

Plugin inputs can be set in `netlify.toml`. They're all optional.

- `branches` - _Default: `['master', 'main']`_ - List of branches the crawler should build.
By default, we only build your main branch, but this can be used to build multiple branches.
Each of those will have a dedicated Algolia index, named `netlify_<site-id>_<branch-name>_all`.
You will need to [target the right branch](../frontend#using-multiple-branches) in your front-end code.
Accepts star patterns too, like so:
- `*`: matches all branches
- `feat/*`: matches all branches starting with `feat/`
- `*-bug`: matches all branches finishing with `-bug`
- `disabled` - _Default: `false`_ - Use to disable the plugin without removing it.
- `mainBranch` - The main project's branch. If set, it will be used to propagate your [Algolia index settings](https://www.algolia.com/doc/guides/managing-results/relevance-overview/#index-setting-and-query-parameters) modifications to other branches:
Settings of the Algolia index of your main branch will be used to create the new index when the plugin runs for the first time on a new branch.
- `pathPrefix` - The prefix of your website if it's not at the root level.
Putting "pathPrefix: /blog" will alias `/blog` to `/`
- `customDomain` - The custom domain that you use, if it's not possible to define it on your Netlify's settings.
Putting "customDomain: example.com" will alias `example.com` to `<your-site-url>.netlify.app`
- `renderJavaScript` - _Default: `false`_ If true, we will use JavaScript to render your website. Useful for Single Page Applications.
See the [documentation](https://www.algolia.com/doc/api-reference/crawler/configuration/render-java-script/) to understand the implication of this option.
- `template` - Used to modify the way we extract records and their schema. Supported templates: `'hierarchical'`.
More information on how the extraction works in the [dedicated extraction documentation](https://www.algolia.com/doc/tools/crawler/netlify-plugin/extraction-strategy/).

Example:

```toml
[[plugins]]
package = "@algolia/netlify-plugin-crawler"
[plugins.inputs]
branches = ['master', 'develop', 'feat/add-algolia']
disabled = true
pathPrefix = "/blog"
customDomain = "example.com"
renderJavaScript = true
```

### Environment variables

- `ALGOLIA_BASE_URL`: URL to target, usually <https://crawler.algolia.com/>.
Can be modified locally to target a local instance of the crawler (only for Algolia employees).
- `ALGOLIA_API_KEY`: [Optional in dev] API Key to authenticate the call to the crawler.
- `ALGOLIA_DISABLED`: [Optional] Set to `true` to disable the plugin without removing it.

For a local run, those need to be set in `.env` using `cp .env.example .env` and modifying the values to fit your needs.
See [CONTRIBUTING.md](./CONTRIBUTING.md).

0 comments on commit 78f8a4e

Please sign in to comment.