Skip to content

Commit eaff4da

Browse files
curquizacurquiza
committed
First version (beta)
1 parent 6ec20eb commit eaff4da

File tree

6 files changed

+977
-0
lines changed

6 files changed

+977
-0
lines changed

‎.editorconfig‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# This file is for unifying the coding style for different editors and IDEs
2+
# editorconfig.org
3+
4+
root = true
5+
6+
[*]
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[**.{js,vue,css,scss,html}]
13+
indent_style = space
14+
indent_size = 2

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎MeiliSearchBox.vue‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<form
3+
id="search-form"
4+
class="meilisearch-search-wrapper search-box"
5+
role="search"
6+
>
7+
<input
8+
id="meilisearch-search-input"
9+
class="search-query"
10+
:placeholder="placeholder"
11+
/>
12+
</form>
13+
</template>
14+
15+
<script>
16+
console.log('In meilisearch component')
17+
console.log(HOST_URL)
18+
console.log(API_KEY)
19+
console.log(INDEX_UID)
20+
export default {
21+
name: "MeiliSearchBox",
22+
data() {
23+
return {
24+
placeholder: undefined,
25+
};
26+
},
27+
watch: {
28+
options(newValue) {
29+
this.update(newValue);
30+
},
31+
},
32+
mounted() {
33+
let options = {
34+
hostUrl: HOST_URL,
35+
apiKey: API_KEY,
36+
indexUid: INDEX_UID
37+
}
38+
this.initialize(options);
39+
this.placeholder = this.$site.themeConfig.searchPlaceholder || "";
40+
},
41+
42+
methods: {
43+
initialize(userOptions) {
44+
Promise.all([
45+
import(
46+
/* webpackChunkName: "docs-searchbar" */ "docs-searchbar.js/dist/cdn/docs-searchbar.min.js"
47+
),
48+
import(
49+
/* webpackChunkName: "docs-searchbar" */ "docs-searchbar.js/dist/cdn/docs-searchbar.min.css"
50+
),
51+
]).then(([docsSearchBar]) => {
52+
docsSearchBar = docsSearchBar.default;
53+
const input = Object.assign({}, userOptions, {
54+
inputSelector: "#meilisearch-search-input",
55+
meilisearchOptions: { cropLength: 40 },
56+
handleSelected: (input, event, suggestion) => {
57+
const { pathname, hash } = new URL(suggestion.url);
58+
const routepath = pathname.replace(this.$site.base, "/");
59+
this.$router.push(`${routepath}${hash}`);
60+
},
61+
});
62+
docsSearchBar(input);
63+
});
64+
},
65+
66+
update(options) {
67+
this.$el.innerHTML =
68+
'<input id="meilisearch-search-input" class="search-query">';
69+
this.initialize(options);
70+
},
71+
},
72+
};
73+
</script>
74+
75+
<style lang="stylus">
76+
.meilisearch-search-wrapper
77+
& > span
78+
vertical-align middle
79+
.meilisearch-autocomplete
80+
line-height 2
81+
.docs-searchbar-suggestion--highlight
82+
color darken($accentColor, 20%)
83+
.docs-searchbar-suggestion
84+
border-color $borderColor
85+
.docs-searchbar-suggestion--category-header
86+
background #f1f3f5
87+
padding 5px 10px
88+
border-radius 4px
89+
background lighten($accentColor, 20%)
90+
font-weight 600
91+
color #fff
92+
.docs-searchbar-suggestion--highlight
93+
background rgba(255, 255, 255, 0.6)
94+
box-shadow none
95+
.docs-searchbar-suggestion--wrapper
96+
padding 0
97+
.docs-searchbar-suggestion--title
98+
margin-bottom 0
99+
color $textColor
100+
.docs-searchbar-suggestion--subcategory-column
101+
border-color $borderColor
102+
.docs-searchbar-suggestion--subcategory-column-text
103+
color #555
104+
.docs-searchbar-suggestion--text
105+
.docs-searchbar-suggestion--highlight
106+
box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
107+
.docs-searchbar-footer
108+
display flex !important
109+
justify-content space-between !important
110+
align-items center !important
111+
.docs-searchbar-footer-logo
112+
margin-bottom -4px
113+
.dsb-cursor .docs-searchbar-suggestion--content
114+
background-color #e7edf3 !important
115+
color $textColor
116+
117+
@media (min-width: $MQMobile)
118+
.meilisearch-search-wrapper
119+
.meilisearch-autocomplete
120+
.docs-searchbar-suggestion
121+
.docs-searchbar-suggestion--subcategory-column
122+
float none
123+
width 150px
124+
min-width 150px
125+
display table-cell
126+
.docs-searchbar-suggestion--content
127+
float none
128+
display table-cell
129+
width 100%
130+
vertical-align top
131+
.dsb-dropdown-menu
132+
min-width 515px !important
133+
134+
@media (max-width: $MQMobile)
135+
.meilisearch-search-wrapper
136+
.dsb-dropdown-menu
137+
min-width calc(100vw - 4rem) !important
138+
max-width calc(100vw - 4rem) !important
139+
.docs-searchbar-suggestion--wrapper
140+
padding 5px 7px 5px 5px !important
141+
.docs-searchbar-suggestion--subcategory-column
142+
padding 0 !important
143+
background white !important
144+
.docs-searchbar-suggestion--subcategory-column-text:after
145+
content " > "
146+
font-size 10px
147+
line-height 14.4px
148+
display inline-block
149+
width 5px
150+
margin -3px 3px 0
151+
vertical-align middle
152+
</style>

‎index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const path = require('path')
2+
3+
module.exports = (options) => {
4+
console.log('Vuepress-meilisearch-plugin is starting...');
5+
console.log(options)
6+
// console.log(__dirname)
7+
// console.log(path)
8+
return {
9+
alias: {
10+
'@SearchBox': path.resolve(__dirname, 'MeiliSearchBox.vue')
11+
},
12+
define: {
13+
HOST_URL: options.hostUrl || null,
14+
API_KEY: options.apiKey || null,
15+
INDEX_UID: options.indexUid || null
16+
// crop
17+
// max suggestion
18+
// keyshots
19+
}
20+
}
21+
}

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "vuepress-plugin-meilisearch",
3+
"version": "0.0.1",
4+
"description": "Relevant and typo tolerant search bar for your Vuepress",
5+
"main": "index.js",
6+
"repository": "git@github.com:meilisearch/vuepress-plugin-meilisearch.git",
7+
"author": "Clementine Urquizar <clementine@meilisearch.com>",
8+
"license": "MIT",
9+
"dependencies": {
10+
"docs-searchbar.js": "^1.1.1"
11+
}
12+
}

0 commit comments

Comments
 (0)