Skip to content

Changes related to the rebranding #533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 27, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ If applicable, add screenshots or logs to help explain your problem.
**Environment (please complete the following information):**

- OS: [e.g. Debian GNU/Linux]
- MeiliSearch version: [e.g. v.0.20.0]
- Meilisearch version: [e.g. v.0.20.0]
- docs-searchbar.js version: [e.g v1.1.11]
- Browser: [e.g. Chrome version 90.0]
12 changes: 6 additions & 6 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Contributing <!-- omit in TOC -->

First of all, thank you for contributing to MeiliSearch! The goal of this document is to provide everything you need to know in order to contribute to MeiliSearch and its different integrations.
First of all, thank you for contributing to Meilisearch! The goal of this document is to provide everything you need to know in order to contribute to Meilisearch and its different integrations.

- [Assumptions](#assumptions)
- [How to Contribute](#how-to-contribute)
Expand All @@ -11,8 +11,8 @@ First of all, thank you for contributing to MeiliSearch! The goal of this docume
## Assumptions

1. **You're familiar with [GitHub](https://github.com) and the [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests)(PR) workflow.**
2. **You've read the MeiliSearch [documentation](https://docs.meilisearch.com) and the [README](/README.md).**
3. **You know about the [MeiliSearch community](https://docs.meilisearch.com/learn/what_is_meilisearch/contact.html). Please use this for help.**
2. **You've read the Meilisearch [documentation](https://docs.meilisearch.com) and the [README](/README.md).**
3. **You know about the [Meilisearch community](https://docs.meilisearch.com/learn/what_is_meilisearch/contact.html). Please use this for help.**

## How to Contribute

Expand Down Expand Up @@ -64,10 +64,10 @@ yarn format:scss

## Playground

We provide a playground in this repository that hot-reloads on change. The playground points to a remote MeiliSearch server that contains the scraped [documentation of MeiliSearch](https://docs.meilisearch.com/).
We provide a playground in this repository that hot-reloads on change. The playground points to a remote Meilisearch server that contains the scraped [documentation of Meilisearch](https://docs.meilisearch.com/).
You can play arround with the options and or just try out the search.

For example, type `create an indxe` to experience MeiliSearch [typo tolerance](https://docs.meilisearch.com/reference/under_the_hood/typotolerance.html).
For example, type `create an indxe` to experience Meilisearch [typo tolerance](https://docs.meilisearch.com/reference/under_the_hood/typotolerance.html).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is on purpose to showcase the typo tolerancy 😊


To launch and open the playground:

Expand Down Expand Up @@ -116,7 +116,7 @@ Some notes on GitHub PRs:

## Release Process (for internal team only)

MeiliSearch tools follow the [Semantic Versioning Convention](https://semver.org/).
Meilisearch tools follow the [Semantic Versioning Convention](https://semver.org/).

### Automation to Rebase and Merge the PRs <!-- omit in TOC -->

Expand Down
50 changes: 25 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<p align="center">
<img src="assets/logo.svg" alt="MeiliSearch" width="200" height="200" />
<img src="https://github.com/meilisearch/integration-guides/blob/main/assets/logos/logo.svg" alt="Meilisearch" width="200" height="200" />
</p>

<h1 align="center">docs-searchbar.js</h1>

<h4 align="center">
<a href="https://github.com/meilisearch/MeiliSearch">MeiliSearch</a> |
<a href="https://github.com/meilisearch/meilisearch">Meilisearch</a> |
<a href="https://docs.meilisearch.com">Documentation</a> |
<a href="https://slack.meilisearch.com">Slack</a> |
<a href="https://roadmap.meilisearch.com/tabs/1-under-consideration">Roadmap</a> |
Expand All @@ -20,20 +20,20 @@
<a href="https://app.bors.tech/repositories/28906"><img src="https://bors.tech/images/badge_small.svg" alt="Bors enabled"></a>
</p>

**docs-searchbar.js** is a front-end SDK for **MeiliSearch** to handle your search bar documentation.
**docs-searchbar.js** is a front-end SDK for **Meilisearch** to handle your search bar documentation.

**MeiliSearch** is an open-source search engine. [Discover what MeiliSearch is!](https://github.com/meilisearch/MeiliSearch)
**Meilisearch** is an open-source search engine. [Discover what Meilisearch is!](https://github.com/meilisearch/meilisearch)

![docs-searchbar.js example](/assets/docs-searchbar-example.png)

💡 If you use VuePress for your website, you should check out our [VuePress plugin for MeiliSearch](https://github.com/meilisearch/vuepress-plugin-meilisearch).
💡 If you use VuePress for your website, you should check out our [VuePress plugin for Meilisearch](https://github.com/meilisearch/vuepress-plugin-meilisearch).

## Table of Contents <!-- omit in toc -->

- [🔧 Installation](#-installation)
- [🎬 Getting Started](#-getting-started)
- [🎨 Customization](#customization)
- [🤖 Compatibility with MeiliSearch](#compatibility-with-meilisearch)
- [🤖 Compatibility with Meilisearch](#compatibility-with-meilisearch)
- [⚙️ Development Workflow and Contributing](#development-workflow-and-contributing)
- [🥇 Credits](#credits)

Expand All @@ -57,25 +57,25 @@ Add the following script into your `HTML` file:
<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
```

### 🏃‍♀️ Run MeiliSearch <!-- omit in toc -->
### 🏃‍♀️ Run Meilisearch <!-- omit in toc -->

There are many easy ways to [download and run a MeiliSearch instance](https://docs.meilisearch.com/reference/features/installation.html#download-and-launch).
There are many easy ways to [download and run a Meilisearch instance](https://docs.meilisearch.com/reference/features/installation.html#download-and-launch).

For example, using the `curl` command in [your Terminal](https://itconnect.uw.edu/learn/workshops/online-tutorials/web-publishing/what-is-a-terminal/):

```bash
# Install MeiliSearch
# Install Meilisearch
curl -L https://install.meilisearch.com | sh

# Launch MeiliSearch
# Launch Meilisearch
./meilisearch --master-key=masterKey
```

NB: you can also download MeiliSearch from **Homebrew** or **APT** or even run it using **Docker**.
NB: you can also download Meilisearch from **Homebrew** or **APT** or even run it using **Docker**.

### Index your data <!-- omit in toc -->

The goal of this library is to provide a front-end search bar into your own documentation. To make that possible, you need to gather your website content in advance, and index it in a MeiliSearch instance.
The goal of this library is to provide a front-end search bar into your own documentation. To make that possible, you need to gather your website content in advance, and index it in a Meilisearch instance.

Luckily, we provide all the tools that you need, and can help you through the whole process, if you follow [this guide](https://docs.meilisearch.com/create/how_to/search_bar_for_docs.html) 🚀

Expand All @@ -85,7 +85,7 @@ Note: If you want to try out `docs-searchbar.js` as a first introduction, [try o

We recommend using the [`docs-scraper` tool](https://github.com/meilisearch/docs-scraper) to scrape your website, but this is not mandatory.

If you already have your own scraper but you still want to use MeiliSearch and `docs-searchbar.js`, check out [this discussion](https://github.com/meilisearch/docs-searchbar.js/issues/40).
If you already have your own scraper but you still want to use Meilisearch and `docs-searchbar.js`, check out [this discussion](https://github.com/meilisearch/docs-searchbar.js/issues/40).


### Getting Started
Expand Down Expand Up @@ -139,14 +139,14 @@ Add the following code to one of your `HTML` files.
</html>
```

The `hostUrl` and the `apiKey` (_optional_) fields are the credentials of your MeiliSearch instance.<br>
`indexUid` is the index identifier in your MeiliSearch instance in which your website content is stored.<br>
The `hostUrl` and the `apiKey` (_optional_) fields are the credentials of your Meilisearch instance.<br>
`indexUid` is the index identifier in your Meilisearch instance in which your website content is stored.<br>
`inputSelector` is the `id` attribute of the HTML search input tag.

_Your documentation content is not indexed yet? Check out [this tutorial](https://docs.meilisearch.com/create/how_to/search_bar_for_docs.html)._

**WARNING: We recommend providing the MeiliSearch public key, which is enough to perform search requests.<br>
Read more about [MeiliSearch authentication](https://docs.meilisearch.com/reference/features/authentication.html).**
**WARNING: We recommend providing the Meilisearch public key, which is enough to perform search requests.<br>
Read more about [Meilisearch authentication](https://docs.meilisearch.com/reference/features/authentication.html).**

### Styling

Expand Down Expand Up @@ -180,11 +180,11 @@ When calling the `docsSearchBar` method, you can add optional fields:

#### `queryHook` <!-- omit in toc -->

`queryHook` takes a callback function as value. This function will be called on every keystroke to transform the typed keywords before querying MeiliSearch. By default, it does not do anything, but it is the perfect place for you to add some preprocessing or custom functionality.
`queryHook` takes a callback function as value. This function will be called on every keystroke to transform the typed keywords before querying Meilisearch. By default, it does not do anything, but it is the perfect place for you to add some preprocessing or custom functionality.

#### `transformData` <!-- omit in toc -->

`transformData` takes a callback function as value. This function will be called on every hit before displaying them. By default, it does not do anything, but it lets you add any post-processing around the data you received from MeiliSearch.
`transformData` takes a callback function as value. This function will be called on every hit before displaying them. By default, it does not do anything, but it lets you add any post-processing around the data you received from Meilisearch.

#### `handleSelected` <!-- omit in toc -->

Expand Down Expand Up @@ -222,7 +222,7 @@ The function is called with the following arguments:

#### `meilisearchOptions` <!-- omit in toc -->

You can forward search parameters to the MeiliSearch API by using the `meilisearchOptions` key. Checkout out the [MeiliSearch documentation about search parameters](https://docs.meilisearch.com/reference/features/search_parameters.html#search-parameters).
You can forward search parameters to the Meilisearch API by using the `meilisearchOptions` key. Checkout out the [Meilisearch documentation about search parameters](https://docs.meilisearch.com/reference/features/search_parameters.html#search-parameters).

For example, you might want to increase the number of results displayed in the dropdown:

Expand Down Expand Up @@ -274,7 +274,7 @@ docsSearchBar({

Here is a basic [HTML file](playground/index.html) used in the playground of this repository.

As a more concrete example, you can [check out the configuration](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/bf2210e131eb5630f632d514f35710ee6576ec7a/MeiliSearchBox.vue#L64) applied in the MeiliSearch plugin for VuePress.
As a more concrete example, you can [check out the configuration](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/main/MeiliSearchBox.vue#L60) applied in the Meilisearch plugin for VuePress.

#### Styling <!-- omit in toc -->

Expand Down Expand Up @@ -317,11 +317,11 @@ As a more concrete example, you can [check out the configuration](https://github

##### More Examples <!-- omit in toc -->

Here is the [CSS customization](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/bf2210e131eb5630f632d514f35710ee6576ec7a/MeiliSearchBox.vue#L77-L177) applied in the MeiliSearch plugin for VuePress.
Here is the [CSS customization](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/main/MeiliSearchBox.vue#L82) applied in the Meilisearch plugin for VuePress.

## 🤖 Compatibility with MeiliSearch
## 🤖 Compatibility with Meilisearch

This package only guarantees the compatibility with the [version v0.24.0 of MeiliSearch](https://github.com/meilisearch/MeiliSearch/releases/tag/v0.24.0).
This package only guarantees the compatibility with the [version v0.24.0 of Meilisearch](https://github.com/meilisearch/meilisearch/releases/tag/v0.24.0).

## ⚙️ Development Workflow and Contributing

Expand All @@ -336,4 +336,4 @@ Due to a lot of future changes in this repository compared to the original one,

<hr>

**MeiliSearch** provides and maintains many **SDKs and Integration tools** like this one. We want to provide everyone with an **amazing search experience for any kind of project**. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the [integration-guides](https://github.com/meilisearch/integration-guides) repository.
**Meilisearch** provides and maintains many **SDKs and Integration tools** like this one. We want to provide everyone with an **amazing search experience for any kind of project**. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the [integration-guides](https://github.com/meilisearch/integration-guides) repository.
17 changes: 0 additions & 17 deletions assets/logo.svg

This file was deleted.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "docs-searchbar.js",
"version": "2.0.1",
"description": "Add a relevant search bar to your documentation using MeiliSearch",
"description": "Add a relevant search bar to your documentation using Meilisearch",
"keywords": [
"documentation",
"searchbar",
Expand All @@ -28,7 +28,7 @@
"files": [
"dist/"
],
"author": "MeiliSearch <[email protected]> (https://github.com/meilisearch/)",
"author": "Meilisearch <[email protected]> (https://github.com/meilisearch/)",
"license": "MIT",
"repository": "meilisearch/docs-searchbar.js",
"devDependencies": {
Expand Down
123 changes: 59 additions & 64 deletions playgrounds/html/index.html
Original file line number Diff line number Diff line change
@@ -1,72 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
<title>Docs SearchBar playground</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="../../src/styles/main.scss" />
</head>
<body>
<div class="container">
<div class="col-md-12">
<input
type="search"
placeholder="docs-searchbar input"
class="form-control"
id="q"
/>
</div>

<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
<title>Docs SearchBar playground</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../src/styles/main.scss" />
</head>

<body>
<div class="container">
<div class="col-md-12">
<input type="search" placeholder="docs-searchbar input" class="form-control" id="q" />
</div>
<!-- at the end of the BODY -->
<script src="../../index.js"></script>
<script>
docsSearchBar.default({
// Test with MeiliSearch Documentation
hostUrl: 'https://docs-search-bar.meilisearch.com',
apiKey:
'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
indexUid: 'docs',
inputSelector: '#q',
handleSelected(input, event, suggestion, datasetNumber, context) {
console.info(input)
console.info(event)
console.info(suggestion)
console.info(datasetNumber)
console.info(context)
},
debug: true, // Set debug to true if you want to inspect the dropdown
enhancedSearchInput: true,
enableDarkMode: true
})
</script>
<style>
.container {
margin: 10%;
}
</div>
<!-- at the end of the BODY -->
<script src="../../index.js"></script>
<script>
docsSearchBar.default({
// Test with Meilisearch Documentation
hostUrl: 'https://docs-search-bar.meilisearch.com',
apiKey:
'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
indexUid: 'docs',
inputSelector: '#q',
handleSelected(input, event, suggestion, datasetNumber, context) {
console.info(input)
console.info(event)
console.info(suggestion)
console.info(datasetNumber)
console.info(context)
},
debug: true, // Set debug to true if you want to inspect the dropdown
enhancedSearchInput: true,
enableDarkMode: true
})
</script>
<style>
.container {
margin: 10%;
}

div [data-ds-theme] .searchbox {
width: 60%;
margin: auto;
margin-top: 10%;
display: block;
}
div [data-ds-theme] .searchbox {
width: 60%;
margin: auto;
margin-top: 10%;
display: block;
}

div [data-ds-theme] .searchbox input {
height: 34px;
border-radius: 4px;
font-size: 14px;
}
div [data-ds-theme] .searchbox input {
height: 34px;
border-radius: 4px;
font-size: 14px;
}

@media (prefers-color-scheme: dark) {
body {
background-color: #152028;
color: #eaeaea;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #152028;
color: #eaeaea;
}
</style>
</body>
}
</style>
</body>

</html>
2 changes: 1 addition & 1 deletion playgrounds/javascript/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import docsSearchBar from '../../../index'
import '../../../src/styles/main.scss'

docsSearchBar({
// Test with MeiliSearch Documentation
// Test with Meilisearch Documentation
hostUrl: 'https://docs-search-bar.meilisearch.com',
apiKey: 'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
indexUid: 'docs',
Expand Down
Loading