feat: add ruby annotation component

src/components/Ruby.astro

@@ -0,0 +1,14 @@
+---
+export interface Props {
+	base: string;
+	text: string;
+	class?: string;
+	[key: string]: any;
+}
+
+const { base, text, class: className, ...props } = Astro.props;
+---
+
+<ruby class:list={className} {...props}
+	>{base}<rp>（</rp><rt class="relative -block-start-[0.3em]">{text}</rt><rp>）</rp>
+</ruby>

src/mdx-components.ts

@@ -27,6 +27,7 @@ import PrimeVideoFlag from './components/PrimeVideoFlag.astro';
 import ProductLink from './components/ProductLink.astro';
 import ProjectIntro from './components/ProjectIntro.astro';
 import Pullquote from './components/Pullquote.astro';
+import Ruby from './components/Ruby.astro';
 import Spotify from './components/Spotify.astro';
 import Subheadline from './components/Subheadline.astro';
 import Subsubheadline from './components/Subsubheadline.astro';
@@ -73,6 +74,7 @@ export const mapping = {
 	PrimeVideoFlag,
 	ProjectIntro,
 	Pullquote,
+	Ruby,
 	Spotify,
 	ThemeBox,
 	ul: UnorderedList,
@@ -104,6 +106,7 @@ export const rssMapping = {
 	ProductLink,
 	ProjectIntro,
 	Pullquote,
+	Ruby,
 	Spotify,
 	ThemeBox,
 	Verse,