Issues with Copy-to-Clipboard Notification and Footer GitHub Link on npmjs.com

[lmalma]

1. Copy-to-Clipboard Notification Issue:

   • Description: When clicking the copy icon to copy a package name, a notification appears with the text:

     <p class="ma0" id="notification" role="alert" aria-atomic="true">✔ Copied to clipboard!</p>

   • Problems:
     • The notification lacks position: absolute;, causing the entire page content to shift downward until the message disappears, after which it shifts back up.
     • Repeatedly clicking the copy button results in multiple notifications stacking vertically. There should be a mechanism to prevent additional notifications if one is already displayed.

2. Footer GitHub Link Issue:

   • Description: In the footer section, the GitHub logo links to the main GitHub homepage (https://github.com) instead of the npm organization's page.
   • Recommendation: The link should direct users to https://github.com/npm to provide direct access to npm's repositories.

[jakubbbdev2]

Hi @lmalma ,

Thanks for reporting the issues. Here are some suggestions:

Copy-to-Clipboard Notification Issue
Problems:

Positioning: Add position: absolute; to prevent page content from shifting.

#notification {
    position: absolute;
    top: 10px; 
    right: 10px; 
}

Stacking Notifications: Prevent multiple notifications from stacking.

function showNotification() {
    if (document.getElementById('notification').style.display === 'block') return;
    document.getElementById('notification').style.display = 'block';
    setTimeout(() => {
        document.getElementById('notification').style.display = 'none';
    }, 3000);
}

Footer GitHub Link Issue

Recommendation:
Update the footer link to point to the npm organization's page:

<a href="https://github.com/npm" target="_blank" rel="noopener noreferrer">
    <img src="path_to_github_logo" alt="GitHub">
</a>

I hope this helps!

Best regards,