Skip to content

Commit 2f0da01

Browse files
ulivzyyx990803
ulivz
authored and
yyx990803
committed
feat: Algolia DocSearch Integration (#201)
1 parent 07a5987 commit 2f0da01

14 files changed

+311
-10
lines changed

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ https://vuepress.vuejs.org/
2929

3030
VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
3131

32-
- Algolia DocSearch Integration
3332
- Blogging support
3433

3534
Contributions are welcome!

‎docs/config/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,24 @@ The `serviceWorker` option only handles the service worker. To make your site fu
9898
Also, only enable this if you are able to deploy your site with SSL, since service worker can only be registered under HTTPs URLs.
9999
:::
100100

101+
### algolia
102+
103+
- Type: `Object`
104+
- Default: `undefined`
105+
106+
The `algolia` option allows you to use [algolia docsearch](https://github.com/algolia/docsearch) to replace the simple built-in search. To enable it, you need to provide at least `apiKey` and `indexName`:
107+
108+
```js
109+
module.exports = {
110+
algolia: {
111+
apiKey: '<API_KEY>',
112+
indexName: '<INDEX_NAME>'
113+
}
114+
}
115+
```
116+
117+
For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).
118+
101119
### locales
102120

103121
- Type: `{ [path: string]: Object }`

‎docs/guide/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m
3131

3232
VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
3333

34-
- Algolia DocSearch Integration
3534
- Blogging support
3635

3736
Contributions are welcome!

‎docs/guide/i18n.md

+3
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ module.exports = {
5656
label: 'English',
5757
// text for the edit-on-github link
5858
editLinkText: 'Edit this page on GitHub',
59+
// algolia docsearch options for current locale
60+
algolia: {},
5961
nav: [
6062
{ text: 'Nested', link: '/nested/' }
6163
],
@@ -71,6 +73,7 @@ module.exports = {
7173
nav: [
7274
{ text: '嵌套', link: '/zh/nested/' }
7375
],
76+
algolia: {},
7477
sidebar: {
7578
'/zh/': [/* ... */],
7679
'/zh/nested/': [/* ... */]

‎docs/zh/config/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,24 @@ module.exports = {
9797
当然，仅仅只在你的网站部署后能用 SSL 的时候开启它，因为 service worker 只能在 HTTPs 的链接下注册。
9898
:::
9999

100+
### algolia
101+
102+
- 类型: `Object`
103+
- 默认值: `undefined`
104+
105+
使用 `algolia` 选项可以让你用 [algolia docsearch](https://github.com/algolia/docsearch) 取代默认的基于 headers 的搜索 。为了使其生效，你必须提供至少 `apiKey` 和 `indexName` 这两个选项：
106+
107+
```js
108+
module.exports = {
109+
algolia: {
110+
apiKey: '<API_KEY>',
111+
indexName: '<INDEX_NAME>'
112+
}
113+
}
114+
```
115+
116+
其他可用的选项请参考 [docsearch options](https://github.com/algolia/docsearch#docsearch-options)。
117+
100118
### locales
101119

102120
- 类型: `{ [path: string]: Object }`

‎docs/zh/guide/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静
2929

3030
VuePress 仍然处于开发中，这里有一些目前还不支持、但已经在计划中的特性：
3131

32-
- Algolia DocSearch 的集成
3332
- 博客系统
3433

3534
我们欢迎你为 VuePress 的开发作出贡献。

‎docs/zh/guide/i18n.md

+3
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ module.exports = {
5353
selectText: 'Languages',
5454
label: 'English',
5555
editLinkText: 'Edit this page on GitHub',
56+
algolia: {},
5657
nav: [
5758
{ text: 'Nested', link: '/nested/' }
5859
],
@@ -68,6 +69,8 @@ module.exports = {
6869
label: '简体中文',
6970
// 编辑链接文字
7071
editLinkText: '在 GitHub 上编辑此页',
72+
// 当前 locale 的 algolia docsearch 选项
73+
algolia: {},
7174
nav: [
7275
{ text: '嵌套', link: '/zh/nested/' }
7376
],

‎lib/default-theme/AlgoliaSearchBox.vue

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<template>
2+
<form id="search-form" class="algolia-search-wrapper search-box">
3+
<input id="algolia-search-input" class="search-query">
4+
</form>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: ['options'],
10+
mounted () {
11+
this.initialize()
12+
},
13+
methods: {
14+
initialize () {
15+
Promise.all([
16+
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
17+
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
18+
]).then(([docsearch]) => {
19+
docsearch = docsearch.default
20+
docsearch(Object.assign(this.options, {
21+
debug: true,
22+
inputSelector: '#algolia-search-input'
23+
}))
24+
})
25+
}
26+
},
27+
watch: {
28+
options (newValue) {
29+
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
30+
this.initialize(newValue)
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style lang="stylus">
37+
@import './styles/config.styl'
38+
39+
.algolia-search-wrapper
40+
& > span
41+
vertical-align middle
42+
.algolia-autocomplete
43+
line-height normal
44+
.ds-dropdown-menu
45+
background-color #fff
46+
border 1px solid #999
47+
border-radius 4px
48+
font-size 16px
49+
margin 6px 0 0
50+
padding 4px
51+
text-align left
52+
&:before
53+
border-color #999
54+
[class*=ds-dataset-]
55+
border none
56+
padding 0
57+
.ds-suggestions
58+
margin-top 0
59+
.ds-suggestion
60+
border-bottom 1px solid $borderColor
61+
.algolia-docsearch-suggestion--highlight
62+
color #2c815b
63+
.algolia-docsearch-suggestion
64+
border-color $borderColor
65+
padding 0
66+
.algolia-docsearch-suggestion--category-header
67+
padding 5px 10px
68+
margin-top 0
69+
background $accentColor
70+
color #fff
71+
font-weight 600
72+
.algolia-docsearch-suggestion--highlight
73+
background rgba(255, 255, 255, 0.6)
74+
.algolia-docsearch-suggestion--wrapper
75+
padding 0
76+
.algolia-docsearch-suggestion--title
77+
font-weight 600
78+
margin-bottom 0
79+
color $textColor
80+
.algolia-docsearch-suggestion--subcategory-column
81+
vertical-align top
82+
padding 5px 7px 5px 5px
83+
border-color $borderColor
84+
background #f1f3f5
85+
&:after
86+
display none
87+
.algolia-docsearch-suggestion--subcategory-column-text
88+
color #555
89+
.algolia-docsearch-footer
90+
border-color $borderColor
91+
.ds-cursor .algolia-docsearch-suggestion--content
92+
background-color #e7edf3 !important
93+
color $textColor
94+
95+
@media (min-width: $MQMobile)
96+
.algolia-search-wrapper
97+
.algolia-autocomplete
98+
.algolia-docsearch-suggestion
99+
.algolia-docsearch-suggestion--subcategory-column
100+
float none
101+
width 150px
102+
min-width 150px
103+
display table-cell
104+
.algolia-docsearch-suggestion--content
105+
float none
106+
display table-cell
107+
width 100%
108+
vertical-align top
109+
.ds-dropdown-menu
110+
min-width 515px !important
111+
112+
@media (max-width: $MQMobile)
113+
.algolia-search-wrapper
114+
.ds-dropdown-menu
115+
min-width calc(100vw - 4rem) !important
116+
max-width calc(100vw - 4rem) !important
117+
.algolia-docsearch-suggestion--wrapper
118+
padding 5px 7px 5px 5px !important
119+
.algolia-docsearch-suggestion--subcategory-column
120+
padding 0 !important
121+
background white !important
122+
.algolia-docsearch-suggestion--subcategory-column-text:after
123+
content " > "
124+
font-size 10px
125+
line-height 14.4px
126+
display inline-block
127+
width 5px
128+
margin -3px 3px 0
129+
vertical-align middle
130+
131+
</style>

‎lib/default-theme/Navbar.vue

+13-2
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,30 @@
1212
</span>
1313
</router-link>
1414
<div class="links">
15-
<SearchBox v-if="$site.themeConfig.search !== false"/>
15+
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
16+
<SearchBox v-else-if="$site.themeConfig.search !== false"/>
1617
<NavLinks class="can-hide"/>
1718
</div>
1819
</header>
1920
</template>
2021

2122
<script>
2223
import SidebarButton from './SidebarButton.vue'
24+
import AlgoliaSearchBox from '@AlgoliaSearchBox'
2325
import SearchBox from './SearchBox.vue'
2426
import NavLinks from './NavLinks.vue'
2527
2628
export default {
27-
components: { SidebarButton, NavLinks, SearchBox }
29+
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
30+
computed: {
31+
algolia () {
32+
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
33+
},
34+
isAlgoliaSearch () {
35+
const algolia = this.algolia
36+
return algolia && algolia.apiKey && algolia.indexName
37+
}
38+
}
2839
}
2940
</script>
3041

‎lib/noop.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {}

‎lib/prepare.js

+8
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,13 @@ async function resolveOptions (sourceDir) {
111111
!fs.existsSync(path.resolve(vuepressDir, 'theme'))
112112
)
113113

114+
// resolve algolia
115+
const isAlgoliaSearch = (
116+
siteConfig.algolia ||
117+
Object.keys(siteConfig.locales && siteConfig.themeConfig && siteConfig.themeConfig.locales || {})
118+
.some(base => siteConfig.themeConfig.locales[base].algolia)
119+
)
120+
114121
const options = {
115122
siteConfig,
116123
sourceDir,
@@ -123,6 +130,7 @@ async function resolveOptions (sourceDir) {
123130
themePath: null,
124131
notFoundPath: null,
125132
useDefaultTheme,
133+
isAlgoliaSearch,
126134
markdown: createMarkdown(siteConfig)
127135
}
128136

‎lib/webpack/createBaseConfig.js

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = function createBaseConfig ({
77
publicPath,
88
themePath,
99
notFoundPath,
10+
isAlgoliaSearch,
1011
markdown
1112
}, { debug } = {}, isServer) {
1213
const Config = require('webpack-chain')
@@ -39,6 +40,9 @@ module.exports = function createBaseConfig ({
3940
.set('@source', sourceDir)
4041
.set('@app', path.resolve(__dirname, '../app'))
4142
.set('@temp', path.resolve(__dirname, '../app/.temp'))
43+
.set('@AlgoliaSearchBox', isAlgoliaSearch
44+
? path.resolve(__dirname, '../default-theme/AlgoliaSearchBox.vue')
45+
: path.resolve(__dirname, '../noop.js'))
4246
.end()
4347
.extensions
4448
.merge(['.js', '.jsx', '.vue', '.json'])

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"copy-webpack-plugin": "^4.5.1",
5252
"css-loader": "^0.28.11",
5353
"diacritics": "^1.3.0",
54+
"docsearch.js": "^2.5.2",
5455
"es6-promise": "^4.2.4",
5556
"escape-html": "^1.0.3",
5657
"file-loader": "^1.1.11",

0 commit comments

Comments
 (0)