Skip to content

feat(theme): make NavTitle component ejectable#3022

Merged
SoonIter merged 3 commits intomainfrom
syt-vibe-kanban/533c-navtitle-eject
Jan 19, 2026
Merged

feat(theme): make NavTitle component ejectable#3022
SoonIter merged 3 commits intomainfrom
syt-vibe-kanban/533c-navtitle-eject

Conversation

@SoonIter
Copy link
Copy Markdown
Member

@SoonIter SoonIter commented Jan 19, 2026 •
edited
Loading

Summary

Make NavTitle a standalone ejectable component.

Related Issue

#2963

#2952

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

AI Summary

Changes Made

  1. Moved NavTitle to standalone folder structure

    • Relocated Nav/NavTitle.tsx → NavTitle/index.tsx
    • Relocated Nav/NavTitle.scss → NavTitle/index.scss

  2. Replaced deprecated useLocaleSiteData hook

    • Changed from using the deprecated useLocaleSiteData() hook to directly using useSite() and useLang() hooks
    • This makes the component more explicit and follows the recommended pattern in the codebase

  3. Added NavTitle to ejectable components list

    • Added 'NavTitle' to getAvailableComponents() in eject.ts
    • Users can now run rspress eject NavTitle to customize the component

  4. Updated exports

    • Exported NavTitle from theme/index.ts
    • Exported addTrailingSlash utility from runtime/utils.ts and runtime/index.ts (required by NavTitle)

  5. Updated Nav component imports

    • Changed Nav component to import NavTitle from @theme instead of relative path

Why These Changes

  • Makes NavTitle customizable by users through the eject mechanism
  • Follows the same pattern as other ejectable components (e.g., SocialLinks, HomeHero)
  • Removes dependency on deprecated useLocaleSiteData hook

This PR was written using Vibe Kanban

@SoonIter
完成了！让我总结一下所做的更改：
08bf02b 
## 修改总结

### 1. 创建独立的 NavTitle 文件夹
- 新建 `src/theme/components/NavTitle/index.tsx` - 主组件
- 新建 `src/theme/components/NavTitle/index.scss` - 样式文件

### 2. 替换 useLocaleSiteData hook
在新的 NavTitle 组件中，将废弃的 `useLocaleSiteData` hook 替换为直接使用 `useSite` 和 `useLang`：

```tsx
// 旧代码
const localeData = useLocaleSiteData();
const title = (localeData.title ?? site.title) || 'Home';

// 新代码
const lang = useLang();
const locales = themeConfig?.locales;
const localeInfo = locales?.find(locale => locale.lang === lang);
const title = (localeInfo?.title ?? site.title) || 'Home';
```

### 3. 更新相关文件
- `src/theme/components/Nav/index.tsx` - 从 `@theme` 导入 NavTitle
- `src/theme/index.ts` - 导出 NavTitle 组件
- `src/node/eject.ts` - 添加 'NavTitle' 到可 eject 组件列表
- `src/runtime/utils.ts` 和 `src/runtime/index.ts` - 导出 `addTrailingSlash` 工具函数

### 4. 删除旧文件
- 删除 `src/theme/components/Nav/NavTitle.tsx`
- 删除 `src/theme/components/Nav/NavTitle.scss`

现在用户可以通过 `rspress eject NavTitle` 命令来 eject NavTitle 组件并进行自定义。
Copilot AI review requested due to automatic review settings January 19, 2026 03:39
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 19, 2026 •
edited
Loading

✅ Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit 3b10641
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/696dae049c7696000811ba5a
😎 Deploy Preview https://deploy-preview-3022--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@SoonIter SoonIter changed the title 将 NavTitle 设置为可 Eject 的单独组件 (vibe-kanban) feat(theme): make NavTitle component ejectable Jan 19, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 19, 2026 •
edited
Loading

Rsdoctor Bundle Diff Analysis

Found 3 projects in monorepo, 3 projects with changes.

