为文档添加 AI 搜索与聊天

docs/assets/css/orama-ui.css

@@ -0,0 +1,122 @@
+.orama-ui {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--md-text-font);
+    font-weight: 400;
+    text-rendering: optimizeLegibility;
+    vertical-align: baseline;
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    text-size-adjust: none;
+    --orama-base-font-size: 18;
+
+    --font-size-xxs: calc(10rem/var(--orama-base-font-size, 16));
+    --font-size-xs: calc(12rem/var(--orama-base-font-size, 16));
+    --font-size-sm: calc(14rem/var(--orama-base-font-size, 16));
+    --font-size-md: calc(16rem/var(--orama-base-font-size, 16));
+    --font-size-lg: calc(20rem/var(--orama-base-font-size, 16));
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-line-height-s: 1.25;
+    --font-line-height-m: 1.5;
+    --radius-xs: calc(6rem/var(--orama-base-font-size, 16));
+    --radius-s: calc(8rem/var(--orama-base-font-size, 16));
+    --radius-m: calc(12rem/var(--orama-base-font-size, 16));
+    --radius-l: calc(16rem/var(--orama-base-font-size, 16));
+    --radius-3xl: calc(40rem/var(--orama-base-font-size, 16));
+    --textarea-radius: calc(16rem/var(--orama-base-font-size, 16));
+    --spacing-2xs: calc(2rem/var(--orama-base-font-size, 16));
+    --spacing-xs: calc(4rem/var(--orama-base-font-size, 16));
+    --spacing-s: calc(8rem/var(--orama-base-font-size, 16));
+    --spacing-m: calc(12rem/var(--orama-base-font-size, 16));
+    --spacing-l: calc(16rem/var(--orama-base-font-size, 16));
+    --spacing-xl: calc(24rem/var(--orama-base-font-size, 16));
+    --spacing-2xl: calc(32rem/var(--orama-base-font-size, 16));
+    --spacing-3xl: calc(40rem/var(--orama-base-font-size, 16));
+    --textarea-shadow: var(--md-shadow-z1);
+
+    --text-color-primary: #151515;
+    --text-color-secondary: #838289;
+    --text-color-tertiary: #99989d;
+    --text-color-accent: var(--md-accent-fg-color);
+    --text-color-inactive: #99989d;
+    --text-color-reverse: #fff;
+    --background-color-primary: #fbfbfb;
+    --background-color-secondary: #fff;
+    --background-color-tertiary: var(--md-accent-fg-color--transparent);
+    --background-color-fourth: #efefef;
+    --background-color-reverse: #000;
+    --background-color-accent: var(--md-accent-fg-color);
+    --border-color-primary: #dadada;
+    --border-color-secondary: #efefef;
+    --border-color-tertiary: #151515;
+    --border-color-accent: var(--md-accent-fg-color);
+    --icon-color-primary: #151515;
+    --icon-color-secondary: #dadada;
+    --icon-color-tertiary: #838289;
+    --icon-color-inactive: #99989d;
+    --icon-color-reverse: #fbfbfb;
+    --shadow-color-primary: #fff;
+    --button-text-color-primary: #fbfbfb;
+    --button-text-color-secondary: #838289;
+    --button-background-color-primary: var(--md-accent-fg-color);
+    --button-background-color-secondary: hsla(240, 9%, 75%, 0.33);
+    --button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
+    --button-border-color-secondary: #dadada;
+    --backdrop-background-color-primary: hsla(0, 0%, 98%, .7);
+    --chat-button-border-color-gradientOne: transparent;
+    --chat-button-border-color-gradientTwo: transparent;
+    --chat-button-border-color-gradientThree: var(--md-accent-fg-color);
+    --chat-button-border-color-gradientFour: var(--md-accent-fg-color);
+    --chat-button-border-color-gradientFive: transparent;
+    --chat-button-border-color-gradientSix: transparent;
+    --chat-button-background-color-gradientOne: var(--md-accent-fg-color);
+    --chat-button-background-color-gradientTwo: transparent;
+
+}
+
+.orama-ui *,
+.orama-ui:after,
+.orama-ui:before {
+    box-sizing: border-box
+}
+
+[data-md-color-scheme="slate"] .orama-ui {
+    --text-color-primary: #fbfbfb;
+    --text-color-secondary: #dadada;
+    --text-color-tertiary: #838289;
+    --text-color-accent: var(--md-accent-fg-color);
+    --text-color-inactive: #99989d;
+    --text-color-reverse: #000;
+    --background-color-primary: var(--md-default-bg-color--dark);
+    --background-color-secondary: #1a1b20;
+    --background-color-tertiary: var(--md-accent-fg-color--transparent);
+    --background-color-fourth: #2e2e2e;
+    --background-color-reverse: #fff;
+    --background-color-accent: var(--md-accent-fg-color);
+    --border-color-primary: #2e2e2e;
+    --border-color-secondary: #151515;
+    --border-color-tertiary: #afafb1;
+    --border-color-accent: var(--md-accent-fg-color);
+    --icon-color-primary: #fbfbfb;
+    --icon-color-secondary: #dadada;
+    --icon-color-tertiary: #838289;
+    --icon-color-inactive: #99989d;
+    --icon-color-reverse: var(--md-default-bg-color--dark);
+    --shadow-color-primary: #000;
+    --button-text-color-primary: #fbfbfb;
+    --button-text-color-secondary: #99989d;
+    --button-background-color-primary: var(--md-accent-fg-color);
+    --button-background-color-secondary: hsla(var(--md-hue), 15%, 9%, 0.33);
+    --button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
+    --button-border-color-secondary: #2e2e2e;
+    --backdrop-background-color-primary: rgba(5, 5, 5, .7);
+    --chat-button-border-color-gradientOne: transparent;
+    --chat-button-border-color-gradientTwo: transparent;
+    --chat-button-border-color-gradientThree: var(--md-accent-fg-color);
+    --chat-button-border-color-gradientFour: var(--md-accent-fg-color);
+    --chat-button-border-color-gradientFive: transparent;
+    --chat-button-border-color-gradientSix: transparent;
+    --chat-button-background-color-gradientOne: var(--md-accent-fg-color);
+    --chat-button-background-color-gradientTwo: transparent;
+}

