diff --git a/docs/assets/css/orama-ui.css b/docs/assets/css/orama-ui.css new file mode 100644 index 0000000..5e21fd4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/docs/assets/js/component.js b/docs/assets/js/component.js index 3c56381..882900a 100644 --- a/docs/assets/js/component.js +++ b/docs/assets/js/component.js @@ -1,4 +1,6 @@ // 使用 mkdocs-material 与第三方 JavaScript 库集成的方法 document$.subscribe(function () { ComponentSystem.reinitializeAll() + // Orama AI Search + loadOramaWebComponent() }) diff --git a/docs/assets/js/components/orama-ui/config.js b/docs/assets/js/components/orama-ui/config.js new file mode 100644 index 0000000..9bfb633 --- /dev/null +++ b/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) +} diff --git a/docs/assets/js/components/orama-ui/index-native.js b/docs/assets/js/components/orama-ui/index-native.js new file mode 100644 index 0000000..4d4cab0 --- /dev/null +++ b/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) + }) +} \ No newline at end of file diff --git a/docs/assets/js/components/orama-ui/index.js b/docs/assets/js/components/orama-ui/index.js new file mode 100644 index 0000000..fe6813c --- /dev/null +++ b/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) + } + } +} diff --git a/docs/index.md b/docs/index.md index e824a49..6f3b354 100644 --- a/docs/index.md +++ b/docs/index.md @@ -49,7 +49,7 @@ hide: --- 只需要一行命令就能直接运行，零技术门槛，无需安装任何依赖 - 文档提供了各种场景的解决方案，Linux 初学者也能轻松上手 + 文档集成了 AI 搜索与聊天，提供各种场景的解决方案 - :material-vector-polyline:{ .lg .middle } __系统支持广泛__ diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index aa9b4a1..d873b9c 100644 --- a/docs/stylesheets/extra.css +++ b/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; diff --git a/docs/theme/main.html b/docs/theme/main.html new file mode 100644 index 0000000..cafec26 --- /dev/null +++ b/docs/theme/main.html @@ -0,0 +1,7 @@ +{% extends "base.html" %} + +{% block scripts %} + + + {{ super() }} +{% endblock %} diff --git a/docs/theme/partials/comments.html b/docs/theme/partials/comments.html index 3153b43..0f4c090 100644 --- a/docs/theme/partials/comments.html +++ b/docs/theme/partials/comments.html @@ -1,59 +1,54 @@ -{% if page.meta.comments %} -

{{ lang.t("meta.comments") }}

- {% if page.meta.comments_description %} -
{{ page.meta.comments_description }}
- {% endif %} - - - - -{% endif %} +{% if page.meta.comments %} +

{{ lang.t("meta.comments") }}

+ {% if page.meta.comments_description %} +
{{ page.meta.comments_description }}
+ {% endif %} + + + +{% endif %} diff --git a/docs/theme/partials/content.html b/docs/theme/partials/content.html new file mode 100644 index 0000000..700c064 --- /dev/null +++ b/docs/theme/partials/content.html @@ -0,0 +1,17 @@ +{% include "partials/tags.html" %} + +{% include "partials/actions.html" %} + +{% if "\x3ch1" not in page.content %} +

{{ page.title | d(config.site_name, true)}}

+{% endif %} + +{{ page.content }} + +{% include "partials/source-file.html" %} + +{% include "partials/feedback.html" %} + +{% include "partials/comments.html" %} + + \ No newline at end of file diff --git a/docs/theme/partials/search.html b/docs/theme/partials/search.html new file mode 100644 index 0000000..ccb3877 --- /dev/null +++ b/docs/theme/partials/search.html @@ -0,0 +1,46 @@ + + + + + + + + + diff --git a/mkdocs.yml b/mkdocs.yml index 8fb9f5d..3fc5769 100644 --- a/mkdocs.yml +++ b/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: