svelte-algolia - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

package.json

@@ -5,3 +5,3 @@ {
   "author": "Janosh Riebesell <[e-mail]>",
-  "homepage": "https://github.com/janosh/svelte-algolia#readme",
+  "homepage": "https://svelte-algolia.netlify.app",
   "repository": "https://github.com/janosh/svelte-algolia",
@@ -12,3 +12,3 @@ "bugs": {
   "license": "MIT",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
@@ -30,4 +30,6 @@ "svelte": "src/Search.svelte",
   ],
+  "dependencies": {
+    "algoliasearch": "^4.9.1"
+  },
   "devDependencies": {
-    "algoliasearch": "^4.9.1",
     "ava": "^3.15.0",
@@ -34,0 +36,0 @@ "svelte": "^3.38.2"

readme.md

@@ -23,3 +23,3 @@ <p align="center">
 
-Install with `yarn` or `(p)npm`
+Install with `yarn`
 
@@ -30,2 +30,4 @@ ```sh
 
+or `(p)npm`
+
 ```sh
@@ -168,2 +170,45 @@ npm i -D svelte-algolia
 
+#### Styling
+
+`Search.svelte` offers the following CSS variables that can be [passed in directly as props](https://github.com/sveltejs/rfcs/pull/13):
+
+- `var(--iconColor)`
+- `var(--headingColor)`
+- `var(--inputBg)`
+- `var(--inputColor)`
+- `var(--hitsBgColor, white)`
+- `var(--hitsShadow, 0 0 2pt black)`
+
+For example:
+
+```svelte
+<Search
+  indices={{ Pages: SearchHit, Posts: SearchHit }}
+  {appId} {searchKey}
+  --hitsBgColor="var(--bodyBg)"
+  --inputColor="var(--textColor)"
+  --iconColor="var(--linkColor)" />
+```
+
+The top level element is an `aside` with class `svelte-algolia`. So you can also style the entire DOM tree below it by defining global styles like
+
+```css
+:global(aside.svelte-algolia input button svg) {
+  /* this would target the search icon */
+}
+:global(aside.svelte-algolia div.results section h2) {
+  /* this would target the heading shown above the list of results for each index */
+}
+```
+
+## Examples
+
+Some sites using `svelte-algolia` in production:
+
+- [`studenten-bilden-schueler.de`](https://studenten-bilden-schueler.de) [[code](https://github.com/sbsev/svelte-site)]
+- [`afara.foundation`](https://afara.foundation) [[code](https://github.com/janosh/afara)]
+- [`ocean-artup.eu`](https://ocean-artup.eu) [[code](https://github.com/janosh/ocean-artup)]
+
+Using `svelte-algolia` yourself? [Submit a PR](https://github.com/janosh/svelte-algolia/pulls) to add your site here!
+
 ## Want to contribute?
@@ -178,3 +223,3 @@
 cd svelte-algolia/site
-sed -i '' 's/name: `Pokedex`/name: `Pokedex Clone`/' site/svelte.config.js
+sed -i.bak 's/name: `Pokedex`/name: `Pokedex Clone`/' site/svelte.config.js
 yarn
@@ -181,0 +226,0 @@ yarn dev

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

No website

Quality

Package does not have a website.

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

106604

increased by1.42%

Dev dependency count

2

decreased by-33.33%

Number of lines in readme file

226

increased by24.86%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedalgoliasearch@^4.9.1

• + Added@algolia/cache-browser-local-storage@4.24.0(transitive)

• + Added@algolia/cache-common@4.24.0(transitive)

• + Added@algolia/cache-in-memory@4.24.0(transitive)

• + Added@algolia/client-account@4.24.0(transitive)

• + Added@algolia/client-analytics@4.24.0(transitive)

• + Added@algolia/client-common@4.24.0(transitive)

• + Added@algolia/client-personalization@4.24.0(transitive)

• + Added@algolia/client-search@4.24.0(transitive)

• + Added@algolia/logger-common@4.24.0(transitive)

• + Added@algolia/logger-console@4.24.0(transitive)

• + Added@algolia/recommend@4.24.0(transitive)

• + Added@algolia/requester-browser-xhr@4.24.0(transitive)

• + Added@algolia/requester-common@4.24.0(transitive)

• + Added@algolia/requester-node-http@4.24.0(transitive)

• + Added@algolia/transporter@4.24.0(transitive)

• + Addedalgoliasearch@4.24.0(transitive)