External Links

When writing markdown, you often want to link to external resources. You can do this with the standard markdown syntax:

	[Click here to go to Google](https://google.com)	

But by default, this will render a link that looks like this:

	<a href="https://google.com">Click here to go to Google</a>	

Meaning when a user clicks the link, they'll be taken away from your site, which is often not the desired behavior. Let's take a look at how we can automatically handle links for external and internal resources.

Create a Custom Component

To override the default a element that is rendered for links, we'll need to define a component that will be used in its place.

To keep things simple, we'll create a component called a.svelte in our src/lib/blueprints/default directory:

	<script lang="ts">
	// logic here soon
</script>
 
<a>
	<slot />
</a>	

The href attribute will be passed to the component as a prop, so we can use it to determine if the link is internal or external, based on the first character of that prop. If the first character is a /, we'll assume it's an internal link, otherwise we'll assume it's an external link.

	<script lang="ts">
	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
	type $$Props = HTMLAnchorAttributes;
 
	export let href: $$Props['href'];
 
	$: isExternal = !href.startsWith('/');
	$: target = isExternal ? '_blank' : undefined;
</script>
 
<a {href} {target}>
	<slot />
</a>	

You can also get fancy and add a custom icon used to indicate that the link is external:

	<script lang="ts">
	import type { HTMLAnchorAttributes } from 'svelte/elements';
	import { ExternalIcon } from 'some-icon-library';
 
	type $$Props = HTMLAnchorAttributes;
 
	export let href: $$Props['href'];
 
	$: isExternal = !href.startsWith('/');
	$: target = isExternal ? '_blank' : undefined;
</script>
 
<a {href} {target}>
	<slot />
	{#if isExternal}
		<ExternalIcon />
	{/if}
</a>	

Now that we have our custom component, we'll need to export it from a blueprint component for it to override the default a element.

Create a Blueprint

We'll create a simple blueprint for this example, whose only job is to export our custom a component:

	<script lang="ts" context="module">
	export { default as a } from '$lib/blueprints/default/a.svelte';
</script>
 
<slot />	

Apply the Blueprint

We'll use this blueprint as our default blueprint, which will be used for all markdown files that don't specify a blueprint.

	import { defineConfig } from 'mdsx';
 
export const mdsxConfig = defineConfig({
	extensions: ['.md'],
	blueprints: {
		default: {
			path: 'src/lib/blueprints/default/blueprint.svelte',
		},
	},
});	

And that's it! Now when you link to an external resource, it will be rendered using your custom component, which will automatically handle external links for you.