Algolia DocSearch Integration #201

ulivz · 2018-04-21T20:41:59Z

Try to fit the style from vue.js official website.
Need to clean config and add document before merged.

A point to be considered: Since the latest docsearch.js render the distinct default style, so there are many css resets to make it looks good.

Preview: https://deploy-preview-201--vuepress.netlify.com/

Basically completed, welcome to test and feel free to give your comments.

bencodezen · 2018-04-22T00:32:28Z

docs/.vuepress/config.js

@@ -28,6 +28,12 @@ module.exports = {
    repo: 'vuejs/vuepress',
    editLinks: true,
    docsDir: 'docs',
+    algolia: {
+      appId: 'BH4D9OD16A',


Should the appId and apiKey be committed as part of the repo?

Thanks for your concern, but I have commented at this PR's summary:

Need to clean config ... before merged.

ulivz · 2018-04-23T15:20:59Z

Still have some consideration for this feature, only one algolia option wouldn't meet the requirement, since we still want to implement locale-scoped search for that.

ulivz · 2018-04-23T15:34:21Z

Seeing so many css reset, I decided to fallback to docSearch@1.5.0 that the official website uses.

yyx990803 · 2018-04-23T15:34:40Z

LGTM. Let's remove the config.

yyx990803 · 2018-04-23T15:36:52Z

Oh nvm, if you are still working on it please let me know when you finish.

yyx990803 · 2018-04-23T15:37:37Z

I think we should use the latest version of docsearch if possible. CSS resets are not that much of a problem.

yyx990803 · 2018-04-23T15:38:38Z

BTW we need to limit the max width of the search box on mobile (the built-in uses calc(100vw - 4rem):

ulivz · 2018-04-23T15:43:25Z

OK, please wait for a moment. I need to limit the width of the mobile phone and test again.

…into algolia-docsearch

ulivz · 2018-04-23T15:56:01Z

@yyx990803 finished for it. now it looks good at mobile.

Another problem, I found that our search box displayed not very well at ipad's portrait view, I will fix it at another story.

yyx990803 · 2018-04-23T16:47:06Z

Can you add documentation for the algolila option please

ulivz · 2018-04-23T17:16:44Z

@yyx990803

Implemented locale-scoped docsearch at 702d676
document for that: ea8aa21 and a95aa89

yyx990803 · 2018-04-23T17:14:53Z

lib/default-theme/Navbar.vue

@@ -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"/>


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

yyx990803 · 2018-04-23T17:15:47Z

docs/zh/config/README.md

+- 类型: `Object`
+- 默认值: `undefined`
+
+使用 `algolia` 选项可以让你禁用掉默认的基于 headers 的搜索，从而使用 [algolia docsearch](https://github.com/algolia/docsearch)。为了使其生效，你必须提供至少 `apiKey` 和 `indexName` 这两个选项：


...可以让你用 algolia search 取代默认的...

yyx990803 · 2018-04-23T17:26:00Z

docs/zh/config/README.md

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


"请"参考

yyx990803 · 2018-04-23T17:26:24Z

lib/default-theme/Navbar.vue

@@ -12,19 +12,33 @@
      </span>
    </router-link>
    <div class="links">
-      <SearchBox v-if="$site.themeConfig.search !== false"/>
+      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
+      <SearchBox v-if="isSearch"/>


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

yyx990803 · 2018-04-23T17:38:16Z

lib/default-theme/AlgoliaSearchBox.vue

+    initialize () {
+      Promise.all([
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')


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

厉害了，我还没注意这个

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

ulivz · 2018-04-23T18:22:23Z

Thanks for informing me of this detail, addressed all comments at 88f7435

And a simple size test:

Before:

After:

A great promotion! thank you!

jerome2710 · 2018-07-06T09:50:12Z

It looks like appId is also required, otherwise it will fallback on the default appId from the docsearch.js NPM-package which throws an error. Could this be added to the documentation as well please?

Also, could some description be added on how the content is inserted into Algolia? I am not getting any search results right now, do I need to add records to the index myself?

bencodezen · 2018-07-06T11:26:12Z

@jerome2710 Have you submitted your site to Algolia for them to begin indexing your content?

jerome2710 · 2018-07-06T11:48:21Z

Hi @bencodezen, thank you for your reply. No, I was unaware Algolia needed to scrape the docs-domain to index the content. I just submitted the site! Maybe add this to the documentation as well?

bencodezen · 2018-07-06T12:02:59Z

@jerome2710 Here's the PR for the docs update: 6082bc1 Let me know if the language isn't clear enough!

jerome2710 · 2018-07-07T08:47:59Z

@bencodezen Very useful, thank you! Should we mention the appId here as well?

bencodezen · 2018-07-07T16:02:15Z

@jerome2710 I'm currently using Algolia for VueMeetups.org https://github.com/VueMeetups/vuemeetups.org and did not configure an appId. Could you send me a gist or something to show what you're talking about?

jerome2710 · 2018-07-09T08:53:33Z

@bencodezen Interesting to hear that it does work for you. I am using v0.10.2 of Vuepress and that includes the Algolia npm-package of docsearch.js with v2.5.2. As you can see here, the constructor falls back to an default appId. This causes an appId/apiKey mismatch for me if I omit it in the config.js of Vuepress.

ulivz added 2 commits April 22, 2018 03:36

feat: algolia search - basically migrated

a010d64

fix: enhance style

330d6f0

ulivz requested a review from yyx990803 April 21, 2018 20:42

ulivz changed the title ~~Algolia DocSearch Integration~~ [WIP] Algolia DocSearch Integration Apr 21, 2018

ulivz added 2 commits April 22, 2018 04:48

chore: remove debug option

8621a6c

chore: add some comments

0758918

ulivz changed the title ~~[WIP] Algolia DocSearch Integration~~ Algolia DocSearch Integration Apr 21, 2018

bencodezen reviewed Apr 22, 2018

View reviewed changes

Merge branch 'master' into algolia-docsearch

55826c5

ulivz mentioned this pull request Apr 22, 2018

Algolia Doc Search #104

Closed

ulivz added 4 commits April 23, 2018 23:00

Merge branch 'master' into algolia-docsearch

b1d2d26

chore: clean up css

4769b7b

chore: clean up

e1d6e88

chore: clean up doc

8177fc6

yyx990803 added the semver: minor label Apr 23, 2018

chore: clean up

7da0c2a

Update config.js

2dffc4c

ulivz added 2 commits April 23, 2018 23:49

style: limit the max width at mobile side

ed09b5f

Merge branch 'algolia-docsearch' of https://github.com/ulivz/vuepress …

5c3ae19

…into algolia-docsearch

ulivz added 2 commits April 24, 2018 00:52

feat: support algolia search per locale

702d676

docs: document algolia option

ea8aa21

docs: update i18n

a95aa89

yyx990803 requested changes Apr 23, 2018

View reviewed changes

chore: address comments

88f7435

yyx990803 approved these changes Apr 23, 2018

View reviewed changes

yyx990803 added 2 commits April 23, 2018 15:13

Update README.md

c150f22

Update config.js

44adcd0

yyx990803 merged commit 2f0da01 into vuejs:master Apr 23, 2018

ulivz removed the semver: minor label Apr 25, 2018

bencodezen pushed a commit to bencodezen/vuepress that referenced this pull request Jul 6, 2018

docs (vuejs#201): Add note regarding Algolia submission process

6082bc1

ulivz mentioned this pull request Jul 30, 2018

Vuepress & DocSearch #686

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Algolia DocSearch Integration #201

Algolia DocSearch Integration #201

ulivz commented Apr 21, 2018 •

edited

bencodezen Apr 22, 2018

ulivz Apr 22, 2018 •

edited

ulivz commented Apr 23, 2018

ulivz commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018 •

edited

ulivz commented Apr 23, 2018

ulivz commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

ulivz commented Apr 23, 2018

yyx990803 Apr 23, 2018

yyx990803 Apr 23, 2018

yyx990803 Apr 23, 2018

yyx990803 Apr 23, 2018

yyx990803 Apr 23, 2018

ulivz Apr 23, 2018

umaim Apr 24, 2018

ulivz commented Apr 23, 2018

jerome2710 commented Jul 6, 2018

bencodezen commented Jul 6, 2018

jerome2710 commented Jul 6, 2018

bencodezen commented Jul 6, 2018 •

edited

jerome2710 commented Jul 7, 2018

bencodezen commented Jul 7, 2018 •

edited

jerome2710 commented Jul 9, 2018

Algolia DocSearch Integration #201

Algolia DocSearch Integration #201

Conversation

ulivz commented Apr 21, 2018 • edited

Choose a reason for hiding this comment

ulivz Apr 22, 2018 • edited

Choose a reason for hiding this comment

ulivz commented Apr 23, 2018

ulivz commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

yyx990803 commented Apr 23, 2018 • edited

ulivz commented Apr 23, 2018

ulivz commented Apr 23, 2018

yyx990803 commented Apr 23, 2018

ulivz commented Apr 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ulivz commented Apr 23, 2018

jerome2710 commented Jul 6, 2018

bencodezen commented Jul 6, 2018

jerome2710 commented Jul 6, 2018

bencodezen commented Jul 6, 2018 • edited

jerome2710 commented Jul 7, 2018

bencodezen commented Jul 7, 2018 • edited

jerome2710 commented Jul 9, 2018

ulivz commented Apr 21, 2018 •

edited

ulivz Apr 22, 2018 •

edited

yyx990803 commented Apr 23, 2018 •

edited

bencodezen commented Jul 6, 2018 •

edited

bencodezen commented Jul 7, 2018 •

edited