Merge #342

342: Upgrade playground r=bidoubiwa a=bidoubiwa

Upgrade playground:
- Remove old playground that had to be refreshed before for it to work 
- Add 2 new playgrounds, one with HTML build and one with JS build
- Updated readme and information about styling



Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: cvermand <[email protected]>

Author: bors[bot]

.github/dependabot.yml

@@ -15,3 +15,29 @@ updates:
       - dependency-name: "*eslint*"
       - dependency-name: "babel-eslint"
       - dependency-name: "*prettier*"
+- package-ecosystem: npm
+  directory: "/playground/javascript"
+  schedule:
+    interval: weekly
+    time: "04:00"
+  open-pull-requests-limit: 10
+  labels:
+  - skip-changelog
+  - dependencies
+  versioning-strategy: increase
+  rebase-strategy: disabled
+  ignore:
+      - dependency-name: "parcel-bundler"
+- package-ecosystem: npm
+  directory: "/playground/html"
+  schedule:
+    interval: weekly
+    time: "04:00"
+  open-pull-requests-limit: 10
+  labels:
+  - skip-changelog
+  - dependencies
+  versioning-strategy: increase
+  rebase-strategy: disabled
+  ignore:
+      - dependency-name: "parcel-bundler"

.gitignore

@@ -1,3 +1,126 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# misc
+.DS_Store
+
+# parcel
+.parcel_cache/
+
+############################
+# CYPRESS
+############################
+cypress/screenshots
+cypress/videos
+cypress/support
+cypress/plugins
+cypress/fixtures
+
+
+
+
 .DS_Store
 coverage/
 node_modules/

README.md

@@ -100,6 +100,25 @@ _Your documentation content is not indexed yet? Check out [this tutorial](https:
 **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
+
+`docs-searchbar.js` comes with a css template. It has to be added in your project in the following way:
+
+In an ES+ environment:
+
+```js
+import "docs-searchbar.js/dist/cdn/docs-searchbar.css";
+```
+
+In a `HTML` file, the `link` tag should be added in your header:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css"
+/>
+```
+
 ### Customization
 
 The default behavior of this library fits perfectly for a documentation search bar, but you might need some customizations.
@@ -169,7 +188,7 @@ docsSearchBar({
 
 ##### More Examples <!-- omit in toc -->
 
-Here is a basic [HTML file](scripts/playground.html) used in the playground of this repository.
+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.
 

package.json

@@ -13,13 +13,13 @@
     "build": "./scripts/build",
     "build:css": "./scripts/build-css",
     "build:js": "./scripts/build-js",
-    "doctoc": "doctoc --maxlevel 3 README.md",
     "format:scss": "prettier --write ./src/**/*.scss",
     "format:md": "prettier --write '**/*.md'",
+    "playground": "yarn --cwd ./playgrounds/html && yarn --cwd ./playgrounds/html serve",
+    "playground:js": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript serve",
     "lint": "eslint ./src ./*.js",
     "lint-fix": "eslint --fix ./src ./*.js",
     "prettier-ci": "prettier --check ./src/**/*.scss '**/*.md'",
-    "serve": "./scripts/serve",
     "test": "./scripts/test",
     "test:watch": "./scripts/test-watch"
   },

scripts/playground.html renamed to playgrounds/html/index.html

@@ -5,23 +5,20 @@
     <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="http://127.0.0.1:8080/docs-searchbar.min.css" />
+    <link rel="stylesheet" href="../../src/styles/main.scss" />
   </head>
   <body>
     <div class="container">
-      <div class="mt-1">
-        <h1>Assets are served from http://127.0.0.1:8080/ </h1>
-      </div>
       <div class="col-md-12">
         <div class="searchbox">
           <input type="search" placeholder="docs-searchbar input" class="form-control" id="q">
         </div>
       </div>
     </div>
     <!-- at the end of the BODY -->
-    <script src="http://127.0.0.1:8080/docs-searchbar.js"></script>
+    <script src="../../index.js"></script>
     <script>
-      docsSearchBar({
+      docsSearchBar.default({
         // Test with MeiliSearch Documentation
         hostUrl: 'https://docs-search-bar.meilisearch.com',
         apiKey: 'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',

playgrounds/html/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "docs-searchbar-playground",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "serve": "parcel serve index.html --global docsSearchBar --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "parcel-bundler": "^1.12.5"
+  }
+}