feat(doc): add algolia search (#447)

* feat: add algolia search * feat: add algolia search * feat: algolia search style * feat: algolia search style * feat: algolia search style
Tencent · Mar 17, 2023 · c8c022a · c8c022a
1 parent 0905c28
commit c8c022a
Show file tree

Hide file tree

Showing 8 changed files with 640 additions and 69 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,5 @@ coverage
 .history
 
 # Log files
-.pnpm-debug.log*
+.pnpm-debug.log*
+cache
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,15 +1,14 @@
 import { defineConfig } from "vitepress";
 import { version } from "../../packages/wujie-core/package.json";
-import path from "path";
 const ogDescription = "极致的微前端框架";
 const ogImage = "https://wujie-micro.github.io/doc/wujie.png";
 const ogTitle = "无界";
 const ogUrl = "https://wujie-micro.github.io/doc/";
-const base = process.env.NODE_ENV === "production" ? "/doc/" : "";
+const base = "/doc/";
 
 export default defineConfig({
-  title: "无界",
-  description: "极致的微前端框架",
+  title: ogTitle,
+  description: ogDescription,
   base,
   head: [
     ["link", { rel: "icon", href: `${base}/favicon.ico` }],
@@ -31,14 +30,11 @@ export default defineConfig({
     },
     lastUpdatedText: "最近更新时间",
     socialLinks: [{ icon: "github", link: "https://github.com/Tencent/wujie" }],
-    // algolia: {
-    //   appId: "",
-    //   apiKey: "",
-    //   indexName: "wujie",
-    //   searchParameters: {
-    //     facetFilters: ["tags:en"],
-    //   },
-    // },
+    algolia: {
+      appId: "QMIAJMDLL1",
+      apiKey: "4eaef57a0122ce0454d3aed08f822178",
+      indexName: "wujie-microio",
+    },
 
     footer: {
       message: "Released the MIT License.",
@@ -82,7 +78,7 @@ export default defineConfig({
       "/guide/": [
         {
           text: "入门",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "介绍",
@@ -100,7 +96,7 @@ export default defineConfig({
         },
         {
           text: "指南",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "预加载",
@@ -150,7 +146,7 @@ export default defineConfig({
         },
         {
           text: "项目实战",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "vue主应用",
@@ -166,7 +162,7 @@ export default defineConfig({
       "/api/": [
         {
           text: "主应用",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "bus",
@@ -192,7 +188,7 @@ export default defineConfig({
         },
         {
           text: "子应用",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "wujie",
@@ -205,7 +201,7 @@ export default defineConfig({
       "/pack/": [
         {
           text: "框架封装",
-          collapsible: true,
+          collapsed: true,
           items: [
             {
               text: "Vue组件封装",

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@ import Theme from "vitepress/theme";
 import wujieHome from "./components/wujie-home.vue";
 import { h } from "vue";
 import "./styles/vars.css";
+import "./styles/DocSearch.css";
 
 const inBrowser = typeof window !== "undefined";
 export default {

diff --git a/docs/.vitepress/theme/styles/DocSearch.css b/docs/.vitepress/theme/styles/DocSearch.css
@@ -0,0 +1,70 @@
+:root {
+  --vp-z-index-doc-search: 1000 !important;
+  --vp-doc-search-background-color: linear-gradient(45deg, var(--color1), var(--color1), var(--color2), var(--color1));
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+.DocSearch-Container {
+  z-index: var(--vp-z-index-doc-search);
+}
+
+.DocSearch-Button {
+  font-weight: bold;
+  width: 18vw;
+  display: flex;
+  justify-content: space-between;
+  border: none;
+  outline: none;
+  color: #fff;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--vp-c-bg-soft-mute);
+  z-index: 0;
+  border-radius: 10px;
+}
+
+.DocSearch-Button:before {
+  content: "";
+  background: var(--vp-doc-search-background-color);
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  background-size: 400%;
+  z-index: -1;
+  filter: blur(4px);
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  animation: RhyshaKachari-glowing 20s linear infinite;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  border-radius: 10px;
+}
+
+.DocSearch-Button:after {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft-mute);
+  left: 0;
+  top: 0;
+  border-radius: 10px;
+}
+
+@keyframes RhyshaKachari-glowing {
+  0% {
+    background-position: 0 0;
+  }
+
+  50% {
+    background-position: 400% 0;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css
@@ -77,10 +77,6 @@
  * Component: Algolia
  * -------------------------------------------------------------------------- */
 
-.DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
-}
-
 .link {
   padding: 4px 0;
 }

diff --git a/docs/package.json b/docs/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "docs:dev": "vitepress dev --open",
+    "docs:dev": "vitepress dev --open --port=9765",
     "docs:build": "vitepress build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -14,7 +14,7 @@
   "license": "ISC",
   "devDependencies": {
     "vite": "3.0.9",
-    "vitepress": "1.0.0-alpha.9"
+    "vitepress": "1.0.0-alpha.60"
   },
   "dependencies": {
     "@vue/theme": "^1.2.2",

diff --git a/docs/wujie/components/data.ts b/docs/wujie/components/data.ts
@@ -9,7 +9,7 @@ export const wujieList = [
   },
   {
     name: "React",
-    url: "https://beta.reactjs.org/",
+    url: "https://react.dev/",
   },
   {
     name: "Vercel",