Skip to content

Commit 1fb0408

Browse files
bidoubiwabidoubiwa
committed
Update playground
1 parent 2b63809 commit 1fb0408

File tree

10 files changed

+10810
-1
lines changed

10 files changed

+10810
-1
lines changed

‎.github/dependabot.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,16 @@ updates:
1515
- dependency-name: "*eslint*"
1616
- dependency-name: "babel-eslint"
1717
- dependency-name: "*prettier*"
18+
- package-ecosystem: npm
19+
directory: "/playground"
20+
schedule:
21+
interval: weekly
22+
time: "04:00"
23+
open-pull-requests-limit: 10
24+
labels:
25+
- skip-changelog
26+
- dependencies
27+
versioning-strategy: increase
28+
rebase-strategy: disabled
29+
ignore:
30+
- dependency-name: "parcel-bundler"

‎README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,23 @@ _Your documentation content is not indexed yet? Check out [this tutorial](https:
100100
**WARNING: We recommend providing the MeiliSearch public key, which is enough to perform search requests.<br>
101101
Read more about [MeiliSearch authentication](https://docs.meilisearch.com/reference/features/authentication.html).**
102102

103+
#### Styling
104+
105+
To import the provided CSS styling in your project, depending on your environment you should add the following:
106+
107+
ES+ environment
108+
```js
109+
import 'docs-searchbar.js/dist/cdn/docs-searchbar.css'
110+
```
111+
112+
`HTML` in your header
113+
```html
114+
<link
115+
rel="stylesheet"
116+
href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css"
117+
/>
118+
```
119+
103120
### Customization
104121

105122
The default behavior of this library fits perfectly for a documentation search bar, but you might need some customizations.
@@ -169,7 +186,7 @@ docsSearchBar({
169186

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

172-
Here is a basic [HTML file](scripts/playground.html) used in the playground of this repository.
189+
Here is a basic [HTML file](playground/index.html) used in the playground of this repository.
173190

174191
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.
175192

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"build:js": "./scripts/build-js",
1616
"format:scss": "prettier --write ./src/**/*.scss",
1717
"format:md": "prettier --write '**/*.md'",
18+
"playground": "yarn --cwd ./playgrounds/html && yarn --cwd ./playgrounds/html serve",
19+
"playground:js": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript serve",
1820
"lint": "eslint ./src ./*.js",
1921
"lint-fix": "eslint --fix ./src ./*.js",
2022
"prettier-ci": "prettier --check ./src/**/*.scss '**/*.md'",

‎playgrounds/html/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="color-scheme" content="dark light" />
6+
<title>Docs SearchBar playground</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
8+
<link rel="stylesheet" href="../../src/styles/main.scss" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="col-md-12">
13+
<div class="searchbox">
14+
<input type="search" placeholder="docs-searchbar input" class="form-control" id="q">
15+
</div>
16+
</div>
17+
</div>
18+
<!-- at the end of the BODY -->
19+
<script src="../../index.js"></script>
20+
<script>
21+
docsSearchBar.default({
22+
// Test with MeiliSearch Documentation
23+
hostUrl: 'https://docs-search-bar.meilisearch.com',
24+
apiKey: 'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
25+
indexUid: 'docs',
26+
inputSelector: '#q',
27+
handleSelected(input, event, suggestion, datasetNumber, context) {
28+
console.info(input);
29+
console.info(event);
30+
console.info(suggestion);
31+
console.info(datasetNumber);
32+
console.info(context);
33+
},
34+
debug: true // Set debug to true if you want to inspect the dropdown
35+
});
36+
</script>
37+
<style>
38+
.container {
39+
margin: 10%;
40+
}
41+
42+
.searchbox {
43+
width: 60%;
44+
margin: auto;
45+
margin-top: 10%;
46+
display: block;
47+
}
48+
49+
.searchbox input {
50+
height: 34px;
51+
border-radius: 4px;
52+
font-size: 14px;
53+
padding: 6px 12px;
54+
}
55+
56+
@media (prefers-color-scheme: dark) {
57+
body {
58+
background-color: #152028;
59+
color: #eaeaea;
60+
}
61+
}
62+
</style>
63+
</body>
64+
</html>

‎playgrounds/html/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "docs-searchbar-playground",
3+
"version": "0.1.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"serve": "parcel serve index.html --global docsSearchBar --open"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"@babel/core": "^7.14.3",
13+
"parcel-bundler": "^1.12.5"
14+
}
15+
}

0 commit comments

Comments
 (0)