📊 Quick Summary
Project Total Size Change
node 10.5 MB 📈 +137.1 KB (+1.3%)
web 16.0 MB +48.0 KB (0.3%)
node_md 1.3 MB +8.5 KB (0.6%)
📋 Detailed Reports (Click to expand)

📁 node

Path: website/doc_build/diff-rsdoctor/node/rsdoctor-data.json

📌 Baseline Commit: 416a9c8d67 | PR: #3016

Metric Current Baseline Change
📊 Total Size 10.5 MB 10.4 MB +137.1 KB (+1.3%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 10.5 MB 10.4 MB +137.1 KB (+1.3%)
📁 Other Assets 0 B 0 B 0

📦 Download Diff Report: node Bundle Diff

📁 web

Path: website/doc_build/diff-rsdoctor/web/rsdoctor-data.json

📌 Baseline Commit: 416a9c8d67 | PR: #3016

Metric Current Baseline Change
📊 Total Size 16.0 MB 15.9 MB +48.0 KB (0.3%)
📄 JavaScript 15.1 MB 15.1 MB +42.8 KB (0.3%)
🎨 CSS 125.9 KB 125.9 KB 0
🌐 HTML 0 B 0 B 0
📁 Other Assets 728.0 KB 722.7 KB +5.3 KB (0.7%)

📦 Download Diff Report: web Bundle Diff

📁 node_md

Path: website/doc_build/diff-rsdoctor/node_md/rsdoctor-data.json

📌 Baseline Commit: 416a9c8d67 | PR: #3016

Metric Current Baseline Change
📊 Total Size 1.3 MB 1.3 MB +8.5 KB (0.6%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 0 B 0 B 0
📁 Other Assets 1.3 MB 1.3 MB +8.5 KB (0.6%)

📦 Download Diff Report: node_md Bundle Diff

Generated by Rsdoctor GitHub Action

Copilot AI reviewed Jan 19, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the NavTitle component to make it ejectable and replaces the deprecated useLocaleSiteData hook with direct usage of useSite and useLang hooks, following the recommended migration pattern.

Changes:

  • Moved NavTitle from Nav subfolder to its own top-level component folder with proper export
  • Replaced deprecated useLocaleSiteData hook with useSite and useLang hooks
  • Added NavTitle to the list of ejectable components

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/core/src/theme/index.ts Exports NavTitle component for external use
packages/core/src/theme/components/NavTitle/index.tsx Refactored to use useSite/useLang instead of deprecated useLocaleSiteData; logic remains functionally equivalent
packages/core/src/theme/components/NavTitle/index.scss Added CSS styles for logo display and dark mode (new file, previously referenced as NavTitle.scss)
packages/core/src/theme/components/Nav/index.tsx Updated import to use NavTitle from @theme exports instead of local import
packages/core/src/runtime/utils.ts Exports addTrailingSlash utility function
packages/core/src/runtime/index.ts Exports addTrailingSlash from runtime module
packages/core/src/node/eject.ts Added NavTitle to the list of ejectable components

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@SoonIter
chore: upgrade
d81b300
@SoonIter
已创建 NavTitle 文档：
3b10641 
- **英文**: `website/docs/en/ui/components/nav-title.mdx`
- **中文**: `website/docs/zh/ui/components/nav-title.mdx`

文档包含：
1. 组件介绍
2. 基本用法（从配置读取 logo/title）
3. 自定义方式（通过 `navTitle` 属性或 `beforeNavTitle`/`afterNavTitle` 插槽）
4. 配置项说明（logo、logoText、title）
5. 国际化支持说明
@SoonIter SoonIter requested a review from Timeless0911 January 19, 2026 05:09
@SoonIter SoonIter enabled auto-merge (squash) January 19, 2026 05:12
@SoonIter SoonIter merged commit c224ed6 into main Jan 19, 2026
9 checks passed
@SoonIter SoonIter deleted the syt-vibe-kanban/533c-navtitle-eject branch January 19, 2026 05:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@Timeless0911 Timeless0911 Timeless0911 approved these changes

Assignees

No one assigned

Labels

change: feat

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@SoonIter @Timeless0911