#Link Card opens a new page

1 messages · Page 1 of 1 (latest)

scarlet ivy
#

I would like to add a feature in the component link card. To have some sort of Boolean to enable/disable the option to open the link on a new page.
How can I do that ?

south lichenBOT
#

Hi @scarlet ivy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To add a feature to the Link Card component that allows opening the link in a new page, you can utilize the attrs property of the <LinkCard> component. This property allows you to add custom HTML attributes to the link element, including the target attribute which controls how the link opens.

Here's how you can implement this feature:

  1. Add a new prop to your <LinkCard> component, let's call it openInNewTab.

  2. Use the attrs property to conditionally add the target="_blank" attribute when openInNewTab is true.

Here's an example of how you could use this in MDX:

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard 
  title="Astro Documentation" 
  href="<https://docs.astro.build"> 
  description="Learn more about Astro"
  attrs={openInNewTab ? { target: '_blank' } : {}}
/>

In this example, if openInNewTab is true, the link will open in a new tab. If it's false or not provided, the link will open in the same tab.

This approach leverages the attrs property of the <LinkCard> component, which allows you to add custom HTML attributes to the link element as described in the Starlight documentation (https://starlight.astro.build/reference/frontmatter/#attrs).

Remember that when opening links in new tabs, it's often recommended to also include rel="noopener noreferrer" for security reasons. You could include this as well:

<LinkCard 
  title="Astro Documentation" 
  href="<https://docs.astro.build"> 
  description="Learn more about Astro"
  attrs={openInNewTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
/>
#

This solution allows you to control whether the link opens in a new tab on a per-link basis, providing the flexibility you're looking for.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@scarlet ivy Kapa.ai is still learning and improving, please let me know how I did by reacting below.

scarlet ivy
#

@south lichen
Thanks ! Where should I define openInNewTab ?
I have this error [ERROR] [ReferenceError] openInNewTab is not defined

south lichenBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I apologize for the confusion in my previous answer. You're right to ask where openInNewTab should be defined. Let me provide a more complete and correct explanation.

In Astro components, you need to define props that you want to use. For the <LinkCard> component, which is part of the Starlight theme, we need to modify it to accept our new prop. Here's how you can do it:

  1. First, create a custom LinkCard component in your project to extend the functionality of the Starlight LinkCard.

  2. In this custom component, define the openInNewTab prop and use it to set the appropriate attributes.

Here's an example of how you could create this custom component:

---
// src/components/CustomLinkCard.astro
import { LinkCard } from '@astrojs/starlight/components';

interface Props {
  title: string;
  description: string;
  href: string;
  openInNewTab?: boolean;
}

const { title, description, href, openInNewTab = false } = Astro.props;

const attrs = openInNewTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
---

<LinkCard
  title={title}
  description={description}
  href={href}
  attrs={attrs}
/>

Now you can use this custom component in your MDX files like this:

import CustomLinkCard from '../components/CustomLinkCard.astro';

<CustomLinkCard 
  title="Astro Documentation" 
  href="<https://docs.astro.build"> 
  description="Learn more about Astro"
  openInNewTab={true}
/>

This approach allows you to define the openInNewTab prop and use it to conditionally set the attrs on the original LinkCard component. The openInNewTab prop defaults to false if not provided.

Remember to adjust the import path for CustomLinkCard based on your project structure.

#

By creating this custom component, you're extending the functionality of the Starlight LinkCard while maintaining the ability to use all its original props. This solution should resolve the openInNewTab is not defined error you encountered.

Astro Components (https://docs.astro.build/en/basics/astro-components/#component-props) documentation provides more information on how to work with component props in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: