feat: Add html attributes to hero action links (#1485)

* feat: Add html attributes to hero action links

* Implement requested changes

* Discard changes to docs/src/content/docs/de/reference/frontmatter.md

* Discard changes to docs/src/content/docs/id/reference/frontmatter.md

---------

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

.changeset/eighty-icons-leave.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Add support for setting html attributes of hero action links

docs/src/content/docs/es/reference/frontmatter.md

@@ -119,6 +119,8 @@ hero:
     - text: View on GitHub
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -166,6 +168,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/fr/reference/frontmatter.md

@@ -119,6 +119,8 @@ hero:
     - text: Voir sur GitHub
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -166,6 +168,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/it/reference/frontmatter.md

@@ -119,6 +119,8 @@ hero:
     - text: Vedi su GitHub
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -166,6 +168,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/ja/reference/frontmatter.md

@@ -116,6 +116,8 @@ hero:
     - text: GitHubで見る
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -163,6 +165,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/ko/reference/frontmatter.md

@@ -117,6 +117,8 @@ hero:
     - text: Github에서 보기
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -164,6 +166,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/pt-br/reference/frontmatter.md

@@ -119,6 +119,8 @@ hero:
     - text: Veja no GitHub
       link: https://github.com/astronaut/meu-projeto
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -166,6 +168,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/reference/frontmatter.md

@@ -119,6 +119,8 @@ hero:
     - text: View on GitHub
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -166,6 +168,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

docs/src/content/docs/zh-cn/reference/frontmatter.md

@@ -118,6 +118,8 @@ hero:
     - text: 在 GitHub 上查看
       link: https://github.com/astronaut/my-project
       icon: external
+      attrs:
+        rel: me
 ---
 ```
 
@@ -165,6 +167,7 @@ interface HeroConfig {
     link: string;
     variant: 'primary' | 'secondary' | 'minimal';
     icon: string;
+    attrs?: Record<string, string | number | boolean>;
   }>;
 }
 ```

packages/starlight/components/CallToAction.astro

@@ -1,17 +1,20 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
 import Icon from '../user-components/Icon.astro';
 import type { Icons } from './Icons';
 
 interface Props {
 	variant: 'primary' | 'secondary' | 'minimal';
 	link: string;
 	icon?: undefined | { type: 'icon'; name: keyof typeof Icons } | { type: 'raw'; html: string };
+	attrs?: Omit<HTMLAttributes<'a'>, 'href'>;
 }
 
 const { link, variant, icon } = Astro.props;
+const { class: customClass, ...attrs } = Astro.props.attrs || {};
 ---
 
-<a class:list={['sl-flex action', variant]} href={link}>
+<a class:list={['sl-flex action', variant, customClass]} href={link} {...attrs}>
 	<slot />
 	{icon?.type === 'icon' && <Icon name={icon.name} size="1.5rem" />}
 	{icon?.type === 'raw' && <Fragment set:html={icon.html} />}

packages/starlight/schemas/hero.ts

@@ -64,6 +64,8 @@ export const HeroSchema = ({ image }: SchemaContext) =>
 							: ({ type: 'raw', html: icon } as const);
 					})
 					.optional(),
+				/** HTML attributes to add to the link */
+				attrs: z.record(z.union([z.string(), z.number(), z.boolean()])).optional(),
 			})
 			.array()
 			.default([]),