docs/assets/js/component.js

@@ -1,4 +1,6 @@
 // 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
 document$.subscribe(function () {
     ComponentSystem.reinitializeAll()
+    // Orama AI Search
+    loadOramaWebComponent()
 })

docs/assets/js/components/orama-ui/config.js

@@ -0,0 +1,104 @@
+// get search box config
+function getOramaSearchBoxConfig() {
+    return {
+        themeConfig: {
+            // colors: {
+            //     light: {
+            //         '--text-color-accent': 'var(--md-accent-fg-color)',
+            //         '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
+            //         '--background-color-accent': 'var(--md-accent-fg-color)',
+            //         '--border-color-accent': 'var(--md-accent-fg-color)',
+            //         '--button-background-color-primary': 'var(--md-accent-fg-color)',
+            //         '--button-background-color-secondary': 'hsla(240, 9%, 75%, 0.33)',
+            //         '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
+            //         '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
+            //         '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
+            //         '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
+            //     },
+            //     dark: {
+            //         '--text-color-accent': 'var(--md-accent-fg-color)',
+            //         '--background-color-primary': 'var(--md-default-bg-color--dark)',
+            //         '--background-color-secondary': '#1a1b20',
+            //         '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
+            //         '--background-color-accent': 'var(--md-accent-fg-color)',
+            //         '--border-color-accent': 'var(--md-accent-fg-color)',
+            //         '--icon-color-reverse': 'var(--md-default-bg-color--dark)',
+            //         '--button-background-color-primary': 'var(--md-accent-fg-color)',
+            //         '--button-background-color-secondary': 'hsla(var(--md-hue), 15%, 9%, 0.33)',
+            //         '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
+            //         '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
+            //         '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
+            //         '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
+            //     },
+            // },
+            // shadow: {
+            //     '--textarea-shadow': 'var(--md-shadow-z1)',
+            // },
+            // typography: {
+            //     '--font-primary': 'var(--md-font-family)',
+            // },
+        },
+        index: {
+            endpoint: 'https://cloud.orama.run/v1/indexes/linuxmirrors-cn-imxypv',
+            api_key: 'mBJ0b68dZIk79DqCkdUSJI6yQMo4L4o3',
+        },
+        facetProperty: 'category',
+        sourceBaseUrl: 'https://linuxmirrors.cn',
+        sourcesMap: {
+            title: 'title',
+        },
+        resultMap: {
+            title: 'title',
+            description: 'content',
+            section: 'category',
+        },
+        searchPlaceholder: '请输入要搜索的内容...',
+        chatPlaceholder: '有什么可以帮你的吗？',
+        suggestions: ['如何使用', '支持哪些系统'],
+    }
+}
+
+// localization search box component
+function localizationOramaSearchBox(searchBox) {
+    if (!searchBox) return
+    const observer = new MutationObserver((mutations, obs) => {
+        const shadowRoot = searchBox.shadowRoot
+        if (shadowRoot) {
+            // Get a summary (Only PC)
+            const chatButton = shadowRoot.querySelector('.chat-button')
+            if (chatButton) {
+                const element = chatButton.querySelector('.button-label')
+                if (element && element.textContent !== '询问 AI') {
+                    element.textContent = '询问 AI'
+                }
+            }
+            // Hide "Orama can make mistakes. Please verify the information."
+            const chatFormWrapper = shadowRoot.querySelector('.chat-form-wrapper')
+            if (chatFormWrapper) {
+                const element = chatFormWrapper.querySelector('p.small.text-center')
+                if (element) {
+                    element.style = 'display: none;'
+                }
+            }
+            // Navigation bar (Only Mobile)
+            const navigationBar = shadowRoot.querySelector('orama-navigation-bar')
+            if (navigationBar) {
+                const toggler = navigationBar.querySelector('orama-toggler')
+                if (toggler) {
+                    const searchSpan = toggler.querySelector('span:nth-child(1)')
+                    if (searchSpan && searchSpan.textContent !== '搜索') {
+                        searchSpan.textContent = '搜索'
+                        searchSpan.style = 'max-height: fit-content;'
+                    }
+                    const askAISpan = toggler.querySelector('span:nth-child(2)')
+                    if (askAISpan && askAISpan.textContent !== '询问 AI') {
+                        askAISpan.textContent = '询问 AI'
+                        askAISpan.style = 'max-height: fit-content;'
+                    }
+                }
+            }
+        }
+    })
+    observer.observe(searchBox, { childList: true, subtree: true, attributes: true })
+    setTimeout(() => observer.disconnect(), 2000)
+}

docs/assets/js/components/orama-ui/index-native.js

@@ -0,0 +1,47 @@
+function loadOramaWebComponent() {
+    const searchBox = document.querySelector('orama-search-box')
+    if (searchBox) {
+        Object.assign(searchBox, getOramaSearchBoxConfig())
+    }
+
+    // custom button style and localization
+    const searchButton = document.querySelector('orama-search-button')
+    if (searchButton) {
+        searchButton.textContent = '搜索'
+        const observer = new MutationObserver((mutations, obs) => {
+            if (searchButton.shadowRoot) {
+                const button = searchButton.shadowRoot.querySelector('button')
+                if (button) {
+                    button.style = 'border-radius: 8px !important;'
+                    button.querySelector('.button__label').style = 'height: 22px; padding: 2px 8px; font-size: 0.75rem;'
+                    button.querySelector('span[slot="adorment-end"], .kyb-shortcut').style = 'display: none;'
+                    // search icon style
+                    const magnifyingGlassShadowRoot = button.querySelector('ph-magnifying-glass').shadowRoot
+                    const styleElement = document.createElement('style')
+                    styleElement.textContent = `
+svg {
+    font-size: 24px;
+}`
+                    if (!magnifyingGlassShadowRoot.querySelector('style[data-custom="icon-style"]')) {
+                        styleElement.setAttribute('data-custom', 'icon-style')
+                        magnifyingGlassShadowRoot.appendChild(styleElement)
+                    }
+                    obs.disconnect()
+                }
+            }
+        })
+        observer.observe(searchButton, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        })
+        setTimeout(() => observer.disconnect(), 2000)
+    }
+
+    searchButton.addEventListener('click', function () {
+        const searchBox = document.querySelector('orama-search-box')
+        // localization chat box component
+        localizationOramaSearchBox(searchBox)
+    })
+}

docs/assets/js/components/orama-ui/index.js

@@ -0,0 +1,30 @@
+function loadOramaWebComponent() {
+    const searchBox = document.querySelector('orama-search-box')
+    if (searchBox) {
+        Object.assign(searchBox, getOramaSearchBoxConfig())
+    }
+
+    // define global function
+    window.openOramaSearch = function (event) {
+        const element = document.querySelector('orama-search-box')
+        if (element) {
+            element.open = true
+            localizationOramaSearchBox(element)
+        }
+        return false
+    }
+    // localization chat box component
+    if (searchBox) {
+        const openObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'open' && searchBox.hasAttribute('open')) {
+                    localizationOramaSearchBox(searchBox)
+                }
+            })
+        })
+        openObserver.observe(searchBox, { attributes: true })
+        if (searchBox.hasAttribute('open')) {
+            localizationOramaSearchBox(searchBox)
+        }
+    }
+}

docs/index.md

@@ -49,7 +49,7 @@ hide:
     ---
 
     只需要一行命令就能直接运行，零技术门槛，无需安装任何依赖  
-    文档提供了各种场景的解决方案，Linux 初学者也能轻松上手
+    文档集成了 AI 搜索与聊天，提供各种场景的解决方案
 
 -   :material-vector-polyline:{ .lg .middle } __系统支持广泛__
 

docs/stylesheets/extra.css

@@ -2,7 +2,7 @@
     --md-text-font: system-ui, -apple-system, 'Roboto', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Segoe UI', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     --md-code-font: 'SF Mono';
     --md-primary-fg-color--light: hsl(0, 0%, 100%, 0.33);
-    --md-default-bg-color--light: #ffffff;
+    --md-default-bg-color--light: #fff;
     --md-default-bg-color--dark: hsla(var(--md-hue), 15%, 14%, 1);
     --view-transition-z-index-foreground: 999;
     --view-transition-z-index-background: 1;

docs/theme/main.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block scripts %}
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/orama-ui/orama-ui.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/cjs/orama-ui.cjs.js"></script>
+  {{ super() }}
+{% endblock %}

docs/theme/partials/comments.html

