docs: add algolia search #2603
docs: add algolia search #2603
Conversation
WalkthroughThis pull request primarily involves structural modifications to various markdown documentation files related to the Changes
Possibly related PRs
Suggested labels
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (21)
examples/sites/src/views/components/components.vue (2)
149-151: Consider enhancing heading styles for better visual hierarchyWhile the semantic structure has been improved, consider adding specific styles for the new heading tags to better distinguish the hierarchy visually.
<style lang="less" scoped> + h2.ti-f18 { + margin-bottom: 1rem; + color: var(--ti-heading-color, #191919); + } + + h3.ti-f18 { + margin-top: 1.5rem; + color: var(--ti-subheading-color, #333); + } </style>Also applies to: 158-160
149-151: Semantic structure supports Algolia search integrationThe improved heading structure with semantic HTML elements will enhance the effectiveness of Algolia's search functionality by providing better content structure for indexing and search relevance.
Also applies to: 158-160
examples/sites/src/views/layout/layout.vue (1)
Line range hint
149-156: Consider removing unused search functionalitySince the filter is now disabled and being replaced by Algolia search, the
searchMenumethod appears to be unused. Consider removing this method and its related functionality to maintain code cleanliness.- const searchMenu = (value, data) => { - if (!value) return true - const trimValue = value.trim().toLowerCase() - const isGird = (trimValue === 'grid' || trimValue === '表格') && data.key?.startsWith('grid') - return data.label.toLowerCase().includes(value.toLowerCase()) || isGird - }examples/sites/demos/pc/webdoc/i18n-en.md (2)
Line range hint
24-31: Inconsistent locale text between Vue 3.0 and Vue 2.0 sectionsThe Chinese locale text is inconsistent between Vue 3.0 ('中文') and Vue 2.0 ('Chinese') sections. This might confuse users implementing i18n in their applications.
Suggest standardizing to either Chinese characters or English text across both sections:
messages: { zhCN: { - test: '中文' + test: 'Chinese' }, enUS: { test: 'English' }
Line range hint
51-90: Consider adding error handling examplesWhile the basic i18n setup is well documented, it would be beneficial to include examples of handling missing translations or fallback locales.
Consider adding a section demonstrating fallback configuration:
export default (i18n) => locale.initI18n({ i18n, VueI18n, fallbackLocale: 'enUS', // Fallback to English when translation is missing messages: { // ... existing messages } })examples/sites/demos/pc/webdoc/develop-demo-en.md (2)
Line range hint
42-52: Add explanation for process.env configuration requirementThe Vite configuration includes
process.envdefinition without explaining why it's necessary for TinyVue components.Consider adding an explanation:
```js {8-10} //vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], define: { 'process.env': { ...process.env } // Required for TinyVue's runtime environment detection } })
+> Note: The
process.envdefinition is required for TinyVue components to properly detect the runtime environment and enable corresponding features.--- Line range hint `54-83`: **Add TypeScript usage example** The documentation shows JavaScript examples but lacks TypeScript support information. Consider adding a TypeScript example: ```ts <script setup lang="ts"> import { Button as TinyButton } from '@opentiny/vue' import type { ButtonProps } from '@opentiny/vue' // TypeScript props example const buttonProps: ButtonProps = { type: 'success' } </script>examples/sites/demos/pc/webdoc/installation-en.md (2)
Line range hint
60-84: Enhance CDN security and versioningThe CDN import section could be improved for better security and maintainability.
Consider these enhancements:
- Add SRI (Subresource Integrity) hashes:
- <link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme/index.css" /> + <link rel="stylesheet" + href="https://unpkg.com/@opentiny/vue-theme/index.css" + integrity="sha384-..." + crossorigin="anonymous" />
- Add a note about version pinning in production:
> Note: For production environments, it's recommended to pin to specific versions rather than using major version numbers (3.12) to avoid unexpected breaking changes.🧰 Tools
🪛 LanguageTool
[style] ~61-~61: Consider a shorter alternative to avoid wordiness.
## Import through CDN In order to experience TinyVue components faster, y...
Context: ...e>.(IN_ORDER_TO_PREMIUM)
Line range hint
106-142: Add rollback instructions for upgradesThe upgrade section should include rollback instructions in case of issues.
Consider adding:
### Rollback Instructions If you encounter issues after upgrading: 1. Revert package.json changes: ```bash git checkout package.json git checkout package-lock.json # or yarn.lock
Reinstall the previous version:
npm install @opentiny/vue2@<previous-version> # or vue3Clear dependency cache:
npm cache clean --force<details> <summary>🧰 Tools</summary> <details> <summary>🪛 LanguageTool</summary> [style] ~108-~108: Specify a number, remove phrase, or simply use “many” or “numerous” Context: ...ical Project Upgrade due to`TinyVue`of a large number of projects and`@opentiny/vue2`or`@opentin... (LARGE_NUMBER_OF) --- [uncategorized] ~108-~108: Possible missing preposition found. Context: ... maintained, you are advised to upgrade the latest versions using either of the fol... (AI_HYDRA_LEO_MISSING_TO) </details> </details> </blockquote></details> <details> <summary>examples/sites/demos/pc/webdoc/installation.md (2)</summary><blockquote> Line range hint `42-53`: **Enhance TINY_MODE documentation.** While the configuration is well explained, consider adding a list of valid values for `TINY_MODE` to help users understand their options. Consider adding: ```diff <div class="tip custom-block"> <br> <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p> + <p>有效的 TINY_MODE 值包括： + <ul> + <li><code>pc</code>: PC端模式</li> + <li><code>mobile</code>: 移动端模式</li> + </ul> + </p> </div>
Line range hint
137-185: Consider using a dynamic GitHub issue link.The troubleshooting section is helpful, but the hardcoded GitHub issue URL could become outdated.
Consider using a variable for the GitHub repository URL:
- 如果您在项目升级中遇到其他困难，可以到 github 上新建 issue 反馈（`https://github.com/opentiny/tiny-vue/issues`） + 如果您在项目升级中遇到其他困难，可以到 <a :href="`${repoUrl}/issues`">GitHub</a> 上新建 issue 反馈examples/sites/demos/pc/webdoc/theme.md (1)
Line range hint
18-79: Consider adding visual examples of theme customization.While the technical documentation is excellent, adding screenshots or a live demo of theme customization results would help users better understand the impact of their changes.
Would you like me to help create a visual guide showing before/after examples of theme customization?
examples/sites/demos/pc/webdoc/theme-en.md (2)
Line range hint
1-16: Improve English translation and consistency.Several issues need attention:
- Some technical terms remain in Chinese
- Inconsistent formatting in code examples
- Mixed language usage in comments
Consider reviewing and updating the English translation for consistency and clarity. For example:
- 537/5000 - A set of global CSS variables is defined in the TinyVue component library to unify theme styles + The TinyVue component library defines a set of global CSS variables to unify theme styles
Line range hint
80-106: Standardize code comments in English documentation.The code examples contain mixed Chinese and English comments.
Consider standardizing to English:
- // 效果同上 + // Same effect as above - // 挂载点 + // Mount pointexamples/sites/demos/pc/webdoc/form-valid-en.md (4)
5-7: Improve grammar in the introductionThe sentence structure needs improvement for better clarity.
-Form validation is based on`async-validator`Encapsulated, mainly used`validate`Function and`rules`Configuration rules of the. +Form validation is encapsulated using `async-validator`, primarily utilizing the `validate` function and `rules` configuration.🧰 Tools
🪛 LanguageTool
[grammar] ~6-~6: A word may be missing after ‘the’.
Context: ...nction andrulesConfiguration rules of the. ## API ### validate When submitting ...(THE_SENT_END)
70-77: Improve formatting consistency in required sectionThe formatting of boolean values and special characters needs standardization.
-`true`: Set to`true`, indicates that the field is mandatory and the label is marked with a red asterisk \*. -`false`: default value, indicating that the field is not mandatory. The label does not contain red asterisks \*. +`true`: Set to `true`, indicates that the field is mandatory and the label is marked with a red asterisk (*). +`false`: Default value, indicating that the field is not mandatory. The label does not contain red asterisks (*).🧰 Tools
🪛 LanguageTool
[uncategorized] ~74-~74: Loose punctuation mark.
Context: ...at is, non-empty verification. -true: Set totrue, indicates that the field ...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~74-~74: Use a comma before “and” if it connects two independent clauses (unless they are closely connected and short).
Context: ...`, indicates that the field is mandatory and the label is marked with a red asterisk...(COMMA_COMPOUND_SENTENCE_2)
[uncategorized] ~76-~76: Loose punctuation mark.
Context: ...arked with a red asterisk *. -false: default value, indicating that the fiel...(UNLIKELY_OPENING_PUNCTUATION)
Line range hint
253-280: Enhance validator example with TypeScript typesThe validator example could be improved with TypeScript type annotations for better clarity and type safety.
-validatePass(rule, value, callback) { +validatePass(rule: any, value: string, callback: (error?: Error) => void) { if (!/^(?=._[a-z])(?=._[A-Z])(?=.\*\\d)[a-zA-Z\d]{8,}$/.test(value)) { callback(new Error('At least eight characters, including at least one uppercase letter, one lowercase letter, and one digit')) } else { callback() } }
1-4: Enhance documentation searchabilitySince this documentation is being integrated with Algolia search, consider adding relevant keywords and cross-references at the beginning of the document to improve searchability.
# Form Verification Configuration +> Keywords: form validation, async-validator, validation rules, form verification, input validation + +Related topics: +- [Form Component](/components/form) +- [Input Validation](/guides/validation) + <br> <br>examples/sites/src/style.css (2)
31-36: Consider using CSS Grid or Flexbox for search box positioningUsing absolute positioning with fixed pixel values could cause layout issues across different viewport sizes. Consider using CSS Grid or Flexbox for more flexible positioning.
.search-box { - position: absolute; + display: flex; + align-items: center; z-index: 1000; - top: 12px; - left: 360px; + margin-left: auto; + padding: 12px; }
65-85: Improve responsive design breakpointsThe current media queries have overlapping breakpoints and fixed positioning values. Consider using relative units and standardizing the breakpoints.
@media screen and (max-width: 1023px) { .search-box { - left: 420px; + left: calc(50% - 100px); } } @media screen and (max-width: 768px) { .DocSearch-Modal { margin-top: 60px; } .search-box { - left: 360px; + left: calc(50% - 80px); } } @media screen and (max-width: 430px) { .search-box { - left: 300px; + left: calc(50% - 60px); } }examples/sites/src/App.vue (1)
Line range hint
5-5: Fix typo in variable nameThe variable
modalSHowhas a typo and should bemodalShowfor consistency.- <tiny-modal :show-header="false" :show-footer="false" v-model="modalSHow" width="1400px" height="900px" resize> + <tiny-modal :show-header="false" :show-footer="false" v-model="modalShow" width="1400px" height="900px" resize>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (22)
examples/sites/demos/pc/webdoc/develop-demo-en.md(2 hunks)examples/sites/demos/pc/webdoc/develop-demo.md(2 hunks)examples/sites/demos/pc/webdoc/envpreparation-open-en.md(1 hunks)examples/sites/demos/pc/webdoc/envpreparation-open.md(1 hunks)examples/sites/demos/pc/webdoc/faq-en.md(1 hunks)examples/sites/demos/pc/webdoc/faq.md(1 hunks)examples/sites/demos/pc/webdoc/form-valid-en.md(15 hunks)examples/sites/demos/pc/webdoc/form-valid.md(15 hunks)examples/sites/demos/pc/webdoc/i18n-en.md(2 hunks)examples/sites/demos/pc/webdoc/i18n.md(4 hunks)examples/sites/demos/pc/webdoc/import-components-en.md(4 hunks)examples/sites/demos/pc/webdoc/import-components.md(6 hunks)examples/sites/demos/pc/webdoc/installation-en.md(4 hunks)examples/sites/demos/pc/webdoc/installation.md(5 hunks)examples/sites/demos/pc/webdoc/theme-en.md(3 hunks)examples/sites/demos/pc/webdoc/theme.md(10 hunks)examples/sites/index.html(1 hunks)examples/sites/src/App.vue(2 hunks)examples/sites/src/style.css(1 hunks)examples/sites/src/views/components/components.vue(1 hunks)examples/sites/src/views/components/demo.vue(1 hunks)examples/sites/src/views/layout/layout.vue(1 hunks)
✅ Files skipped from review due to trivial changes (10)
- examples/sites/demos/pc/webdoc/develop-demo.md
- examples/sites/demos/pc/webdoc/import-components-en.md
- examples/sites/demos/pc/webdoc/faq.md
- examples/sites/demos/pc/webdoc/envpreparation-open.md
- examples/sites/demos/pc/webdoc/form-valid.md
- examples/sites/src/views/components/demo.vue
- examples/sites/demos/pc/webdoc/faq-en.md
- examples/sites/demos/pc/webdoc/i18n.md
- examples/sites/demos/pc/webdoc/envpreparation-open-en.md
- examples/sites/demos/pc/webdoc/import-components.md
🧰 Additional context used
🪛 Gitleaks (8.21.2)
examples/sites/index.html
36-36: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 LanguageTool
examples/sites/demos/pc/webdoc/form-valid-en.md
[grammar] ~6-~6: A word may be missing after ‘the’.
Context: ...nction andrulesConfiguration rules of the. ## API ### validate When submitting ...
(THE_SENT_END)
[uncategorized] ~74-~74: Loose punctuation mark.
Context: ...at is, non-empty verification. - true: Set totrue, indicates that the field ...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~74-~74: Use a comma before “and” if it connects two independent clauses (unless they are closely connected and short).
Context: ...`, indicates that the field is mandatory and the label is marked with a red asterisk...
(COMMA_COMPOUND_SENTENCE_2)
[uncategorized] ~76-~76: Loose punctuation mark.
Context: ...arked with a red asterisk *. - false: default value, indicating that the fiel...
(UNLIKELY_OPENING_PUNCTUATION)
🔇 Additional comments (5)
examples/sites/src/views/components/components.vue (1)
149-151: Great improvement in semantic HTML structure!
The replacement of <div> elements with proper heading tags (<h2> and <h3>) enhances accessibility, SEO, and document outline. This change makes the content structure more meaningful for screen readers and search engines.
Also applies to: 158-160
examples/sites/src/views/layout/layout.vue (2)
14-14: LGTM: Disabling filter aligns with Algolia search integration
The addition of :show-filter="false" correctly implements the removal of the existing search box from the left-side menu, making way for the new Algolia search in the top navigation.
13-15: Verify removal of filter-related CSS
Since the filter functionality is being removed, there might be associated CSS styles that could be cleaned up.
✅ Verification successful
No filter-related CSS cleanup needed
After examining the layout.vue file, I found that there are no specific CSS styles related to the filter functionality that need to be removed. The --layout-tree-menu-input-height variable is still being used for the general tree menu layout and isn't exclusively tied to the filter functionality. The removal of the filter feature was done cleanly at the template level by setting :show-filter="false" without leaving any orphaned CSS.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for filter-related CSS styles in the codebase
rg -l "tiny-input|--layout-tree-menu-input-height" --type css
Length of output: 63
Script:
#!/bin/bash
# Let's try a broader search for filter-related CSS in various file types
rg -t css -t vue -t scss -t less "filter.*input|tree.*input|menu.*input" -A 2 -B 2
Length of output: 112
Script:
#!/bin/bash
# Search specifically in the layout.vue file and its directory for any CSS styles
fd -e vue -e css -e scss -e less . examples/sites/src/views/layout | xargs cat
Length of output: 10152
Script:
#!/bin/bash
# Look for any CSS classes that might be related to the filter functionality
rg "\..*filter.*|\..*search.*menu" -t css -t vue -t scss -t less
Length of output: 94
examples/sites/demos/pc/webdoc/installation.md (2)
Line range hint 3-15: LGTM! Clear version compatibility documentation.
The version compatibility information is well-structured and includes important details about Vue 2.7+ support.
Line range hint 83-106: LGTM! Clear documentation of runtime options.
The runtime options table clearly explains the different bundle options available from v3.17.0.
| .search-box { | ||
| position: absolute; | ||
| z-index: 1000; | ||
| top: 12px; | ||
| left: 360px; | ||
| } | ||
|
|
||
| .DocSearch-Container { | ||
| z-index: 1000; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Review z-index hierarchy
The z-index values of 1000 for both .search-box and .DocSearch-Container might conflict with the existing z-index hierarchy defined in :root. Consider using the existing z-index variables for consistency.
.search-box {
position: absolute;
- z-index: 1000;
+ z-index: var(--docs-float-settings-zindex);
top: 12px;
left: 360px;
}
.DocSearch-Container {
- z-index: 1000;
+ z-index: var(--docs-float-settings-zindex);
}Committable suggestion skipped: line range outside the PR's diff.
| @@ -21,12 +21,24 @@ | |||
| window.DEPLOY_URL = '' | |||
| window.process = { env: {} } | |||
| </script> | |||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add SRI hash for CDN resources
Add integrity hashes for the CDN resources to prevent supply chain attacks.
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"
+ integrity="sha384-..."
+ crossorigin="anonymous"/>Committable suggestion skipped: line range outside the PR's diff.
| docsearch({ | ||
| appId: "AGPA5UXHMH", | ||
| apiKey: "5fa09fc20270efa61d68e2c2eb0f56df", | ||
| indexName: "opentiny", | ||
| container: ".search-box", | ||
| debug: false | ||
| }); | ||
| </script> |
There was a problem hiding this comment.
Security: Move API credentials to environment variables
The Algolia API credentials should not be exposed in client-side code. Move these to environment variables and load them securely.
docsearch({
- appId: "AGPA5UXHMH",
- apiKey: "5fa09fc20270efa61d68e2c2eb0f56df",
- indexName: "opentiny",
+ appId: import.meta.env.VITE_ALGOLIA_APP_ID,
+ apiKey: import.meta.env.VITE_ALGOLIA_API_KEY,
+ indexName: import.meta.env.VITE_ALGOLIA_INDEX_NAME,
container: ".search-box",
debug: false
});Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Gitleaks (8.21.2)
36-36: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
| const searchBox = document.querySelector('.search-box') | ||
| if (searchBox && envTarget === 'open') { | ||
| searchBox.style.display = 'block' | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid direct DOM manipulation in Vue
Instead of using direct DOM manipulation, consider using Vue's reactivity system and v-show/v-if directives.
- const searchBox = document.querySelector('.search-box')
- if (searchBox && envTarget === 'open') {
- searchBox.style.display = 'block'
- }Move the logic to the template:
<template>
<div class="search-box" v-show="showSearchBox">
<!-- search box content -->
</div>
</template>
<script>
export default {
setup() {
const showSearchBox = computed(() => envTarget === 'open')
return {
showSearchBox
}
}
}
</script>
PR
主要更新：
效果如下：
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Style