Add in-site notification feature to Docusaurus #814
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adjust notification styles for consistency with other dropdown menus.
Clicking a link in the notification dropdown and then clicking another link resulted in a broken link because the relative path was taken into account when then next link was clicked. For example, if the relative link was `AAA/BBB`, then when the link `CCC/DDD` was selected, the URL would be `AAA/CCC/DDD`. This commit ensures that the base URL is called first and then the relative link in the notification message is applied to that base link.
There was a problem hiding this comment.
Pull Request Overview
This pull request introduces an in-site notification feature to enhance visitor engagement on the Docusaurus documentation site. The key changes include adding a custom NotificationBell component, implementing notification data and utility functions, and updating the navbar and configuration to integrate the notification bell.
Reviewed Changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/theme/NavbarItem/index.tsx | Integrates the NotificationBell via a condition on the item type |
| src/data/notifications.js | Implements notifications data and utility functions for language-specific handling |
| src/components/NotificationBell.tsx | Develops the NotificationBell component with dynamic notification retrieval and localStorage tracking |
| docusaurus.config.js | Updates the navbar configuration to include a custom notification bell entry |
Files not reviewed (2)
- package.json: Language not supported
- src/css/custom.css: Language not supported
Comments suppressed due to low confidence (1)
src/theme/NavbarItem/index.tsx:10
- [nitpick] The 'notifications' prop is declared in the component props but is not used when 'type' equals 'custom-NotificationBell'. Consider either removing this prop or using it if external notification data should override the internal getNotifications call.
notifications?: any[];
Co-authored-by: Copilot <[email protected]>
josh-wong
force-pushed
the
docusaurus/add-in-site-notification-feature
branch
from
e89fa24 to
c9835b5
Compare
Implemented content fingerprinting to detect changes in notification messages and URLs. When content changes, the system automatically increments the version number, marking the notification as unread.
josh-wong
force-pushed
the
docusaurus/add-in-site-notification-feature
branch
from
c9835b5 to
1bbb91d
Compare
✅ Deploy Preview for staging-scalardl-docs-site ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pull request introduces a new in-site notification feature to enhance visitor engagement by displaying notifications in the navigation bar at the top of the page in both English and Japanese. The changes include adding a custom notification bell component, integrating it into the navbar, and styling it for both desktop and mobile views. Additionally, a data structure and utility functions were implemented to manage notifications dynamically based on user language and read status.
Related issues and/or PRs
N/A
Changes made
Notification feature implementation:
NotificationBellcomponent to display notifications, track read/unread status, and handle user interactions. Notifications are fetched dynamically and support language-specific (English or Japanese) messages.getNotificationsfor fetching notifications based on language anddetectLanguagefor determining the user's language from the URL.custom-NotificationBell. Notifications are passed dynamically to the component.Configuration and styling
getNotificationsfunction and add a custom navbar item for the notification bell. [1] [2]Dependency updates
@fortawesome/fontawesome-freefor consistent icon usage across the notification bell component.Checklist
Additional notes (optional)
N/A