@algolia/algoliasearch-netlify-frontend - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

package.json

 {
   "name": "@algolia/algoliasearch-netlify-frontend",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": false,
@@ -21,27 +21,27 @@ "author": "Algolia Team <[e-mail]>",
   "devDependencies": {
-    "@algolia/autocomplete-js": "1.0.0-alpha.45",
-    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.45",
-    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.45",
-    "@algolia/transporter": "4.8.6",
-    "@babel/core": "7.13.15",
-    "@babel/preset-env": "7.13.15",
-    "@types/react": "17.0.3",
-    "algoliasearch": "4.8.6",
+    "@algolia/autocomplete-js": "1.2.1",
+    "@algolia/autocomplete-preset-algolia": "1.2.1",
+    "@algolia/autocomplete-theme-classic": "1.2.1",
+    "@algolia/transporter": "4.10.3",
+    "@babel/core": "7.14.6",
+    "@babel/preset-env": "7.14.7",
+    "@types/react": "17.0.14",
+    "algoliasearch": "4.10.3",
     "babel-loader": "8.2.2",
     "clean-webpack-plugin": "3.0.0",
-    "core-js": "3.10.1",
-    "css-loader": "5.2.0",
-    "fork-ts-checker-webpack-plugin": "6.2.1",
-    "mini-css-extract-plugin": "1.4.0",
+    "core-js": "3.15.2",
+    "css-loader": "5.2.6",
+    "fork-ts-checker-webpack-plugin": "6.2.12",
+    "mini-css-extract-plugin": "1.6.2",
     "mustache": "4.2.0",
-    "node-sass": "5.0.0",
-    "postcss": "8.2.10",
-    "postcss-loader": "4.2.0",
+    "node-sass": "6.0.1",
+    "postcss": "8.3.5",
+    "postcss-loader": "4.3.0",
     "postcss-preset-env": "6.7.0",
-    "preact": "10.5.13",
-    "sass-loader": "10.1.1",
+    "preact": "10.5.14",
+    "sass-loader": "10.2.0",
     "terser-webpack-plugin": "4.2.3",
-    "ts-loader": "8.1.0",
+    "ts-loader": "8.3.0",
     "webpack": "4.46.0",
-    "webpack-cli": "4.6.0",
+    "webpack-cli": "4.7.2",
     "webpack-dev-server": "3.11.2"
@@ -48,0 +48,0 @@ },

README.md

 # algoliasearch-netlify-frontend
 
 `algoliasearch-netlify-frontend` is the front-end bundle we recommend to use with our Netlify plugin.
-It's designed to be compatible with the index structure extracted by the [plugin](../plugin).
-It **creates a new search input** in your website with an autocomplete menu providing search as you type results.
 
-## Usage
+- [Install the plugin](https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/)
+- [Plugin configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/plugin/)
+- [Front-end configuration](https://www.algolia.com/doc/tools/crawler/netlify-plugin/front-end/)
 
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
-<script type="text/javascript">
-  algoliasearchNetlify({
-    appId: '<YOUR_ALGOLIA_APP_ID>',
-    apiKey: '<YOUR_ALGOLIA_API_KEY>',
-    siteId: '<YOUR_NETLIFY_SITE_ID>',
-    branch: '<YOUR_TARGET_GIT_BRANCH>',
-    selector: 'div#search',
-  });
-</script>
-```
-
-<p align="center">
-  <img src="/docs/screenshots/frontend/normal-theme.png?raw=true" alt="Frontend plugin light theme" width="600px">
-</p>
-
-## Available options
-
-Here's the full list of options with their default value.
-
-```js
-algoliasearchNetlify({
-  // Mandatory
-  appId: '<YOUR_ALGOLIA_APP_ID>',                 // Application ID (Can be found in https://www.algolia.com/api-keys)
-  apiKey: '<YOUR_ALGOLIA_API_KEY>',               // Search api key (Can be found in https://www.algolia.com/api-keys)
-  siteId: '<YOUR_NETLIFY_SITE_ID>',               // Netlify Site ID (Can be found in https://crawler.algolia.com/admin/netlify)
-  branch: '<YOUR_TARGET_GIT_BRANCH>',             // Target git branch, either a fixed one (e.g. 'master') or a dynamic one using `process.env.HEAD`. See "Using Multiple branches" in this doc.
-  selector: 'div#search',                         // Where the autocomplete will be spawned (should not be an input)
-
-  // Optional
-  analytics: true,                                // Enable search analytics
-  hitsPerPage: 5,                                 // Amount of results to display
-  placeholder: 'Search...',                       // Input placeholder
-  openOnFocus: true,                              // Open search panel with default search, when focusing input
-  detached: { mediaQuery: '(max-width: 500px)' }, // Determine when the search popup should open in detached mode (full screen, modal experience). Can be set to `true` or `false` to always/never go in detached mode.
-
-  // Theme
-  theme: {
-    mark: '#fff',                                 // Color of the matching content
-    background: '#23263b',                        // Background Color of the input and the panel
-    selected: '#111432',                          // Background Color of the selected item
-    text: '#d6d6e7',                              // Color of the title of the items
-    colorSourceIcon: '#d6d6e7'                    // Color of the icon on the left of results
-  }
-});
-```
-
-## Using multiple branches
-
-If you've setup the plugin to index multiple branches using the `branches` plugin input, each configured branch has a dedicated index.
-You'll also need to pass the information of which index you want to search in using the `branch` parameter of the integration.
-
-To get access to the currently building branch, you can configure your build tool to forward the `HEAD` environment variable.
-For instance, with [`webpack`'s environment plugin](https://webpack.js.org/plugins/environment-plugin/) configured to forward `HEAD`, you would pass `branch: process.env.HEAD`.
-
-If you've configured your plugin to index only specific branches, you'll need to duplicate the logic here so that it picks the correct branch only when appropriate.
-For instance, with `branches = ['main', 'develop', 'feat/*']`, and using webpack's environment plugin to inject `HEAD`, here's how the snippet could look like:
-
-```js
-const currentBranch = process.env.HEAD; // Injected by your build tool
-let targetBranch = 'main';
-if (currentBranch === 'develop' || currentBranch.startsWith('feat/')) {
-  targetBranch = currentBranch;
-}
-algoliasearchNetlify({
-  // ...
-  branch: targetBranch,
-});
-```
-
-## Theme
-
-You can theme the input and the autocomplete by using the `theme` property.
-
-```js
-// Example of dark theme:
-{
-  theme: {
-    mark: '#fff',
-    background: '#23263b',
-    selected: '#111432',
-    text: '#d6d6e7',
-    colorSourceIcon: '#d6d6e7'
-  }
-}
-```
-
-<img src="/docs/screenshots/frontend/dark-theme.png?raw=true" alt="Dark theme" width="500px">
-
-To go further you should take a look at the [autocomplete.js documentation](https://algolia-autocomplete.netlify.app/), or implement your own search with [InstantSearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).
-
 ## Development & Release
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

513549

increased by7.39%

Lines of code

565

increased by6%

Worsened metrics

Number of lines in readme file

12

decreased by-88.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes