feat(component): Add contact component (#9)

Select a service from the list.
Render a clickable component with an icon and URL.

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@cxa/astro-inline-svg": "0.5.1",
     "@iconify-json/mingcute": "1.2.1",
+    "@iconify-json/simple-icons": "1.2.11",
     "astro": "4.16.10",
     "astro-icon": "1.1.2",
     "qrcode": "1.5.4",

src/components/Contact/Contact.astro

@@ -0,0 +1,45 @@
+---
+import { Icon } from "astro-icon/components";
+
+import { getContact } from "../../libs/contact.ts";
+import type { service } from "../../types/services.ts";
+import "../../styles/global.css";
+
+export type Props = { service: service; id: string };
+const props = Astro.props;
+
+const contact = getContact(props.service, props.id);
+---
+
+<a
+  href={contact.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label={`Go to ${props.id} profile on ${props.service}`}
+>
+  <Icon id="icon" name={contact.icon} />
+  <span>{props.id}</span>
+</a>
+
+<style>
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--foreground);
+  }
+
+  #icon {
+    width: 1.5rem;
+    height: auto;
+  }
+
+  span {
+    font-family: "LINE Seed JP";
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: bold;
+    line-height: normal;
+  }
+</style>

src/components/Contact/Contact.stories.ts

@@ -0,0 +1,17 @@
+import Contact from "./Contact.astro";
+import * as stories from "./story.ts";
+
+export default {
+  title: "Contact Links",
+  component: Contact,
+};
+
+export const Bluesky = { args: stories.Bluesky };
+export const Facebook = { args: stories.Facebook };
+export const GitHub = { args: stories.GitHub };
+export const Instagram = { args: stories.Instagram };
+export const Mastodon = { args: stories.Mastodon };
+export const Misskey = { args: stories.Misskey };
+export const Posts = { args: stories.Posts };
+export const Twitter = { args: stories.Twitter };
+export const Mail = { args: stories.Mail };

src/components/Contact/Contact.test.ts

@@ -0,0 +1,16 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, test } from "vitest";
+
+import Contact from "./Contact.astro";
+import * as stories from "./story.ts";
+
+describe("Contact", () => {
+  for (const [name, props] of Object.entries(stories)) {
+    test(name, async () => {
+      const container: AstroContainer = await AstroContainer.create();
+      const result: string = await container.renderToString(Contact, { props });
+
+      expect(result).toContain(`>${props.id}</span>`);
+    });
+  }
+});

src/components/Contact/story.ts

@@ -0,0 +1,46 @@
+import type { Props } from "./Contact.astro";
+
+export const Bluesky: Props = {
+  service: "Bluesky",
+  id: "bsky.app",
+};
+
+export const Facebook: Props = {
+  service: "Facebook",
+  id: "facebook",
+};
+
+export const GitHub: Props = {
+  service: "GitHub",
+  id: "github",
+};
+
+export const Instagram: Props = {
+  service: "Instagram",
+  id: "instagram",
+};
+
+export const Mastodon: Props = {
+  service: "Mastodon",
+  id: "@[email protected]",
+};
+
+export const Misskey: Props = {
+  service: "Misskey",
+  id: "@[email protected]",
+};
+
+export const Posts: Props = {
+  service: "Posts",
+  id: "support",
+};
+
+export const Twitter: Props = {
+  service: "Twitter",
+  id: "twitter",
+};
+
+export const Mail: Props = {
+  service: "Mail",
+  id: "[email protected]",
+};

src/libs/contact.ts

@@ -0,0 +1,11 @@
+import { type service, services } from "../types/services";
+
+type contact = { url: string; icon: string };
+
+export const getContact = (service: service, id: string): contact => {
+  const url: string =
+    service === "Mastodon" || service === "Misskey"
+      ? `https://${id.split("@")[2]}/${id}`
+      : services[service].url + id;
+  return { url, icon: services[service].icon };
+};

src/types/services.ts

@@ -0,0 +1,40 @@
+export const services = {
+  Bluesky: {
+    url: "https://bsky.app/profile/",
+    icon: "mingcute:bluesky-social-line",
+  },
+  Facebook: {
+    url: "https://www.facebook.com/",
+    icon: "mingcute:facebook-line",
+  },
+  GitHub: {
+    url: "https://github.com/",
+    icon: "mingcute:github-line",
+  },
+  Instagram: {
+    url: "https://www.instagram.com/",
+    icon: "mingcute:ins-line",
+  },
+  Mastodon: {
+    url: "",
+    icon: "mingcute:mastodon-line",
+  },
+  Misskey: {
+    url: "",
+    icon: "simple-icons:misskey",
+  },
+  Posts: {
+    url: "https://posts.cv/",
+    icon: "simple-icons:readdotcv",
+  },
+  Twitter: {
+    url: "https://twitter.com/",
+    icon: "mingcute:twitter-line",
+  },
+  Mail: {
+    url: "mailto:",
+    icon: "mingcute:mail-line",
+  },
+};
+
+export type service = keyof typeof services;