Skip to content

Commit

Permalink
feat: Algolia DocSearch Integration (#201)
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz authored and yyx990803 committed Apr 23, 2018
1 parent 07a5987 commit 2f0da01
Show file tree
Hide file tree
Showing 14 changed files with 311 additions and 10 deletions.
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ https://vuepress.vuejs.org/

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

- Algolia DocSearch Integration
- Blogging support

Contributions are welcome!
Expand Down
18 changes: 18 additions & 0 deletions docs/config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,24 @@ The `serviceWorker` option only handles the service worker. To make your site fu
Also, only enable this if you are able to deploy your site with SSL, since service worker can only be registered under HTTPs URLs.
:::

### algolia

- Type: `Object`
- Default: `undefined`

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`:

```js
module.exports = {
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
}
}
```

For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).

### locales

- Type: `{ [path: string]: Object }`
Expand Down
1 change: 0 additions & 1 deletion docs/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m

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

- Algolia DocSearch Integration
- Blogging support

Contributions are welcome!
Expand Down
3 changes: 3 additions & 0 deletions docs/guide/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ module.exports = {
label: 'English',
// text for the edit-on-github link
editLinkText: 'Edit this page on GitHub',
// algolia docsearch options for current locale
algolia: {},
nav: [
{ text: 'Nested', link: '/nested/' }
],
Expand All @@ -71,6 +73,7 @@ module.exports = {
nav: [
{ text: '嵌套', link: '/zh/nested/' }
],
algolia: {},
sidebar: {
'/zh/': [/* ... */],
'/zh/nested/': [/* ... */]
Expand Down
18 changes: 18 additions & 0 deletions docs/zh/config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,24 @@ module.exports = {
当然,仅仅只在你的网站部署后能用 SSL 的时候开启它,因为 service worker 只能在 HTTPs 的链接下注册。
:::

### algolia

- 类型: `Object`
- 默认值: `undefined`

使用 `algolia` 选项可以让你用 [algolia docsearch](https://github.com/algolia/docsearch) 取代默认的基于 headers 的搜索 。为了使其生效,你必须提供至少 `apiKey``indexName` 这两个选项:

```js
module.exports = {
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
}
}
```

其他可用的选项请参考 [docsearch options](https://github.com/algolia/docsearch#docsearch-options)

### locales

- 类型: `{ [path: string]: Object }`
Expand Down
1 change: 0 additions & 1 deletion docs/zh/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静

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

- Algolia DocSearch 的集成
- 博客系统

我们欢迎你为 VuePress 的开发作出贡献。
Expand Down
3 changes: 3 additions & 0 deletions docs/zh/guide/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ module.exports = {
selectText: 'Languages',
label: 'English',
editLinkText: 'Edit this page on GitHub',
algolia: {},
nav: [
{ text: 'Nested', link: '/nested/' }
],
Expand All @@ -68,6 +69,8 @@ module.exports = {
label: '简体中文',
// 编辑链接文字
editLinkText: '在 GitHub 上编辑此页',
// 当前 locale 的 algolia docsearch 选项
algolia: {},
nav: [
{ text: '嵌套', link: '/zh/nested/' }
],
Expand Down
131 changes: 131 additions & 0 deletions lib/default-theme/AlgoliaSearchBox.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<form id="search-form" class="algolia-search-wrapper search-box">
<input id="algolia-search-input" class="search-query">
</form>
</template>

<script>
export default {
props: ['options'],
mounted () {
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')
]).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>

<style lang="stylus">
@import './styles/config.styl'
.algolia-search-wrapper
& > span
vertical-align middle
.algolia-autocomplete
line-height normal
.ds-dropdown-menu
background-color #fff
border 1px solid #999
border-radius 4px
font-size 16px
margin 6px 0 0
padding 4px
text-align left
&:before
border-color #999
[class*=ds-dataset-]
border none
padding 0
.ds-suggestions
margin-top 0
.ds-suggestion
border-bottom 1px solid $borderColor
.algolia-docsearch-suggestion--highlight
color #2c815b
.algolia-docsearch-suggestion
border-color $borderColor
padding 0
.algolia-docsearch-suggestion--category-header
padding 5px 10px
margin-top 0
background $accentColor
color #fff
font-weight 600
.algolia-docsearch-suggestion--highlight
background rgba(255, 255, 255, 0.6)
.algolia-docsearch-suggestion--wrapper
padding 0
.algolia-docsearch-suggestion--title
font-weight 600
margin-bottom 0
color $textColor
.algolia-docsearch-suggestion--subcategory-column
vertical-align top
padding 5px 7px 5px 5px
border-color $borderColor
background #f1f3f5
&:after
display none
.algolia-docsearch-suggestion--subcategory-column-text
color #555
.algolia-docsearch-footer
border-color $borderColor
.ds-cursor .algolia-docsearch-suggestion--content
background-color #e7edf3 !important
color $textColor
@media (min-width: $MQMobile)
.algolia-search-wrapper
.algolia-autocomplete
.algolia-docsearch-suggestion
.algolia-docsearch-suggestion--subcategory-column
float none
width 150px
min-width 150px
display table-cell
.algolia-docsearch-suggestion--content
float none
display table-cell
width 100%
vertical-align top
.ds-dropdown-menu
min-width 515px !important
@media (max-width: $MQMobile)
.algolia-search-wrapper
.ds-dropdown-menu
min-width calc(100vw - 4rem) !important
max-width calc(100vw - 4rem) !important
.algolia-docsearch-suggestion--wrapper
padding 5px 7px 5px 5px !important
.algolia-docsearch-suggestion--subcategory-column
padding 0 !important
background white !important
.algolia-docsearch-suggestion--subcategory-column-text:after
content " > "
font-size 10px
line-height 14.4px
display inline-block
width 5px
margin -3px 3px 0
vertical-align middle
</style>
15 changes: 13 additions & 2 deletions lib/default-theme/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,30 @@
</span>
</router-link>
<div class="links">
<SearchBox v-if="$site.themeConfig.search !== false"/>
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
<SearchBox v-else-if="$site.themeConfig.search !== false"/>
<NavLinks class="can-hide"/>
</div>
</header>
</template>

<script>
import SidebarButton from './SidebarButton.vue'
import AlgoliaSearchBox from '@AlgoliaSearchBox'
import SearchBox from './SearchBox.vue'
import NavLinks from './NavLinks.vue'
export default {
components: { SidebarButton, NavLinks, SearchBox }
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
computed: {
algolia () {
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
},
isAlgoliaSearch () {
const algolia = this.algolia
return algolia && algolia.apiKey && algolia.indexName
}
}
}
</script>

Expand Down
1 change: 1 addition & 0 deletions lib/noop.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = {}
8 changes: 8 additions & 0 deletions lib/prepare.js
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,13 @@ async function resolveOptions (sourceDir) {
!fs.existsSync(path.resolve(vuepressDir, 'theme'))
)

// resolve algolia
const isAlgoliaSearch = (
siteConfig.algolia ||
Object.keys(siteConfig.locales && siteConfig.themeConfig && siteConfig.themeConfig.locales || {})
.some(base => siteConfig.themeConfig.locales[base].algolia)
)

const options = {
siteConfig,
sourceDir,
Expand All @@ -123,6 +130,7 @@ async function resolveOptions (sourceDir) {
themePath: null,
notFoundPath: null,
useDefaultTheme,
isAlgoliaSearch,
markdown: createMarkdown(siteConfig)
}

Expand Down
4 changes: 4 additions & 0 deletions lib/webpack/createBaseConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = function createBaseConfig ({
publicPath,
themePath,
notFoundPath,
isAlgoliaSearch,
markdown
}, { debug } = {}, isServer) {
const Config = require('webpack-chain')
Expand Down Expand Up @@ -39,6 +40,9 @@ module.exports = function createBaseConfig ({
.set('@source', sourceDir)
.set('@app', path.resolve(__dirname, '../app'))
.set('@temp', path.resolve(__dirname, '../app/.temp'))
.set('@AlgoliaSearchBox', isAlgoliaSearch
? path.resolve(__dirname, '../default-theme/AlgoliaSearchBox.vue')
: path.resolve(__dirname, '../noop.js'))
.end()
.extensions
.merge(['.js', '.jsx', '.vue', '.json'])
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"diacritics": "^1.3.0",
"docsearch.js": "^2.5.2",
"es6-promise": "^4.2.4",
"escape-html": "^1.0.3",
"file-loader": "^1.1.11",
Expand Down
Loading

0 comments on commit 2f0da01

Please sign in to comment.