feat: add More and Download links

src/components/DownloadLink.astro

@@ -0,0 +1,23 @@
+---
+import { Sprite } from 'astro-icon';
+
+import { TextLink } from '../components';
+
+export interface Props {
+	href: string;
+	text: string;
+}
+
+const { href, text, ...props } = Astro.props;
+---
+
+<TextLink class="group" href={href} {...props}>
+	{text}
+	<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
+		<Sprite
+			name="ri:download-line"
+			aria-hidden="true"
+			class="h-icon w-icon group-hover:translate-y-1 transition-transform duration-500 ease-in-out"
+		/>
+	</span>
+</TextLink>

src/components/MoreLink.astro

@@ -0,0 +1,23 @@
+---
+import { Sprite } from 'astro-icon';
+
+import { TextLink } from '../components';
+
+export interface Props {
+	href: string;
+	text: string;
+}
+
+const { href, text, ...props } = Astro.props;
+---
+
+<TextLink class="group" href={href} {...props}>
+	{text}
+	<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
+		<Sprite
+			name="ri:arrow-right-line"
+			aria-hidden="true"
+			class="h-icon w-icon group-hover:translate-x-1 transition-transform duration-500 ease-in-out"
+		/>
+	</span>
+</TextLink>

src/components/index.ts

@@ -1,3 +1,7 @@
+// @ts-nocheck
+import DownloadLink from './DownloadLink.astro';
+import MoreLink from './MoreLink.astro';
+
 export * from './AffiliateLink';
 export * from './AmazonBook';
 export * from './Banner';
@@ -22,3 +26,4 @@ export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
 export * from './YouTubeVideo';
+export { DownloadLink, MoreLink };

src/mdx-components.ts

@@ -5,10 +5,12 @@ import {
 	Book,
 	ColorSwatch,
 	Divider,
+	DownloadLink,
 	Flag,
 	Headline,
 	Image,
 	ListItem,
+	MoreLink,
 	NetflixFlag,
 	OdyseeVideo,
 	OrderedList,
@@ -30,6 +32,7 @@ export const mapping = {
 	Banner,
 	Book,
 	ColorSwatch,
+	DownloadLink,
 	Flag,
 	h1: Title,
 	h2: Headline,
@@ -40,6 +43,7 @@ export const mapping = {
 	hr: Divider,
 	img: Image,
 	li: ListItem,
+	MoreLink,
 	NetflixFlag,
 	OdyseeVideo,
 	ol: OrderedList,