🚀  Astro — Link, with smart optimizations

Supercharge your links. This component detects external / anchor / same domain / mail / telephone `href`, and apply optimizations accordingly.

Components

Keywords:

  • astro
  • astro-component
  • link
  • href
  • anchor
  • external
  • badge
  • mailto
  • telephone
  • obfuscation
  • css
  • javascript

Component live demo

🚀  Astro — Link, with smart optimizations

NPM Downloads ISC License PRs Welcome
TypeScript Prettier EditorConfig ESLint

Supercharge your links.
This component detects external / anchor / same domain / mail / telephone href, and apply optimizations accordingly.

Features

  • External links
    • rel="noopener nofollow" for search engines optimization
    • target="_blank" for opening link in a new tab
  • JS-based obfuscation for mailto: and tel: links
  • Applying CSS classes for specific link types
  • Internal links: auto prefix URLs with 'BASE_URL'

Some of these features can be disabled if needed.

Classes

  • link
  • is-external
  • is-hash
  • is-mail
  • is-tel
  • has-hint

You can then style these globally with :global(.link.is-mail) for example.

📦  Installation

pnpm i astro-link

🛠  Usage

---
import { Link } from 'astro-link';
// ...
---
<!-- ... -->
<body>
  <!-- Place component inside `BODY` tag -->

  <Link
    href={'https://www.juliancataldo.com' /* Required */}
    title={'Bonjour !'}
    externalInNewTab={true}
  >
    Some <strong>external</strong> link, loaded in current tab
  </Link>

  <!-- ... -->
</body>

🎉  Result

<a
  href="https://www.juliancataldo.com"
  class="link is-external astro-H4CCARKM"
  rel="noopener nofollow"
  target="_blank"
>
  Some external link, loaded in a new tab
</a>

🎨  Styling

As all component in this collection, you are responsible to bring style to them.
This will give you maximum freedom, still you can prevent most of potential styles leaking when needed.

Of course, as links are ubiquitous in any website, it's totally valid to style them globally with is:global.

Semi-scoped styles inside parent (it won't effect upstream, only downstream):

<style lang="scss">
  .my-parent-with-custom-links {
    // Use `:global` as a localized escape hatch:

    & :global(.link) {
      font-weight: 700;
      color: green;
    }
    & :global(.link.is-tel) {
      background: yellow;
    }
    & :global(.link.is-mail) {
      color: red;
    }
  }
</style>

-OR-

Global styles (in your layout component, for example):

<style lang="scss" is:global>
  a.link {
    font-weight: 700;
    color: green;
  }
  // ...
</style>

To do

  • Support Astro base option for prefixing hrefs.

LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋

Live demo website

code.juliancataldo.com

🔗  JulianCataldo.com

TypeScript API

Extends: astroHTML.JSX.AnchorHTMLAttributes

name
type
required
default
externalInNewTab
boolean
false
true

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.1.4 (2023-01-21)

Bug Fixes

  • space trimming, prevents wrapping (9e36412)

1.1.3 (2023-01-05)

Note: Version bump only for package astro-link

1.1.2 (2022-11-19)

Bug Fixes

  • better absolute / relative detection (f4180b9)

1.1.1 (2022-10-17)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)

1.1.0 (2022-10-15)

Features

  • better defaults for link (2c370d9)
  • better defaults properties (cc55aec)
  • init link component (fc2afa1)
  • new name, import method, docs badges (f44b9c7)
  • option to disable new window external url (0adc608)
  • support astro base url setting via env (12ce9ae)

Bug Fixes

  • add inherited class:list beside class (7b4be23)
  • missing title attribute (921f38c)
  • remove slash prefix for hash href (a8cc89b)

0.12.7 (2022-10-06)

Bug Fixes

  • add inherited class:list beside class (7b4be23)

0.12.6 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.5 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.4 (2022-08-06)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.3 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.2 (2022-07-30)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.1 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-link

0.12.0 (2022-07-18)

Features

  • support astro base url setting via env (12ce9ae)

Bug Fixes

  • remove slash prefix for hash href (a8cc89b)

0.11.0 (2022-06-28)

Features

  • better defaults for link (2c370d9)
  • better defaults properties (cc55aec)

Bug Fixes

  • missing title attribute (921f38c)

0.10.4 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-link

0.10.3 (2022-06-25)

Note: Version bump only for package @julian_cataldo/astro-link

0.10.2 (2022-06-25)

Note: Version bump only for package @julian_cataldo/astro-link

0.10.1 (2022-06-24)

Note: Version bump only for package @julian_cataldo/astro-link

0.10.0 (2022-06-24)

Features

  • init link component (fc2afa1)
  • option to disable new window external url (0adc608)
...

⚠️  Having an issue? / 🗣   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.