# astro-link

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

Latest version **1.2.1** (published 2023-04-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install astro-link
pnpm add astro-link
yarn add astro-link
bun add astro-link
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2023-04-18 |
| First published | 2022-10-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 171 |
| Author | Julian Cataldo |
| Maintainers | julian.cataldo |
| Keywords | astro, astro-component, link, href, anchor, external, badge, mailto, telephone, obfuscation, css, javascript |

## Links

- npm: https://www.npmjs.com/package/astro-link
- Repository: https://github.com/JulianCataldo/web-garden
- Homepage: https://code.juliancataldo.com/component/astro-link
- Issues: https://github.com/JulianCataldo/web-garden/issues
- npm.io page: https://npm.io/package/astro-link

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2023-04-18
- 1.2.0 — 2023-04-12
- 1.1.5 — 2023-04-06
- 1.1.4 — 2023-01-21
- 1.1.3 — 2023-01-05
- 1.1.2 — 2022-11-19
- 1.1.1 — 2022-10-17
- 1.1.0 — 2022-10-15
- 1.0.0 — 2022-10-15
- 0.0.0 — 2022-10-13

## README

# 🚀  Astro — Link, with smart optimizations

[![NPM](https://img.shields.io/npm/v/astro-link)](https://www.npmjs.com/package/astro-link)
![Downloads](https://img.shields.io/npm/dt/astro-link.svg)
[![ISC License](https://img.shields.io/npm/l/astro-link)](https://github.com/JulianCataldo/web-garden/blob/develop/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://makeapullrequest.com)  
[![TypeScript](https://img.shields.io/badge/TypeScript-333333.svg?logo=typescript)](http://www.typescriptlang.org/)
[![Prettier](https://img.shields.io/badge/Prettier-333333.svg?logo=prettier)](https://prettier.io)
[![EditorConfig](https://img.shields.io/badge/EditorConfig-333333.svg?logo=editorconfig)](https://editorconfig.org)
[![ESLint](https://img.shields.io/badge/ESLint-3A33D1?logo=eslint)](https://eslint.org)

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'
  - Auto add the `rel=prefetch` marker (e.g. for `@astrojs/prefetch`)

Some of these features can be disabled if needed.

## Classes

- `link`
- `is-external`
- `is-internal`
- `is-hash`
- `is-mail`
- `is-tel`
- `has-hint`

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

## 📦  Installation

```sh
pnpm i astro-link
```

## 🛠  Usage

```astro
---
import { Link } from 'astro-link';
// ...
---
```

```astro
<!-- ... -->
<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

```astro
<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):

```astro
<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):

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

## To do

- [ ] Support Astro `base` option for prefixing `href`s.

<div class="git-footer">

---

## [LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋](https://code.juliancataldo.com/)

[![Live demo website](https://code.juliancataldo.com/poster.png)](https://code.juliancataldo.com)

**_[`code.juliancataldo.com`](https://code.juliancataldo.com/)_**

---

🔗  [JulianCataldo.com](https://www.juliancataldo.com/)

</div>

---
_Source: https://npm.io/package/astro-link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._