This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(snippet): add a Snippet component
Closes: #52
- Loading branch information
Showing
4 changed files
with
104 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
Vue InstantSearch Snippet | ||
--- | ||
|
||
A functional component that helps you safely display snippeted attributes of your search results. | ||
|
||
This component leverages the [snippeting feature of Algolia](https://www.algolia.com/doc/faq/searching/what-is-attributes-to-snippet-how-does-it-work/#faq-section) | ||
but adds some sugar on top of it to prevent XSS attacks. | ||
|
||
This component will override the following settings of your index at query time: | ||
- highlightPreTag | ||
- highlightPostTag | ||
|
||
You will then be able to choose your custom highlighting tag on a per component basis for a given snippet. | ||
|
||
## Usage | ||
|
||
Basic usage: | ||
|
||
```html | ||
<ais-snippet :result="result" attribute-name="description"></ais-snippet> | ||
``` | ||
|
||
Changing the highlighting tag: | ||
|
||
```html | ||
<ais-snippet :result="result" attribute-name="description" tag-name="mark"></ais-snippet> | ||
``` | ||
|
||
**Note that the tag name has to be passed without carets.** | ||
|
||
## CSS Classes | ||
|
||
| ClassName | Description | | ||
|-----------------------|-------------------| | ||
| ais-snippet | Container class | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"name": "vue-instantsearch-snippet", | ||
"version": "0.0.0", | ||
"files": [ | ||
"dist" | ||
], | ||
"main": "dist/vue-instantsearch-snippet.common.js", | ||
"module": "dist/vue-instantsearch-snippet.esm.js", | ||
"jsnext:main": "dist/vue-instantsearch-snippet.esm.js", | ||
"unpkg": "dist/vue-instantsearch-snippet.js", | ||
"scripts": { | ||
"build": "yarn build:umd && yarn build:es && yarn build:cjs", | ||
"build:umd": "rollup -c ../../build/rollup.umd.config.js", | ||
"build:es": "rollup -c ../../build/rollup.es.config.js", | ||
"build:cjs": "rollup -c ../../build/rollup.cjs.config.js" | ||
}, | ||
"dependencies": { | ||
"escape-html": "^1.0.3", | ||
"instantsearch-store": "*", | ||
"vue-instantsearch-component": "*" | ||
}, | ||
"peerDependencies": { | ||
"vue": "^2.2.2" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<script> | ||
import {HIGHLIGHT_PRE_TAG, HIGHLIGHT_POST_TAG} from 'instantsearch-store' | ||
import escapeHtml from 'escape-html' | ||
export default { | ||
functional: true, | ||
props: { | ||
result: { | ||
type: Object, | ||
required: true | ||
}, | ||
attributeName: { | ||
type: String, | ||
required: true | ||
}, | ||
tagName: { | ||
type: String, | ||
default: 'em' | ||
} | ||
}, | ||
render (h, ctx) { | ||
const result = ctx.props.result | ||
const attributeName = ctx.props.attributeName | ||
const tagName = ctx.props.tagName | ||
if (!result._snippetResult || !result._snippetResult[attributeName]) { | ||
throw new Error(`Attribute ${attributeName} has no snippet.`) | ||
} | ||
return h('span', { | ||
'class': { | ||
'ais-snippet': true | ||
}, | ||
domProps: { | ||
innerHTML: escapeHtml(result._snippetResult[attributeName].value) | ||
.replace(HIGHLIGHT_PRE_TAG, `<${tagName}>`) | ||
.replace(HIGHLIGHT_POST_TAG, `</${tagName}>`) | ||
} | ||
} | ||
) | ||
} | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export {default} from './Snippet.vue' |