Skip to content

Algolia DocSearch Integration #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Apr 23, 2018
Merged

Algolia DocSearch Integration #201

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a010d64
feat: algolia search - basically migrated
ulivz Apr 21, 2018
330d6f0
fix: enhance style
ulivz Apr 21, 2018
8621a6c
chore: remove debug option
ulivz Apr 21, 2018
0758918
chore: add some comments
ulivz Apr 21, 2018
55826c5
Merge branch 'master' into algolia-docsearch
ulivz Apr 22, 2018
b1d2d26
Merge branch 'master' into algolia-docsearch
ulivz Apr 23, 2018
4769b7b
chore: clean up css
ulivz Apr 23, 2018
e1d6e88
chore: clean up
ulivz Apr 23, 2018
8177fc6
chore: clean up doc
ulivz Apr 23, 2018
7da0c2a
chore: clean up
ulivz Apr 23, 2018
2dffc4c
Update config.js
yyx990803 Apr 23, 2018
ed09b5f
style: limit the max width at mobile side
ulivz Apr 23, 2018
5c3ae19
Merge branch 'algolia-docsearch' of https://github.com/ulivz/vuepress…
ulivz Apr 23, 2018
702d676
feat: support algolia search per locale
ulivz Apr 23, 2018
ea8aa21
docs: document algolia option
ulivz Apr 23, 2018
a95aa89
docs: update i18n
ulivz Apr 23, 2018
88f7435
chore: address comments
ulivz Apr 23, 2018
c150f22
Update README.md
yyx990803 Apr 23, 2018
44adcd0
Update config.js
yyx990803 Apr 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions docs/.vuepress/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ module.exports = {
link: '/default-theme-config/'
}
],
algolia: {
appId: 'BH4D9OD16A',
apiKey: '85cc3221c9f23bfbaa4e3913dd7625ea',
indexName: 'vuejs',
algoliaOptions: { facetFilters: ["version:v2"] }
},
sidebar: {
'/guide/': genSidebarConfig('Guide')
}
Expand All @@ -55,6 +61,12 @@ module.exports = {
label: '简体中文',
selectText: '选择语言',
editLinkText: '在 GitHub 上编辑此页',
algolia: {
appId: 'BH4D9OD16A',
apiKey: '5638280abff9d207417bb03be05f0b25',
indexName: 'vuejs_cn2',
algoliaOptions: { facetFilters: ["version:v2"] }
},
nav: [
{
text: '指南',
Expand Down
32 changes: 22 additions & 10 deletions lib/default-theme/AlgoliaSearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
<template>
<form id="search-form" class="algolia-search-wrapper search-box">
<input id="algolia-search-input" class="search-query st-default-search-input">
<input id="algolia-search-input" class="search-query">
</form>
</template>

<script>
export default {
props: ['options'],
mounted () {
Promise.all([
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
]).then(([docsearch]) => {
docsearch = docsearch.default
docsearch(Object.assign(this.options, {
inputSelector: '#algolia-search-input'
}))
})
this.initialize()
},
methods: {
initialize () {
Promise.all([
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

现在的 webpack 配置会把所有 css 都抽取出来，即使用 dynamic import 也没用。这样的话不论用不用 algolia 都会加载这些 css。有一个办法是在 createBaseConfig 的时候如果用户没有使用 algolia 则直接把 AlgoliaSearchBox alias 到一个空 module, 这样可以彻底避免把这个组件打包进去。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

厉害了，我还没注意这个

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

哈哈哈哈哈，突然说中文 XD
莫名的可爱(●'◡'●)

]).then(([docsearch]) => {
docsearch = docsearch.default
docsearch(Object.assign(this.options, {
debug: true,
inputSelector: '#algolia-search-input'
}))
})
}
},
watch: {
options (newValue) {
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
this.initialize(newValue)
}
}
}
</script>
Expand Down
7 changes: 5 additions & 2 deletions lib/default-theme/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</span>
</router-link>
<div class="links">
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="$site.themeConfig.algolia"/>
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
<SearchBox v-if="isSearch"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be v-else-if="$site.themeConfig.search !== false" here

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以用 v-else-if="$site.themeConfig.search !== false"

<NavLinks class="can-hide"/>
</div>
Expand All @@ -28,8 +28,11 @@ import NavLinks from './NavLinks.vue'
export default {
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
computed: {
algolia () {
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
},
isAlgoliaSearch () {
const { algolia } = this.$site.themeConfig
const algolia = this.algolia
return algolia && algolia.appId && algolia.apiKey && algolia.indexName
},
isSearch() {
Expand Down