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 <30866152+mdubus@users.noreply.github.com>

* Replace logo

* Update instant-meilisearch

Co-authored-by: Morgane Dubus <30866152+mdubus@users.noreply.github.com>

src/numbered-pagination/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "standard",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    },
+    "ignorePatterns": [ "**/setup/*.js"]
+}

src/numbered-pagination/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/numbered-pagination/README.md

@@ -0,0 +1,103 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/meilisearch/integration-guides/master/assets/logos/logo.svg" alt="Meilisearch" width="200" height="200" />
+</p>
+<h1 align="center">Meilisearch matching strategy demo</h1>
+
+<h4 align="center">
+  <a href="https://github.com/meilisearch/MeiliSearch">MeiliSearch</a> |
+  <a href="https://docs.meilisearch.com">Documentation</a> |
+  <a href="https://www.meilisearch.com">Website</a> |
+  <a href="https://blog.meilisearch.com">Blog</a> |
+  <a href="https://twitter.com/meilisearch">Twitter</a> |
+  <a href="https://docs.meilisearch.com/faq">FAQ</a>
+</h4>
+
+<p align="center">
+  <a href="https://github.com/meilisearch/MeiliSearch/discussions" alt="Discussions"><img src="https://img.shields.io/badge/github-discussions-red" /></a>
+</p>
+
+## Requirements
+
+ - [yarn](https://yarnpkg.com/)
+ - [Docker](https://docs.docker.com/get-docker/)
+
+## Demo
+
+This demo showcases Meilisearch's v0.30 new pagination mode: numbered pagination.
+
+v0.30 introduces a numbered pagination mode for users who need pagination interfaces.
+
+You can find more information about this pagination mode in [our documentation](https://docs.meilisearch.com/learn/advanced/pagination.html#numbered-page-selectors)
+
+If you want to replicate this demo using your own Meilisearch instance, you have to follow these steps:
+
+### 1. Download and launch Meilisearch
+
+[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.
+
+```bash
+
+# Fetch the latest version of Meilisearch image from DockerHub
+docker pull getmeili/meilisearch:v0.30
+
+# Launch Meilisearch in development mode with a master key
+docker run -it --rm \
+    -p 7700:7700 \
+    -e MEILI_MASTER_KEY='MASTER_KEY'\
+    -v $(pwd)/meili_data:/meili_data \
+    getmeili/meilisearch:v0.30 \
+    meilisearch --env="development"
+```
+
+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).
+
+
+### 2. Set your credentials
+
+Set the credentials of the Meilisearch instance as environment variables. 
+```
+VITE_MEILI_HOST="<yourMeilisearchInstanceAddress>"
+VITE_MEILI_SEARCH_API_KEY="<yourMeilisearchSearchAPIKey>"
+VITE_MEILI_ADMIN_API_KEY="<yourMeilisearchAdminAPIKey>"
+```
+
+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).
+
+### 3. Install the dependencies
+
+```bash
+
+yarn
+
+```
+
+### 4. Run the setup
+
+```bash
+
+yarn setup
+
+```
+
+This does the following:
+
+- Creates an index called `movies` in your Meilisearch instance.
+
+- Adds documents to the index
+
+
+### 5. Run the project
+
+You can now run the project. The front-end client is now communicating with your Meilisearch instance.
+
+```bash
+
+yarn dev
+
+```
+
+ Visit `http://localhost:5173` in your browser and start searching with Meilisearch!
+
+<hr>
+
+**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

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/meilisearch.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
+  />
+    <title>Meilisearch demo: numbered pagination</title>
+    <script src="https://thrilling-thirtyeight.meilisearch.com/script.js" data-site="QNBPJXIV" defer></script>
+  </head>
+  <body>
+    <div class="ais-InstantSearch">
+      <div class="search-header">
+        <div class=" central-width">
+          <div class="search-header-content">
+            <div id="logo"></div>
+          <div id="searchbox" class="ais-SearchBox"></div>
+        </div>
+        </div>
+      </div>
+      <div class="main-container">
+        <div class="central-width">
+          <div id="configure" class="heading info align-with-results">
+            <div id="left-info">
+              <h1 class="title title-l">Numbered pagination</h1>
+              <p class="body body-l mt-2">
+                This demo presents <a href="https://docs.meilisearch.com/learn/advanced/pagination.html#numbered-page-selectors">numbered pagination</a> in
+                action.
+              </p>
+            </div>
+            <div id="right-info">
+              <div id="hits-per-page"></div>
+            </div>
+          </div>
+          <div id="stats"></div>
+          <div id="hits"></div>
+          <div id="pagination"></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="src/main.js"></script>
+  </body>
+</html>

src/numbered-pagination/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "numbered-pagination",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "setup": "node setup/setupMeili.js",
+    "lint": "eslint --ext .js .",
+    "lint:fix": "eslint --ext .js . --fix"
+  },
+  "devDependencies": {
+    "eslint": "^8.0.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "vite": "^3.2.3"
+  },
+  "dependencies": {
+    "@meilisearch/instant-meilisearch": "0.10.0",
+    "dotenv": "^16.0.3",
+    "instantsearch.js": "^4.49.1"
+  }
+}