feat: Document homepage restructuring. - #117
Conversation
- 将首页样式集中到 home/styles.css - 全局滚动条美化移至 style.css（圆角滑块、隐藏上下箭头） - 抽取 ProductSection.vue 静态产品卡片组件
|
Warning Review limit reached
Next review available in: 119 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (3)
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
WalkthroughThe homepage is now componentized into hero, product, and update sections. It adds MiniSearch-based documentation search, product cards, GitHub update aggregation with caching and translation, responsive styling, and global layout updates. ChangesDocumentation homepage
Estimated code review effort: 4 (Complex) | ~60 minutes Mergeability Score: ⚪ Minimal · up to This PR restructures the homepage and adds related styling and assets; no actionable merge-blocking risk remains beyond normal checks and review. Sequence Diagram(s)sequenceDiagram
participant Visitor
participant HeroSection
participant MiniSearch
Visitor->>HeroSection: enter search query
HeroSection->>MiniSearch: load index and run fuzzy or prefix search
MiniSearch-->>HeroSection: return ranked matches
HeroSection-->>Visitor: render highlighted results
sequenceDiagram
participant UpdateSection
participant LocalCache
participant GitHub
participant TranslationAPI
UpdateSection->>LocalCache: read cached updates and ETags
UpdateSection->>GitHub: request releases and commits conditionally
GitHub-->>UpdateSection: return updates or cached-response status
UpdateSection->>TranslationAPI: translate uncached summaries
TranslationAPI-->>UpdateSection: return translated summaries
UpdateSection->>LocalCache: store updates, translations, and ETags
UpdateSection-->>UpdateSection: render sorted, deduplicated updates
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1⚔️ Resolve merge conflicts 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
.vitepress/theme/home/styles.css (1)
575-584: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd the standard
line-clampproperty.
.update-card-descuses only-webkit-line-clamp. Add the standardline-clampdeclaration for engines that support the unprefixed property.♻️ Proposed refactor
display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/home/styles.css around lines 575 - 584, Update the .update-card-desc rule to add the unprefixed line-clamp declaration alongside the existing -webkit-line-clamp: 2, preserving the current two-line truncation behavior and vendor-prefixed fallback..vitepress/theme/style.css (1)
23-23: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUpdate the comment to match the rules.
The comment states "Firefox 细滚动条", but the block contains only WebKit pseudo-element rules. The
scrollbar-widthdeclaration was removed. Either restore ascrollbar-widthrule or drop that part of the comment.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/style.css at line 23, Update the scrollbar styling comment near the WebKit pseudo-element rules to accurately describe the implementation: either restore the Firefox scrollbar-width declaration or remove the “Firefox 细滚动条” wording, preserving the existing WebKit behavior..vitepress/theme/home/components/HeroSection.vue (1)
123-127: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winUse the VitePress router instead of
window.location.href.
onSearchEnterassignswindow.location.href, which forces a full page reload and discards the SPA state. UseuseRouter().go(...)fromvitepressfor client-side navigation.♻️ Proposed refactor
-import { useData } from "vitepress"; +import { useData, useRouter } from "vitepress"; ... +const router = useRouter(); const onSearchEnter = () => { if (searchResults.value.length) { - window.location.href = searchResults.value[0].id; + router.go(searchResults.value[0].id); } };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/home/components/HeroSection.vue around lines 123 - 127, Update onSearchEnter to obtain the VitePress router via useRouter and call router.go with the first search result’s id, replacing the window.location.href assignment while preserving the existing non-empty-results guard..vitepress/theme/home/components/ProductSection.vue (1)
65-210: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMove the product catalog data out of the component.
productCardsholds 145 lines of static configuration inside the component. Move it to a separate data module, for example.vitepress/theme/home/data/products.js, and export a factory that takesprefix. The component then contains only rendering logic, and the catalog becomes reusable and easier to edit.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/home/components/ProductSection.vue around lines 65 - 210, Move the static productCards catalog out of ProductSection.vue into a dedicated data module such as data/products.js, exporting a factory that accepts prefix and constructs the image paths. Update the component to import and call that factory, leaving only rendering logic and preserving the existing catalog structure and URLs..vitepress/theme/home/components/UpdateSection.vue (2)
46-47: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDerive the fallback cache key instead of hard-coding it.
CACHE_KEYandFALLBACK_CACHE_KEYboth embed a version number, so every schema change needs two manual edits kept in sync. Store the version in one constant and build both keys from it.♻️ Proposed refactor
-const CACHE_KEY = "home-updates-cache-v10"; -const FALLBACK_CACHE_KEY = "home-updates-cache-v9"; +const CACHE_VERSION = 10; +const CACHE_KEY = `home-updates-cache-v${CACHE_VERSION}`; +const FALLBACK_CACHE_KEY = `home-updates-cache-v${CACHE_VERSION - 1}`;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/home/components/UpdateSection.vue around lines 46 - 47, Update the cache-key declarations around CACHE_KEY and FALLBACK_CACHE_KEY to store the current cache version in a single constant, derive CACHE_KEY from that version, and derive FALLBACK_CACHE_KEY as the preceding version. Remove the duplicated hard-coded version numbers while preserving the existing v10/v9 key values.
258-310: 🚀 Performance & Scalability | 🔵 Trivial | 🏗️ Heavy liftReduce the unauthenticated GitHub API calls per visitor.
A cold load issues 14 unauthenticated requests, which is 2 requests for each of the 7 repositories. The unauthenticated limit is 60 requests per hour per IP. Visitors behind a shared NAT or corporate proxy exhaust the quota after four page loads, and the section then shows stale or no data.
Fetch the release and commit data at build time, or through a small proxy that uses a token, and ship the result as static JSON. The component then reads local data and needs no client-side quota.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vitepress/theme/home/components/UpdateSection.vue around lines 258 - 310, Replace the client-side GitHub API requests in fetchLatest and fetchDocsUpdates with build-time or token-authenticated proxy data exposed as static JSON. Update the component to load and merge the local release/commit dataset instead of calling fetchConditional for each repository, preserving the existing item mapping, cache shape, and fallback behavior while eliminating unauthenticated per-visitor API calls.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.vitepress/theme/home/components/HeroSection.vue:
- Around line 177-216: Update .vitepress/theme/home/components/HeroSection.vue
lines 177-216 so every categoryCards link URL is passed through
normalizeLink(url, prefix), matching hotSearches. Also update
.vitepress/theme/home/components/ProductSection.vue lines 44-49 so each comp
link URL uses normalizeLink(url, prefix), while preserving external URL
handling.
- Around line 61-67: Update the category link anchor in the card.links v-for to
include rel="noopener noreferrer" alongside target="_blank", preserving the
existing href, key, and link text behavior.
In @.vitepress/theme/home/components/UpdateSection.vue:
- Around line 233-251: External requests in fetchConditional and translateToZh
lack timeouts and can remain pending indefinitely. In
.vitepress/theme/home/components/UpdateSection.vue lines 233-251, pass an
AbortController signal to fetchConditional’s GitHub request and return { status:
"error" } when aborted; in lines 175-193, apply the same timeout and
abort-signal handling to both translation fetch calls so translation falls back
on timeout.
In @.vitepress/theme/home/styles.css:
- Around line 16-20: Add an empty line before the overflow declaration in the
relevant style block so overflow: hidden; satisfies Stylelint’s
declaration-empty-line-before rule.
- Around line 624-627: Update the `.projects-section` rule within the `<= 979px`
mobile breakpoint to replace the 160px horizontal padding with a small
mobile-appropriate value, preserving the section’s vertical padding behavior and
allowing cards to retain usable content width.
In @.vitepress/theme/style.css:
- Around line 979-983: Remove the generated [data-v-e31b95cc] attribute selector
from the .VPContent.has-sidebar rule and preserve or increase specificity using
stable class selectors or another non-generated mechanism, keeping the existing
sidebar padding behavior unchanged.
- Around line 108-109: Update the `.VPSidebar` styles to define
`--vp-sidebar-width` as `260px` and replace the hardcoded width with
`var(--vp-sidebar-width) !important`, keeping the existing padding unchanged.
---
Nitpick comments:
In @.vitepress/theme/home/components/HeroSection.vue:
- Around line 123-127: Update onSearchEnter to obtain the VitePress router via
useRouter and call router.go with the first search result’s id, replacing the
window.location.href assignment while preserving the existing non-empty-results
guard.
In @.vitepress/theme/home/components/ProductSection.vue:
- Around line 65-210: Move the static productCards catalog out of
ProductSection.vue into a dedicated data module such as data/products.js,
exporting a factory that accepts prefix and constructs the image paths. Update
the component to import and call that factory, leaving only rendering logic and
preserving the existing catalog structure and URLs.
In @.vitepress/theme/home/components/UpdateSection.vue:
- Around line 46-47: Update the cache-key declarations around CACHE_KEY and
FALLBACK_CACHE_KEY to store the current cache version in a single constant,
derive CACHE_KEY from that version, and derive FALLBACK_CACHE_KEY as the
preceding version. Remove the duplicated hard-coded version numbers while
preserving the existing v10/v9 key values.
- Around line 258-310: Replace the client-side GitHub API requests in
fetchLatest and fetchDocsUpdates with build-time or token-authenticated proxy
data exposed as static JSON. Update the component to load and merge the local
release/commit dataset instead of calling fetchConditional for each repository,
preserving the existing item mapping, cache shape, and fallback behavior while
eliminating unauthenticated per-visitor API calls.
In @.vitepress/theme/home/styles.css:
- Around line 575-584: Update the .update-card-desc rule to add the unprefixed
line-clamp declaration alongside the existing -webkit-line-clamp: 2, preserving
the current two-line truncation behavior and vendor-prefixed fallback.
In @.vitepress/theme/style.css:
- Line 23: Update the scrollbar styling comment near the WebKit pseudo-element
rules to accurately describe the implementation: either restore the Firefox
scrollbar-width declaration or remove the “Firefox 细滚动条” wording, preserving the
existing WebKit behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c77cb632-b4c2-4d3f-92bd-fcae24cf74c4
⛔ Files ignored due to path filters (24)
public/images/icon-ai-extension.svgis excluded by!**/*.svgpublic/images/icon-ai-product.svgis excluded by!**/*.svgpublic/images/icon-api.svgis excluded by!**/*.svgpublic/images/icon-demo.svgis excluded by!**/*.svgpublic/images/icon-fire.svgis excluded by!**/*.svgpublic/images/icon-gen-ui.svgis excluded by!**/*.svgpublic/images/icon-guide.svgis excluded by!**/*.svgpublic/images/icon-hot.svgis excluded by!**/*.svgpublic/images/icon-lowcode.svgis excluded by!**/*.svgpublic/images/icon-next-sdks.svgis excluded by!**/*.svgpublic/images/icon-sdk.svgis excluded by!**/*.svgpublic/images/icon-search.svgis excluded by!**/*.svgpublic/images/icon-templates.svgis excluded by!**/*.svgpublic/images/icon-tiny-charts.svgis excluded by!**/*.svgpublic/images/icon-tiny-cli.svgis excluded by!**/*.svgpublic/images/icon-tiny-editor.svgis excluded by!**/*.svgpublic/images/icon-tiny-engine.svgis excluded by!**/*.svgpublic/images/icon-tiny-ng.svgis excluded by!**/*.svgpublic/images/icon-tiny-pro-angular.svgis excluded by!**/*.svgpublic/images/icon-tiny-pro.svgis excluded by!**/*.svgpublic/images/icon-tiny-robot.svgis excluded by!**/*.svgpublic/images/icon-tiny-vue.svgis excluded by!**/*.svgpublic/images/icon-ui-components.svgis excluded by!**/*.svgpublic/images/icon-web-agent.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
.vitepress/theme/home/components/HeroSection.vue.vitepress/theme/home/components/ProductSection.vue.vitepress/theme/home/components/UpdateSection.vue.vitepress/theme/home/index.vue.vitepress/theme/home/styles.css.vitepress/theme/style.csspackage.jsonpublic/images/img-bg.webppublic/images/img-card.webp
a116d92 to
8c91f89
Compare
discreted66
changed the title
- UpdateSection: GitHub Releases 抓取 + ETag/localStorage 缓存 + conventional commits 清洗（含裸 #PR 过滤） - HeroSection: 本地搜索 + 关键词高亮（v-html 前转义防注入） - index.vue: 瘦身为三组件组合入口 - 新增相关依赖
- 将文字标题替换为SVG背景图，新增亮色和暗色两个版本 - 通过MutationObserver监听<html>类名变化实现暗色模式实时切换 - 暗色SVG第二个路径设为fill=none，使渐变色彩正常显示 - 添加搜索框box-shadow暗色模式CSS变量 - 调整副标题文案、标签颜色及卡片内边距等样式
2 participants
依据设计稿重构主页实现
Summary by CodeRabbit
New Features
Style