fix(theme): run route watch in onMounted to read hash on client

[gene9831]

Hash is only available in the browser; register the route watch inside onMounted so we don't access window.location.hash during SSR.

关联pr：opentiny/docs#78

Summary by CodeRabbit

• Bug Fixes
  • Fixed server-side rendering compatibility issues by deferring initialization logic to client-side execution, ensuring reliable route handling and proper state setup on startup.

[coderabbitai]

Walkthrough

A Vue component was refactored to move route observation logic from top-level into an onMounted hook for SSR-safe execution. The route-based URL and title configuration logic is preserved with adjusted hash retrieval using window.location.hash directly in the client context.

Changes

Cohort / File(s)	Summary
SSR-Safe Route Observation .vitepress/theme/components/customContent.vue	Moved top-level watch registration into onMounted hook to ensure SSR-safe client-only execution. Preserved route.path-based logic for setting linkUrl and title across /tiny-vue, /tiny-engine, /tiny-robot, and /next-sdk routes; adjusted hash retrieval to use window.location.hash directly within client scope.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A watch was wandering, lost in SSR's night,
We tucked it in onMounted, snug and tight,
Now routes dance only when the client's awake,
No SSR stumbles for our component's sake!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: moving the route watch into onMounted to safely read the hash on the client side, addressing an SSR issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/theme-route-watch-hash

---

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

🤖 Fix all issues with AI agents

In @.vitepress/theme/components/customContent.vue:
- Around line 280-282: The linkUrl is only updated when route.path changes, so
hash-only navigations leave linkUrl stale; add a watcher that reacts to hash
changes and updates linkUrl.value accordingly (e.g., observe
window.location.hash or route.hash) for the "/tiny-robot" branch, and also
update linkUrl.value inside the existing handleMessage listener when receiving
the "playground-hash-change" message so both the browser URL and the iframe src
stay in sync; target the linkUrl, route.path check for "/tiny-robot", and the
handleMessage ("playground-hash-change") code paths.

🧹 Nitpick comments (1)

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

267-296: Consider consolidating the two onMounted hooks.

There are two separate onMounted calls (lines 267 and 313). While both work correctly in Vue 3, merging them into a single onMounted block would be slightly cleaner.

♻️ Suggested consolidation

 onMounted(() => {
   watch(
     () => route.path,
     () => {
       // ... existing watch logic ...
     },
     { immediate: true },
   );
-});
-
-onMounted(() => {
   window.addEventListener("message", handleMessage);
 });

Also applies to: 313-315