From 265a6e4c6ddced880600ada2f6c8e83a37b0adad Mon Sep 17 00:00:00 2001
From: zouyaoji <370681295@qq.com>
Date: Wed, 30 Jun 2021 14:36:41 +0800
Subject: [PATCH] fix: Highlighted the search results of document (#2382)

---
 .github/workflows/master-deploy.yml |  6 ++-
 build/build-indices.js              | 70 +++++++++++++++++++++++++++++
 package.json                        |  1 +
 website/components/search.vue       |  6 ++-
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 build/build-indices.js

diff --git a/.github/workflows/master-deploy.yml b/.github/workflows/master-deploy.yml
index 177e2c1bc9..e6fa4662e1 100644
--- a/.github/workflows/master-deploy.yml
+++ b/.github/workflows/master-deploy.yml
@@ -23,6 +23,11 @@ jobs:
       - name: Build Website
         run: yarn website-build
 
+      - name: Build Indices
+        run: yarn build:indices
+        env:
+          ALGOLIA_KEY: ${{secrets.ALGOLIA_KEY}}
+
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@3.7.1
         with:
@@ -37,4 +42,3 @@ jobs:
         env:
           TRIGGERSYNCURL: ${{ secrets.TRIGGERSYNCURL }}
         run: curl "$TRIGGERSYNCURL"
-
diff --git a/build/build-indices.js b/build/build-indices.js
new file mode 100644
index 0000000000..cf34373a30
--- /dev/null
+++ b/build/build-indices.js
@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+'use strict'
+
+const fs = require('fs')
+const algoliasearch = require('algoliasearch')
+const slugify = require('transliteration').slugify
+const algoliaKey = process.env.ALGOLIA_KEY
+
+const client = algoliasearch('4C63BTGP6S', algoliaKey)
+const langs = {
+  'zh-CN': 'element-zh',
+  'en-US': 'element-en',
+  'es': 'element-es',
+  'fr-FR': 'element-fr',
+  'jp': 'element-jp',
+}
+
+const fg = require('fast-glob')
+
+;['zh-CN', 'en-US', 'es', 'fr-FR', 'jp'].forEach(lang => {
+  const indexName = langs[lang]
+  const index = client.initIndex(indexName)
+  index.clearObjects().then(() => {
+    const files = fg.sync(`website/docs/${lang}/*.md`)
+    let indices = []
+    files.forEach(file => {
+      const regExp = new RegExp(`website\/docs\/${lang}\/(.*).md`)
+      const pathContent = file.match(regExp)
+      const path = pathContent[1]
+      const index = path.lastIndexOf('/')
+      const names = index !== -1 ? path.split('/') : []
+      const component = names.length ? names[names.length - 1] : path
+      const content = fs.readFileSync(file, 'utf8')
+      const matches = content
+        .replace(/:::[\s\S]*?:::/g, '')
+        .replace(/```[\s\S]*?```/g, '')
+        .match(/#{2,4}[^#]*/g)
+        .map(match =>
+          match
+            .replace(/\n+/g, '\n')
+            .split('\n')
+            .filter(part => !!part),
+        )
+        .map(match => {
+          const length = match.length
+          if (length > 2) {
+            const desc = match.slice(1, length).join('')
+            return [match[0], desc]
+          }
+          return match
+        })
+      let i = 0
+      indices = indices.concat(
+        matches.map(match => {
+          const title = match[0].replace(/#{2,4}/, '').trim()
+          const index = { component, title }
+          index.anchor = slugify(title)
+          index.content = (match[1] || title).replace(/<[^>]+>/g, '')
+          index.path = path
+          index.sort = i++
+          return index
+        }),
+      )
+    })
+
+    index.saveObjects(indices, {
+      autoGenerateObjectIDIfNotExist: true,
+    })
+  })
+})
diff --git a/package.json b/package.json
index ead824b886..05b0ea38ba 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "build:locale-umd": "node ./build/build-locale.js",
     "build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
     "build:helper": "node build/build-helper.js",
+    "build:indices": "node build/build-indices.js",
     "lint": "eslint ./packages --ext .vue,.js,.ts",
     "lint-fix": "eslint --fix ./packages --ext .vue,.js,.ts",
     "website-build": "rimraf website-dist && cross-env NODE_ENV=production webpack --config ./website/webpack.config.js",
diff --git a/website/components/search.vue b/website/components/search.vue
index 073aaf8f28..bc5ffe8c06 100644
--- a/website/components/search.vue
+++ b/website/components/search.vue
@@ -154,10 +154,14 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   .algolia-search {
     width: 450px !important;
 
+    .el-autocomplete-suggestion {
+      width: 450px !important;
+    }
+
     &.is-empty {
       .el-autocomplete-suggestion__list {
         padding-bottom: 0;