feat: add a feature that only works on March 32nd#67
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces an AprilFools component designed to replace occurrences of "WebGAL" with "WebG@L" in the document title and body text as a prank. The component is integrated into the main layout and triggers on path changes. Feedback suggests optimizing the DOM traversal by performing text replacement during the tree walk instead of collecting nodes into an array first. Additionally, it is recommended to use a MutationObserver to ensure that dynamically loaded or updated content is also processed.
| const textNodes: Text[] = [] | ||
| let node: Node | null | ||
| while ((node = walker.nextNode())) textNodes.push(node as Text) | ||
| textNodes.forEach(node => { | ||
| if (node.textContent?.includes('WebGAL')) | ||
| node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L') | ||
| }) |
There was a problem hiding this comment.
The current implementation is inefficient as it traverses the DOM tree to collect all text nodes into an array and then iterates over that array again. For large documents, this can be slow and memory-intensive. It is better to perform the text replacement directly while walking the tree.
let node: Node | null
while ((node = walker.nextNode())) {
if (node.textContent?.includes('WebGAL')) {
node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L')
}
}
| useEffect(() => { | ||
| const now = new Date() | ||
| if (now.getMonth() !== 3 || now.getDate() !== 1) return | ||
|
|
||
| if (document.title.includes('WebGAL')) | ||
| document.title = document.title.replace(/WebGAL/g, 'WebG@L') | ||
|
|
||
| const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT) | ||
| const textNodes: Text[] = [] | ||
| let node: Node | null | ||
| while ((node = walker.nextNode())) textNodes.push(node as Text) | ||
| textNodes.forEach(node => { | ||
| if (node.textContent?.includes('WebGAL')) | ||
| node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L') | ||
| }) | ||
| }, [pathname]) |
There was a problem hiding this comment.
The text replacement logic only runs when the component mounts or the pathname changes. This means that any content loaded asynchronously or updated via client-side state changes after the initial render will not be affected by the prank. To ensure all instances of "WebGAL" are replaced, even in dynamically updated content, consider using a MutationObserver to monitor DOM changes.
1 participant
No description provided.