@@ -1,59 +1,54 @@
-{% if page.meta.comments %}
+{% if page.meta.comments %}
-  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
-  {% if page.meta.comments_description %}
+  {% if page.meta.comments_description %}
-    <blockquote>{{ page.meta.comments_description }}</blockquote>
+    <blockquote>{{ page.meta.comments_description }}</blockquote>
-  {% endif %}
+  {% endif %}
-  <script src="https://giscus.app/client.js"
+  <script src="https://giscus.app/client.js"
-    data-repo="SuperManito/LinuxMirrors"
+    data-repo="SuperManito/LinuxMirrors"
-    data-repo-id="MDEwOlJlcG9zaXRvcnkzMzI2Nzg5NzI="
+    data-repo-id="MDEwOlJlcG9zaXRvcnkzMzI2Nzg5NzI="
-    data-category="General"
+    data-category="General"
-    data-category-id="DIC_kwDOE9RHPM4CWOQP"
+    data-category-id="DIC_kwDOE9RHPM4CWOQP"
-    data-mapping="pathname"
+    data-mapping="pathname"
-    data-strict="0"
+    data-strict="0"
-    data-reactions-enabled="1"
+    data-reactions-enabled="1"
-    data-emit-metadata="0"
+    data-emit-metadata="0"
-    data-input-position="top"
+    data-input-position="top"
-    data-theme="preferred_color_scheme"
+    data-theme="preferred_color_scheme"
-    data-lang="zh-CN"
+    data-lang="zh-CN"
-    data-loading="lazy"
+    data-loading="lazy"
-    crossorigin="anonymous"
+    crossorigin="anonymous"
-    async
+    async
-  >
+  >
-  </script>
+  </script>
-
+
-  <!-- Synchronize Giscus theme with palette -->
+  <script>
-  <script>
+    var giscus = document.querySelector("script[src*=giscus]")
-    var giscus = document.querySelector("script[src*=giscus]")
+
-
+    var palette = __md_get("__palette")
-    // Set palette on initial load
+    if (palette && typeof palette.color === "object") {
-    var palette = __md_get("__palette")
+      var theme = palette.color.scheme === "slate"
-    if (palette && typeof palette.color === "object") {
+        ? "transparent_dark"
-      var theme = palette.color.scheme === "slate"
+        : "light"
-        ? "transparent_dark"
+
-        : "light"
+      giscus.setAttribute("data-theme", theme) 
-
+    }
-      // Instruct Giscus to set theme
+
-      giscus.setAttribute("data-theme", theme) 
+    document.addEventListener("DOMContentLoaded", function() {
-    }
+      var ref = document.querySelector("[data-md-component=palette]")
-
+      ref.addEventListener("change", function() {
-    // Register event handlers after documented loaded
+        var palette = __md_get("__palette")
-    document.addEventListener("DOMContentLoaded", function() {
+        if (palette && typeof palette.color === "object") {
-      var ref = document.querySelector("[data-md-component=palette]")
+          var theme = palette.color.scheme === "slate"
-      ref.addEventListener("change", function() {
+            ? "transparent_dark"
-        var palette = __md_get("__palette")
+            : "light"
-        if (palette && typeof palette.color === "object") {
+
-          var theme = palette.color.scheme === "slate"
+          var frame = document.querySelector(".giscus-frame")
-            ? "transparent_dark"
+          frame.contentWindow.postMessage(
-            : "light"
+            { giscus: { setConfig: { theme } } },
-
+            "https://giscus.app"
-          // Instruct Giscus to change theme
+          )
-          var frame = document.querySelector(".giscus-frame")
+        }
-          frame.contentWindow.postMessage(
+      })
-            { giscus: { setConfig: { theme } } },
+    })
-            "https://giscus.app"
+  </script>
-          )
+{% endif %}
-        }
-      })
-    })
-  </script>
-{% endif %}

docs/theme/partials/content.html

@@ -0,0 +1,17 @@
+{% include "partials/tags.html" %}
+
+{% include "partials/actions.html" %}
+
+{% if "\x3ch1" not in page.content %}
+  <h1>{{ page.title | d(config.site_name, true)}}</h1>
+{% endif %}
+
+{{ page.content }}
+
+{% include "partials/source-file.html" %}
+
+{% include "partials/feedback.html" %}
+
+{% include "partials/comments.html" %}
+
+<orama-search-box class="orama-ui"></orama-search-box>

mkdocs.yml

@@ -8,6 +8,8 @@ extra_javascript:
   - assets/js/modules/vue.global.prod.js
   - assets/js/modules/tdesign.min.js
   - assets/js/modules/tdesign-theme.js
+  - assets/js/components/orama-ui/config.js
+  - assets/js/components/orama-ui/index.js
   - assets/js/useThemeTransition.js
   - assets/js/common.js
   - assets/js/component.js
@@ -15,6 +17,7 @@ extra_javascript:
   - assets/js/components/mirrors-table/index.js
 extra_css:
   - assets/css/tdesign.min.css
+  - assets/css/orama-ui.css
   - stylesheets/extra.css
 
 theme: