feat: add favicon.ico add edit style

[wuyiping0628]

Summary by CodeRabbit

• New Features

  • Added favicon to the website.
  • Improved responsive layout for the home page.

• Style

  • Updated home page card styling and descriptions.
  • Adjusted padding, spacing, and color values for better visual consistency.
  • Refined dark mode and light mode styling.

• Bug Fixes

  • Corrected image asset path references.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Configuration and UI refinements for a VitePress documentation site, including favicon injection in the config, restructured home page card layout with new content rows and expanded item definitions, icon list reordering, and CSS path corrections with responsive height adjustments.

Changes

Cohort / File(s)	Summary
Configuration & Favicon \.vitepress/config.mts``	Added favicon link injection via head property in VitePress config.
Home Page UI & Content \.vitepress/theme/Home.vue``	Restructured card grid with inline avatar formatting, multi-line image bindings, new row5 element for pending items ("敬请期待"), expanded homeList objects with enhanced descriptions, and updated styling for padding, positioning, colors, and responsive adjustments.
Component Icon List \.vitepress/theme/components/customContent.vue``	Reordered NEXT-SDKs icon entry within the iconLists array.
Global Styles \.vitepress/theme/style.css``	Corrected background-image URLs from relative to absolute paths (images/... to ../../public/images/...) for light and dark themes; changed home layout height from fixed 800px to responsive calc(100vh - 64px) !important.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 ✨
A favicon shines, a home page gleams,
With new row5 cards fulfilling dreams!
Icons shuffled, paths made right,
Responsive heights in dark and light.
The warren's docs now shine so bright! 🌟

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title partially captures changes in the PR—it mentions adding a favicon, which is confirmed in .vitepress/config.mts. However, the title is grammatically awkward ('add favicon.ico add edit style') and doesn't clearly convey the main objectives of the comprehensive UI/styling updates across Home.vue, customContent.vue, and style.css.	Revise the title to be grammatically correct and more descriptive, such as 'feat: add favicon and update home page styling' or similar, to better reflect all significant changes in the changeset.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

.vitepress/theme/components/customContent.vue (1)

243-262: Consider adding route handling for NEXT-SDKs.

The watch function handles routes for TinyVue, TinyEngine, and TinyRobot but doesn't include a case for NEXT-SDKs. If NEXT-SDKs will have its own route in the future, add handling now to avoid issues later.

🔎 Proposed addition for NEXT-SDKs route handling

    } else if (route.path.includes("/tiny-robot")) {
      linkUrl.value = "https://opentiny.github.io/tiny-robot/latest/playground/";
      title = "TinyRobot";
+   } else if (route.path.includes("/next-sdk")) {
+     linkUrl.value = ""; // or appropriate URL when available
+     title = "NEXT-SDKs";
    } else {
      linkUrl.value = "https://opentiny.design/vue-playground?cmpId=button&fileName=click.vue&apiMode=Composition&mode=pc&theme=os";
    }

.vitepress/theme/Home.vue (2)

20-31: Consider simplifying the image binding.

The multi-line image tag binding is functionally correct but verbose. While the current implementation works, a more concise format improves readability.

🔎 Simplified alternative (optional)

-          <div class="row2">
-            <img
-              :src="
-                getImgUrl(
-                  isDark
-                    ? `images/${item.imgUrl}-dark.svg`
-                    : `images/${item.imgUrl}.svg`
-                )
-              "
-              :key="isDark"
-              alt="OpenTiny NEXT"
-              class="logo-icon"
-            />
-          </div>
+          <div class="row2">
+            <img 
+              :src="getImgUrl(isDark ? `images/${item.imgUrl}-dark.svg` : `images/${item.imgUrl}.svg`)"
+              :key="isDark"
+              alt="OpenTiny NEXT"
+              class="logo-icon"
+            />
+          </div>

---

292-296: Verify the necessity of !important on background colors.

The !important flag on the logo-icon background colors suggests there may be conflicting styles. Consider whether these conflicts can be resolved through specificity adjustments rather than forcing with !important.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b3c65c0 and b6381eb.

⛔ Files ignored due to path filters (1)

• public/images/favicon.ico is excluded by !**/*.ico

📒 Files selected for processing (4)

• .vitepress/config.mts
• .vitepress/theme/Home.vue
• .vitepress/theme/components/customContent.vue
• .vitepress/theme/style.css

🔇 Additional comments (5)

.vitepress/theme/style.css (1)

7-7: Good responsive height improvement!

Changing from a fixed 800px to calc(100vh - 64px) makes the layout responsive and adapts to different viewport heights.

.vitepress/theme/Home.vue (2)

43-43: Well-implemented "coming soon" feature!

The conditional row5 display with styling for items that have empty links is a clean solution. The badge design with dark mode support is well-executed.

Also applies to: 274-290

---

58-91: Comprehensive homeList data structure looks good.

The expanded object definitions with icon, title, titleTip, imgUrl, link, and desc provide all necessary information for the card display. The descriptions are clear and informative.

.vitepress/theme/components/customContent.vue (1)

201-208: Icon assets are in place and correctly referenced.

The NEXT-SDKs entry references images/next-sdk-logo.svg and images/next-sdk-logo-active.svg, which exist in the public/images/ directory. The empty link value appropriately follows the "coming soon" pattern.

.vitepress/config.mts (1)

9-9: No action required. The favicon file exists at public/images/favicon.ico as expected by the configuration.