schmelczer-dev/src/components/ProjectLinks.astro

64 lines
1.8 KiB
Text

---
import type { CollectionEntry } from 'astro:content';
type Link = CollectionEntry<'projects'>['data']['links'][number];
interface Props {
links: Link[];
}
const { links } = Astro.props;
function isExternal(url: string) {
return /^https?:\/\//.test(url);
}
---
{
links.length > 0 && (
<ul class="project-links">
{links.map((link) => (
<li>
<a
href={link.url}
download={link.download ? '' : undefined}
rel={isExternal(link.url) ? 'noopener noreferrer' : undefined}
target={isExternal(link.url) ? '_blank' : undefined}
>
{link.label}
{isExternal(link.url) && (
<>
<svg
class="external-link-icon"
xmlns="http://www.w3.org/2000/svg"
width="0.85em"
height="0.85em"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<polyline points="15 3 21 3 21 9" />
<line x1="10" y1="14" x2="21" y2="3" />
</svg>
<span class="sr-only">(opens in new tab)</span>
</>
)}
{link.download && (
<>
<span class="download-indicator" aria-hidden="true">
</span>
<span class="sr-only">(download)</span>
</>
)}
</a>
</li>
))}
</ul>
)
}