Link Component

The Link component enhances your website’s navigation by automatically handling both internal and external URLs. It provides built-in security features, consistent URL formatting, and content collection link validation.

Key Features

• Smart URL Processing: Automatic HTTPS upgrade and trailing slash handling

• Security Features: Built-in protection for external links

• Content Collection Validation: Automatic verification of content collection URLs

Basic Usage

Create links with automatic handling of internal and external URLs:

1
---
2
import A from '@/components/NST-components/UI/link/Link.astro';
3
---
4

5
<A href="https://example.com">External Link</A>
6
<A href="/">Internal Link</A>

Smart Features

URL Processing

The component automatically handles various URL scenarios:

1
<!-- HTTP to HTTPS conversion -->
2
<A href="http://example.com">Converts to HTTPS</A>
3

4
<!-- Trailing slash addition -->
5

6
<A href="/about">Adds trailing slash</A>
7

8
<!-- Hash links remain unchanged -->
9

10
<A href="#section">Hash link</A>

Security Enhancements

External links receive automatic security attributes:

1
<!-- External link with security attributes -->
2
<A href="https://external-site.com">
3
  <!-- Outputs: -->
4
  <!-- target="_blank" rel="noopener noreferrer" -->
5
</A>

Content Collection Validation

The component validates content collection URLs against published content. Very useful for SEO as it will render as text if the content collection is not published, and when it is published the link will work:

1
<!-- Valid blog post link -->
2
<A href="/blog/existing-post">Links to post</A>
3

4
<!-- Invalid blog post link -->
5

6
<A href="/blog/not-published">Renders as text</A>