Add in-site notification feature to Docusaurus #1168
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
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an in-site notification feature for Docusaurus to enhance visitor engagement by displaying localized notifications in the navigation bar. Key changes include:
- Implementation of a custom NotificationBell React component to handle notification display and interaction.
- Creation of a notifications data structure and utility functions to support language-specific notifications.
- Modifications in the navbar and configuration to integrate the notification feature.
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 | Wraps the custom NotificationBell component and fetches language‐specific notifications. |
| src/data/notifications.js | Defines notifications, utility functions to fetch/update notifications and detect language. |
| src/components/NotificationBell.tsx | Implements the NotificationBell component to display notifications and manage read status. |
| docusaurus.config.js | Updates configuration to include the custom notification bell in the navbar. |
Files not reviewed (2)
- package.json: Language not supported
- src/css/custom.css: Language not supported
josh-wong
added a commit
that referenced
this pull request
May 14, 2025
* Create NotificationBell.tsx * Create index.tsx * Create notifications.js * Add custom notification function * Add styles for notification icon and dropdown * Fix question mark tooltip overlap issue * Add `@fortawesome/fontawesome-free` * Fix image background color on zoom * Allow each language to have its own URL * Add notification messages * Make notification message font larger * Fix broken relative links 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. * Add `Blog post` to notification message * Add missing ending curly bracket * Remove duplicate bell icon * Fix grammar * Change object name from `languages` to `message` * Add automatic version tracking for content changes 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Dependency updates
@fortawesome/fontawesome-freefor consistent icon usage across the notification bell component.Checklist
Additional notes (optional)
N/A