🚀  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

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

Features

  • External links
    • Badge icon as a hint for users (⎋)
    • 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 @julian_cataldo/astro-link

🛠  Usage

---
import Link from '@julian_cataldo/astro-link/Link.astro';
// ...
---
<!-- ... -->
<body>
  <!-- Place component inside BODY tag -->

  <Link
    href={'https://www.juliancataldo.com' /* Required */}
    title={'Bonjour !'}
    externalHint={false}
    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.
  • Proper support for opening link in new tab (ctrl/cmd/middle-mouse + click)

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.

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)
...