Keywords:
- astro
- astro-component
- link
- href
- anchor
- external
- badge
- mailto
- telephone
- obfuscation
- css
- javascript
πΒ Β 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 optimizationtarget="_blank"
for opening link in a new tab
- JS-based obfuscation for
mailto:
andtel:
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 prefixinghref
s. - Proper support for opening link in new tab (ctrl/cmd/middle-mouse + click)
TypeScript API
Extends: astroHTML.JSX.AnchorHTMLAttributes
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
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