npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@communicatehealth/outlink.js

v1.1.0

Published

External link handling

Downloads

82

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

chjasonchjasonprestosaurusprestosaurusmikegodinmikegodin

Keywords

externallinksnoreferrernoopener

Readme

outlink.js

External link handling

Install

npm install @communicatehealth/outlink.js
  • External site links (outside of current domain) show icon, disclaimer, and optionally open in new window/tab
  • Explicit notice of new window/tab behavior is read aloud by assistive technology to satisfy WCAG 2.1 – 3.3.2 On Input
  • Adds rel="noopener noreferrer" to link tags for security and performance improvements:
    • About rel=noopener

      If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

    • The performance benefits of rel=noopener

      Linking to another page using target="_blank" will run the new page on same process as your page. If the new page is executing expensive JS, your page's performance may suffer.

    • [MDN]Link types: noreferrer

      instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information

  • Disclaimer text and alt text pulls in current domain name (with fallback to "this site")
  • Inlined external link icon as SVG
  • Vanilla JavaScript, no dependencies
  • Adds class="outlink" to all processed links
  • Looks for class="outlink-ignore" on link tag to skip processing
  • Adding hex color value as data-icon-color="#f012be attribute on link will change color of external link icon to fuchsia
  • Adding size value as data-icon-size="16" attribute on link will change the size of external link icon to 16px x 16px

Demo page

https://communicatehealth.github.io/outlink.js/