fix: toc links in the blogs #3562
Conversation
r3yc0n1c
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe changes in the Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3562 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 19 19
Lines 668 668
=========================================
Hits 668 668 ☔ View full report in Codecov by Sentry. |
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
components/TOC.tsx (1)
Line range hint
8-14: AddslugWithATagto the interface definition.The interface
ITOCPropsneeds to be updated to include the newslugWithATagproperty that's being used in the implementation. This will ensure type safety and prevent potential runtime errors.Apply this diff to fix the interface:
interface ITOCProps { className?: string; cssBreakingPoint?: string; toc: { lvl: number; content: string; slug: string; + slugWithATag?: string; }[]; contentSelector?: string; depth?: number; }
🧹 Nitpick comments (1)
components/TOC.tsx (1)
Line range hint
34-39: Enhance slug transformation for better compatibility.The current slug transformation could be improved to handle:
- Consecutive special characters that might result in multiple hyphens
- Non-ASCII characters that could cause inconsistent slugs
- Edge cases with special characters
Consider using a robust slugification library or apply this enhanced transformation:
slugWithATag: item.content - .replace(/[<>?!:`'."\\/=]/gi, '') - .replace(/\s/gi, '-') - .toLowerCase() + .toLowerCase() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') // Remove diacritics + .replace(/[^a-z0-9\s-]/g, '') // Remove special chars + .trim() + .replace(/[\s-]+/g, '-') // Replace spaces and repeated hyphens
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/TOC.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 180000ms (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
components/TOC.tsx (1)
Line range hint
78-91: Verify unique slugs to prevent scroll spy issues.While the changes to use
slugWithATagare correct, there's no validation to ensure unique slugs. Duplicate slugs could cause the scroll spy to behave incorrectly when multiple headings transform to the same slug.Consider adding a uniqueness check or suffix for duplicate slugs:
slugWithATag: item.content .replace(/[<>?!:`'."\\/=]/gi, '') .replace(/\s/gi, '-') - .toLowerCase() + .toLowerCase(), + // Add a suffix for duplicate slugs + slugWithATag: (slugs => { + let base = /* ... existing transformation ... */; + let unique = base; + let counter = 1; + while (slugs.includes(unique)) { + unique = `${base}-${counter++}`; + } + slugs.push(unique); + return unique; + })([])Run this script to check for duplicate slugs in the existing content:
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3562--asyncapi-website.netlify.app/ |
Description
Related issue(s)
Resolves #3540
Demo
bugfix-toc-link.mp4
Summary by CodeRabbit