Skip to content

Commit b46bf65

Browse files
CaroFGmdubus
CaroFG
and
mdubus
authored
Add pagination demo (#146)
* Add numbered pagination project * Add hits per page selection * Restyle heading container * Update link * Add dotenv * Add meilisearch setup * Correct heading * Correct docs URL * Add README * Add linter * Fix linter errors * Update src/numbered-pagination/README.md Co-authored-by: Morgane Dubus <[email protected]> * Replace logo * Update instant-meilisearch Co-authored-by: Morgane Dubus <[email protected]>
1 parent c2e22ed commit b46bf65

File tree

14 files changed

+34085
-0
lines changed

14 files changed

+34085
-0
lines changed

‎src/numbered-pagination/.eslintrc.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": "standard",
7+
"overrides": [
8+
],
9+
"parserOptions": {
10+
"ecmaVersion": "latest",
11+
"sourceType": "module"
12+
},
13+
"rules": {
14+
},
15+
"ignorePatterns": [ "**/setup/*.js"]
16+
}

‎src/numbered-pagination/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎src/numbered-pagination/README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<p align="center">
2+
<img src="https://raw.githubusercontent.com/meilisearch/integration-guides/master/assets/logos/logo.svg" alt="Meilisearch" width="200" height="200" />
3+
</p>
4+
<h1 align="center">Meilisearch matching strategy demo</h1>
5+
6+
<h4 align="center">
7+
<a href="https://github.com/meilisearch/MeiliSearch">MeiliSearch</a> |
8+
<a href="https://docs.meilisearch.com">Documentation</a> |
9+
<a href="https://www.meilisearch.com">Website</a> |
10+
<a href="https://blog.meilisearch.com">Blog</a> |
11+
<a href="https://twitter.com/meilisearch">Twitter</a> |
12+
<a href="https://docs.meilisearch.com/faq">FAQ</a>
13+
</h4>
14+
15+
<p align="center">
16+
<a href="https://github.com/meilisearch/MeiliSearch/discussions" alt="Discussions"><img src="https://img.shields.io/badge/github-discussions-red" /></a>
17+
</p>
18+
19+
## Requirements
20+
21+
- [yarn](https://yarnpkg.com/)
22+
- [Docker](https://docs.docker.com/get-docker/)
23+
24+
## Demo
25+
26+
This demo showcases Meilisearch's v0.30 new pagination mode: numbered pagination.
27+
28+
v0.30 introduces a numbered pagination mode for users who need pagination interfaces.
29+
30+
You can find more information about this pagination mode in [our documentation](https://docs.meilisearch.com/learn/advanced/pagination.html#numbered-page-selectors)
31+
32+
If you want to replicate this demo using your own Meilisearch instance, you have to follow these steps:
33+
34+
### 1. Download and launch Meilisearch
35+
36+
[Download and launch Meilisearch](https://docs.meilisearch.com/learn/getting_started/quick_start.html) using the basic configuration. For example, by using [Docker](https://docs.docker.com/get-docker/) in your terminal.
37+
38+
```bash
39+
40+
# Fetch the latest version of Meilisearch image from DockerHub
41+
docker pull getmeili/meilisearch:v0.30
42+
43+
# Launch Meilisearch in development mode with a master key
44+
docker run -it --rm \
45+
-p 7700:7700 \
46+
-e MEILI_MASTER_KEY='MASTER_KEY'\
47+
-v $(pwd)/meili_data:/meili_data \
48+
getmeili/meilisearch:v0.30 \
49+
meilisearch --env="development"
50+
```
51+
52+
There are many other easy ways to [download and run a Meilisearch instance](https://docs.meilisearch.com/learn/getting_started/quick_start.html#download-and-launch).
53+
54+
55+
### 2. Set your credentials
56+
57+
Set the credentials of the Meilisearch instance as environment variables.
58+
```
59+
VITE_MEILI_HOST="<yourMeilisearchInstanceAddress>"
60+
VITE_MEILI_SEARCH_API_KEY="<yourMeilisearchSearchAPIKey>"
61+
VITE_MEILI_ADMIN_API_KEY="<yourMeilisearchAdminAPIKey>"
62+
```
63+
64+
You can learn more about master and API keys in [the dedicated section of our documentation](https://docs.meilisearch.com/learn/security/master_api_keys.html).
65+
66+
### 3. Install the dependencies
67+
68+
```bash
69+
70+
yarn
71+
72+
```
73+
74+
### 4. Run the setup
75+
76+
```bash
77+
78+
yarn setup
79+
80+
```
81+
82+
This does the following:
83+
84+
- Creates an index called `movies` in your Meilisearch instance.
85+
86+
- Adds documents to the index
87+
88+
89+
### 5. Run the project
90+
91+
You can now run the project. The front-end client is now communicating with your Meilisearch instance.
92+
93+
```bash
94+
95+
yarn dev
96+
97+
```
98+
99+
Visit `http://localhost:5173` in your browser and start searching with Meilisearch!
100+
101+
<hr>
102+
103+
**Meilisearch** provides and maintains many **SDKs and Integration tools** like the ones used in this project. 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.

‎src/numbered-pagination/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/meilisearch.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
10+
/>
11+
<title>Meilisearch demo: numbered pagination</title>
12+
<script src="https://thrilling-thirtyeight.meilisearch.com/script.js" data-site="QNBPJXIV" defer></script>
13+
</head>
14+
<body>
15+
<div class="ais-InstantSearch">
16+
<div class="search-header">
17+
<div class=" central-width">
18+
<div class="search-header-content">
19+
<div id="logo"></div>
20+
<div id="searchbox" class="ais-SearchBox"></div>
21+
</div>
22+
</div>
23+
</div>
24+
<div class="main-container">
25+
<div class="central-width">
26+
<div id="configure" class="heading info align-with-results">
27+
<div id="left-info">
28+
<h1 class="title title-l">Numbered pagination</h1>
29+
<p class="body body-l mt-2">
30+
This demo presents <a href="https://docs.meilisearch.com/learn/advanced/pagination.html#numbered-page-selectors">numbered pagination</a> in
31+
action.
32+
</p>
33+
</div>
34+
<div id="right-info">
35+
<div id="hits-per-page"></div>
36+
</div>
37+
</div>
38+
<div id="stats"></div>
39+
<div id="hits"></div>
40+
<div id="pagination"></div>
41+
</div>
42+
</div>
43+
</div>
44+
<script type="module" src="src/main.js"></script>
45+
</body>
46+
</html>

‎src/numbered-pagination/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "numbered-pagination",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"setup": "node setup/setupMeili.js",
11+
"lint": "eslint --ext .js .",
12+
"lint:fix": "eslint --ext .js . --fix"
13+
},
14+
"devDependencies": {
15+
"eslint": "^8.0.1",
16+
"eslint-config-standard": "^17.0.0",
17+
"eslint-plugin-import": "^2.25.2",
18+
"eslint-plugin-n": "^15.0.0",
19+
"eslint-plugin-promise": "^6.0.0",
20+
"vite": "^3.2.3"
21+
},
22+
"dependencies": {
23+
"@meilisearch/instant-meilisearch": "0.10.0",
24+
"dotenv": "^16.0.3",
25+
"instantsearch.js": "^4.49.1"
26+
}
27+
}

‎src/numbered-pagination/public/meili_logo.svg

Lines changed: 30 additions & 0 deletions
Loading

‎src/numbered-pagination/public/meilisearch-logomark.svg

Lines changed: 19 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)