astro-link
v1.2.1
Published
Supercharge your links. This component detects external / anchor / same domain / mail / telephone `href`, and apply optimizations accordingly.
Downloads
680
Maintainers
julian.cataldoReadme
🚀 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
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'
- Auto add the
rel=prefetchmarker (e.g. for@astrojs/prefetch)
Some of these features can be disabled if needed.
Classes
linkis-externalis-internalis-hashis-mailis-telhas-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
baseoption for prefixinghrefs.
LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋
