Skip to content

Conversation

@SoonIter
Copy link
Member

@SoonIter SoonIter commented Feb 18, 2025

Summary

We currently have two matching algorithms for sidebar

{
	'/': [],
	'/guide': [
		{
			text: 'Getting Started',
			link: '/guide/getting-started',
		},
	],
},

1. matchPath(sidebarKey, pathname) in getSidebarGroupData(pathname: string)

decide which sidebarGroup would show, and it will calculate with these keys '/', '/guide' one by one

*/
export const matchPath = (
pattern: string,
currentPathname: string,
): boolean => {
const prefix = withBase(pattern);
if (prefix === currentPathname) {
return true;
}
const prefixWithTrailingSlash = addTrailingSlash(prefix);
if (currentPathname.startsWith(prefixWithTrailingSlash)) {
return true;
}
// be compatible with api-extractor
// '/api/react': [
// { link: '/api/react.createroot' }
// ]
const prefixWithDot = `${prefix}.`;
return currentPathname.startsWith(prefixWithDot);
};

2. match(sidebarGroup, pathname)

decide which sidebarItem is active,

to match item.link recursively

{
	text: 'Getting Started',
	link: '/guide/getting-started',
},

some code changes

  1. unify all pathname -> routePath logic to pathnameToRouteService

it is a core function which bridge Route and Sidebar

  1. use pathnameToRouteService to decide which sidebar is active

Before, we wrote the algorithm repeatedly

This pathnameToRouteService should be the above algorithm 2, it comes froms react-router-dom and already have been used in Route

Of course, Sidebar isActive should use the same logic with Route

  1. be compatible to api-extractor generated path

for rspeedy

Related Issue

Checklist

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

@netlify
Copy link

netlify bot commented Feb 18, 2025

Deploy Preview for aquamarine-blini-95325f ready!

Name Link
🔨 Latest commit 7ca5c8d
🔍 Latest deploy log https://app.netlify.com/sites/aquamarine-blini-95325f/deploys/67b5780bd697830008152010
😎 Deploy Preview https://deploy-preview-1863--aquamarine-blini-95325f.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 70 (🔴 down 6 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

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

@SoonIter SoonIter force-pushed the fix/syt/sidebar branch 2 times, most recently from 7d61f02 to a979d75 Compare February 18, 2025 12:13
@SoonIter SoonIter changed the title chore: update sidebar refactor: Sidebar isActive should be same with Route match Feb 18, 2025
@SoonIter SoonIter marked this pull request as ready for review February 19, 2025 04:18
@SoonIter SoonIter changed the title refactor: Sidebar isActive should be same with Route match refactor(theme): Sidebar isActive algorithm should be same with Route match Feb 19, 2025
@SoonIter SoonIter merged commit e2c8d2b into main Feb 19, 2025
11 checks passed
@SoonIter SoonIter deleted the fix/syt/sidebar branch February 19, 2025 06:45
SoonIter added a commit that referenced this pull request Oct 21, 2025
SoonIter added a commit that referenced this pull request Oct 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants